Skip to content

Commit

Permalink
Kayles image autogui
Browse files Browse the repository at this point in the history
  • Loading branch information
@cameroncheung00
cameroncheung00 committed Sep 23, 2023
1 parent a740c68 commit bc2e591
Show file tree
Hide file tree
Showing 6 changed files with 208 additions and 34 deletions.
1 change: 0 additions & 1 deletion src/components/units/AppGameVariants.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
<div v-if="gameCustom" v-on:click="customBoardRoute">
<img :src="getLogoSource('custom')" :alt="game.name + ' ' + 'Custom Logo'" style="width: 8rem" />
<p>Custom</p>
<i>Data Status: N/A</i>
</div>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/units/GameBody/ImageAutoGUI.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

<!-- Draw Entities -->
<g v-for="(cell, i) in richPositionData.board" :key="'cell' + i">
<image class="entity" v-if="cell != '-' && Object.keys(entities).includes(cell)"
<image class="entity" v-if="cell != '-' && cell in entities"
:id="'entity' + i"
:x="centers[i][0] - 0.5 * entities[cell].scale * widthFactor"
:y="centers[i][1] - 0.5 * entities[cell].scale * widthFactor"
Expand Down Expand Up @@ -54,7 +54,7 @@
@click="!isComputerTurn && store.dispatch(actionTypes.runMove, { move: token.move.str })"/>

<!-- Else use the svg corresponding to the move token. If no svg is mapped to the character, skip. -->
<g v-else-if="Object.keys(entities).includes(token.token)">
<g v-else-if="token.token in entities">
<mask :id="'svgmask' + i">
<image
:x="centers[token.to][0] - 0.5 * entities[token.token].scale * widthFactor"
Expand Down Expand Up @@ -95,8 +95,8 @@
:x2="centers[line.to][0]"
:y2="centers[line.to][1]"
:stroke-linecap="'round'"
:style="'--w: ' + lineWidth + ';--w2: ' + (lineWidth * 1.75) + ';'"
:stroke-width="lineWidth"
:style="'--w: ' + lineWidth * widthFactor + ';--w2: ' + (lineWidth * widthFactor * 1.75) + ';'"
:stroke-width="lineWidth * widthFactor"
:class="'app-game-board-default-line ' + getBoardMoveElementHintClass(line.move)"
:opacity="options.showNextMoveHints && options.showNextMoveDeltaRemotenesses ? line.move.hintOpacity : 1"
@click="!isComputerTurn && store.dispatch(actionTypes.runMove, { move: line.move.str })"/>
Expand Down Expand Up @@ -162,7 +162,7 @@
const foregroundImagePath = computed(() => theTheme.value.foreground || "");
const arrowWidth = computed(() =>
(theTheme.value.arrowWidth * widthFactor.value / 2) || 1.5);
const lineWidth = computed(() => theTheme.value.lineWidth || 0.9);
const lineWidth = computed(() => theTheme.value.lineWidth || 0.04);
const defaultMoveTokenRadius = computed(() =>
(theTheme.value.circleButtonRadius * widthFactor.value) || 2);
const entitiesOverArrows = computed(() => theTheme.value.entitiesOverArrows || false);
Expand Down
169 changes: 169 additions & 0 deletions src/models/images/svg/kayles/x.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/models/images/thumbnail/0to10by1or2-regular.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/models/images/thumbnail/kayles-regular.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
62 changes: 34 additions & 28 deletions src/scripts/gamesmanUni/moveAnimation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,15 +135,17 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
if (nextBoard[i] != '-') { // Entity that will be at center i shall fade in
entitiesAppear = true;
var appearingChar = nextBoard[i];
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'image');
newElement.setAttribute("class", "appearingEntity");
newElement.setAttribute("x", (centers[i][0] - 0.5 * entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("y", (centers[i][1] - 0.5 * entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("width", (entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("height", (entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("href", getImageSource(entities[appearingChar].image));
newElement.setAttribute("opacity", "0.001");
g.appendChild(newElement);
if (appearingChar in entities) {
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'image');
newElement.setAttribute("class", "appearingEntity");
newElement.setAttribute("x", (centers[i][0] - 0.5 * entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("y", (centers[i][1] - 0.5 * entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("width", (entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("height", (entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("href", getImageSource(entities[appearingChar].image));
newElement.setAttribute("opacity", "0.001");
g.appendChild(newElement);
}
}
}
}
Expand All @@ -159,7 +161,7 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
}
let matches;
if (matches = moveObj.move.match(/^([AML])_([a-zA-Z0-9-]+)_([a-zA-Z0-9-]+)_([a-zA-Z0-9-]+)*/)) {
if (Object.keys(sounds).includes(matches[4])) {
if (matches[4] in sounds) {
playAudio(sounds[matches[4]], volume);
}
}
Expand Down Expand Up @@ -194,15 +196,17 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
}
for (i of fadeInIdxs) {
var appearingChar = nextBoard[i];
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'image');
newElement.setAttribute("class", "appearingEntity");
newElement.setAttribute("x", (centers[i][0] - 0.5 * entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("y", (centers[i][1] - 0.5 * entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("width", (entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("height", (entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("href", getImageSource(entities[appearingChar].image));
newElement.setAttribute("opacity", "0.001");
g.appendChild(newElement);
if (appearingChar in entities) {
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'image');
newElement.setAttribute("class", "appearingEntity");
newElement.setAttribute("x", (centers[i][0] - 0.5 * entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("y", (centers[i][1] - 0.5 * entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("width", (entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("height", (entities[appearingChar].scale * widthFactor).toString());
newElement.setAttribute("href", getImageSource(entities[appearingChar].image));
newElement.setAttribute("opacity", "0.001");
g.appendChild(newElement);
}
}

for (const slide of slides) { // Play sliding animations
Expand All @@ -213,15 +217,17 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
gsap.fromTo("#entity" + idxFrom, {autoAlpha: 1}, {duration: 0.001, autoAlpha: 0.001});

var movingChar = currBoard[idxFrom];
if (movingChar in entities) {
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'image');
newElement.setAttribute("id", "movingEntity" + idxFrom);
newElement.setAttribute("x", (fromCoords[0] - 0.5 * entities[movingChar].scale * widthFactor).toString());
newElement.setAttribute("y", (fromCoords[1] - 0.5 * entities[movingChar].scale * widthFactor).toString());
newElement.setAttribute("width", (entities[movingChar].scale * widthFactor).toString());
newElement.setAttribute("height", (entities[movingChar].scale * widthFactor).toString());
newElement.setAttribute("href", getImageSource(entities[movingChar].image));
g.appendChild(newElement);
gsap.to("#movingEntity" + idxFrom, {duration: 0.5, x: toCoords[0] - fromCoords[0], y: toCoords[1] - fromCoords[1]});
newElement.setAttribute("id", "movingEntity" + idxFrom);
newElement.setAttribute("x", (fromCoords[0] - 0.5 * entities[movingChar].scale * widthFactor).toString());
newElement.setAttribute("y", (fromCoords[1] - 0.5 * entities[movingChar].scale * widthFactor).toString());
newElement.setAttribute("width", (entities[movingChar].scale * widthFactor).toString());
newElement.setAttribute("height", (entities[movingChar].scale * widthFactor).toString());
newElement.setAttribute("href", getImageSource(entities[movingChar].image));
g.appendChild(newElement);
gsap.to("#movingEntity" + idxFrom, {duration: 0.5, x: toCoords[0] - fromCoords[0], y: toCoords[1] - fromCoords[1]});
}
}

if (foregroundImagePath !== "") { // Redraw foreground image in front of any newly introduced entities
Expand All @@ -236,7 +242,7 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
}
let matches;
if (matches = moveObj.move.match(/^([AML])_([a-zA-Z0-9-]+)_([a-zA-Z0-9-]+)_([a-zA-Z0-9-]+)*/)) {
if (Object.keys(sounds).includes(matches[4])) {
if (matches[4] in sounds) {
playAudio(sounds[matches[4]], volume);
}
}
Expand Down

0 comments on commit bc2e591

Please sign in to comment.