v5.0.0-alpha.285: Fix animation when importing move history

package.json

@@ -48,5 +48,5 @@
         "preview:https": "serve dist",
         "reinstall": "rm -rf node_modules; yarn; vue-tsc --noEmit"
     },
-    "version": "5.0.0-alpha.284"
+    "version": "5.0.0-alpha.285"
 }

src/components/units/AppGameVariants.vue

@@ -123,7 +123,7 @@
 
 <i18n lang="json">
 {
-    "cn": {
+    "zh": {
         "gameVariantsTitle": "请选择游戏变体"
     },
     "en-US": {

src/components/units/AppUpdates.vue

@@ -115,7 +115,7 @@
 
 <i18n lang="json">
 {
-    "cn": {
+    "zh": {
         "title": "又更新了！？",
         "message0": "如果页脚显示的版本号落后于此处",
         "message1": "的最新版本， 请尝试使用",

src/components/units/AppWelcome.vue

@@ -106,10 +106,10 @@ button {
 
 <i18n lang="json">
     {
-        "cn": {
+        "zh": {
             "title": "欢迎！"
         },
-        "en": {
+        "en-US": {
             "title": "Welcome! "
         },
         "es": {

src/components/units/DemoMode/AppDemo.vue

@@ -1,7 +1,11 @@
 <template>
     <div id="app-demo">
-        <AppDemoBody />
-        <AppGameVvh />
+        <div class="dbody">
+            <AppDemoBody />
+        </div>
+        <div class="dvvh">
+            <AppGameVvh />
+        </div>
     </div>
 </template>
 
@@ -14,38 +18,70 @@
 
     const store = useStore();
     const games = [
+        { gameId: "tictactoe", variantId: "regular", isDrawGame: false },
+        { gameId: "chinesechess", variantId: "regular", isDrawGame: false, startPosition: "1_---k---------------------P---------------------------R-------------n------------------K---" },
+        { gameId: "topitop", variantId: "regular", isDrawGame: false },
+        { gameId: "quarto", variantId: "regular", isDrawGame: false },
+        { gameId: "kayles", variantId: "12", isDrawGame: false },
+        { gameId: "lewthwaitesgame", variantId: "standard", isDrawGame: false },
+        { gameId: "nim", variantId: "7_8_11_13_15", isDrawGame: false },
+        { gameId: "rubiksmagic", variantId: "regular", isDrawGame: false },
+        { gameId: "joust", variantId: "5x4", isDrawGame: false },
+        { gameId: "domineering", variantId: "6", isDrawGame: false },
+        { gameId: "chopsticks", variantId: "0", isDrawGame: true },
+        { gameId: "change", variantId: "regular", isDrawGame: false },
+        { gameId: "nutictactoe", variantId: "regular", isDrawGame: true },
+        { gameId: "oddoreven", variantId: "regular", isDrawGame: false },
+        { gameId: "ponghauki", variantId: "regular", isDrawGame: true },
+        { gameId: "squaredance", variantId: "regular", isDrawGame: false },
+        { gameId: "fourfieldkono", variantId: "standard", isDrawGame: true },
+        { gameId: "foxandhounds", variantId: "regular", isDrawGame: false },
+        { gameId: "graphgame", variantId: "2", isDrawGame: false },
+        { gameId: "0to10by1or2", variantId: "regular", isDrawGame: false },
+        { gameId: "allqueenschess", variantId: "standard", isDrawGame: false },
+        { gameId: "lightsout", variantId: "8", isDrawGame: false },
+        { gameId: "nqueens", variantId: "8", isDrawGame: false },
+        { gameId: "pegsolitaire", variantId: "triangle", isDrawGame: false },
+        { gameId: "rushhour", variantId: "expert", isDrawGame: false },
+        { gameId: "npuzzle", variantId: "3", isDrawGame: false },
+        { gameId: "toadsandfrogspuzzle", variantId: "4", isDrawGame: false },
+        { gameId: "towersofhanoi", variantId: "3_6", isDrawGame: false },
+        { gameId: "rubikscube", variantId: "2x2x2", isDrawGame: false },
+        { gameId: "bishoppuzzle", variantId: "4x5_8", isDrawGame: false },
+        { gameId: "quickcross", variantId: "regular", isDrawGame: true },
+        { gameId: "dao", variantId: "regular", isDrawGame: true },
+        { gameId: "sim", variantId: "regular", isDrawGame: false },
+        { gameId: "snake", variantId: "regular", isDrawGame: false },
+        { gameId: "tactix", variantId: "regular", isDrawGame: false },
+        { gameId: "mutorere", variantId: "regular", isDrawGame: true },
+        { gameId: "dragonsandswans", variantId: "3", isDrawGame: false },
+        { gameId: "shifttactoe", variantId: "default", isDrawGame: false },
+        { gameId: "y", variantId: "dim5", isDrawGame: false },    
+        { gameId: "lgame", variantId: "regular", isDrawGame: true },
+        { gameId: "tictactwo", variantId: "regular", isDrawGame: false },
+        { gameId: "chungtoi", variantId: "regular", isDrawGame: true },
+        { gameId: "dawsonschess", variantId: "15", isDrawGame: true },
+        { gameId: "tootandotto", variantId: "6", isDrawGame: false },
         { gameId: "1dchess", variantId: "regular", isDrawGame: false },
         { gameId: "fivefieldkono", variantId: "delta", isDrawGame: true },
-        { gameId: "chinesechess", variantId: "regular", isDrawGame: false, startPosition: "1_---k---------------------P---------------------------R-------------n------------------K---" },
         { gameId: "3spot", variantId: "regular", isDrawGame: false },
         { gameId: "achi", variantId: "regular", isDrawGame: false },
         { gameId: "beeline", variantId: "regular", isDrawGame: true },
         { gameId: "chomp", variantId: "4x7", isDrawGame: false },
-        { gameId: "369mm", variantId: "regular", isDrawGame: true },
-        { gameId: "connect4c", variantId: "6x7", isDrawGame: false },
+        { gameId: "ninemensmorris", variantId: "regular", isDrawGame: true },
+        { gameId: "connect4", variantId: "6x7", isDrawGame: false },
         { gameId: "dinododgem", variantId: "regular", isDrawGame: true },
         { gameId: "dodgem", variantId: "regular", isDrawGame: false },
-        { gameId: "gameofy", variantId: "dim5", isDrawGame: false },
-        { gameId: "haregame", variantId: "m-hounds-first", isDrawGame: false },
+        { gameId: "hareandhounds", variantId: "m-hounds-first", isDrawGame: false },
         { gameId: "baghchal", variantId: "regular", isDrawGame: true },
         { gameId: "lite3", variantId: "three-in-a-row", isDrawGame: false },
-        { gameId: "Lgame", variantId: "regular", isDrawGame: true },
         { gameId: "notakto", variantId: "board3", isDrawGame: false },
-        { gameId: "othello", variantId: "regular", isDrawGame: false },
-        { gameId: "quarto", variantId: "regular", isDrawGame: false },
-        { gameId: "quickcross", variantId: "regular", isDrawGame: true },
-        { gameId: "quickchess", variantId: "regular", isDrawGame: false },
-        { gameId: "stt", variantId: "default", isDrawGame: false },
-        { gameId: "dao", variantId: "regular", isDrawGame: true },
-        { gameId: "tactix", variantId: "regular", isDrawGame: false },
-        { gameId: "ttt", variantId: "regular", isDrawGame: false },
-        { gameId: "mutorere", variantId: "regular", isDrawGame: true },
-        { gameId: "tttwo", variantId: "regular", isDrawGame: false },
-        { gameId: "topitop", variantId: "regular", isDrawGame: false },
+        { gameId: "othello", variantId: "regular", isDrawGame: false }
     ];
 
     const currentGameIndex = ref(0);
     const initiateCurrentGame = async () => {
+        store.dispatch(actionTypes.exitMatch);
         await store.dispatch(actionTypes.initiateMatch, {
             gameId: games[currentGameIndex.value].gameId,
             variantId: games[currentGameIndex.value].variantId,
@@ -63,7 +99,7 @@
     const currRep = ref(0);
     const gameOverTimeoutMilisec = 5000;
     const isEndOfDrawMatch = computed(() => games[currentGameIndex.value].isDrawGame && store.getters.currentRoundId > 21);
-    const isEndOfMatch = computed(() => store.getters.isEndOfMatch || isEndOfDrawMatch.value);
+    const isEndOfMatch = computed(() => store.getters.isEndOfMatch || isEndOfDrawMatch.value || store.getters.currentRoundId > 99);
     watch(
         () => isEndOfMatch.value,
         async () => {
@@ -74,7 +110,7 @@
             store.commit(mutationTypes.setLeftPlayerIsComputer, false);
             store.commit(mutationTypes.setRightPlayerIsComputer, false);
             await new Promise((resolve) => setTimeout(resolve, gameOverTimeoutMilisec));
-            if (++currRep.value == repeat) {
+            if (++currRep.value >= repeat) {
                 /* If reached max repeat times, load the next game in list. */
                 currRep.value = 0;
                 currentGameIndex.value = (currentGameIndex.value + 1) % games.length;
@@ -102,5 +138,11 @@
         > * {
             margin: 1rem;
         }
+        > .dvvh {
+            width: 60%;
+        }
+        > .dbody {
+            width: 35%;
+        }
     }
 </style>

src/components/units/DemoMode/AppDemoBody.vue

@@ -3,6 +3,7 @@
         <AppGameBodyHeaderTitle />
         <br/>
         <AppDemoBodyStatistics />
+        <br/>
         <h3>Computer Move Duration (milliseconds)</h3>
         <VueSlider id="slider"
             v-model="options.computerMoveDuration"

src/components/units/GameBody/AppGameBodyHeaderInstructions.vue

@@ -9,11 +9,12 @@
 </template>
 
 <script lang="ts" setup>
-    import { computed, watch } from "vue";
+    import { computed } from "vue";
     import VueMarkdownIt from "vue3-markdown-it";
     import MarkdownItLinkAttributes from "markdown-it-link-attributes";
     import { actionTypes, mutationTypes, useStore } from "../../../scripts/plugins/store";
     import UniPopupWindow from "../../templates/UniPopupWindow.vue";
+    import { useI18n } from "vue-i18n";
 
     const store = useStore();
     const options = computed(() => store.getters.options);

src/components/units/GameBody/CustomGUIQuarto.vue

@@ -49,7 +49,7 @@
                 <g v-for="(token, i) in richPositionData.tokens" :key="'token' + i"
                     :class="'quarto-move'"
                     :style="'--xorigin: ' + centers[token.to][0] + 'px ' + centers[token.to][1] + 'px'"
-                    @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: token.move.str })">
+                    @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: token.move.str })">
                     <rect width="16" height="16" rx="2" ry="2"
                         :x="centers[token.to][0] - 8" :y="centers[token.to][1] - 8" 
                         :class="'quarto-hint ' + getBoardMoveElementHintClass(token.move)"
@@ -74,7 +74,7 @@
                 <g v-for="(token, i) in richPositionData.tokens" :key="'token' + i"
                     :class="'quarto-move'"
                     :style="'--xorigin: ' + centers[token.to][0] + 'px ' + centers[token.to][1] + 'px'"
-                    @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: token.move.str })">
+                    @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: token.move.str })">
                     <g v-if="token.token != '-'">
                         <rect width="5" height="5" rx="0.5" ry="0.5"
                             :x="centers[token.to][0] - 2.5" :y="centers[token.to][1] - 2.5"
@@ -122,7 +122,7 @@
     import { actionTypes, useStore } from "../../../scripts/plugins/store";
 
     interface GDefaultRegular2DMove {
-        str: string; // UWAPI move string
+        str: string; // Autogui move string
         hint: string;
         hintOpacity: number;
     }
@@ -158,7 +158,7 @@
                         token: matches[1],
                         to: parseInt(matches[2]),
                         move: {
-                            str: nextMoveData.move,
+                            str: nextMoveData.autoguiMove,
                             hint: nextMoveData.moveValue,
                             hintOpacity: nextMoveData.moveValueOpacity
                         },

src/components/units/GameBody/CustomGUISim.vue

@@ -8,7 +8,7 @@
                 :x2="vertices[move.to][0]" :y2="vertices[move.to][1]"
                 :class="'app-sim-move ' + getBoardMoveElementHintClass(move)"
                 :opacity="showNextMoveHints && showNextMoveDeltaRemotenesses ? move.hintOpacity : 1"
-                @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: move.str })">
+                @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: move.str })">
                 <title>{{ moveButtonTitle(move.str) }}</title>
             </line>
         </g>

src/components/units/GameBody/CustomGUITicTacToe.vue

@@ -31,7 +31,7 @@
                     :opacity="showNextMoveDeltaRemotenesses ? board[cell].hintOpacity : 1"/>
                 <rect v-if="currentRemoteness && movesAreClickable"
                     cursor="pointer" fill="var(--backgroundColor)"
-                    @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: board[cell].move })"
+                    @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: board[cell].move })"
                     width="20" height="20" fill-opacity="0" stroke-opacity="0"
                     :x="1 + xOffset(cell)" :y="1 + yOffset(cell)"
                 />
@@ -61,7 +61,7 @@
     const board = computed(() => {
         let board: BoardData = {};
         for (let cell: number = 0; cell < 9; cell++) board[cell] = { mark: currentPosition.value[2 + cell], move: "", hint: "", hintOpacity: 1 };
-        for (let availableMove in availableMoves.value) Object.assign(board[+availableMoves.value[availableMove].autoguiMove[4]], { move: availableMoves.value[availableMove].move, hint: availableMoves.value[availableMove].moveValue, hintOpacity: availableMoves.value[availableMove].moveValueOpacity });
+        for (let availableMove in availableMoves.value) Object.assign(board[+availableMoves.value[availableMove].autoguiMove[4]], { move: availableMoves.value[availableMove].autoguiMove, hint: availableMoves.value[availableMove].moveValue, hintOpacity: availableMoves.value[availableMove].moveValueOpacity });
         return board;
     });
     const getHintClass = (hint: string): string => (showNextMoveHints.value ? "hint-" + hint : "hint-" + turn.value);

src/components/units/GameBody/ImageAutoGUI.vue

@@ -16,7 +16,7 @@
         :d="formatArrowPathPoints(arrow, arrowWidth)"
         :class="'iag-button-arrow ' + getBoardMoveElementHintClass(arrow.move)"
         :opacity="options.showNextMoveHints && options.showNextMoveDeltaRemotenesses ? arrow.move.hintOpacity : 1"
-        @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: arrow.move.str })">
+        @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: arrow.move.str })">
         <title>{{ moveButtonTitle(arrow.move.str) }}</title>
       </path>
     </template>
@@ -59,7 +59,7 @@
               :opacity="options.showNextMoveHints && options.showNextMoveDeltaRemotenesses ? token.move.hintOpacity : 1"
               :style="'--tOrigin: ' + centers[token.center][0] + 'px ' + centers[token.center][1] + 'px'"
               :href="getImageSource(charImages[token.token].image) + '#MoveButtonSVG'"
-              @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: token.move.str })">
+              @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: token.move.str })">
               <title>{{ moveButtonTitle(token.move.str) }}</title>
             </use>
           </g>
@@ -71,7 +71,7 @@
             :class="'iag-button-point ' + (token.move ? 'move ' : '') + getBoardMoveElementHintClass(token.move)"
             :opacity="options.showNextMoveHints && options.showNextMoveDeltaRemotenesses ? token.move.hintOpacity : 1"
             :style="'--tOrigin: ' + centers[token.center][0] + 'px ' + centers[token.center][1] + 'px;'"
-            @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: token.move.str })">
+            @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: token.move.str })">
             <title>{{ moveButtonTitle(token.move.str) }}</title>
           </circle>
         </g>
@@ -83,7 +83,7 @@
         :class="'iag-button-point ' + (textButton.move ? 'move ' : '') + getBoardMoveElementHintClass(textButton.move)"
         :opacity="options.showNextMoveHints && options.showNextMoveDeltaRemotenesses ? textButton.move.hintOpacity : 1"
         :style="'font-size:' + textButtonFontSize + 'px;stroke:none;--tOrigin: ' + centers[textButton.center][0] + 'px ' + centers[textButton.center][1] + 'px'"
-        @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: textButton.move.str })">
+        @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: textButton.move.str })">
         {{ textButton.text }}
         <title>{{ moveButtonTitle(textButton.move.str) }}</title>
       </text>
@@ -94,7 +94,7 @@
           :d="formatArrowPathPoints(arrow, arrowWidth)"
           :class="'iag-button-arrow ' + getBoardMoveElementHintClass(arrow.move)"
           :opacity="options.showNextMoveHints && options.showNextMoveDeltaRemotenesses ? arrow.move.hintOpacity : 1"
-          @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: arrow.move.str })">
+          @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: arrow.move.str })">
           <title>{{ moveButtonTitle(arrow.move.str) }}</title>
         </path>
       </template>
@@ -108,7 +108,7 @@
         :stroke-width="lineWidth * widthFactor"
         :class="'iag-button-line ' + getBoardMoveElementHintClass(line.move)"
         :opacity="options.showNextMoveHints && options.showNextMoveDeltaRemotenesses ? line.move.hintOpacity : 1"
-        @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: line.move.str })">
+        @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: line.move.str })">
         <title>{{ moveButtonTitle(line.move.str) }}</title>
       </line>
     </template>
@@ -125,7 +125,7 @@
       <div class="move" v-for="listedMove in listedMoves" :key="listedMove.move"
         :class="options.showNextMoveHints ? `uni-${listedMove.moveValue}` : ''"
         :style="{ opacity: options.showNextMoveDeltaRemotenesses ? listedMove.moveValueOpacity : 1 }"
-        @click="movesAreClickable && store.dispatch(actionTypes.runMove, { move: listedMove.move })">{{ listedMove.move }}
+        @click="movesAreClickable && store.dispatch(actionTypes.runMove, { autoguiMove: listedMove.autoguiMove })">{{ listedMove.move }}
       </div>
     </div>
   </div>
@@ -138,7 +138,7 @@
   const gimages = import.meta.globEager("../../../models/images/svg/**/*");
 
   interface IAGMove {
-    str: string; // UWAPI move string
+    str: string; // Autogui move string
     hint: string;
     hintOpacity: number;
     nextPosition: string;
@@ -221,7 +221,7 @@
 
       for (let moveObj of Object.values(currentAvailableMoves.value)) {        
         const move = {
-          str: moveObj.move,
+          str: moveObj.autoguiMove,
           hint: moveObj.moveValue,
           hintOpacity: !options.value.showNextMoves ? 0.001 : moveObj.moveValueOpacity,
           nextPosition: moveObj.position

src/components/units/GameMenu/AppGameMenuPosition.vue

@@ -68,15 +68,6 @@
             errorMsg.value = error.message;
         } else {
             errorMsg.value = "";
-            if (store.getters.currentGameId === "chopsticks") {
-                // Easter egg. You can remove this entire if statement if you wish.
-                for (var p = 8; p < 28; p += 4) {
-                    if (inputPos.value.substring(p, p + 4) === "-f--") {
-                        errorMsg.value = "Woah, there. Be careful with that gesture..."
-                        break;
-                    }
-                }
-            }
             inputPos.value = "";
         }
     };

src/components/units/Header/AppHeaderNavigations.vue

@@ -58,7 +58,7 @@
 
 <i18n lang="json">
 {
-    "cn": {
+    "zh": {
         "Home": "首页",
         "Puzzles": "单人解谜",
         "Games": "双人游戏",