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 += `${imageName ?? locationName}`; + if (url) locationString += `wiki iconWiki`; return locationString; } \ No newline at end of file