From e0b58041d1d6375203a47fe0430b4130de211343 Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Thu, 5 Dec 2024 17:48:58 -0500 Subject: [PATCH 01/12] Create avaters.json new file to map avatar types to their image paths. --- src/avaters.json | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/avaters.json diff --git a/src/avaters.json b/src/avaters.json new file mode 100644 index 000000000..3dfe2b374 --- /dev/null +++ b/src/avaters.json @@ -0,0 +1,13 @@ +{ + "typeA1": "assets/units/avatars/Swine Thug.jpg", + "typeA2": "assets/units/avatars/Bounty Hunter.jpg", + "typeA3": "assets/units/avatars/Cyber Wolf.jpg", + "typeA4": "assets/units/avatars/Greedy Knight.jpg", + "typeA5": "assets/units/avatars/Gilded Maiden.jpg", + "typeA6": "assets/units/avatars/Living Armor.jpg", + "typeA7": "assets/units/avatars/Golden Wyrm.jpg", + "typeE1": "assets/units/avatars/Mr. Stitches.jpg", + "typeE2": "assets/units/avatars/Nutcase.jpg", + "typeE3": "assets/units/avatars/Stomper.jpg", + ... +} From ea24001daa0d44eb5fabbafb10f1f016fb1c87f0 Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Thu, 5 Dec 2024 17:53:41 -0500 Subject: [PATCH 02/12] Update avatars.less Instead of manually specifying a background-image for each type, the avatar image is assigned using JavaScript and the avatars.json file. --- src/style/avatars.less | 204 +---------------------------------------- 1 file changed, 5 insertions(+), 199 deletions(-) diff --git a/src/style/avatars.less b/src/style/avatars.less index 855698a48..668bb26bf 100644 --- a/src/style/avatars.less +++ b/src/style/avatars.less @@ -1,201 +1,7 @@ .vignette { - &.typeA1 { - background-image: url('~assets/units/avatars/Swine Thug.jpg'); - } - - &.typeA2 { - background-image: url('~assets/units/avatars/Bounty Hunter.jpg'); - } - - &.typeA3 { - background-image: url('~assets/units/avatars/Cyber Wolf.jpg'); - } - - &.typeA4 { - background-image: url('~assets/units/avatars/Greedy Knight.jpg'); - } - - &.typeA5 { - background-image: url('~assets/units/avatars/Gilded Maiden.jpg'); - } - - &.typeA6 { - background-image: url('~assets/units/avatars/Living Armor.jpg'); - } - - &.typeA7 { - background-image: url('~assets/units/avatars/Golden Wyrm.jpg'); - } - - &.typeE1 { - background-image: url('~assets/units/avatars/Mr. Stitches.jpg'); - } - - &.typeE2 { - background-image: url('~assets/units/avatars/Nutcase.jpg'); - } - - &.typeE3 { - background-image: url('~assets/units/avatars/Stomper.jpg'); - } - - &.typeE4 { - background-image: url('~assets/units/avatars/Vertigo.jpg'); - } - - &.typeE5 { - background-image: url('~assets/units/avatars/Scorpius.jpg'); - } - - &.typeE6 { - background-image: url('~assets/units/avatars/Spikes.jpg'); - } - - &.typeE7 { - background-image: url('~assets/units/avatars/Batmadillo.jpg'); - } - - &.typeG1 { - background-image: url('~assets/units/avatars/Toxic Shroom.jpg'); - } - - &.typeG2 { - background-image: url('~assets/units/avatars/Swampler.jpg'); - } - - &.typeG3 { - background-image: url('~assets/units/avatars/Uncle Fungus.jpg'); - } - - &.typeG4 { - background-image: url('~assets/units/avatars/Miss Creeper.jpg'); - } - - &.typeG5 { - background-image: url('~assets/units/avatars/Papa Eggplant.jpg'); - } - - &.typeG6 { - background-image: url('~assets/units/avatars/Razorback.jpg'); - } - - &.typeG7 { - background-image: url('~assets/units/avatars/Moss Hound.jpg'); - } - - &.typeL1 { - background-image: url('~assets/units/avatars/Asher.jpg'); - } - - &.typeL2 { - background-image: url('~assets/units/avatars/Infernal.jpg'); - } - - &.typeL3 { - background-image: url('~assets/units/avatars/Metalist.jpg'); - } - - &.typeL4 { - background-image: url('~assets/units/avatars/Crystalis.jpg'); - } - - &.typeL5 { - background-image: url('~assets/units/avatars/Vulcan.jpg'); - } - - &.typeL6 { - background-image: url('~assets/units/avatars/Lavamander.jpg'); - } - - &.typeL7 { - background-image: url('~assets/units/avatars/Volpyr.jpg'); - } - - &.typeP1 { - background-image: url('~assets/units/avatars/Gumble.jpg'); - } - - &.typeP2 { - background-image: url('~assets/units/avatars/Royal Guard.jpg'); - } - - &.typeP3 { - background-image: url('~assets/units/avatars/Scavenger.jpg'); - } - - &.typeP4 { - background-image: url('~assets/units/avatars/Troglodyte.jpg'); - } - - &.typeP5 { - background-image: url('~assets/units/avatars/Aegis.jpg'); - } - - &.typeP6 { - background-image: url('~assets/units/avatars/Chimera.jpg'); - } - - &.typeP7 { - background-image: url('~assets/units/avatars/Abolished.jpg'); - } - - &.typeS1 { - background-image: url('~assets/units/avatars/Snow Bunny.jpg'); - } - - &.typeS2 { - background-image: url('~assets/units/avatars/Blue Shrimp.jpg'); - } - - &.typeS3 { - background-image: url('~assets/units/avatars/Deep Beauty.jpg'); - } - - &.typeS4 { - background-image: url('~assets/units/avatars/Knightmare.jpg'); - } - - &.typeS5 { - background-image: url('~assets/units/avatars/Impaler.jpg'); - } - - &.typeS6 { - background-image: url('~assets/units/avatars/Kraken.jpg'); - } - - &.typeS7 { - background-image: url('~assets/units/avatars/Vehemoth.jpg'); - } - - &.typeW1 { - background-image: url('~assets/units/avatars/Mangler.jpg'); - } - - &.typeW2 { - background-image: url('~assets/units/avatars/Shadow Leech.jpg'); - } - - &.typeW3 { - background-image: url('~assets/units/avatars/Cycloper.jpg'); - } - - &.typeW4 { - background-image: url('~assets/units/avatars/Headless.jpg'); - } - - &.typeW5 { - background-image: url('~assets/units/avatars/Horn Head.jpg'); - } - - &.typeW6 { - background-image: url('~assets/units/avatars/Satyr.jpg'); - } - - &.typeW7 { - background-image: url('~assets/units/avatars/Sarcophag.jpg'); - } - - &.typeWS { - background-image: url('~assets/units/avatars/Shadow Leech.jpg'); - } + background-image: var(--avatar-url); + background-size: cover; + background-position: center; + width: 100px; + height: 100px; } From 809fa44f5d4617008b2dfc83e44af43512b68e94 Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Thu, 5 Dec 2024 17:57:03 -0500 Subject: [PATCH 03/12] Create avatarLoader.js Handles dynamic assignment of avatar images using the avatars.json configuration. --- src/avatarLoader.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/avatarLoader.js diff --git a/src/avatarLoader.js b/src/avatarLoader.js new file mode 100644 index 000000000..f8a279ee3 --- /dev/null +++ b/src/avatarLoader.js @@ -0,0 +1,15 @@ +fetch('./avatars.json') + .then(response => response.json()) + .then(avatars => { + document.querySelectorAll('.vignette').forEach(element => { + const type = element.dataset.type; + const avatarUrl = avatars[type]; + + if (avatarUrl) { + element.style.setProperty('--avatar-url', `url('${avatarUrl}')`); + } else { + console.warn(`Avatar type "${type}" not found.`); + } + }); + }) + .catch(error => console.error('Error loading avatar configuration:', error)); From 22abe8bc4a0614f4d1f6e107e7e1cbccf770f600 Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Thu, 5 Dec 2024 18:01:07 -0500 Subject: [PATCH 04/12] Create generateAvatars.js Automatically generates avatars.json at build time by scanning the avatars folder. --- src/generateAvatars.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/generateAvatars.js diff --git a/src/generateAvatars.js b/src/generateAvatars.js new file mode 100644 index 000000000..839aa3310 --- /dev/null +++ b/src/generateAvatars.js @@ -0,0 +1,18 @@ +const fs = require('fs'); +const path = require('path'); + +const avatarsDir = './src/assets/units/avatars'; +const outputFilePath = './src/avatars.json'; + +fs.readdir(avatarsDir, (err, files) => { + if (err) throw err; + + const avatars = {}; + files.forEach(file => { + const type = path.basename(file, path.extname(file)); + avatars[`type${type}`] = `${avatarsDir}/${file}`; + }); + + fs.writeFileSync(outputFilePath, JSON.stringify(avatars, null, 2)); + console.log(`Avatar configuration saved to ${outputFilePath}`); +}); From 47ba38a5a9fbe7e914caf3dade3414a0d704f7df Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Thu, 5 Dec 2024 18:09:36 -0500 Subject: [PATCH 05/12] Update package.json Confirms avatars.json is generated correctly and included in the deployed build directory. --- package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package.json b/package.json index d13333c1e..e905f5598 100644 --- a/package.json +++ b/package.json @@ -77,6 +77,10 @@ }, "engines": { "node": "20.x" + "scripts": { + "build": "node generateAvatars.js && your-build-command" + } + }, "scripts": { "build": "webpack --mode=production", From b1f305a19a93e466109e6b50b53db0fd66f1b0de Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Thu, 5 Dec 2024 18:10:24 -0500 Subject: [PATCH 06/12] Update avatarLoader.js --- src/avatarLoader.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/avatarLoader.js b/src/avatarLoader.js index f8a279ee3..90048aaa0 100644 --- a/src/avatarLoader.js +++ b/src/avatarLoader.js @@ -4,6 +4,9 @@ fetch('./avatars.json') document.querySelectorAll('.vignette').forEach(element => { const type = element.dataset.type; const avatarUrl = avatars[type]; + const fallbackUrl = 'assets/default-avatar.jpg'; + const avatarUrl = avatars[type] || fallbackUrl; + if (avatarUrl) { element.style.setProperty('--avatar-url', `url('${avatarUrl}')`); From 4a321beca0727f5faefe5b66ab4ffba9df6b9ccf Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Thu, 5 Dec 2024 18:13:44 -0500 Subject: [PATCH 07/12] Create avatarGrid.html --- src/avatarGrid.html | 84 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 src/avatarGrid.html diff --git a/src/avatarGrid.html b/src/avatarGrid.html new file mode 100644 index 000000000..4fa995de4 --- /dev/null +++ b/src/avatarGrid.html @@ -0,0 +1,84 @@ + + + + + + Dynamic Avatar Grid + + + +

Dynamic Avatar Grid

+
+ +
+ + + + From 6aaf36f725a05c211c4a5c375b1d5a23b4baf911 Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Wed, 18 Dec 2024 21:42:59 -0500 Subject: [PATCH 08/12] Update package.json Thanks for the comments! I added the missing closing brace, removed the duplicate section and fix some formatting and comma placements. --- package.json | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/package.json b/package.json index e905f5598..50969e54f 100644 --- a/package.json +++ b/package.json @@ -77,13 +77,9 @@ }, "engines": { "node": "20.x" - "scripts": { - "build": "node generateAvatars.js && your-build-command" - } - }, "scripts": { - "build": "webpack --mode=production", + "build": "node generateAvatars.js && webpack --mode=production", "build:dev": "webpack --mode=development", "start": "cross-env NODE_ENV=production webpack-dev-server", "start:dev": "cross-env NODE_ENV=development webpack-dev-server", From e9143815c354984a90f57ec7f354e13ebf68c6da Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Wed, 18 Dec 2024 21:44:09 -0500 Subject: [PATCH 09/12] Update avatarLoader.js There was a duplicate "avatarUrl --- src/avatarLoader.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/avatarLoader.js b/src/avatarLoader.js index 90048aaa0..8593600b7 100644 --- a/src/avatarLoader.js +++ b/src/avatarLoader.js @@ -3,7 +3,6 @@ fetch('./avatars.json') .then(avatars => { document.querySelectorAll('.vignette').forEach(element => { const type = element.dataset.type; - const avatarUrl = avatars[type]; const fallbackUrl = 'assets/default-avatar.jpg'; const avatarUrl = avatars[type] || fallbackUrl; From eda0154ccc87f54b69afa232a5571b9144b93418 Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Wed, 18 Dec 2024 21:44:37 -0500 Subject: [PATCH 10/12] Update avatarGrid.html Was missing a semicolon --- src/avatarGrid.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/avatarGrid.html b/src/avatarGrid.html index 4fa995de4..e0e611bfd 100644 --- a/src/avatarGrid.html +++ b/src/avatarGrid.html @@ -14,7 +14,7 @@ } .vignette { - background-image: none + background-image: none; background-size: cover; background-position: center; width: 100px; From 67322ca94fb55e9a10779afa3d722cff52431b10 Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Wed, 18 Dec 2024 21:46:22 -0500 Subject: [PATCH 11/12] Update avatarGrid.html there was a stray 'e' here .then(avatars => { e document.querySelectorAll(".vignette") --- src/avatarGrid.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/avatarGrid.html b/src/avatarGrid.html index e0e611bfd..63fb4d38e 100644 --- a/src/avatarGrid.html +++ b/src/avatarGrid.html @@ -66,7 +66,7 @@

Dynamic Avatar G fetch("./avatars.json") .then(response => response.json()) .then(avatars => { - e + document.querySelectorAll(".vignette").forEach(element => { const type = element.dataset.type; const avatarUrl = avatars[type]; From aeecd0aae3fe22cc7af0338ae67ce3a054fe8447 Mon Sep 17 00:00:00 2001 From: MathioLucas <162763121+MathioLucas@users.noreply.github.com> Date: Wed, 18 Dec 2024 21:52:58 -0500 Subject: [PATCH 12/12] Update package.json small formating changes --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 50969e54f..0f5fe25b0 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,9 @@ "version": "0.5.0", "description": "Ancient Beast Game", "main": "deploy/index.html", - "homepage": "https://AncientBeast.com", + "homepage": "https://ancientbeast.com", "author": " Dread Knight ", - "license": " (CC-BY-SA-4.0 OR AGPL-3.0)", + "license": "(CC-BY-SA-4.0 OR AGPL-3.0)", "repository": { "type": "git", "url": "https://github.com/FreezingMoon/AncientBeast.git"