v5.0.0-alpha.280: Adjust to UWAPI Changes; Support both human-readabl…

…e and autogui position strings (#108)

package.json

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

src/components/units/AppGame.vue

@@ -15,11 +15,10 @@
  const route = useRoute();
  const store = useStore();
  /* Change the following values to computed refs if game may change dynamically on this page. */
- const gameType = route.params.type as string;
  const gameId = route.params.gameId as string;
  const variantId = route.params.variantId as string;
  const initialPosition = route.params.initialPosition as string;
- store.dispatch(actionTypes.initiateMatch, { gameType: gameType, gameId: gameId, variantId: variantId, startPosition: initialPosition });
+ store.dispatch(actionTypes.initiateMatch, { gameId: gameId, variantId: variantId, startPosition: initialPosition });
  const options = computed(() => store.getters.options);
  const showMenu = computed(() => (options.value ? options.value.showMenu : true));
  onBeforeRouteLeave(() => store.dispatch(actionTypes.exitMatch));

src/components/units/AppGameVariants.vue

@@ -3,12 +3,12 @@
  <h2>{{ gameName }}</h2>
  <h3>{{ t("gameVariantsTitle") }}</h3>
  <div id="variants" v-if="game">
- <router-link v-for="variant in gameVariants" :key="variant.id" :class="variant.gui_status" :to="{ name: 'game', params: { type: gameType, gameId: gameId, variantId: variant.id } }">
- <img :src="getLogoSource(variant.id)" :alt="game.name + ' ' + variant.description + ' Logo'" style="width: 8rem" />
- <p>{{ variant.description }}</p>
+ <router-link v-for="variant in gameVariants" :key="variant.id" :class="variant.gui" :to="{ name: 'game', params: { type: gameType, gameId: gameId, variantId: variant.id } }">
+ <img :src="getLogoSource(variant.id)" :alt="'Logo'" style="width: 8rem" />
+ <p>{{ variant.name }}</p>
  </router-link>
- <div v-if="gameCustom" v-on:click="customBoardRoute" :class="game.gui_status">
- <img :src="getLogoSource('custom')" :alt="game.name + ' ' + 'Custom Logo'" style="width: 8rem" />
+ <div v-if="gameCustom" v-on:click="customBoardRoute" :class="game.gui">
+ <img :src="getLogoSource('custom')" :alt="'Logo'" style="width: 8rem" />
  <p>Custom</p>
  </div>
  </div>
@@ -27,11 +27,13 @@
  const { t } = useI18n();
  const gameType = computed(() => route.params.type as string);
  const gameId = computed(() => route.params.gameId as string);
- const game = computed(() => store.getters.game(gameType.value, gameId.value));
- const gameCustom = computed(() => (game.value ? game.value.custom : false));
+ store.dispatch(actionTypes.loadVariants, { gameId: gameId.value });
+
+ const game = computed(() => store.getters.game(gameId.value));
+ const gameCustom = computed(() => (game.value ? game.value.allowCustomVariantCreation : false));
  const gameName = computed(() => (game.value ? game.value.name : ""));
  const gameVariants = computed(() => {
- let total = game.value.variants.variants;
+ let total = game.value.variants;
  const asArray = Object.entries(total);
  if (asArray.length == 1 && !gameCustom.value) {
  router.replace({ name: 'game', params: { type: gameType.value, gameId: gameId.value, variantId: asArray[0][0] } });
@@ -67,12 +69,11 @@
  return logo[appLogoFilePath].default;
  };
  const customBoardRoute = () => {
- let boardStr = window.prompt('Enter a valid variant:');
- if (boardStr !== null) {
- router.push({ name: 'game', params: { type: gameType.value, gameId: gameId.value, variantId: boardStr } })
+ let variantId = window.prompt('Enter a Valid Variant ID:');
+ if (variantId !== null) {
+ router.push({ name: 'game', params: { type: gameType.value, gameId: gameId.value, variantId: variantId } })
  }
  }
- store.dispatch(actionTypes.loadVariants, { type: gameType.value, gameId: gameId.value });
 </script>
 
 <style lang="scss" scoped>

src/components/units/AppGames.vue

@@ -7,7 +7,7 @@
  <h2>{{ gameTypeTitle }} with{{ category.name }}</h2>
  <div class="games">
  <g v-for="member in category.members" :key="member.id">
- <router-link :class="category.id" v-if="member.gui_status === category.id" :to="{ name: 'variants', params: { type: gameType, gameId: member.id } }">
+ <router-link :class="category.id" v-if="member.gui === category.id" :to="{ name: 'variants', params: { type: gameType, gameId: member.id } }">
  <img :src="getLogoSource(member)" style="width: 8rem" />
  <p :style="member.name.length < 17 ? 'font-size: 100%' : 'font-size: 90%'" >{{ member.name }}</p>
  </router-link>
@@ -43,6 +43,7 @@ const getLogoSource = (game: Game) => {
  return logo[appLogoFilePath].default;
 }
 const gameType = computed(() => route.params.type as string);
+const gameTypeStr = computed(() => gameType.value === "puzzles" ? "onePlayer" : "twoPlayer");
 const gameTypeTitle = computed(() => gameType.value[0].toUpperCase() + gameType.value.slice(1));
 const search = ref("");
 
@@ -54,12 +55,12 @@ interface Category {
 
 const categories = computed(() => {
  let categories: Category[] = [];
- const asArray = Object.values(store.getters.games(gameType.value).games);
+ const asArray = Object.values(store.getters.games);
  for (const strs of [["v3", " Animated GUIs"], ["v2", " Artisan GUIs"], ["v1", " Standard GUIs"], ["v0", "out GUIs (Still in Development)"]]) {
  categories.push({
  id: strs[0],
  name: strs[1],
- members: asArray.filter((value) => value.name.toLowerCase().includes(search.value.toLowerCase()) && value.gui_status === strs[0])
+ members: asArray.filter((value) => value.type === gameTypeStr.value && value.name.toLowerCase().includes(search.value.toLowerCase()) && value.gui === strs[0])
  });
  }
  return categories;

src/components/units/DemoMode/AppDemo.vue

@@ -47,7 +47,6 @@
  const currentGameIndex = ref(0);
  const initiateCurrentGame = async () => {
  await store.dispatch(actionTypes.initiateMatch, {
- gameType: games[currentGameIndex.value].gameType,
  gameId: games[currentGameIndex.value].gameId,
  variantId: games[currentGameIndex.value].variantId,
  startPosition: games[currentGameIndex.value].startPosition || undefined,

src/components/units/DemoMode/AppDemoBodyBoard.vue

@@ -16,7 +16,7 @@
  const position = computed(() => store.getters.currentPosition);
  const gameBoards: Record<string, any> = {};
  const getGameBoardComponent = computed(() => {
- if (position.value.match(/^R_(A|B)_([0-9]+)_([0-9]+)_([a-zA-Z0-9-~]+)(?:_(.*))?$/)) return AppGameBodyBoardRegular2D;
+ if (position.value.match(/^(1|2)_([a-zA-Z0-9-~]+)(?:_(.*))?$/)) return AppGameBodyBoardRegular2D;
  const gameBoard = `${gameId}-${variantId}`;
  if (gameBoard in gameBoards) return gameBoards[gameBoard];
  return CharacterAutoGUI;

src/components/units/DemoMode/AppDemoBodyHeaderTitle.vue

@@ -13,15 +13,15 @@
  const gameId = computed(() => store.getters.currentGameId);
  const variantId = computed(() => store.getters.currentVariantId);
  const gameName = computed(() => {
- if (!store.getters.games(gameType.value)) return "";
- if (!store.getters.game(gameType.value, gameId.value)) return "";
- return store.getters.game(gameType.value, gameId.value).name;
+ if (!store.getters.games) return "";
+ if (!store.getters.game(gameId.value)) return "";
+ return store.getters.game(gameId.value).name;
  });
  const variantDescription = computed(() => {
- if (!store.getters.games(gameType.value)) return "";
- if (!store.getters.game(gameType.value, gameId.value)) return "";
- if (!store.getters.variant(gameType.value, gameId.value, variantId.value)) return "";
- return store.getters.variant(gameType.value, gameId.value, variantId.value).description;
+ if (!store.getters.games) return "";
+ if (!store.getters.game(gameId.value)) return "";
+ if (!store.getters.variant(gameId.value, variantId.value)) return "";
+ return store.getters.variant(gameId.value, variantId.value).name;
  });
 </script>
 

src/components/units/GameBody/AppGameBodyBoard.vue

@@ -15,10 +15,10 @@
  const store = useStore();
  const gameId = route.params.gameId as string;
  const variantId = route.params.variantId as string;
- const position = computed(() => store.getters.currentPosition);
+ const position = computed(() => store.getters.currentAutoguiPosition);
  const gameBoards: Record<string, any> = {};
  const getGameBoardComponent = () => {
- if (position.value.match(/^R_(A|B)_([0-9]+)_([0-9]+)_([a-zA-Z0-9-\.~]+)(?:_(.*))?$/) || position.value[0] == 'C') return AppGameBodyBoardRegular2D;
+ if (position.value.match(/^(1|2)_([a-zA-Z0-9-\.~]+)(?:_(.*))?$/)) return AppGameBodyBoardRegular2D;
  const gameBoard = `${gameId}-${variantId}`;
  if (gameBoard in gameBoards) return gameBoards[gameBoard];
  return CharacterAutoGUI;

src/components/units/GameBody/AppGameBodyBoardRegular2D.vue

@@ -17,8 +17,7 @@
  const currentMatch = computed(() => (store.state.app.currentMatch ? store.state.app.currentMatch : undefined));
  const gameId = computed(() => (currentMatch.value ? currentMatch.value.gameId : ""));
  const variantId = computed(() => (currentMatch.value ? currentMatch.value.variantId : ""));
- const gameType = computed(() => (currentMatch.value ? currentMatch.value.gameType : ""));
- const imageAutoGUIData = computed(() => store.getters.imageAutoGUIData(gameType.value, gameId.value, variantId.value));
+ const imageAutoGUIData = computed(() => store.getters.imageAutoGUIData(gameId.value, variantId.value));
  const regular2DGameBoards: Record<string, any> = {
  "tictactoe-misere": CustomGUITicTacToe,
  "tictactoe-regular": CustomGUITicTacToe,

src/components/units/GameBody/AppGameBodyHeaderInstructions.vue

@@ -19,10 +19,10 @@
  const options = computed(() => store.getters.options);
  const preferences = computed(() => store.getters.preferences);
  const instructions = computed(() => {
- let game = store.getters.game(store.getters.currentGameType, store.getters.currentGameId);
+ let game = store.getters.game(store.getters.currentGameId);
  if (game && game.instructions) {
  if (!(preferences.value.locale in game.instructions)) {
- store.dispatch(actionTypes.addInstructions, {gameType: store.getters.currentGameType, gameId: store.getters.currentGameId});
+ store.dispatch(actionTypes.addInstructions, {gameId: store.getters.currentGameId, variantId: store.getters.currentVariantId});
  }
  let instructions = game.instructions[preferences.value.locale];
  return instructions ? instructions : "# No Instructions Available"

src/components/units/GameBody/AppGameBodyHeaderOptions.vue

@@ -214,12 +214,12 @@
  const gameId = route.params.gameId as string;
  const variantId = route.params.variantId as string;
 
- const game = computed(() => store.getters.game(gameType, gameId));
- const gameVariant = computed(() => store.getters.variant(gameType, gameId, variantId));
+ const game = computed(() => store.getters.game(gameId));
+ const gameVariant = computed(() => store.getters.variant(gameId, variantId));
  const gameName = computed(() => (game.value ? game.value.name : ""));
  const variantDescription = computed(() => {
  if (!game.value || !gameVariant.value) return "";
- return gameVariant.value.description;
+ return gameVariant.value.name;
  });
  const gameThemes = computed(() =>
  gameVariant.value.imageAutoGUIData ?
@@ -260,7 +260,7 @@
 
  // Stores true or false, whether the current game supports the Win By view or it does not.
  const supportsWinBy = computed(() =>
- store.getters.supportsWinBy(currentGameType.value, currentGameId.value)
+ store.getters.supportsWinBy(currentGameId.value)
  );
  
  // Array of the available computer strategies.

src/components/units/GameBody/AppGameBodyHeaderTitle.vue

@@ -1,6 +1,6 @@
 <template>
  <div id="app-game-body-header-title">
- <h2>{{ gameName }} ({{ variantDescription }})</h2>
+ <h2>{{ gameName }} ({{ variantName }})</h2>
  </div>
 </template>
 
@@ -11,11 +11,10 @@
 
  const route = useRoute();
  const store = useStore();
- const gameType = route.params.type as string;
  const gameId = route.params.gameId as string;
  const variantId = route.params.variantId as string;
- const gameName = computed(() => (store.getters.game(gameType, gameId) ? store.getters.game(gameType, gameId).name : ""));
- const variantDescription = computed(() => (store.getters.game(gameType, gameId) && store.getters.variant(gameType, gameId, variantId) ? store.getters.variant(gameType, gameId, variantId).description : ""));
+ const gameName = computed(() => (store.getters.game(gameId) ? store.getters.game(gameId).name : ""));
+ const variantName = computed(() => (store.getters.game(gameId) && store.getters.variant(gameId, variantId) ? store.getters.variant(gameId, variantId).name : ""));
 </script>
 
 <style lang="scss" scoped>

src/components/units/GameBody/CustomGUIQuarto.vue

@@ -137,18 +137,18 @@
  const gameTheme = computed(() => store.getters.currentGameTheme || "r");
  const otherGameTheme = computed(() => gameTheme.value === "r" ? "b" : "r");
  const animationPlaying = computed(() => store.getters.animationPlaying);
- const isInitial = computed(() => currentPosition.value === "R_A_17_1_-----------------");
+ const isInitial = computed(() => currentPosition.value === "1_-----------------");
  const richPositionData = computed(() => {
- const matches = currentPosition.value.match(/^R_(A|B)_([0-9]+)_([0-9]+)_([a-zA-Z0-9-]+)*/)!;
- const validRichPosition = matches && matches.length >= 5 && matches[4].length == 17;
+ const matches = currentPosition.value.match(/^(1|2)_([a-zA-Z0-9-]+)*/)!;
+ const validRichPosition = matches && matches.length >= 3 && matches[2].length == 17;
  if (validRichPosition) {
  const turn = matches[1];
- const board = matches[4].substring(0, 16);
+ const board = matches[2].substring(0, 16);
  let tokens: GDefaultRegular2DBoardToken[] = [];
- const nextPiece = matches[4].slice(-1);
+ const nextPiece = matches[2].slice(-1);
  for (let nextMoveData of Object.values(availableMoves.value)) { 
  let matches;
- if ((matches = nextMoveData.move.match(/^A_([a-zA-Z0-9-])_([0-9]+)*/))) {
+ if ((matches = nextMoveData.autoguiMove.match(/^A_([a-zA-Z0-9-])_([0-9]+)*/))) {
  tokens.push({
  token: matches[1],
  to: parseInt(matches[2]),
@@ -160,7 +160,7 @@
  });
  }
  }
-
+ 
  return {
  turn: turn,
  board,

src/components/units/GameBody/CustomGUISim.vue

@@ -74,17 +74,17 @@
  
  const richPositionData = computed(() => {
  const position: string = currentPosition.value;
- const matches = position.match(/^C_([a-zA-Z0-9-]+)*/)!;
- const validRichPosition = matches && matches.length >= 2;
+ const matches = position.match(/^(1|2)_([a-zA-Z0-9-]+)*/)!;
+ const validRichPosition = matches && matches.length >= 3;
  let moves: GSimMove[] = [];
  if (validRichPosition) {
  for (let nextMoveData of Object.values(currentAvailableMoves.value)) {
  moves.push({
- str: nextMoveData.move,
+ str: nextMoveData.autoguiMove,
  hint: nextMoveData.moveValue,
  hintOpacity: nextMoveData.moveValueOpacity,
- from: Number(nextMoveData.moveName[0]) - 1,
- to: Number(nextMoveData.moveName[1]) - 1
+ from: Number(nextMoveData.move[0]) - 1,
+ to: Number(nextMoveData.move[1]) - 1
  });
  }
  }

src/components/units/GameBody/CustomGUITicTacToe.vue

@@ -41,9 +41,8 @@
 </template>
 
 <script lang="ts" setup>
- import { computed, ref, watch } from "vue";
+ import { computed } from "vue";
  import { actionTypes, useStore } from "../../../scripts/plugins/store";
- 
  type CellData = { mark: string; move: string; hint: string; hintOpacity: number };
  type BoardData = Record<number, CellData>;
  const store = useStore();
@@ -52,25 +51,24 @@
  const showNextMoveHints = computed(() => (options.value ? options.value.showNextMoveHints : true));
  const showNextMoveDeltaRemotenesses = computed(() => (options.value ? options.value.showNextMoveDeltaRemotenesses : true));
  const currentPosition = computed(() => store.getters.currentPosition);
- const currentValue = computed(() => store.getters.currentPositionValue);
  const currentRemoteness = computed(() => store.getters.currentRemoteness);
  const availableMoves = computed(() => store.getters.currentAvailableMoves);
  const movesAreClickable = computed(() => !(store.getters.currentPlayer.isComputer || (options.value.automoveIfSingleMove && Object.keys(availableMoves.value).length == 1)));
- const turn = computed(() => currentPosition.value[2]);
+ const turn = computed(() => currentPosition.value[0]);
  const animationPlaying = computed(() => store.getters.animationPlaying);
  const isMisere = computed(() => store.getters.currentVariantId === "misere" ? "misere" : "");
  const board = computed(() => {
  let board: BoardData = {};
- for (let cell: number = 0; cell < 9; cell++) board[cell] = { mark: currentPosition.value[8 + cell], move: "", hint: "", hintOpacity: 1 };
- for (let availableMove in availableMoves.value) Object.assign(board[+availableMoves.value[availableMove].move[4]], { move: availableMoves.value[availableMove].move, hint: availableMoves.value[availableMove].moveValue, hintOpacity: availableMoves.value[availableMove].moveValueOpacity });
+ 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 });
  return board;
  });
  const getHintClass = (hint: string): string => (showNextMoveHints.value ? "hint-" + hint : "hint-" + turn.value);
  const xOffset = (cell: number): number => (cell % 3) * 22;
  const yOffset = (cell: number): number => Math.floor(cell / 3) * 22;
  const b16 = (cond: boolean): number => cond ? 16 : 0;
  const triplets = computed(() => {
- const str = currentPosition.value.split('_')[4];
+ const str = currentPosition.value.split('_')[1];
  return [
  str[0] != '-' && str[0] == str[1] && str[1] == str[2],
  str[3] != '-' && str[3] == str[4] && str[4] == str[5],
@@ -94,11 +92,11 @@
  stroke: var(--neutralColor);
  }
  .hint- {
- &A {
+ &1 {
  stroke: var(--turn1Color);
  fill: var(--turn1Color);
  }
- &B {
+ &2 {
  stroke: var(--turn2Color);
  fill: var(--turn2Color);
  }