Quarto Animation Working sorta

src/components/units/GameBody/CustomGUISim.vue

@@ -7,9 +7,7 @@
  :x1="vertices[move.from][0]" :y1="vertices[move.from][1]"
  :x2="vertices[move.to][0]" :y2="vertices[move.to][1]"
  :class="'app-sim-move ' + getBoardMoveElementHintClass(move)"
- :style="{
- opacity: showNextMoveHints && showNextMoveDeltaRemotenesses ? move.hintOpacity : 1,
- }"
+ :opacity="showNextMoveHints && showNextMoveDeltaRemotenesses ? move.hintOpacity : 1"
  @click="!isComputerTurn && store.dispatch(actionTypes.runMove, { move: move.str })"/>
  </g>
 

src/components/units/GameBody/CustomGUITicTacToe.vue

@@ -28,8 +28,7 @@
  <circle v-if="showNextMoves && board[cell].hint"
  r="3" :cx="11 + xOffset(cell)" :cy="11 + yOffset(cell)"
  :class="getHintClass(board[cell].hint)"
- :style="{ opacity: showNextMoveDeltaRemotenesses ? board[cell].hintOpacity : 1 }"
- />
+ :opacity="showNextMoveDeltaRemotenesses ? board[cell].hintOpacity : 1"/>
  <rect v-if="currentRemoteness && !isComputerTurn"
  cursor="pointer" fill="var(--backgroundColor)"
  @click="!isComputerTurn && store.dispatch(actionTypes.runMove, { move: board[cell].move })"

src/components/units/GameBody/ImageAutoGUI.vue

@@ -13,7 +13,7 @@
  :href="getImageSource(backgroundImagePath)"/>
 
  <!-- Draw M-type (arrow) move buttons below pieces. -->
- <g v-if="showMoveButtons && piecesOverArrows"> 
+ <g v-if="!animationPlaying && piecesOverArrows"> 
  <g v-for="(arrow, i) in richPositionData.arrows" :key="'arrow' + i">
  <polyline
  :points="formatArrowPolylinePoints(arrow, arrowThickness)"
@@ -34,7 +34,6 @@
  :class="'entity'"
  :width="pieces[cell].scale * widthFactor"
  :height="pieces[cell].scale * widthFactor"
- :opacity="origOpacity"
  :href="getImageSource(pieces[cell].image)"/>
  </g>
 
@@ -44,7 +43,7 @@
  :height="scaledHeight"
  :href="getImageSource(foregroundImagePath)"/>
 
- <g v-if="showMoveButtons">
+ <g v-if="!animationPlaying">
  <!-- Draw A-type move buttons. -->
  <g v-for="(token, i) in richPositionData.tokens" :key="'token' + i">
  <g v-if="token.move">
@@ -119,11 +118,10 @@
 </template>
 
 <script lang="ts" setup>
- import { computed, ref, watch } from "vue";
+ import { computed } from "vue";
  import { actionTypes, useStore } from "../../../scripts/plugins/store";
- import gsap from "gsap";
+ //import gsap from "gsap";
  const gimages = import.meta.globEager("../../../models/images/svg/**/*");
- const logo = import.meta.globEager("../../../models/images/logo-gamescrafters.png");
 
  enum UWAPITurn {
  A = "A",
@@ -170,37 +168,29 @@
  const backgroundGeometry = computed(() => theTheme.value.backgroundGeometry);
  const widthFactor = computed(() => scaledWidth / backgroundGeometry.value[0]);
  const scaledHeight = computed(() => backgroundGeometry.value[1] * widthFactor.value);
+ const animationType = computed(() => theTheme.value.animationType || "");
+ const pieces = computed(() => theTheme.value.pieces);
+ const centers = computed(() =>
+ theTheme.value.centers.map((a: [number, number]) =>
+ a.map((b: number) => b * widthFactor.value)));
+ const getImageSource = (imagePath: string) => gimages["../../../models/images/svg/" + imagePath].default;
+
+ const animationPlaying = computed(() => store.getters.animationPlaying);
  const backgroundImagePath = computed(() => theTheme.value.backgroundImage || "");
  const foregroundImagePath = computed(() => theTheme.value.foregroundImage || "");
- const piecesOverArrows = computed(() => theTheme.value.piecesOverArrows || false);
- const animationType = computed(() => theTheme.value.animationType || "");
  const arrowThickness = computed(() =>
  (theTheme.value.arrowThickness * widthFactor.value / 2) || 1.5);
  const lineWidth = computed(() => theTheme.value.lineWidth || 0.9);
  const defaultMoveTokenRadius = computed(() =>
  (theTheme.value.defaultMoveTokenRadius * widthFactor.value) || 2);
- const pieces = computed(() => theTheme.value.pieces);
- const centers = computed(() =>
- theTheme.value.centers.map((a: [number, number]) =>
- a.map((b: number) => b * widthFactor.value)));
-
- const showMoveButtons = ref(true);
+ const piecesOverArrows = computed(() => theTheme.value.piecesOverArrows || false);
 
- gsap.config({ nullTargetWarn: false }); // Suppress target-not-found warnings.
- const origOpacity = computed(() => {
- showMoveButtons.value = true;
- gsap.to(".entity", {duration: 0.001, opacity: 1});
- return currentPosition.value ? 1 : 1;
- });
+ // gsap.config({ nullTargetWarn: false }); // Suppress target-not-found warnings.
+ // const origOpacity = computed(() => {
+ // gsap.to(".entity", {duration: 0.001, opacity: 1});
+ // return currentPosition.value ? 1 : 1;
+ // });
 
- const getImageSource = (imagePath: string) => {
- try {
- return gimages["../../../models/images/svg/" + imagePath].default;
- } catch (errorMessage) {
- console.warn(`${imagePath} image does not exist yet.`);
- }
- return logo["../../../models/images/logo-gamescrafters.png"].default;
- };
  /* End Code Cleanup Required Here */
 
  const richPositionData = computed(() => {
@@ -277,9 +267,9 @@
  }
  });
 
- /* An arrow move button is a heptagon. We have decided that all arrowheads must be 55-55-70 triangles. 
- Given the arrow's endpoint and thickness (and other parameters `startOffset` and `endOffset`), return 
- the vertex coordinates of the arrow move button as a string. */
+ /* An arrow move button is a concave heptagon. We've decided that all arrowheads must be 55-55-70 
+ triangles. Given the arrow's endpoint and thickness (and other parameters `startOffset` and 
+ `endOffset`), return the vertex coordinates of the arrow move button as a string. */
  const formatArrowPolylinePoints = 
  (arrow: GDefaultRegular2DBoardArrow,
  thickness: number = 0.75,
@@ -318,107 +308,7 @@
 
  const getBoardMoveElementHintClass = 
  (move?: GDefaultRegular2DMove): string => 
- (move && options.value.showNextMoveHints ? "hint-" + move.hint : "");
-
- // watch(transitionTo, (newValue: any, oldValue: any) => {
- // showMoveButtons.value = false;
- // if (Boolean(newValue) == false || Boolean(oldValue) == false) return;
- // const currBoard = oldValue.split("_")[4];
- // const nextBoard = newValue.split("_")[4];
- // if (currBoard.length != nextBoard.length) return;
- // var diffIdxs = [];
- // var i, j;
-
- // if (animationType.value === "simpleSlidePlaceRemove") {
- // var fromIdx = null;
- // var toIdx = null;
- // var appearDisappearIdx = null;
- // var appearing = null;
- // for (i = 0; i < currBoard.length; i++) {
- // if (currBoard[i] != nextBoard[i]) {
- // diffIdxs.push(i);
- // }
- // }
-
- // if (diffIdxs.length == 1) {
- // i = diffIdxs[0];
- // if (nextBoard[i] == '-') { // Removal (fade-out)
- // appearing = false;
- // } else if (currBoard[i] == '-') { // Placement (fade-in)
- // appearing = true;
- // } else {
- // return;
- // }
- // appearDisappearIdx = i;
- // } else if (diffIdxs.length == 2) {
- // i = diffIdxs[0];
- // j = diffIdxs[1];
- // if (currBoard[j] == nextBoard[i] && currBoard[j] != '-') {
- // i = j;
- // j = diffIdxs[0];
- // }
- // if (currBoard[i] == nextBoard[j]) {
- // if (currBoard[j] != '-' && nextBoard[i] != '-') {
- // return;
- // } else if (currBoard[j] != '-') { // Capture
- // appearDisappearIdx = j;
- // appearing = false;
- // } else if (nextBoard[i] != '-') { // Uncapture
- // appearDisappearIdx = i;
- // appearing = true;
- // }
- // fromIdx = i;
- // toIdx = j;
- // } else {
- // return;
- // }
- // } else if (diffIdxs.length == 3) {
- // for (const idx1 of diffIdxs) {
- // for (const idx2 of diffIdxs) {
- // if (currBoard[idx1] == nextBoard[idx2] && currBoard[idx1] != '-') {
- // fromIdx = idx1;
- // toIdx = idx2;
- // }
- // }
- // }
- // if (fromIdx == null) {
- // return;
- // }
- // for (const idx of diffIdxs) {
- // if (fromIdx != idx && toIdx != idx) {
- // appearDisappearIdx = idx;
- // }
- // }
- // if (currBoard[appearDisappearIdx!] == '-') {
- // appearing = true;
- // } else if (nextBoard[appearDisappearIdx!] == '-') {
- // appearing = false;
- // } else {
- // return;
- // }
- // } else {
- // return;
- // }
-
- // console.log("entering watch " + appearing + " " + fromIdx + " " + toIdx + " " + appearDisappearIdx);
-
- // if (fromIdx != null && toIdx != null) { // Play sliding animation
- // const toCoords = centers.value[toIdx];
- // const fromCoords = centers.value[fromIdx];
- // gsap.to("#piece" + fromIdx, {duration: 0.5, x: toCoords[0] - fromCoords[0], y: toCoords[1] - fromCoords[1]});
- // }
- 
- // // If `appearing` is null, don't play an appearing or disappearing animation
- // if (appearing === false) { // Play disappearing animation
- // gsap.to("#piece" + appearDisappearIdx, {duration: 0.5, autoAlpha: 0.01});
- // } else if (appearing === true) { // Play appearing animation
- // console.log("appear");
- // }
- // } else if (animationType.value === "custom") {
- // console.log("Custom");
- // }
- // });
- 
+ (move && options.value.showNextMoveHints ? "hint-" + move.hint : ""); 
 </script>
 
 <style lang="scss" scoped>

src/scripts/gamesmanUni/audio.ts

@@ -1,6 +1,19 @@
-// const sfx = import.meta.globEager("../../models/sounds/*");
+// var sfx = import.meta.globEager("../../models/sounds/*");
+// var moveSFX = new Audio();
 
-// export const playMoveSound = (path: string) => {
+// export const initializeMoveSFX = () => {
+// sfx = import.meta.globEager("../../models/sounds/*");
+// }
+
+// export const setMoveSFXVolume = (volume: number) => {
+// moveSFX.volume = volume;
+// }
+
+// export const pauseMoveSFX = () => {
+// moveSFX.pause();
+// }
+
+// export const playMoveSFX = (path: string) => {
 // var audio = new Audio(sfx[path].default);
 // audio.play();
 // }