FreezingMoon · MathioLucas · Dec 5, 2024 · Dec 5, 2024 · Dec 5, 2024 · Dec 5, 2024
diff --git 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",

diff --git a/src/avatarGrid.html b/src/avatarGrid.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dynamic Avatar Grid</title>
+  <style>
+    /* Avatar grid styles */
+    .avatar-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+      gap: 16px;
+      padding: 16px;
+    }
+
+    .vignette {
+      background-image: none
+      background-size: cover;
+      background-position: center;
+      width: 100px; 
+      height: 100px; 
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    /* Hover effect for better interactivity */
+    .vignette:hover {
+      transform: scale(1.05);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+  </style>
+</head>
+<body>
+  <h1 style="text-align: center; font-family: Arial, sans-serif;">Dynamic Avatar Grid</h1>
+  <div id="avatar-grid" class="avatar-grid">
+    <!-- The grid will populate dynamically -->
+  </div>
+
+  <script>
+    // Sample list of types to dynamically populate the grid
+    const types = [
+      "typeA1",
+      "typeA2",
+      "typeA3",
+      "typeA4",
+      "typeA5",
+      "typeA6",
+      "typeE1",
+      "typeE2",
+      "typeE3"
+    ]; 
+
+
+    const avatarGrid = document.getElementById("avatar-grid");
+
+
+    types.forEach(type => {
+      const vignette = document.createElement("div");
+      vignette.className = "vignette";
+      vignette.dataset.type = type;
+      avatarGrid.appendChild(vignette);
+    });
+
+    // Dynamically load avatars from avatars.json
+    fetch("./avatars.json") 
+      .then(response => response.json())
+      .then(avatars => {
+        e
+        document.querySelectorAll(".vignette").forEach(element => {
+          const type = element.dataset.type; 
+          const avatarUrl = avatars[type]; 
+          if (avatarUrl) {
+            element.style.setProperty("--avatar-url", `url('${avatarUrl}')`);
+            element.style.backgroundImage = `var(--avatar-url)`;
+          } else {
+            console.warn(`No avatar found for type: ${type}`);
+          }
+        });
+      })
+      .catch(error => console.error("Error loading avatars.json:", error));
+  </script>
+</body>
+</html>
diff --git a/src/avatarLoader.js b/src/avatarLoader.js
@@ -0,0 +1,18 @@
+fetch('./avatars.json')
+  .then(response => response.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;
+
+
+      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));
diff --git a/src/avaters.json 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",
+  ...
+}
diff --git a/src/generateAvatars.js 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}`);
+});
diff --git 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; 
 }