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);
             }