v5.0.0-alpha.252: Progress on simpleSlidePlaceRemove default animation

package.json

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

src/components/units/GameBody/CustomGUIQuarto.vue

@@ -114,7 +114,6 @@
 
 <script lang="ts" setup>
  import { computed } from "vue";
- import gsap from "gsap";
  import { actionTypes, useStore } from "../../../scripts/plugins/store";
 
  interface GDefaultRegular2DMove {
@@ -143,9 +142,6 @@
  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;
  if (validRichPosition) {
- if (document.getElementById("toPlace")) {
- gsap.set("#toPlace", {x: 58, y: 113});
- }
  const turn = matches[1];
  const board = matches[4].substring(0, 16);
  let tokens: GDefaultRegular2DBoardToken[] = [];

src/components/units/GameBody/ImageAutoGUI.vue

@@ -24,11 +24,10 @@
 
  <!-- Draw Pieces. -->
  <g v-for="(cell, i) in richPositionData.board" :key="'cell' + i">
- <image v-if="cell != '-' && Object.keys(pieces).includes(cell)"
+ <image class="entity" v-if="cell != '-' && Object.keys(pieces).includes(cell)"
  :id="'piece' + i"
  :x="centers[i][0] - 0.5 * pieces[cell].scale * widthFactor"
  :y="centers[i][1] - 0.5 * pieces[cell].scale * widthFactor"
- :class="'entity'"
  :width="pieces[cell].scale * widthFactor"
  :height="pieces[cell].scale * widthFactor"
  :href="getImageSource(pieces[cell].image)"/>
@@ -109,7 +108,6 @@
 <script lang="ts" setup>
  import { computed } from "vue";
  import { actionTypes, useStore } from "../../../scripts/plugins/store";
- //import gsap from "gsap";
  const gimages = import.meta.globEager("../../../models/images/svg/**/*");
 
  interface GDefaultRegular2DMove {
@@ -169,12 +167,6 @@
  (theTheme.value.defaultMoveTokenRadius * widthFactor.value) || 2);
  const piecesOverArrows = computed(() => theTheme.value.piecesOverArrows || false);
 
- // 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;
- // });
-
  /* End Code Cleanup Required Here */
 
  const richPositionData = computed(() => {

src/scripts/gamesmanUni/index.ts

@@ -3,7 +3,7 @@ import * as GCTAPITypes from "../apis/gamesCrafters/types";
 import * as GHAPI from "../apis/gitHub";
 import type * as Types from "./types";
 import * as Defaults from "../../models/datas/defaultApp";
-import { handleMoveAnimation } from "./moveAnimation"
+import { handleMoveAnimation, animationEpilogue } from "./moveAnimation"
 const moveHistoryDelim = ':';
 
 const deepcopy = (obj: Object) => {
@@ -358,6 +358,7 @@ export const runMove = async (app: Types.App, payload: { move: string }) => {
  };
  await new Promise(r => setTimeout(r, animationDuration));
  app.currentMatch.animationPlaying = false;
+ animationEpilogue(app.currentMatch);
  app.currentMatch.moveHistory += moveHistoryDelim + (moveObj.moveName ? moveObj.moveName : moveObj.move);
  let posArr = updatedPosition.position.split('_');
  if (posArr.length === 5 && posArr[0] === 'R') {

src/scripts/gamesmanUni/moveAnimation.ts

@@ -1,34 +1,36 @@
 import type * as Types from "./types";
 import gsap from "gsap";
 const sfx = import.meta.globEager("../../models/sounds/*");
+import { computed } from "vue";
+import { useStore } from "../../scripts/plugins/store";
+const gimages = import.meta.globEager("../../models/images/svg/**/*");
+
+const playAudio = (path: string, volume: number) => {
+ var audio = new Audio(sfx['../../models/sounds/' + path].default);
+ audio.volume = volume;
+ audio.play();
+}
 
 /* All animation functions should return the animation duration in milliseconds. */
 const animateTTT = (volume: number, moveObj: Types.Move): number => {
  const diffIdx = Number(moveObj.move[4]);
  const turn = moveObj.move[2];
  const xOff = (diffIdx % 3) * 22;
  const yOff = Math.floor(diffIdx / 3) * 22;
- var audio;
  if (turn === 'x') {
- audio = new Audio(sfx['../../models/sounds/X.mp3'].default);
- audio.volume = volume;
- audio.play();
+ playAudio('X.mp3', volume);
  gsap.to("#xa" + diffIdx, {duration: 0.25, attr: {x2: 19 + xOff, y2: 19 + yOff}});
  gsap.to("#xb" + diffIdx, {delay: 0.25, duration: 0.25, attr: {x2: 3 + xOff, y2: 19 + yOff}});
  } else if (turn === 'o') {
- audio = new Audio(sfx['../../models/sounds/O.mp3'].default);
- audio.volume = volume;
- audio.play();
+ playAudio('O.mp3', volume);
  gsap.to("#o" + diffIdx, {duration: 0.5, attr: {"stroke-dashoffset": 0}})
  }
  return 500;
 }
 
 const animateSim = (volume: number, moveObj: Types.Move): number => {
  const vertices = [[4, 0], [2, 3.4641], [-2, 3.4641], [-4, 0], [-2, -3.4641], [2, -3.4641]];
- var audio = new Audio(sfx['../../models/sounds/O.mp3'].default);
- audio.volume = volume;
- audio.play();
+ playAudio('O.mp3', volume);
  const d = Number(moveObj.moveName[1]) - 1; 
  gsap.to("#simline" + moveObj.moveName, {duration: 0.5, attr: {"x2": vertices[d][0], "y2": vertices[d][1]}});
  return 500;
@@ -48,14 +50,28 @@ const animateQuarto = (volume: number, currPosition: string, nextPosition: strin
  return 500;
 }
 
-const animateImageAutoGUI = (volume: number, animationType: string, currPosition: string, nextPosition: string): number => {
+const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition: string, moveObj: Types.Move): number => {
+ const store = useStore();
+ const autoguiV2Data = computed(() => store.getters.autoguiV2Data(store.getters.currentGameType, 
+ store.getters.currentGameId, store.getters.currentVariantId));
+ const currentTheme = computed(() => store.getters.currentGameTheme);
+ const theTheme = computed(() => autoguiV2Data.value.themes[currentTheme.value]);
+ const scaledWidth = 100;
+ const backgroundGeometry = computed(() => theTheme.value.backgroundGeometry);
+ const widthFactor = computed(() => scaledWidth / backgroundGeometry.value[0]);
+ 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 currBoard = currPosition.split("_")[4];
  const nextBoard = nextPosition.split("_")[4];
  if (currBoard.length != nextBoard.length) return 0;
  var diffIdxs = [];
  var i, j;
 
- if (animationType === "simpleSlidePlaceRemove") {
+ if (animationType.value === "simpleSlidePlaceRemove") {
  var fromIdx = null;
  var toIdx = null;
  var appearDisappearIdx = null;
@@ -71,6 +87,7 @@ const animateImageAutoGUI = (volume: number, animationType: string, currPosition
  appearing = false;
  } else if (currBoard[i] == '-') { // Placement (fade-in)
  appearing = true;
+ toIdx = i;
  } else {
  return 0;
  }
@@ -124,20 +141,32 @@ const animateImageAutoGUI = (volume: number, animationType: string, currPosition
  } else {
  return 0;
  }
-
  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]});
+ 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");
+ // Opacity set to 0.001 and not 0 so that the element remains loaded
+ gsap.fromTo("#piece" + appearDisappearIdx, {autoAlpha: 1}, {duration: 0.5, autoAlpha: 0.001});
+ } else if (appearing === true && appearDisappearIdx != null) { // Play appearing animation
+ var appearingChar = nextBoard[appearDisappearIdx];
+ var svg = document.getElementById('image-autogui'); //Get svg element
+ var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'image'); //Create a path in SVG's namespace
+ newElement.setAttribute("id", "appearingPiece");
+ newElement.setAttribute("x", (centers.value[appearDisappearIdx][0] - 0.5 * pieces.value[appearingChar].scale * widthFactor.value).toString());
+ newElement.setAttribute("y", (centers.value[appearDisappearIdx][1] - 0.5 * pieces.value[appearingChar].scale * widthFactor.value).toString());
+ newElement.setAttribute("width", (pieces.value[appearingChar].scale * widthFactor.value).toString()); //Set path's data
+ newElement.setAttribute("height", (pieces.value[appearingChar].scale * widthFactor.value).toString()); //Set path's data
+ newElement.setAttribute("href", getImageSource(pieces.value[appearingChar].image));
+ newElement.setAttribute("opacity", (0.001).toString());
+ svg!.appendChild(newElement);
+ gsap.fromTo("#appearingPiece", {opacity: 0}, {duration: 0.5, opacity: 1});
  }
- } else if (animationType === "custom") {
+ return 500;
+ } else if (animationType.value === "custom") {
  console.log("Custom");
  }
  return 0;
@@ -152,6 +181,36 @@ export const handleMoveAnimation = (volume: number, currentMatch: Types.Match, m
  return animateSim(volume, moveObj);
  } else if (currentMatch.gameId === 'quarto') {
  return animateQuarto(volume, currPosition, nextPosition, moveObj);
+ } else {
+ return animateImageAutoGUI(volume, currPosition, nextPosition, moveObj);
  }
  return 0;
+}
+
+/*
+ The purpose of this function is to reset any elements whose styles may have
+ changed due to a gsap action. For example, suppose a chess piece with ID
+ "piece0" captures another piece with ID "piece1". The default animation that
+ would have played is "piece0" sliding and "piece1" fading away. 
+ Then in the new position, that capturing piece's new ID would be "piece1". However,
+ "piece1" would still have opacity 0 due to the fadeaway. This function would set
+ "piece1" back to have opacity 1.
+*/
+export const animationEpilogue = (currentMatch: Types.Match) => {
+ if (currentMatch.gameId === 'ttt') {
+ return;
+ } else if (currentMatch.gameId === 'sim') {
+ return;
+ } else if (currentMatch.gameId === 'quarto') {
+ if (document.getElementById("toPlace")) {
+ gsap.set("#toPlace", {x: 58, y: 113});
+ }
+ } else {
+ // Note: gsap.set() is unreliable (only achieves the reset as intended
+ // 50% of the time for some reason) so we use fromTo instead 
+ gsap.to(".entity", {duration: 0.001, opacity: 1});
+ if (document.getElementById("appearingPiece")) {
+ document.getElementById("appearingPiece")?.remove();
+ }
+ }
 }