v5.0.0-alpha.281: Add loading wheel animation for loading game. Chang…

…e routes according to UWAPI route changes. (#109) * Remove redundant calls to UWAPI/games/ * v5.0.0-alpha.281: Add loading wheel animation for loading game; Change routes according to UWAPI route changes.
GamesCrafters · Jan 31, 2024 · 39d8293 · 39d8293
1 parent e78a3a8
commit 39d8293
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 89 deletions.
diff --git a/package.json b/package.json
@@ -48,5 +48,5 @@
  "preview:https": "serve dist",
  "reinstall": "rm -rf node_modules; yarn; vue-tsc --noEmit"
  },
- "version": "5.0.0-alpha.280"
+ "version": "5.0.0-alpha.281"
 }
diff --git a/src/components/units/AppGames.vue b/src/components/units/AppGames.vue
@@ -67,11 +67,6 @@ const categories = computed(() => {
 });
 
 store.dispatch(actionTypes.loadGames, { type: gameType.value });
-watch(
- () => route.params.type as string,
- () => route.params.type && store.dispatch(actionTypes.loadGames, { type: gameType.value }),
- { immediate: true }
-);
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/components/units/GameBody/AppGameBodyBoard.vue b/src/components/units/GameBody/AppGameBodyBoard.vue
@@ -8,6 +8,7 @@
  import { computed } from "vue";
  import { useRoute } from "vue-router";
  import { useStore } from "../../../scripts/plugins/store";
+ import LoadingScreen from "../LoadingScreen.vue"
  import CharacterAutoGUI from "./CharacterAutoGUI.vue";
  import AppGameBodyBoardRegular2D from "./AppGameBodyBoardRegular2D.vue";
 
@@ -18,6 +19,9 @@
  const position = computed(() => store.getters.currentAutoguiPosition);
  const gameBoards: Record<string, any> = {};
  const getGameBoardComponent = () => {
+ if (position.value === '') {
+ return LoadingScreen
+ }
  if (position.value.match(/^(1|2)_([a-zA-Z0-9-\.~]+)(?:_(.*))?$/)) return AppGameBodyBoardRegular2D;
  const gameBoard = `${gameId}-${variantId}`;
  if (gameBoard in gameBoards) return gameBoards[gameBoard];

diff --git a/src/components/units/GameBody/ImageAutoGUI.vue b/src/components/units/GameBody/ImageAutoGUI.vue
@@ -1,28 +1,25 @@
 <template>
- <!-- Render board only if the boardstring is valid i.e. is a "validRichPosition". -->
+ <!-- Render position only if the autogui position string is valid. -->
  <svg v-if="richPositionData.validRichPosition"
  id="image-autogui" xmlns="http://www.w3.org/2000/svg"
  :viewBox="'-2 -2 ' + (scaledWidth + 4) + ' ' + (scaledHeight + 4)" 
  :data-turn="richPositionData.turn">
 
  <!-- Draw Background Image -->
  <image v-if="backgroundImagePath != ''" x="0" y="0"
- :width="scaledWidth"
- :height="scaledHeight"
+ :width="scaledWidth" :height="scaledHeight"
  :href="getImageSource(backgroundImagePath)"/>
 
  <!-- Draw M-type (arrow) move buttons below entities -->
- <g v-if="!animationPlaying && entitiesOverArrows"> 
- <g v-for="(arrow, i) in richPositionData.arrows" :key="'arrow' + i">
- <path
- :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 })">
- <title>{{ moveButtonTitle(arrow.move.str) }}</title>
- </path>
- </g>
- </g>
+ <template v-if="!animationPlaying && entitiesOverArrows"> 
+ <path v-for="(arrow, i) in richPositionData.arrows" :key="'arrow' + i"
+ :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 })">
+ <title>{{ moveButtonTitle(arrow.move.str) }}</title>
+ </path>
+ </template>
 
  <!-- Draw Regular (Image) Entities -->
  <g v-for="(entity, i) in richPositionData.board" :key="'entity' + i">
@@ -36,20 +33,18 @@
  </g>
 
  <!-- Draw Text Entities -->
- <g v-for="(value, key) of richPositionData.textEntities" :key="'entity' + key">
- <text class="entity" :id="'entity' + key" :x="centers[key][0]" :y="centers[key][1]" 
- :style="'font-size:' + textEntityFontSize + 'px;'">
- {{ value }}
- </text>
- </g>
+ <text v-for="(value, key) of richPositionData.textEntities" :key="'entity' + key"
+ class="entity" :id="'entity' + key" :x="centers[key][0]" :y="centers[key][1]" 
+ :style="'font-size:' + textEntityFontSize + 'px;'">
+ {{ value }}
+ </text>
 
  <!-- Draw Foreground Image -->
  <image v-if="foregroundImagePath != ''" x="0" y="0"
- :width="scaledWidth"
- :height="scaledHeight"
+ :width="scaledWidth" :height="scaledHeight"
  :href="getImageSource(foregroundImagePath)"/>
 
- <g v-if="!animationPlaying">
+ <template v-if="!animationPlaying">
  <!-- Draw A-type move buttons. -->
  <g v-for="(token, i) in richPositionData.tokens" :key="'token' + i">
  <g v-if="token.move"> 
@@ -83,47 +78,39 @@
  </g>
 
  <!-- Draw T-type (text) move buttons -->
- <g v-for="(textButton, i) in richPositionData.textButtons" :key="'textButton' + i">
- <text
- :x="centers[textButton.center][0]" :y="centers[textButton.center][1]"
- :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 })">
- {{ textButton.text }}
- </text>
- </g>
+ <text v-for="(textButton, i) in richPositionData.textButtons" :key="'textButton' + i"
+ :x="centers[textButton.center][0]" :y="centers[textButton.center][1]"
+ :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 })">
+ {{ textButton.text }}
+ </text>
 
  <!-- Draw M-type (arrow) move buttons on top of entities -->
- <g v-if="!entitiesOverArrows"> 
- <g v-for="(arrow, i) in richPositionData.arrows " :key="'arrow' + i">
- <path
- :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 })">
- <title>{{ moveButtonTitle(arrow.move.str) }}</title>
- </path>
- </g>
- </g>
+ <template v-if="!entitiesOverArrows"> 
+ <path v-for="(arrow, i) in richPositionData.arrows " :key="'arrow' + i"
+ :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 })">
+ <title>{{ moveButtonTitle(arrow.move.str) }}</title>
+ </path>
+ </template>
 
  <!-- Draw L-type (line) move buttons. -->
- <g v-for="(line, i) in richPositionData.lines" :key="'line' + i">
- <line
- :x1="centers[line.p1][0]"
- :y1="centers[line.p1][1]"
- :x2="centers[line.p2][0]"
- :y2="centers[line.p2][1]"
- :stroke-linecap="'round'"
- :style="'--w: ' + lineWidth * widthFactor + ';--w2: ' + (lineWidth * widthFactor * 1.75) + ';'"
- :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 })">
- <title>{{ moveButtonTitle(line.move.str) }}</title>
- </line>
- </g>
- </g>
+ <line v-for="(line, i) in richPositionData.lines" :key="'line' + i"
+ :x1="centers[line.p1][0]" :y1="centers[line.p1][1]"
+ :x2="centers[line.p2][0]" :y2="centers[line.p2][1]"
+ :stroke-linecap="'round'"
+ :style="'--w: ' + lineWidth * widthFactor + ';--w2: ' + (lineWidth * widthFactor * 1.75) + ';'"
+ :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 })">
+ <title>{{ moveButtonTitle(line.move.str) }}</title>
+ </line>
+ </template>
  </svg>
 </template>