搞搞搞

src/App.vue

@@ -97,6 +97,11 @@ export default {
   font-family: 'FZShaoEr-M11-Regular';
   src: url('@/assets/style/fang-zheng-shao-er.TTF');
 }
+// 字体
+@font-face {
+  font-family: 'pinyin';
+  src: url('@/assets/style/ReemKufi.ttf');
+}
 // i {
 //   font-style: italic;
 // }

src/assets/style/ReemKufi-1.7/OFL.txt

@@ -0,0 +1,94 @@
+Copyright 2015-2022 The Reem Kufi Project Authors (https://github.com/aliftype/reem-kufi), with Reserved Font Name "Josefin Sans".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+

src/assets/style/ReemKufi-1.7/README.md

@@ -0,0 +1,38 @@
+Reem Kufi
+=========
+
+![Sample](Sample.svg)
+
+Reem Kufi (كوفي ريم) is a [Kufic][1] typeface based on early Kufic (Mushafi) models, but
+retrofitted to the Fatimid Kufic grid and with borrowing from its forms. Reem
+Kufi is largely based on the Kufic designs of the late master of Arabic
+calligraphy [Mohammad Abdul Qadir][2] who revived this art in the 20th century
+and formalised its rules.
+
+Reem Kufi is particularly suitable for display settings, in titles or
+decorations. Due to its unmistakable old Kufic style, it gives a feeling of
+something old, historical, or Islamic.
+
+Some glyphs in Reem Kufi has several alternate variants that can work better
+for different situations, they can be accessed with “Character Variant”
+features (`cv01`, `cv02`, and so on).
+
+Reem is an Arabic female name that literally means “a white deer” and it so
+happens to be the name of my daughter.
+
+Installation
+------------
+
+Reem Kufi comes in two flavours, a [variable font][3] that has all the font
+styles in the same file, and allow dynamic changes of the font weight, and a
+set of static instances for specific font weights.
+
+The variable font file is `ReemKufi.otf` and the static instances has the style
+as part of the file name (e.g. `ReemKufi-Regular.otf`). It is not recommended
+to install both variable font and the static instances at the same time, as it
+would confuse some applications. You should install either of them based on the
+degree of variable font support in the software you use.
+
+[1]: https://en.wikipedia.org/wiki/Kufic
+[2]: https://ar.wikipedia.org/wiki/محمد_عبد_القادر_عبد_الله_(خطاط)
+[3]: https://web.dev/variable-fonts

src/views/Bag.vue

@@ -275,6 +275,7 @@ export default {
     >p {
       margin-bottom: 1em;
       font-size: calc(30 / 1080 * 100vh);
+      line-height: 1.5;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
       font-weight: bold;
       color: #C26827;

src/views/JigsawGame.vue

@@ -26,9 +26,7 @@
         v-click-audio
         class="replay"
         @click="onClickReplay"
-      >
-        重玩
-      </button>
+      />
     </div>
 
     <div class="jigsaw-list">
@@ -47,22 +45,38 @@
         <img
           class=""
           :style="{
-            cursor: !jigsawProgressSceneL2.isJigsawDone && !jigsawItem.hasPut ? 'grab' : 'default',
+            cursor: !jigsawProgressSceneL2.isJigsawDone && (activeJigsawIdx === (Number(jigsawItem.name.split('.')[0]) - 1)) ? 'grab' : 'default',
+            filter: !jigsawProgressSceneL2.isJigsawDone && !jigsawItem.hasPut ? '' : 'brightness(0.5)',
           }"
           :src="require(`@/assets/images/jigsaw-game-${$route.query.sceneL2Idx}/jigsaw/${jigsawItem.name}`)"
           alt=""
-          :draggable="!jigsawProgressSceneL2.isJigsawDone && !jigsawItem.hasPut ? true : false"
+          :draggable="!jigsawProgressSceneL2.isJigsawDone && (activeJigsawIdx === (Number(jigsawItem.name.split('.')[0]) - 1)) ? true : false"
           @dragstart="(e) => {
             onDragStart(e, jigsawItem.name, idx)
           }"
           @dragend="onDragEnd(jigsawItem.name)"
         >
         <div
+          v-if="!jigsawItem.name.includes('chuan') && !jigsawItem.name.includes('lin')"
           class="jigsaw-name"
           :title="jigsawItem.name.split('.')[1]"
         >
           {{ jigsawItem.name.split('.')[1] }}
         </div>
+        <div
+          v-if="jigsawItem.name.includes('chuan')"
+          class="jigsaw-name"
+          :title="jigsawItem.name.split('.')[1].replace('chuan', 'chuán')"
+        >
+          {{ jigsawItem.name.split('.')[1].split('（')[0] }}（<span style="font-family: pinyin">chuán</span>）{{ jigsawItem.name.split('.')[1].split('）')[1] }}
+        </div>
+        <div
+          v-if="jigsawItem.name.includes('lin')"
+          class="jigsaw-name"
+          :title="jigsawItem.name.split('.')[1].replace('lin', 'lǐn')"
+        >
+          {{ jigsawItem.name.split('.')[1].split('（')[0] }}（<span style="font-family: pinyin">lǐn</span>）{{ jigsawItem.name.split('.')[1].split('）')[1] }}
+        </div>
       </li>
     </div>
   </div>
@@ -86,6 +100,7 @@ export default {
   data() {
     return {
       jigsawItems: [],
+      activeJigsawIdx: 0,
       leftForDrop: 0,
       topForDrop: 0,
       widthForDrop: 0,
@@ -158,7 +173,7 @@ export default {
       console.log('svg original size by viewBox attribute: ', svgWidth, svgHeight)
 
       // show g element
-      gTarget.setAttribute('visibility', 'show')
+      // gTarget.setAttribute('visibility', 'show')
 
       // save drag info
       e.dataTransfer.setData('text/plain', jigsawImgName)
@@ -236,6 +251,8 @@ export default {
       const idx = Number(e.dataTransfer.getData('text/html'))
       this.jigsawItems[idx].hasPut = true
 
+      this.activeJigsawIdx++
+
       if (!this.jigsawItems.find((item) => {
         return !item.hasPut
       })) {
@@ -303,19 +320,18 @@ export default {
     }
     >button.replay {
       position: absolute;
-      bottom: calc(-15 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      bottom: calc(-30 / 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;
+      width: calc(220 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      height: calc(110 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
+      background-image: url(@/assets/images/btn-replay.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      &:hover{
+        transform: translate(-50%, 100%) scale(1.1);
+      }
     }
   }
   >.jigsaw-list {