拼写错误修复

src/config.js

@@ -16,17 +16,17 @@ export default {
         {
           name: '文化溯源',
           lionGender: 'female',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
         {
           name: '画里乡村',
           lionGender: 'female',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
         {
           name: '水口园林',
           lionGender: 'female',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
       ]
     },
@@ -46,17 +46,17 @@ export default {
         {
           name: '认识牌坊',
           lionGender: 'male',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
         {
           name: '牌坊形制',
           lionGender: 'male',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
         {
           name: '牌坊构造',
           lionGender: 'male',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
       ]
     },
@@ -76,17 +76,17 @@ export default {
         {
           name: '认识祠堂',
           lionGender: 'female',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
         {
           name: '祠堂的建筑艺术 ①',
           lionGender: 'female',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
         {
           name: '祠堂的建筑艺术 ②',
           lionGender: 'female',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
       ]
     },
@@ -106,17 +106,17 @@ export default {
         {
           name: '认识民居',
           lionGender: 'male',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
         {
           name: '民居的营造 ①',
           lionGender: 'male',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
         {
           name: '民居的营造 ②',
           lionGender: 'male',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
       ]
     }, {
@@ -135,17 +135,17 @@ export default {
         {
           name: '榫卯技艺',
           lionGender: 'female',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
         {
           name: '雕刻艺术 ①',
           lionGender: 'female',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
         {
           name: '雕刻艺术 ②',
           lionGender: 'female',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
       ]
     }, {
@@ -164,7 +164,7 @@ export default {
         {
           name: '其他建筑类型鉴赏',
           lionGender: 'male',
-          jagsawNumber: 3,
+          jigsawNumber: 3,
         },
       ]
     },

src/router/index.js

@@ -6,7 +6,7 @@ import WatchView from '../views/Watch.vue'
 import LearnView from '../views/Learn.vue'
 import TravelRecord from '../views/TravelRecord.vue'
 import BagView from '../views/Bag.vue'
-import JagsawGame from '../views/JagsawGame.vue'
+import JigsawGame from '../views/JigsawGame.vue'
 import BuildTown from '../views/BuildTown.vue'
 
 // import store from '@/store/index.js'
@@ -49,8 +49,8 @@ const routes = [
   },
   {
     path: '/jigsaw-game',
-    name: 'JagsawGame',
-    component: JagsawGame,
+    name: 'JigsawGame',
+    component: JigsawGame,
   },
   {
     path: '/build-town',

src/store/index.js

@@ -2,21 +2,21 @@ import { createStore } from 'vuex'
 
 function resetGameProgress() {
   const ret = {
-    jagsawProgress: config.sceneTree.map((item) => {
+    jigsawProgress: config.sceneTree.map((item) => {
       return {
         name: item.name,
-        isJagsawDone: false,
+        isJigsawDone: false,
         children: item.children.map((innerItem) => {
           return {
             name: innerItem.name,
-            hasGotJagsaw: false,
+            hasGotJigsaw: false,
           }
         })
       }
     }),
     buildProgress: -1,
   }
-  localStorage.setItem('HuiZhouGuJianZhuProgress', JSON.stringify(ret))
+  localStorage.setItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`, JSON.stringify(ret))
   return ret
 }
 
@@ -24,7 +24,7 @@ export default createStore({
   state: {
     hasPlayedStartupVideo: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
     hasPlayedGameRule: false,
-    gameProgress: localStorage.getItem('HuiZhouGuJianZhuProgress') ? JSON.parse(localStorage.getItem('HuiZhouGuJianZhuProgress')) : resetGameProgress()
+    gameProgress: localStorage.getItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`) ? JSON.parse(localStorage.getItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`)) : resetGameProgress()
   },
   getters: {
   },
@@ -36,19 +36,19 @@ export default createStore({
       state.hasPlayedGameRule = true
     },
     // 获得拼图碎片
-    recordJagsawGot(state, sceneL2Id, sceneL3Id) {
+    recordJigsawGot(state, sceneL2Id, sceneL3Id) {
       try {
-        state.gameProgress.jagsawProgress[sceneL2Id].children[sceneL3Id].hasGotJagsaw = true
-        localStorage.setItem('HuiZhouGuJianZhuProgress', JSON.stringify(state.gameProgress))
+        state.gameProgress.jigsawProgress[sceneL2Id].children[sceneL3Id].hasGotJigsaw = true
+        localStorage.setItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`, JSON.stringify(state.gameProgress))
       } catch (error) {
         console.error(error)
         state.gameProgress = resetGameProgress()
       }
     },
-    recordJagsawDone(state, sceneL2Id) {
+    recordJigsawDone(state, sceneL2Id) {
       try {
-        state.gameProgress.jagsawProgress[sceneL2Id].isJagsawDone = true
-        localStorage.setItem('HuiZhouGuJianZhuProgress', JSON.stringify(state.gameProgress))
+        state.gameProgress.jigsawProgress[sceneL2Id].isJigsawDone = true
+        localStorage.setItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`, JSON.stringify(state.gameProgress))
       } catch (error) {
         console.error(error)
         state.gameProgress = resetGameProgress()
@@ -57,7 +57,7 @@ export default createStore({
     recordBuildProgress(state, progress) {
       try {
         state.gameProgress.buildProgress = progress
-        localStorage.setItem('HuiZhouGuJianZhuProgress', JSON.stringify(state.gameProgress))
+        localStorage.setItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`, JSON.stringify(state.gameProgress))
       } catch (error) {
         console.error(error)
         state.gameProgress = resetGameProgress()

src/views/Bag.vue

@@ -6,8 +6,9 @@
       <div
         v-for="(item, idx) in sceneList"
         :key="idx"
+        v-click-audio
         class="scene"
-        :class="gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? 'unlock' : 'lock'"
+        :class="gameProgress.jigsawProgress[item.idxInConfig].isJigsawDone ? 'unlock' : 'lock'"
         :style="{
           width: `calc(${item.width} / 1080 * 100vh)`,
           height: `calc(${item.height} / 1080 * 100vh)`,
@@ -15,7 +16,7 @@
           left: `calc(${item.left} / 1080 * 100vh)`,
         }"
         @click="$router.push({
-          name: 'JagsawGame',
+          name: 'JigsawGame',
           query: {
             sceneL2Idx: item.idxInConfig,
           }
@@ -28,19 +29,19 @@
           draggable="false"
         >
         <div class="text-wrap">
-          <span>{{ gameProgress.jagsawProgress[item.idxInConfig].name }} {{ gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? '（已完成）' : '(未完成)' }}</span>
+          <span>{{ gameProgress.jigsawProgress[item.idxInConfig].name }} {{ gameProgress.jigsawProgress[item.idxInConfig].isJigsawDone ? '（已完成）' : '(未完成)' }}</span>
           <div class="bottom-right">
             <img
               class="fraction"
-              :src="require(`@/assets/images/jagsaw-shade-${gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? 'unlock' : 'lock'}.png`)"
+              :src="require(`@/assets/images/jigsaw-shade-${gameProgress.jigsawProgress[item.idxInConfig].isJigsawDone ? 'unlock' : 'lock'}.png`)"
               alt=""
               draggable="false"
             >
             &ensp;× {{ sceneTree[item.idxInConfig].children.reduce((a, b) => {
               return {
-                jagsawNumber: a.jagsawNumber + b.jagsawNumber
+                jigsawNumber: a.jigsawNumber + b.jigsawNumber
               }
-            }).jagsawNumber }}
+            }).jigsawNumber }}
           </div>
         </div>
       </div>
@@ -122,8 +123,8 @@ export default {
       'gameProgress',
     ]),
     canBuild() {
-      return this.gameProgress.jagsawProgress.filter((item) => {
-        return !item.isJagsawDone
+      return this.gameProgress.jigsawProgress.filter((item) => {
+        return !item.isJigsawDone
       }).length === 0
     },
     sceneTree() {

src/views/BuildTown.vue

@@ -7,7 +7,7 @@
         v-for="(item, idx) in sceneList"
         :key="idx"
         class="scene"
-        :class="gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone ? 'unlock' : 'lock'"
+        :class="gameProgress.jigsawProgress[item.idxInConfig].isJigsawDone ? 'unlock' : 'lock'"
         :style="{
           width: `calc(${item.width} / ${windowSizeWhenDesign} * ${unit})`,
           height: `calc(${item.height} / ${windowSizeWhenDesign} * ${unit})`,
@@ -22,9 +22,9 @@
           draggable="false"
         >
         <div class="text-wrap">
-          <span>{{ gameProgress.jagsawProgress[item.idxInConfig].name }}</span>
+          <span>{{ gameProgress.jigsawProgress[item.idxInConfig].name }}</span>
           <img
-            v-if="!gameProgress.jagsawProgress[item.idxInConfig].isJagsawDone"
+            v-if="!gameProgress.jigsawProgress[item.idxInConfig].isJigsawDone"
             class="lock"
             src="@/assets/images/lock.png"
             alt=""
@@ -245,7 +245,7 @@ export default {
     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-image: url(@/assets/images/bg-jigsaw-game-page-frame.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;

src/views/JagsawGame.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="jagsaw-game"
+    class="jigsaw-game"
   >
     <div class="left-wrapper" />
 
-    <div class="jagsaw-list">
+    <div class="jigsaw-list">
       <h1>
         <img
           class=""
@@ -22,7 +22,7 @@ import { onMounted, reactive, toRefs, ref } from 'vue'
 import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
 
 export default {
-  name: 'JagsawGame',
+  name: 'JigsawGame',
   setup () {
     const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
     return {
@@ -50,7 +50,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.jagsaw-game {
+.jigsaw-game {
   position: absolute;
   left: 0;
   top: 0;
@@ -66,13 +66,13 @@ export default {
   >.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-image: url(@/assets/images/bg-jigsaw-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 {
+  >.jigsaw-list {
     position: relative;
     background: red;
     width: calc(555 / v-bind('windowSizeWhenDesign') * v-bind('unit'));