added location images

css/styles.scss

@@ -151,6 +151,12 @@ a {
         font-size: 1.2rem;
     }
 
+    img.locationimg {
+        width: 100%;
+        height: auto;
+        border-radius: 5px;
+    }
+
     .detailbox {
         display: flex;
         //align-items: center;

js/SlimeMap.js

@@ -42,7 +42,10 @@ export default class SlimeMap extends Map {
                 class="location"
                 data-name="${capital.name}"
                 data-url="${capital.url ?? ""}"
-                data-description="${capital.description ?? ""}">
+                data-description="${capital.description ?? ""}"
+                data-image-url="${capital.image?.url ?? ""}"
+                data-image-name="${capital.image?.name ?? ""}"
+                data-image-credit="${capital.image?.credit ?? ""}">
                 <rect x="0" y="0" width="24" height="24" fill="transparent" stroke="transparent" stroke-width="4" />
                 <path d="M4.5 14L3 15V21H7M7 21H10M7 21V13L9.5 11V6L12 3L14.5 6V11L17 13V21M10 21H14M10 21V17C10 15.8954 10.8954 15 12 15C13.1046 15 14 15.8954 14 17V21M14 21H17M17 21H21V15L19.5 14"
                 stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
@@ -58,7 +61,10 @@ export default class SlimeMap extends Map {
                 class="location"
                 data-name="${poi.name}"
                 data-description="${poi.description}"
-                data-url="${poi.url ?? ""}">
+                data-url="${poi.url ?? ""}"
+                data-image-url="${poi.image?.url ?? ""}"
+                data-image-name="${poi.image?.name ?? ""}"
+                data-image-credit="${poi.image?.credit ?? ""}">
                 <rect x="-12" y="-12" width="24" height="24" fill="transparent" stroke="transparent" stroke-width="4" />
                 <polygon points="0,-10 3,-3 10,0 3,3 0,10 -3,3 -10,0 -3,-3"
                     fill="white" stroke="black" stroke-width="1" />

js/locations/capitals.js

@@ -2,10 +2,18 @@
  * @typedef {Object} CapitalData
  * @property {string} name
  * @property {string?} description
+ * @property {CapitalImage?} image
  * @property {string?} url
  * @property {{x:string,y:string}} position
  */
 
+/**
+ * @typedef {Object} CapitalImage
+ * @property {string} url
+ * @property {string} name
+ * @property {string} credit
+ */
+
 /**
  * @type {[CapitalData]}
  */
@@ -13,11 +21,21 @@ export const capitals = [
     {
         name: "Lune",
         description: "The capital of the Holy Empire Lubelius, home of God Luminous.",
+        image: {
+            url: "img/locations/lune.webp",
+            name: "Lune from Episode 50",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken, Episode 50. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         position: { x: "900", y: "930" }
     },
     {
         name: "Rimuru City",
         description: "Central City Rimuru, Capital of the Jura-Tempest Federation.",
+        image: {
+            url: "img/locations/rimuru_city.webp",
+            name: "Rimuru City from Episode 62",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken, Episode 62. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         url: "https://tensura.fandom.com/wiki/Rimuru_City",
         position: { x: "1670", y: "1120" }
     },
@@ -28,56 +46,106 @@ export const capitals = [
     },
     {
         name: "Dwargon Gate",
+        image: {
+            url: "img/locations/dwargon_gate.webp",
+            name: "Dwargon Gate",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         description: "The great gate that acts as the entrance into all of Dwargon's underground cities.",
         position: { x: "1840", y: "880" }
     },
     {
         name: "Amrita",
         description: "The capital of Jistav, formerly Clayman's base of operations.",
+        image: {
+            url: "img/locations/amrita.webp",
+            name: "Claymans Castle with Wetlands from Episode 38",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken, Episode 38. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         url: "https://tensura.fandom.com/wiki/Amrita",
         position: { x: "2280", y: "1000" }
     },
     {
         name: "City of the forgotten Dragon",
         description: "The home of the Dragon Faithful, Milim's worshippers.",
+        image: {
+            url: "img/locations/city_of_the_forgotten_dragon.webp",
+            name: "City of the Forgotten Dragon from Episode 41",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken, Episode 41. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         url: "https://tensura.fandom.com/wiki/City_of_the_Forgotten_Dragon",
         position: { x: "2070", y: "1240" }
     },
     {
         name: "Laura",
         description: "The former capital of the Beast Kingdom of Eurazania. It was reduced to rubble by Milim Nava.",
+        image: {
+            url: "img/locations/laura.webp",
+            name: "Laura",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         position: { x: "1960", y: "1325" }
     },
     {
         name: "Jia",
         description: "The capital of the Harpy Queendom of Fulbrosia.",
+        image: {
+            url: "img/locations/jia.webp",
+            name: "Jia",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken. Sourced from the Tensei Shitara Slime Datta Ken Wiki",
+        },
         position: { x: "1670", y: "1480" }
     },
     {
         name: "Elmine Sarion",
         description: "The Imperial Capital of Sarion.",
+        image: {
+            url: "img/locations/elmine.webp",
+            name: "Elmine Sarion from Episode 61",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken, Episode 61. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         position: { x: "1395", y: "1360" }
     },
     {
         name: "Londo",
         description: "The royal capital and sole city of the kingdom of Blumund.",
+        image: {
+            url: "img/locations/londo.webp",
+            name: "Londo",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         position: { x: "1500", y: "1050" }
     },
     {
         name: "Marris",
         description: "The Royal Capital of Falmuth.",
+        image: {
+            url: "img/locations/marris.webp",
+            name: "Marris",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         url: "https://tensura.fandom.com/wiki/Kingdom_of_Falmuth#Marris",
         position: { x: "1455", y: "870" }
     },
     {
         name: "Frost Palace",
         description: "The home of Guy Crimson and his horde of daemons.",
+        image: {
+            url: "img/locations/ice_palace.webp",
+            name: "Frost Palace",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         url: "https://tensura.fandom.com/wiki/Frost_Palace",
         position: { x: "1200", y: "320" }
     },
     {
         name: "Golden City of El Dorado",
-        description: "The Kingdom of Demon Lord Leon.",
+        description: "The Kingdom of Demon Lord Leon Cromwell.",
+        image: {
+            url: "img/locations/el_dorado.webp",
+            name: "Golden City of El Dorado",
+            credit: "Screenshot from the Tensei Shitara Slime Datta Ken Light Novel. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         url: "https://tensura.fandom.com/wiki/Golden_City_of_El_Dorado",
         position: { x: "800", y: "1565" }
     },

js/locations/pois.js

@@ -2,10 +2,18 @@
  * @typedef {Object} POIData
  * @property {string} name
  * @property {string} description
+ * @property {POIImage?} image
  * @property {string?} url
  * @property {{x:string,y:string}} position
  */
 
+/**
+ * @typedef {Object} POIImage
+ * @property {string} url
+ * @property {string} name
+ * @property {string} credit
+ */
+
 /**
  * @type {[POIData]}
  */
@@ -13,18 +21,33 @@ export const pois = [
     {
         name: "Sealed Cave",
         description: "The cave where Veldora was sealed and where Rimuru was born.",
+        image: {
+            url: "img/locations/sealed_cave.webp",
+            name: "Sealed Cave",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         url: "https://tensura.fandom.com/wiki/Sealed_Cave",
         position: { x: "1680", y: "1080" }
     },
     {
         name: "Lake Siss",
         description: "A great lake fed by the Ameld River. Home to the Lizardman tribe.",
+        image: {
+            url: "img/locations/lake_siss.webp",
+            name: "Lake Siss",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         url: "https://tensura.fandom.com/wiki/Lake%20Siss",
         position: { x: "1850", y: "1121" }
     },
     {
-        name: "Kusha Mountains",
+        name: "Khusha Mountains",
         description: "A large mountain range that runs from the coast into the Jura Forest. Home to the Tengu tribe.",
+        image: {
+            url: "img/locations/khusha_mountains.webp",
+            name: "Khusha Mountains Episode 64",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken, Episode 64. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         url: "https://tensura.fandom.com/wiki/Khusha%20Mountains",
         position: { x: "1618", y: "1240" }
     },
@@ -42,6 +65,11 @@ export const pois = [
     {
         name: "Charybdis Cave",
         description: "The cave where Charybis was sealed by the Chosen Hero in the distant past. It's location was known only to the hero and the Dryads.",
+        image: {
+            url: "img/locations/charybdis_cave.webp",
+            name: "Charybdis Cave from Episode 18",
+            credit: "Screenshot from Tensei Shitara Slime Datta Ken, Episode 18. Sourced from the Tensei Shitara Slime Datta Ken Wiki"
+        },
         position: { x: "1956", y: "1010" }
     },
     {

js/tooltip.js

@@ -154,14 +154,18 @@ function getRegionTooltip(element) {
 function getLocationTooltip(location) {
     const locationName = location.getAttribute('data-name');
     const locationDescription = location.getAttribute('data-description');
+    const imageUrl = location.getAttribute('data-image-url');
+    const imageName = location.getAttribute('data-image-name');
+    const imageCredit = location.getAttribute('data-image-credit');
     const url = location.getAttribute('data-url');
 
     // let locationString = url ? `<a href="${url}" class="titlelink" target="_blank" rel="noreferrer noopener"><h3>${locationName}</h3></a>` : `<h3>${locationName}</h3>`;
     let locationString = `<h3>${locationName}</h3>`;
 
-    if (locationDescription) locationString += `<div class="border"></div>`;
+    if (locationDescription || imageUrl) locationString += `<div class="border"></div>`;
     if (locationDescription) locationString += `<span>${locationDescription}</span>`;
-    if (url) locationString += `<a href="${url}" class="icon" target="_blank" rel="noreferrer noopener" class="more"><img src="img/icons/book.svg">Wiki</a>`;
+    if (imageUrl) locationString += `<img class="locationimg" src="${imageUrl}" alt="${imageName ?? locationName}" title="${imageCredit ?? ""}">`;
+    if (url) locationString += `<a href="${url}" class="icon" target="_blank" rel="noreferrer noopener" class="more"><img src="img/icons/book.svg" alt="wiki icon">Wiki</a>`;
 
     return locationString;
 }