[Pending] PC view of DeckEditor (copy old)

dev.js

@@ -28,7 +28,7 @@ app.use('/background', express.static('./background'))
 app.use('/', express.static('./src'))
 app.use('/dist', express.static('./dist'))
 
-app.use('/lang', proxy('hongkong.webxoss.com:8080', {
+app.use('/lang', proxy('webxoss.com', {
   proxyReqPathResolver: req => '/lang' + url.parse(req.url).path,
   https: true,
 }))

src/app.vue

@@ -1,11 +1,22 @@
 <script>
+import Toast from 'components/Toast'
+
 let scrollTopMap = {}
+
 export default {
+  components: {
+    Toast,
+  },
+  methods: {
+    showToast(text) {
+      this.$refs.toast.show(text)
+    },
+  },
   created() {
     let deckFileNames = localStorage.getItem('deck_filenames')
     let fileNames = JSON.parse(deckFileNames)
 
-    this.$store.commit('changeWindowWidth', window.innerWidth)
+    this.$store.commit('setWindowData')
     this.$store.commit('changeLanguage', localStorage.getItem('language') || 'en')
 
     // if no deck in localStorage, initialize WHITE_HOPE
@@ -49,6 +60,7 @@ export default {
 <template>
   <div id="app">
     <router-view></router-view>
+    <toast ref="toast"/>
   </div>
 </template>
 

src/components/Block.vue

@@ -11,40 +11,45 @@ export default {
       type: Object,
       require: true,
     },
+    showCount: {
+      type: Boolean,
+      require: false,
+    },
   },
   computed: {
     ...mapGetters([
       'deckPids',
     ]),
-    detailRoute() {
-      return {
-        path: '/detail',
-        query: {
-          pid: this.card.pid,
-        },
-      }
-    },
     count() {
       return this.deckPids.filter(pid => pid === this.card.pid).length
     },
   },
+  methods: {
+    handleClick() {
+      this.$emit('click', this.card.pid)
+    },
+    hover() {
+      this.$store.commit('setShownPid', this.card.pid)
+    },
+  },
 }
 </script>
 
 <template>
-  <router-link :to="detailRoute" :class="$style.block">
-    <card-image :pid="card.pid" :class="$style.image"/>
-    <div :class="$style.dimmer">×{{ count }}</div>
-  </router-link>
+  <a
+    :class="$style.block"
+    @click="handleClick"
+    @mouseover="hover">
+    <card-image :pid="card.pid" :class="$style.image" />
+    <div v-if="showCount" :class="$style.dimmer">×{{ count }}</div>
+  </a>
 </template>
 
-<style src="css/colors.css" module="$color"></style>
 <style module>
 .block {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  padding: .2em;
 }
 .image {
   width: 100%;

src/components/CardInfo.vue

@@ -0,0 +1,62 @@
+<script>
+import { mapState } from 'vuex'
+import CardImage from 'components/CardImage'
+import CardInfoTable from 'components/CardInfoTable'
+import Localize from 'js/Localize'
+
+export default {
+  components: {
+    CardImage,
+    CardInfoTable,
+  },
+  data: () => ({
+    pid: 1,
+  }),
+  computed: {
+    ...mapState([
+      'shownPid',
+    ]),
+    card() {
+      return CardInfo[this.pid]
+    },
+    name() {
+      return Localize.cardName(this.card)
+    },
+    limiting() {
+      return Localize.limiting(this.card)
+    },
+  },
+  watch: {
+    shownPid(pid) {
+      if (0 < pid && pid < Object.keys(CardInfo).length) {
+        this.pid = pid
+      }
+    },
+  },
+}
+</script>
+
+<template>
+  <div :class="$style.cardInfo">
+    <card-image :class="$style.image" :pid="pid"/>
+    <div style="display: flex;">
+      <span>{{ card.wxid }}</span>
+      <span style="margin-left: auto;">{{ limiting }}</span>
+    </div>
+    <div style="font-size: 1.5em;">{{ name }}</div>
+    <card-info-table :card="card" />
+  </div>
+</template>
+
+<style module>
+@import 'css/vars.css';
+.cardInfo {
+  font-size: .85rem;
+}
+.image {
+  width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+</style>
+

src/components/CardInfoTable.vue

@@ -0,0 +1,133 @@
+<script>
+import Localize from 'js/Localize'
+export default {
+  props: {
+    card: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    name() {
+      return Localize.cardName(this.card)
+    },
+    limiting() {
+      return Localize.limiting(this.card)
+    },
+    cardEffect() {
+      return Localize.effectTexts(this.card)
+    },
+    lifeBurst() {
+      return Localize.burstEffectTexts(this.card)
+    },
+    hasEffect() {
+      return this.cardEffect !== '-'
+    },
+    hasLifeBurst() {
+      return this.lifeBurst !== '-'
+    },
+    rows() {
+      let card = this.card
+      let type = {
+        key: Localize('cardType'),
+        value: Localize(card.cardType),
+      }
+      let color = {
+        key: Localize('color'),
+        value: Localize(card.color),
+      }
+      let level = {
+        key: Localize('level'),
+        value: card.level,
+      }
+      let power = {
+        key: Localize('power'),
+        value: card.power,
+      }
+      let limit = {
+        key: Localize('limit'),
+        value: (card.limit < 1024) ? card.limit : '∞',
+      }
+      let cost = {
+        key: Localize('cost'),
+        value: Localize.cost(card),
+      }
+      let timing = {
+        key: Localize('timings'),
+        value: Localize.timings(card),
+      }
+      let classes = {
+        key: Localize('classes'),
+        value: Localize.classes(card),
+      }
+      let guard = {
+        key: Localize('guard'),
+        value: Localize.guard(card),
+      }
+      return {
+        'RESONA': [
+          [type, color],
+          [level, classes],
+          [power, guard],
+        ],
+        'SIGNI': [
+          [type, color],
+          [level, classes],
+          [power, guard],
+        ],
+        'SPELL': [
+          [type, color],
+          [cost],
+        ],
+        'LRIG': [
+          [type, color],
+          [level, classes],
+          [limit, cost],
+        ],
+        'ARTS': [
+          [type, color],
+          [cost],
+          [timing],
+        ],
+      }[card.cardType] || []
+    },
+  },
+}
+</script>
+
+<template>
+  <table :class="$style.table">
+    <tbody>
+      <tr v-for="row in rows" :class="$style.rows">
+        <template v-for="meta in row">
+          <td :class="$style.key">{{ meta.key }}</td>
+          <td :colspan="row.length === 1 ? 3 : 1">{{ meta.value }}</td>
+        </template>
+      </tr>
+      <tr v-if="hasEffect">
+        <td colspan="4">{{ cardEffect }}</td>
+      </tr>
+      <tr v-if="hasLifeBurst">
+        <td colspan="4">{{ lifeBurst }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style module scoped>
+.table {
+  width: 100%;
+  line-height: 1.5;
+  white-space: pre-line;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+td {
+  border: 1px solid #cbcbcb;
+  padding: .5em .2em;
+}
+.key {
+  width: 20%;
+  text-align: center;
+}
+</style>

src/components/Cell.vue

@@ -135,7 +135,7 @@ export default {
 
       this.$store.dispatch('addCard', pid).then((successed) => {
         if (!successed) {
-          console.log('already full') // show toast here
+          this.$root.showToast(Localize('deck_limit_exceeded'))
         }
       })
     },