搞搞搞

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-app",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode dev",
@@ -14,6 +14,7 @@
     "core-js": "^3.8.3",
     "dayjs": "^1.11.7",
     "element-plus": "^2.3.8",
+    "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",

src/config.js

@@ -63,6 +63,9 @@ export default {
           lionGender: 'male',
           jigsawNumber: 3,
           jigsawList: [
+            '1.台基.png',
+            '2.基座.png',
+            '3.立柱.png',
 
           ],
           lionSpeach: '当我们来到徽州，总能看见许许多多门洞形状的建筑物，它就是“徽州三绝”之一的牌坊。徽州因为拥有的牌坊数量众多，样式精美，也被誉为“牌坊之乡”。'
@@ -72,6 +75,9 @@ export default {
           lionGender: 'male',
           jigsawNumber: 3,
           jigsawList: [
+            '4.夹柱石.png',
+            '5.横梁.png',
+            '6.斗拱.png',
 
           ],
         },
@@ -80,7 +86,9 @@ export default {
           lionGender: 'male',
           jigsawNumber: 3,
           jigsawList: [
-
+            '7.雀替.png',
+            '8.龙凤榜.png',
+            '9.楼.png',
           ],
         },
       ]
@@ -222,9 +230,17 @@ export default {
         {
           name: '其他建筑类型鉴赏',
           lionGender: 'male',
-          jigsawNumber: 3,
-          jigsawList: [
-
+          jigsawNumber: 9,
+          jigsawList: [
+            '1.道路.png',
+            '2.水池.png',
+            '3.月洞门.png',
+            '4.八角亭.png',
+            '5.凉亭.png',
+            '6.建筑地基.png',
+            '7.书斋.png',
+            '8.厅堂.png',
+            '9.树.png',
           ],
         },
       ]

src/store/index.js

@@ -61,6 +61,15 @@ export default createStore({
         state.gameProgress = resetGameProgress()
       }
     },
+    replayJigsaw(state, sceneL2Id) {
+      try {
+        state.gameProgress.jigsawProgress[sceneL2Id].isJigsawDone = false
+        localStorage.setItem(`HuiZhouGuJianZhuProgress-v${process.env.VUE_APP_VERSION}`, JSON.stringify(state.gameProgress))
+      } catch (error) {
+        console.error(error)
+        state.gameProgress = resetGameProgress()
+      }
+    },
     recordBuildProgress(state, progress) {
       try {
         state.gameProgress.buildProgress = progress

src/views/Bag.vue

@@ -93,7 +93,7 @@ export default {
           height: 204,
           top: 420,
           left: 40,
-          isOpen: false,
+          isOpen: true,
         },
         {
           idxInConfig: 3,
@@ -109,7 +109,7 @@ export default {
           height: 186,
           top: 634,
           left: 283,
-          isOpen: false,
+          isOpen: true,
         },
         {
           idxInConfig: 2,
@@ -243,7 +243,7 @@ export default {
     }
   }
   >.right-wrap {
-    width: 51.39vh;
+    width: 53vh;
     height: 100vh;
     counter-reset: game-rule;
     display: flex;

src/views/JigsawGame.vue

@@ -22,11 +22,13 @@
         @dragover.prevent
         @drop.prevent="onDrop"
       />
-      <!-- <button class="replay"
+      <button
         v-click-audio
-        >
+        class="replay"
+        @click="onClickReplay"
+      >
         重玩
-      </button> -->
+      </button>
     </div>
 
     <div class="jigsaw-list">
@@ -69,6 +71,7 @@
 <script>
 import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
 import { ElMessageBox } from 'element-plus'
+import { shuffle } from "lodash"
 
 export default {
   name: 'JigsawGame',
@@ -107,17 +110,12 @@ export default {
           hasPut: false,
         })
       }
+      this.jigsawItemsFlatten = shuffle(this.jigsawItemsFlatten)
     }
     setTimeout(() => {
       console.log('进入timeout!')
       if (!this.jigsawProgressSceneL2.isJigsawDone) {
-        console.log('要hide！')
-        const objectDocument = this.$refs.svgContainer.contentDocument
-        const gList = objectDocument.getElementsByTagName('g')
-        for (let index = 1; index < gList.length; index++) {
-          const element = gList[index]
-          element.setAttribute('visibility', 'hidden')
-        }
+        this.hideAllInSvg()
       }
     }, 300)
   },
@@ -126,7 +124,16 @@ export default {
   methods: {
     ...mapMutations([
       'recordJigsawDone',
+      'replayJigsaw',
     ]),
+    hideAllInSvg() {
+      const objectDocument = this.$refs.svgContainer.contentDocument
+      const gList = objectDocument.getElementsByTagName('g')
+      for (let index = 1; index < gList.length; index++) {
+        const element = gList[index]
+        element.setAttribute('visibility', 'hidden')
+      }
+    },
     onDragStart(e, jigsawImgName, idx) {
       // 不知道为啥，在svg内部元素上无法触发drop事件，求助gpt也没用。只好用一个透明方块放在需要能drop的svg内部元素上面。
 
@@ -246,6 +253,13 @@ export default {
     onDragOver(e) {
       e.preventDefault()
     },
+    onClickReplay() {
+      this.jigsawItemsFlatten.forEach(element => {
+        element.hasPut = false
+      })
+      this.hideAllInSvg()
+      this.replayJigsaw(Number(this.$route.query.sceneL2Idx))
+    }
   },
 }
 </script>
@@ -289,22 +303,22 @@ export default {
       // opacity: 0.2;
       z-index: 1;
     }
-    // >button.replay {
-    //   position: absolute;
-    //   bottom: calc(-15 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-    //   left: 50%;
-    //   transform: translate(-50%, 100%);
-    //   width: calc(100 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-    //   height: calc(40 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-    //   border-radius: calc(5 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-    //   border: 1px solid red;
-    //   letter-spacing: 0.5em;
-    //   padding-left: 0.5em;
-    //   font-size: calc(20 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
-    //   font-family: Source Han Sans CN-Bold, Source Han Sans CN;
-    //   font-weight: bold;
-    //   color: red;
-    // }
+    >button.replay {
+      position: absolute;
+      bottom: calc(-15 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      left: 50%;
+      transform: translate(-50%, 100%);
+      width: calc(100 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      height: calc(40 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      border-radius: calc(5 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      border: 1px solid red;
+      letter-spacing: 0.5em;
+      padding-left: 0.5em;
+      font-size: calc(20 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: bold;
+      color: red;
+    }
   }
   >.jigsaw-list {
     position: relative;

src/views/Level3.vue

@@ -206,23 +206,23 @@ export default {
   >menu {
     position: absolute;
     top: 0;
-    left: 130px;
+    left: calc(130 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     font-size: 0;
     >img.bg {
-      height: 173px;
+      height: calc(173 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
     }
     >.menu-item {
       position: absolute;
-      top: 76px;
+      top: calc(76 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       left: 50%;
       transform: translateX(-50%);
-      height: 94px;
-      font-size: 38px;
+      height: calc(94 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      font-size: calc(38 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       font-family: FZShaoEr-M11-Regular, FZShaoEr-M11;
       font-weight: 400;
       color: #2D241D;
       line-height: 1.3;
-      margin-bottom: 15px;
+      margin-bottom: calc(15 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
       display: flex;
       justify-content: center;
       align-items: center;

src/views/TravelRecord.vue

@@ -35,12 +35,6 @@ export default {
   methods: {
     ...mapMutations([
     ]),
-    onClickBook() {
-      ElMessage({
-        message: '敬请期待',
-        type: 'warning',
-      })
-    },
     onClickVideo() {
       if (this.$refs.video.paused || this.$refs.video.ended) {
         this.$refs.video.play()