v5.0.0-alpha.285: Fix animation when importing move history (#113)

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": "双人游戏",