建设古镇页面 初步

src/store/index.js

@@ -14,7 +14,7 @@ function resetGameProgress() {
         })
       }
     }),
-    buildProgress: 0,
+    buildProgress: -1,
   }
   localStorage.setItem('HuiZhouGuJianZhuProgress', JSON.stringify(ret))
   return ret
@@ -56,7 +56,7 @@ export default createStore({
     },
     recordBuildProgress(state, progress) {
       try {
-        state.jagsawProgress.gameProgress.buildProgress = progress
+        state.gameProgress.buildProgress = progress
         localStorage.setItem('HuiZhouGuJianZhuProgress', JSON.stringify(state.gameProgress))
       } catch (error) {
         console.error(error)

src/useFunctions/useWindowSizeAdaptor.js

@@ -0,0 +1,27 @@
+import { onMounted, reactive, toRefs, ref } from 'vue'
+
+export default function useWindowSizeAdaptor() {
+  const windowSizeWhenDesign = ref('')
+  const unit = ref('')
+
+  function setLalala() {
+    if (window.innerWidth / window.innerHeight > 1920 / 1080) {
+      windowSizeWhenDesign.value = '1080'
+      unit.value = '100vh'
+    } else {
+      windowSizeWhenDesign.value = '1920'
+      unit.value = '100vw'
+    }
+  }
+
+  onMounted(() => {
+    setLalala()
+  })
+
+  window.addEventListener('resize', setLalala)
+
+  return {
+    windowSizeWhenDesign,
+    unit
+  }
+}

src/views/Bag.vue

@@ -14,6 +14,12 @@
           top: `calc(${item.top} / 1080 * 100vh)`,
           left: `calc(${item.left} / 1080 * 100vh)`,
         }"
+        @click="$router.push({
+          name: 'JagsawGame',
+          query: {
+            sceneL2Idx: item.idxInConfig,
+          }
+        })"
       >
         <img
           class=""
@@ -51,6 +57,9 @@
       <button
         v-click-audio
         class="build"
+        :class="{
+          functional: canBuild
+        }"
         @click="onClickBuild"
       />
     </div>
@@ -105,7 +114,6 @@ export default {
           top: 420,
           left: 516,
         },
-
       ]
     }
   },
@@ -113,6 +121,11 @@ export default {
     ...mapState([
       'gameProgress',
     ]),
+    canBuild() {
+      return this.gameProgress.jagsawProgress.filter((item) => {
+        return !item.isJagsawDone
+      }).length === 0
+    },
     sceneTree() {
       return config.sceneTree
     },
@@ -125,7 +138,13 @@ export default {
     ...mapMutations([
     ]),
     onClickBuild(e) {
-      utils.animateCSS(e.currentTarget, 'headShake')
+      this.$router.push({
+        name: 'BuildTown'
+      })
+      if (this.canBuild) {
+      } else {
+        utils.animateCSS(e.currentTarget, 'headShake')
+      }
     }
   },
 }
@@ -238,6 +257,9 @@ export default {
       height: calc(120 / 1080 * 100vh);
       margin-left: auto;
       margin-right: auto;
+      &.functional:hover {
+        transform: scale(1.1);
+      }
     }
   }
 }

src/views/BuildTown.vue

@@ -1,41 +1,304 @@
 <template>
   <div
-    class="home"
+    class="build-town"
   >
-    {{ $env.BASE_URL }}
+    <div class="left">
+      <div
+        v-for="(item, idx) in sceneList"
+        :key="idx"
+        class="scene"
+        :class="gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? 'unlock' : 'lock'"
+        :style="{
+          width: `calc(${item.width} / ${windowSizeWhenDesign} * ${unit})`,
+          height: `calc(${item.height} / ${windowSizeWhenDesign} * ${unit})`,
+          top: `calc(${item.top} / ${windowSizeWhenDesign} * ${unit})`,
+          left: `calc(${item.left} / ${windowSizeWhenDesign} * ${unit})`,
+        }"
+        @click="$router.push({
+          name: 'JagsawGame',
+          query: {
+            sceneL2Idx: item.idxInConfig,
+          }
+        })"
+      >
+        <img
+          class=""
+          :src="require(`@/assets/images/bg-${item.idxInConfig + 1}.jpg`)"
+          alt=""
+          draggable="false"
+        >
+        <div class="text-wrap">
+          <span>{{ gameProgress.jagsawProgress[item.idxInConfig].name }}</span>
+          <img
+            v-if="!gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone"
+            class="lock"
+            src="@/assets/images/lock.png"
+            alt=""
+            draggable="false"
+          >
+        </div>
+      </div>
+      <img
+        class="build-tip"
+        src="@/assets/images/build-tip.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
+    <div class="right">
+      <div class="bottom-wrap">
+        <div
+          v-for="(item, idx) in buildList"
+          :key="idx"
+          class="step"
+        >
+          <button
+            :class="{
+              done: gameProgress.buildProgress >= idx
+            }"
+            @click="recordBuildProgress(idx)"
+          >
+            <div>{{ item.name }}</div>
+          </button>
+          <div
+            v-if="idx !== buildList.length - 1"
+            class="line"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import { onMounted, reactive, toRefs, ref } from 'vue'
+import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
+
 export default {
-  name: 'HomeView',
+  name: 'BuildTown',
+  setup () {
+    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
+    return {
+      windowSizeWhenDesign,
+      unit
+    }
+  },
   data() {
     return {
+      sceneList: [
+        {
+          idxInConfig: 0,
+          width: 476,
+          height: 294,
+          top: 0,
+          left: 0,
+        },
+        {
+          idxInConfig: 4,
+          width: 262,
+          height: 294,
+          top: 0,
+          left: 484,
+        },
+        {
+          idxInConfig: 5,
+          width: 378,
+          height: 166,
+          top: 302,
+          left: 0,
+        },
+        {
+          idxInConfig: 3,
+          width: 190,
+          height: 152,
+          top: 476,
+          left: 0,
+        },
+        {
+          idxInConfig: 1,
+          width: 179,
+          height: 152,
+          top: 476,
+          left: 199,
+        },
+        {
+          idxInConfig: 2,
+          width: 360,
+          height: 326,
+          top: 302,
+          left: 386,
+        },
+      ],
+      buildList: [
+        {
+          name: '建民居',
+        },
+        {
+          name: '布祠堂',
+        },
+        {
+          name: '立牌坊',
+        },
+        {
+          name: '过程名',
+        },
+        {
+          name: '过程名',
+        },
+        {
+          name: '过程名',
+        },
+      ],
     }
   },
   computed: {
     ...mapState([
+      'gameProgress',
     ]),
+    sceneTree() {
+      return config.sceneTree
+    },
   },
   mounted() {
-    console.log(process.env)
-    this.$mitt.emit('test', { msg: 'home mounted' })
   },
   unmounted() {
   },
   methods: {
     ...mapMutations([
+      'recordBuildProgress',
     ]),
   },
 }
 </script>
 
 <style lang="less" scoped>
-.home {
+.build-town {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
+  background-image: url(@/assets/images/bg-game.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: calc(50 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;
+  >.left {
+    position: relative;
+    width: calc(746 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(628 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    margin-right: calc(83 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    >.scene {
+      position: absolute;
+      cursor: pointer;
+      >img {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      >.text-wrap {
+        position: absolute;
+        left: 0;
+        background: rgba(255,255,255,0.7);
+        bottom: 0;
+        width: 100%;
+        height: calc(32 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+        padding-left: calc(10 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+        padding-right: calc(10 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+        display: flex;
+        align-items: center;
+        font-size: calc(16 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+        font-weight: bold;
+        >span {
+          padding-top: 0.4em;
+        }
+        >img.lock {
+          margin-left: 0.5em;
+          width: calc(15 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+          height: calc(21 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+        }
+      }
+    }
+    .scene.unlock {
+      >.text-wrap {
+        color: #30B07A;
+      }
+    }
+    .scene.lock {
+      >.text-wrap {
+        color: #C26827;
+      }
+    }
+    >img.build-tip {
+      position: absolute;
+      left: 50%;
+      bottom: calc(-38 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      transform: translate(-50%, 100%);
+      width: calc(506 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      height: calc(110 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    }
+  }
+  >.right {
+    position: relative;
+    width: calc(950 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(628 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    background: red;
+    background-image: url(@/assets/images/bg-jagsaw-game-page-frame.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    >div.bottom-wrap {
+      position: absolute;
+      left: 50%;
+      bottom: calc(-70 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      transform: translate(-50%, 100%);
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      >.step {
+        display: flex;
+        align-items: center;
+        >button {
+          width: calc(14 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+          height: calc(14 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+          border-radius: 50%;
+          border: 2px solid #C26827;
+          position: relative;
+          >div {
+            position: absolute;
+            left: 50%;
+            bottom: calc(-11 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+            transform: translate(-50%, 100%);
+            font-size: calc(24 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;
+            font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+            font-weight: bold;
+            color: #C26827;
+          }
+          &.done {
+            background-color: #30B07A;
+            border: 2px solid #30B07A;
+            >div {
+              color: #30B07A;
+            }
+          }
+        }
+        >.line {
+          display: inline-block;
+          width: calc(120 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;;
+          height: 1px;
+          border-top: 1px dashed #C26827;
+          margin: 0 calc(8 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/JagsawGame.vue

@@ -1,14 +1,35 @@
 <template>
   <div
-    class="home"
+    class="jagsaw-game"
   >
-    {{ $env.BASE_URL }}
+    <div class="left-wrapper" />
+
+    <div class="jagsaw-list">
+      <h1>
+        <img
+          class=""
+          src="@/assets/images/title-level2-1.png"
+          alt=""
+          draggable="false"
+        >
+      </h1>
+    </div>
   </div>
 </template>
 
 <script>
+import { onMounted, reactive, toRefs, ref } from 'vue'
+import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
+
 export default {
-  name: 'HomeView',
+  name: 'JagsawGame',
+  setup () {
+    const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
+    return {
+      windowSizeWhenDesign,
+      unit
+    }
+  },
   data() {
     return {
     }
@@ -18,8 +39,6 @@ export default {
     ]),
   },
   mounted() {
-    console.log(process.env)
-    this.$mitt.emit('test', { msg: 'home mounted' })
   },
   unmounted() {
   },
@@ -31,11 +50,43 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.home {
+.jagsaw-game {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
+  background-image: url(@/assets/images/bg-game.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  >.left-wrapper {
+    width: calc(950 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(628 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    background-image: url(@/assets/images/bg-jagsaw-game-page-frame.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    margin-right: calc(83 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;
+  }
+  >.jagsaw-list {
+    position: relative;
+    background: red;
+    width: calc(555 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    height: calc(628 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+    >h1 {
+      position: absolute;
+      left: 0;
+      top: calc(-101 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      height: calc(74 / v-bind('windowSizeWhenDesign') * v-bind('unit'));;
+      font-size: 0;
+      >img {
+        height: 100%;
+      }
+    }
+  }
 }
 </style>