Skip to content

Commit

Permalink
Allow SVG Game Thumbnails
Browse files Browse the repository at this point in the history
  • Loading branch information
@cameroncheung00
cameroncheung00 committed Oct 21, 2023
1 parent 2193667 commit 6bfaaef
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 50 deletions.
27 changes: 18 additions & 9 deletions src/components/units/AppGameVariants.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,21 +40,30 @@
}
});
const getLogoSource = (variantId: string) => {
const images = import.meta.globEager("../../models/images/thumbnail/*.png");
const logo = import.meta.globEager("../../models/images/logo-gamescrafters.png");
const appLogoFilePath = "../../models/images/logo-gamescrafters.png";
const regularThumbnailFilePath = `../../models/images/thumbnail/${gameId.value}-regular.png`;
const VariantThumbnailFilePath = `../../models/images/thumbnail/${gameId.value}-${variantId}.png`;
const images = import.meta.globEager("../../models/images/thumbnail/*");
try {
return images[VariantThumbnailFilePath].default;
const variantThumbnailSVGPath = `../../models/images/thumbnail/${gameId.value}-${variantId}.svg`;
return images[variantThumbnailSVGPath].default;
} catch (errorMessage) {
//console.warn(`${gameId.value} game's ${variantId} variant logo does not exist yet.`);
try {
return images[regularThumbnailFilePath].default;
const variantThumbnailFilePath = `../../models/images/thumbnail/${gameId.value}-${variantId}.png`;
return images[variantThumbnailFilePath].default;
} catch (errorMessage) {
//console.warn(`${gameId.value} game's regular variant logo does not exist yet.`);
try {
const regularThumbnailSVGPath = `../../models/images/thumbnail/${gameId.value}-regular.svg`;
return images[regularThumbnailSVGPath].default;
} catch (errorMessage) {
try {
const regularThumbnailFilePath = `../../models/images/thumbnail/${gameId.value}-regular.png`;
return images[regularThumbnailFilePath].default;
} catch (errorMessage) {
}
}
}
}
const logo = import.meta.globEager("../../models/images/logo-gamescrafters.png");
const appLogoFilePath = "../../models/images/logo-gamescrafters.png";
return logo[appLogoFilePath].default;
};
const customBoardRoute = () => {
Expand Down
18 changes: 10 additions & 8 deletions src/components/units/AppGames.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,17 +48,19 @@ import type { Game } from "../../scripts/gamesmanUni/types";
const route = useRoute();
const store = useStore();
const getLogoSource = (game: Game) => {
const images = import.meta.globEager("../../models/images/thumbnail/*.png");
const logo = import.meta.globEager("../../models/images/logo-gamescrafters.png");
const appLogoFilePath = "../../models/images/logo-gamescrafters.png";
const gameThumbnailFilePath = `../../models/images/thumbnail/${game.id}-regular.png`;
const images = import.meta.globEager("../../models/images/thumbnail/*");
try {
return images[gameThumbnailFilePath].default;
const regularThumbnailSVGPath = `../../models/images/thumbnail/${game.id}-regular.svg`;
return images[regularThumbnailSVGPath].default;
} catch (errorMessage) {
//console.warn(`${game.name} game logo does not exist yet.`);
try {
const regularThumbnailFilePath = `../../models/images/thumbnail/${game.id}-regular.png`;
return images[regularThumbnailFilePath].default;
} catch (errorMessage) {
}
}
return logo[appLogoFilePath].default;
};
}
const gameType = computed(() => route.params.type as string);
const gameTypeTitle = computed(() => gameType.value[0].toUpperCase() + gameType.value.slice(1));
const search = ref("");
Expand Down
2 changes: 1 addition & 1 deletion src/components/units/AppWelcome.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="welcome">
<h2 id="app-welcome">Play and visualize abstract strategy games!</h2>
<p id="game-info"><strong>44+</strong> games integrated &emsp;&emsp;&emsp; <strong>9+</strong> puzzles strongly solved</p>
<p id="game-info"><strong>54+</strong> games integrated &emsp;&emsp;&emsp; <strong>9+</strong> puzzles strongly solved</p>
<div class="explore-buttons-container">
<button @click="exploreAllGames">Explore All Games</button>
<button @click="exploreAllPuzzles">Explore All Puzzles</button>
Expand Down
15 changes: 3 additions & 12 deletions src/models/images/svg/snake/background.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 removed src/models/images/thumbnail/ttt-regular.png
View file
Binary file not shown.
12 changes: 12 additions & 0 deletions src/models/images/thumbnail/ttt-regular.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.
30 changes: 10 additions & 20 deletions src/scripts/gamesmanUni/moveAnimation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
const scaledHeight = backgroundGeometry[1] * widthFactor;
const animationType = theTheme.animationType || "";
const entities = theTheme.entities;
const sounds = theTheme.sounds || {} as Record<string, string>;
const centers = theTheme.centers.map((a: [number, number]) => a.map((b: number) => b * widthFactor));
const getImageSource = (imagePath: string) => gimages["../../models/images/svg/" + imagePath].default;
const foregroundImagePath = theTheme.foreground || "";
Expand All @@ -138,14 +137,12 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
if (appearingChar in entities) {
entitiesAppear = true;
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'image');
//var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'use');
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("href", getImageSource(entities[appearingChar].image) + '#EntitySVG');
newElement.setAttribute("opacity", "0.001");
g.appendChild(newElement);
}
Expand All @@ -162,12 +159,6 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
if (entitiesAppear) {
gsap.fromTo(".appearingEntity", {opacity: 0.001}, {duration: 0.5, opacity: 1});
}
let matches;
if (matches = moveObj.move.match(/^([AML])_([a-zA-Z0-9-]+)_([a-zA-Z0-9-]+)_([a-zA-Z0-9-]+)*/)) {
if (matches[4] in sounds) {
playAudio(sounds[matches[4]], volume);
}
}
return 500;
} else if (animationType === "simpleSlides") {
for (i = animationWindow[0]; i < animationWindow[1]; i++) {
Expand Down Expand Up @@ -204,14 +195,12 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
if (appearingChar in entities) {
entitiesAppear = true;
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'image');
//var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'use');
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("href", getImageSource(entities[appearingChar].image) + '#EntitySVG');
newElement.setAttribute("opacity", "0");
g.appendChild(newElement);
}
Expand All @@ -227,14 +216,12 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
if (movingChar in entities) {
gsap.fromTo("#entity" + idxFrom, {autoAlpha: 1}, {duration: 0.001, autoAlpha: 0});
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'image');
//var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'use');
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));
//newElement.setAttribute("href", getImageSource(entities[movingChar].image) + '#EntitySVG');
g.appendChild(newElement);
gsap.to("#movingEntity" + idxFrom, {duration: 0.5, x: toCoords[0] - fromCoords[0], y: toCoords[1] - fromCoords[1]});
}
Expand All @@ -250,12 +237,6 @@ const animateImageAutoGUI = (volume: number, currPosition: string, nextPosition:
if (fadeInIdxs.length > 0) {
gsap.fromTo(".appearingEntity", {opacity: 0.001}, {duration: 0.5, opacity: 1});
}
let matches;
if (matches = moveObj.move.match(/^([AML])_([a-zA-Z0-9-]+)_([a-zA-Z0-9-]+)_([a-zA-Z0-9-]+)*/)) {
if (matches[4] in sounds) {
playAudio(sounds[matches[4]], volume);
}
}
return 500
} else if (animationType === "custom") {
console.log("Custom");
Expand All @@ -277,7 +258,16 @@ export const handleMoveAnimation = (volume: number, currentMatch: Types.Match, m
const imageAutoGUIData = store.getters.imageAutoGUIData(store.getters.currentGameType,
store.getters.currentGameId, store.getters.currentVariantId);
if (imageAutoGUIData != null) {
return animateImageAutoGUI(volume, currPosition, nextPosition, moveObj);
var theTheme = imageAutoGUIData.themes[store.getters.currentGameTheme];
const sounds = theTheme.sounds || {} as Record<string, string>;
var duration = animateImageAutoGUI(volume, currPosition, nextPosition, moveObj);
let matches;
if (matches = moveObj.move.match(/^([AML])_([a-zA-Z0-9-]+)_([a-zA-Z0-9-]+)_([a-zA-Z0-9-]+)*/)) {
if (matches[4] in sounds) {
playAudio(sounds[matches[4]], volume);
}
}
return duration;
}
return 0;
}
Expand Down

0 comments on commit 6bfaaef

Please sign in to comment.