diff --git a/src/components/units/AppGameVariants.vue b/src/components/units/AppGameVariants.vue index 5994d7b7..cc98268c 100644 --- a/src/components/units/AppGameVariants.vue +++ b/src/components/units/AppGameVariants.vue @@ -10,7 +10,6 @@

Custom

- Data Status: N/A
diff --git a/src/components/units/GameBody/ImageAutoGUI.vue b/src/components/units/GameBody/ImageAutoGUI.vue index 8918401b..a557d937 100644 --- a/src/components/units/GameBody/ImageAutoGUI.vue +++ b/src/components/units/GameBody/ImageAutoGUI.vue @@ -24,7 +24,7 @@ - - + @@ -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); diff --git a/src/models/images/svg/kayles/x.svg b/src/models/images/svg/kayles/x.svg new file mode 100644 index 00000000..402ea302 --- /dev/null +++ b/src/models/images/svg/kayles/x.svg @@ -0,0 +1,169 @@ + + + + Bowling Pin + + + + + + + + + + + + + + image/svg+xml + + + + + Openclipart + + + Bowling Pin + 2010-04-24T19:51:28 + A bowling pin. + https://openclipart.org/detail/51313/bowling-pin-by-mazeo + + + mazeo + + + + + bowling + bowling pin + sports + tenpin + + + + + + + + + + + diff --git a/src/models/images/thumbnail/0to10by1or2-regular.png b/src/models/images/thumbnail/0to10by1or2-regular.png index a9a4eb9b..6f197a75 100644 Binary files a/src/models/images/thumbnail/0to10by1or2-regular.png and b/src/models/images/thumbnail/0to10by1or2-regular.png differ diff --git a/src/models/images/thumbnail/kayles-regular.png b/src/models/images/thumbnail/kayles-regular.png index 891db25f..04b89964 100644 Binary files a/src/models/images/thumbnail/kayles-regular.png and b/src/models/images/thumbnail/kayles-regular.png differ diff --git a/src/scripts/gamesmanUni/moveAnimation.ts b/src/scripts/gamesmanUni/moveAnimation.ts index ab736e23..a747450e 100644 --- a/src/scripts/gamesmanUni/moveAnimation.ts +++ b/src/scripts/gamesmanUni/moveAnimation.ts @@ -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); + } } } } @@ -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); } } @@ -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 @@ -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 @@ -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); } }