diff --git a/css/styles.scss b/css/styles.scss
index 78c487d..5d44f31 100644
--- a/css/styles.scss
+++ b/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;
diff --git a/img/locations/amrita.webp b/img/locations/amrita.webp
new file mode 100644
index 0000000..eb327fc
Binary files /dev/null and b/img/locations/amrita.webp differ
diff --git a/img/locations/charybdis_cave.webp b/img/locations/charybdis_cave.webp
new file mode 100644
index 0000000..dbd4379
Binary files /dev/null and b/img/locations/charybdis_cave.webp differ
diff --git a/img/locations/city_of_the_forgotten_dragon.webp b/img/locations/city_of_the_forgotten_dragon.webp
new file mode 100644
index 0000000..43d1643
Binary files /dev/null and b/img/locations/city_of_the_forgotten_dragon.webp differ
diff --git a/img/locations/dwargon_gate.webp b/img/locations/dwargon_gate.webp
new file mode 100644
index 0000000..21171a3
Binary files /dev/null and b/img/locations/dwargon_gate.webp differ
diff --git a/img/locations/el_dorado.webp b/img/locations/el_dorado.webp
new file mode 100644
index 0000000..7cf1434
Binary files /dev/null and b/img/locations/el_dorado.webp differ
diff --git a/img/locations/elmine.webp b/img/locations/elmine.webp
new file mode 100644
index 0000000..3f3ede6
Binary files /dev/null and b/img/locations/elmine.webp differ
diff --git a/img/locations/ice_palace.webp b/img/locations/ice_palace.webp
new file mode 100644
index 0000000..391bfad
Binary files /dev/null and b/img/locations/ice_palace.webp differ
diff --git a/img/locations/jia.webp b/img/locations/jia.webp
new file mode 100644
index 0000000..16bf8b7
Binary files /dev/null and b/img/locations/jia.webp differ
diff --git a/img/locations/khusha_mountains.webp b/img/locations/khusha_mountains.webp
new file mode 100644
index 0000000..977e0bd
Binary files /dev/null and b/img/locations/khusha_mountains.webp differ
diff --git a/img/locations/lake_siss.webp b/img/locations/lake_siss.webp
new file mode 100644
index 0000000..5f4c0e2
Binary files /dev/null and b/img/locations/lake_siss.webp differ
diff --git a/img/locations/laura.webp b/img/locations/laura.webp
new file mode 100644
index 0000000..e631102
Binary files /dev/null and b/img/locations/laura.webp differ
diff --git a/img/locations/londo.webp b/img/locations/londo.webp
new file mode 100644
index 0000000..0a0d914
Binary files /dev/null and b/img/locations/londo.webp differ
diff --git a/img/locations/lune.webp b/img/locations/lune.webp
new file mode 100644
index 0000000..1366697
Binary files /dev/null and b/img/locations/lune.webp differ
diff --git a/img/locations/marris.webp b/img/locations/marris.webp
new file mode 100644
index 0000000..255171e
Binary files /dev/null and b/img/locations/marris.webp differ
diff --git a/img/locations/rimuru_city.webp b/img/locations/rimuru_city.webp
new file mode 100644
index 0000000..7d33f40
Binary files /dev/null and b/img/locations/rimuru_city.webp differ
diff --git a/img/locations/sealed_cave.webp b/img/locations/sealed_cave.webp
new file mode 100644
index 0000000..16517b5
Binary files /dev/null and b/img/locations/sealed_cave.webp differ
diff --git a/js/SlimeMap.js b/js/SlimeMap.js
index bbe5c35..3b31c97 100644
--- a/js/SlimeMap.js
+++ b/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 ?? ""}">
@@ -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 ?? ""}">
diff --git a/js/locations/capitals.js b/js/locations/capitals.js
index 18f5aa3..39d7b7b 100644
--- a/js/locations/capitals.js
+++ b/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" }
},
diff --git a/js/locations/pois.js b/js/locations/pois.js
index 1a5329d..b1a69e1 100644
--- a/js/locations/pois.js
+++ b/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" }
},
{
diff --git a/js/tooltip.js b/js/tooltip.js
index 3dbe6b0..35708ba 100644
--- a/js/tooltip.js
+++ b/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 ? `${locationName}
` : `
${locationName}
`;
let locationString = `${locationName}
`;
- if (locationDescription) locationString += ``;
+ if (locationDescription || imageUrl) locationString += ``;
if (locationDescription) locationString += `${locationDescription}`;
- if (url) locationString += `
Wiki`;
+ if (imageUrl) locationString += `
`;
+ if (url) locationString += `
Wiki`;
return locationString;
}
\ No newline at end of file