initial commit

2024-10-20 23:07:17 +02:00
commit 56bd7c6111
45 changed files with 1058 additions and 0 deletions
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="DISABLE" />
+    <option name="description" value="" />
+    <option name="applicationTheme" value="default" />
+    <option name="iconsTheme" value="default" />
+    <option name="button1Title" value="" />
+    <option name="button1Url" value="" />
+    <option name="button2Title" value="" />
+    <option name="button2Url" value="" />
+    <option name="customApplicationId" value="" />
+  </component>
+</project>
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/slime_map.iml" filepath="$PROJECT_DIR$/.idea/slime_map.iml" />
+    </modules>
+  </component>
+</project>
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="scss" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="SCSS" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array />
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="sass" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>
@@ -0,0 +1,5 @@
+# Ignore all CSS files
+*.css
+
+# Ignore all CSS map files
+*.css.map
@@ -0,0 +1,80 @@
+/* cormorant-garamond-300 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Cormorant Garamond';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* cormorant-garamond-300italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Cormorant Garamond';
+    font-style: italic;
+    font-weight: 300;
+    src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* cormorant-garamond-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Cormorant Garamond';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* cormorant-garamond-italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Cormorant Garamond';
+    font-style: italic;
+    font-weight: 400;
+    src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* cormorant-garamond-500 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Cormorant Garamond';
+    font-style: normal;
+    font-weight: 500;
+    src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* cormorant-garamond-500italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Cormorant Garamond';
+    font-style: italic;
+    font-weight: 500;
+    src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* cormorant-garamond-600 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Cormorant Garamond';
+    font-style: normal;
+    font-weight: 600;
+    src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* cormorant-garamond-600italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Cormorant Garamond';
+    font-style: italic;
+    font-weight: 600;
+    src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* cormorant-garamond-700 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Cormorant Garamond';
+    font-style: normal;
+    font-weight: 700;
+    src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* cormorant-garamond-700italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Cormorant Garamond';
+    font-style: italic;
+    font-weight: 700;
+    src: url('../../fonts/cormant_garamond/cormorant-garamond-v16-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
@@ -0,0 +1,128 @@
+/* crimson-pro-200 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: normal;
+    font-weight: 200;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-200italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: italic;
+    font-weight: 200;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-300 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: normal;
+    font-weight: 300;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-300italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: italic;
+    font-weight: 300;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: italic;
+    font-weight: 400;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-500 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: normal;
+    font-weight: 500;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-500italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: italic;
+    font-weight: 500;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-600 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: normal;
+    font-weight: 600;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-600italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: italic;
+    font-weight: 600;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-700 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: normal;
+    font-weight: 700;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-700italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: italic;
+    font-weight: 700;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-800 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: normal;
+    font-weight: 800;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-800italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: italic;
+    font-weight: 800;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-900 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: normal;
+    font-weight: 900;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* crimson-pro-900italic - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Crimson Pro';
+    font-style: italic;
+    font-weight: 900;
+    src: url('../../fonts/crimson_pro/crimson-pro-v24-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
@@ -0,0 +1,169 @@
+@import "fonts/cormant_garamont.css";
+//@import "fonts/crimson_pro.css";
+
+:root {
+    --header-font: "Cormorant Garamond", sans-serif;
+    --body-font: "Crimson Pro", sans-serif;
+}
+
+body {
+    height: 100vh;
+    overflow: hidden;
+
+    padding: 0;
+    margin: 0;
+
+    max-width: 100vw;
+
+    display: flex;
+
+    background-color: #1a1312;
+
+    color: #d78453;
+    font-size: 16px;
+
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: "Cormorant Garamond", sans-serif;
+    font-weight: 700;
+}
+
+span.muted, s {
+    color: #a8a8a8;
+}
+
+#map-container {
+    display: flex;
+    position: relative;
+    max-height: 100vh;
+    max-width: 100%;
+    flex: 1;
+}
+
+.region {
+    transition: all 0.3s ease;
+    //stroke: #3a3a3a;
+    stroke-dasharray: 10;
+}
+
+.region:hover {
+    stroke: #fca171;
+    fill: rgb(252, 161, 113, .3);
+}
+
+.legend {
+    display: flex;
+    flex-direction: column;
+    padding: 0 15px;
+    flex-grow: 1;
+
+    h1 {
+        font-size: 3rem;
+        font-weight: 700;
+        width: fit-content;
+        margin-bottom: 12px;
+        margin-top: 20px;
+
+        @media (max-width: 768px) {
+            font-size: 1rem;
+        }
+    }
+
+    .border {
+        width: 100%;
+        height: 1px;
+        background-color: #d78453;
+    }
+}
+
+@media (max-width: 1200px) {
+    body {
+        flex-direction: column;
+    }
+
+    .legend {
+        max-width: 100%;
+    }
+}
+
+.tooltip {
+    position: absolute;
+    display: none;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    border-radius: 5px;
+    z-index: 1000;
+    max-width: 300px;
+
+    flex-direction: column;
+    gap: 15px;
+
+    //-webkit-user-select: none;
+    //-ms-user-select: none;
+    //user-select: none;
+
+    h3 {
+        margin: 0;
+        font-size: 26px;
+    }
+
+    a {
+        color: #fff;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    .border {
+        width: 100%;
+        height: 1px;
+        background-color: #fff;
+    }
+
+    span {
+        font-size: 1.2rem;
+    }
+
+    .detailbox {
+        display: flex;
+        //align-items: center;
+        gap: 7px;
+
+        img,svg {
+            --hw: 23px;
+            height: var(--hw);
+            width: var(--hw);
+            min-width: var(--hw);
+        }
+
+        span {
+            font-size: 1.2rem;
+            //margin-top: 0px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        h3 {
+            font-size: 1.2rem;
+        }
+
+        span {
+            font-size: .8rem;
+        }
+
+        .detailbox {
+            img, svg {
+                --hw: 15px;
+            }
+
+            span {
+                font-size: .8rem;
+            }
+        }
+    }
+}
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1080 1080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <rect id="Slime1" x="0" y="0" width="1080" height="1080" style="fill:none;"/>
+    <g id="Slime11" serif:id="Slime1">
+        <g transform="matrix(1.28337,0,0,1.16811,-180.035,-185.45)">
+            <path d="M561.05,323.265C766.297,323.265 932.931,469.719 932.931,634.069C932.931,710.653 913.233,798.053 853.822,850.837C785.735,911.329 670.646,917.319 561.05,918.829C509.456,919.539 354.945,911.263 278.383,852.428C191.728,785.838 185.79,665.391 189.168,621.047C201.651,457.171 355.803,323.265 561.05,323.265Z" style="fill:rgb(148,185,230);"/>
+        </g>
+        <g transform="matrix(1.28337,0,0,1.16811,-180.035,-185.45)">
+            <path d="M278.102,852.212C191.715,785.577 185.794,665.343 189.168,621.047C201.651,457.171 355.803,323.265 561.05,323.265C766.297,323.265 932.931,469.719 932.931,634.069C932.931,710.653 913.233,798.053 853.822,850.837C785.735,911.329 670.646,917.319 561.05,918.829C539.159,919.13 498.742,917.814 453.613,911.705C487,915.475 516.069,916.322 532.794,916.092C628.819,914.77 729.658,909.521 789.314,856.519C841.369,810.271 858.628,733.693 858.628,666.592C858.628,522.592 712.627,394.273 532.794,394.273C352.961,394.273 217.897,511.598 206.96,655.182C204.094,692.801 208.88,792.929 278.102,852.212Z" style="fill:rgb(226,243,247);"/>
+        </g>
+        <g transform="matrix(0.892074,0.451889,-0.451889,0.892074,-79.5914,-257.357)">
+            <path d="M576.643,605.299C660.044,577.719 744.958,554.269 838.673,554.847" style="fill:none;stroke:rgb(104,115,168);stroke-width:26px;"/>
+        </g>
+        <g transform="matrix(-0.928107,0.372314,0.372314,0.928107,1132.93,-221.946)">
+            <path d="M576.643,605.299C660.044,577.719 744.958,554.269 838.673,554.847" style="fill:none;stroke:rgb(104,115,168);stroke-width:26px;"/>
+        </g>
+        <g transform="matrix(0.999986,0.00532957,-0.00532957,0.999986,8.8923,-3.4187)">
+            <path d="M561.132,569.389C561.132,569.389 588.969,553.506 612.634,549.122" style="fill:none;stroke:rgb(104,115,168);stroke-width:10px;"/>
+        </g>
+        <g transform="matrix(-0.993731,-0.1118,-0.1118,0.993731,1037.97,78.5512)">
+            <path d="M561.132,569.389C561.132,569.389 588.969,553.506 612.634,549.122" style="fill:none;stroke:rgb(104,115,168);stroke-width:10px;"/>
+        </g>
+    </g>
+</svg>
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive Tensei Shitara Slime Datta Ken Map</title>
+    <meta name="description" content="Interactive map of the central world of Tensei Shitara Slime Datta Ken (That Time I Got Reincarnated as a Slime)">
+
+    <link href="css/styles.css" rel="stylesheet">
+</head>
+<body>
+
+<svg id="map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2641 2035"></svg>
+
+<div id="tooltip" class="tooltip"></div>
+
+<div class="legend">
+    <h1>Interactive Map of the Magic Continent</h1>
+    <div class="border"></div>
+</div>
+
+<script src="js/locations/nations.js"></script>
+<script src="js/locations/capitals.js"></script>
+<script src="js/locations/pois.js"></script>
+<script src="js/mapBuilder.js"></script>
+<script src="js/tooltip.js"></script>
+</body>
+</html>
@@ -0,0 +1,68 @@
+/**
+ * @typedef {Object} CapitalData
+ * @property {string} name
+ * @property {string?} url
+ * @property {{x:string,y:string}} position
+ */
+
+/**
+ * @type {[CapitalData]}
+ */
+const capitals = [
+    {
+        name: "Lune",
+        position: { x: "900", y: "930" }
+    },
+    {
+        name: "Rimuru City",
+        url: "https://tensura.fandom.com/wiki/Rimuru_City",
+        position: { x: "1670", y: "1120" }
+    },
+    {
+        name: "Imprerial Capital Nasca",
+        position: { x: "2070", y: "730" }
+    },
+    {
+        name: "Dwargon Gate",
+        position: { x: "1840", y: "880" }
+    },
+    {
+        name: "Amrita",
+        url: "https://tensura.fandom.com/wiki/Amrita",
+        position: { x: "2280", y: "1000" }
+    },
+    {
+        name: "City of the forgotten Dragon",
+        position: { x: "2070", y: "1240" }
+    },
+    {
+        name: "Laura",
+        position: { x: "1960", y: "1325" }
+    },
+    {
+        name: "Jia",
+        position: { x: "1670", y: "1480" }
+    },
+    {
+        name: "Elmine Sarion",
+        position: { x: "1395", y: "1360" }
+    },
+    {
+        name: "Londo",
+        position: { x: "1500", y: "1050" }
+    },
+    {
+        name: "Marris",
+        position: { x: "1455", y: "870" }
+    },
+    {
+        name: "Frost Palace",
+        url: "https://tensura.fandom.com/wiki/Frost_Palace",
+        position: { x: "1200", y: "320" }
+    },
+    {
+        name: "Golden City of El Dorado",
+        url: "https://tensura.fandom.com/wiki/Golden_City_of_El_Dorado",
+        position: { x: "800", y: "1565" }
+    },
+]
@@ -0,0 +1,178 @@
+/**
+ * @typedef {Object} NationData
+ * @property {string} name
+ * @property {string} capital
+ * @property {string} description
+ * @property {string} ruler
+ * @property {string} population
+ * @property {string?} url
+ * @property {string} points
+ */
+
+/**
+ * @type {[NationData]}
+ */
+const nations = [
+    {
+        name: "Kingdom of Englassia",
+        url: "https://tensura.fandom.com/wiki/Kingdom_of_Englassia",
+        ruler: "King Aegil",
+        capital: "Lura",
+        population: "20M Citizens<br>20M Free Association",
+        description: "A large country rivaling the Kingdom of Falmuth, the cultural center among the western countries. International organizations such as the Free Association and the western alliance are headquartered here.",
+        points: "1123, 936, 1118, 967, 1112, 1015, 1115, 1041, 1115, 1063, 1125, 1083, 1145, 1109, 1179, 1124, 1215, 1134, 1251, 1145, 1284, 1155, 1319, 1154, 1346, 1155, 1369, 1157, 1384, 1144, 1393, 1127, 1397, 1105, 1400, 1088, 1410, 1073, 1425, 1061, 1401, 1049, 1379, 1035, 1346, 1012, 1326, 996, 1317, 979, 1322, 960, 1330, 953, 1316, 945, 1305, 948, 1292, 943, 1278, 945, 1266, 952, 1243, 959, 1227, 959, 1206, 959, 1186, 961, 1171, 951, 1157, 941"
+    },
+    {
+        name: "Kingdom of Falmuth",
+        url: "https://tensura.fandom.com/wiki/Kingdom_of_Falmuth",
+        ruler: "King Edward<br><s>King Edomalis</s>",
+        capital: "Marris",
+        population: "30M Citizens<br>10M Free Association",
+        description: "One of the major powers among the western countries, a feudalistic society that stronly favors the nobility. Prospers as a trade route between the eastern and western sides of the continent.",
+        points: "1377, 970, 1351, 975, 1318, 975, 1326, 996, 1346, 1012, 1377, 1034, 1401, 1049, 1423, 1060, 1445, 1067, 1462, 1069, 1476, 1067, 1493, 1056, 1505, 1048, 1521, 1039, 1537, 1030, 1549, 1027, 1557, 1026, 1567, 1027, 1575, 1015, 1598, 991, 1610, 977, 1630, 955, 1605, 940, 1584, 928, 1566, 915, 1547, 901, 1533, 887, 1519, 866, 1509, 845, 1503, 826, 1497, 803, 1490, 784, 1474, 799, 1462, 816, 1449, 829, 1444, 851, 1432, 870, 1420, 882, 1407, 899, 1391, 912, 1382, 933, 1372, 946, 1380, 956"
+    },
+    {
+        name: "Armed Nation of Dwargon",
+        url: "https://tensura.fandom.com/wiki/Armed_Nation_of_Dwargon",
+        ruler: "King Gazel Dwargo",
+        capital: "Dwargon",
+        population: "50M Dwarves<br>50M Other Races",
+        description: "A country carved into the Great Canaat Mountains in the north of the continent, known for its advanced technology and craftsmanship.",
+        points: "1489, 782, 1497, 805, 1502, 825, 1508, 843, 1518, 863, 1532, 884, 1545, 900, 1565, 913, 1584, 926, 1604, 939, 1630, 954, 1647, 964, 1668, 972, 1694, 983, 1713, 990, 1733, 995, 1759, 996, 1781, 994, 1795, 988, 1817, 978, 1837, 967, 1859, 954, 1877, 943, 1903, 924, 1922, 904, 1937, 887, 1949, 871, 1960, 851, 1968, 827, 1977, 803, 1978, 786, 1972, 776, 1965, 784, 1966, 799, 1955, 809, 1948, 827, 1936, 830, 1916, 827, 1906, 822, 1898, 834, 1890, 845, 1886, 837, 1881, 824, 1883, 814, 1886, 802, 1889, 790, 1888, 775, 1880, 766, 1876, 756, 1865, 755, 1857, 745, 1847, 738, 1842, 728, 1841, 715, 1844, 700, 1844, 685, 1846, 668, 1834, 660, 1810, 648, 1788, 635, 1773, 635, 1749, 635, 1736, 642, 1722, 646, 1707, 648, 1698, 659, 1687, 671, 1678, 682, 1670, 690, 1654, 688, 1639, 693, 1629, 703, 1618, 706, 1605, 703, 1594, 697, 1586, 694, 1575, 698, 1561, 703, 1548, 704, 1534, 706, 1525, 714, 1510, 727, 1499, 738, 1495, 753, 1494, 765, 1494, 776"
+    },
+    {
+        name: "Kingdom of Blumund",
+        url: "https://tensura.fandom.com/wiki/Kingdom_of_Blumund",
+        ruler: "King Drum Blumund",
+        capital: "Royal Capital Londo",
+        population: "1M Citizens<br>500K Free Association",
+        description: "A small country located in the center of the continent, known for its peaceful coexistence with the surrounding nations. Farming and livestock are commonplace, but most products are used up by the country itself.",
+        points: "1474, 1067, 1493, 1056, 1504, 1047, 1520, 1040, 1536, 1030, 1548, 1027, 1555, 1026, 1565, 1027, 1562, 1036, 1556, 1046, 1554, 1056, 1560, 1065, 1570, 1073, 1574, 1084, 1574, 1098, 1573, 1112, 1574, 1125, 1575, 1139, 1574, 1150, 1567, 1163, 1557, 1171, 1547, 1181, 1541, 1188, 1527, 1186, 1511, 1183, 1498, 1177, 1489, 1171, 1481, 1162, 1474, 1151, 1472, 1138, 1473, 1118, 1478, 1101, 1480, 1088, 1477, 1076"
+    },
+    {
+        name: "Jura-Tempest Federation",
+        url: "https://tensura.fandom.com/wiki/Jura-Tempest_Federation",
+        ruler: "Demon Lord Rimuru Tempest",
+        capital: "Rimuru City",
+        population: "Ever-growing",
+        description: "A union of different races spanning the Great Jura Forest, led by the powerful Demon Lord Rimuru Tempest. Known for its peaceful coexistence and rapid growth.",
+        points: "1541, 1188, 1546, 1181, 1556, 1172, 1566, 1165, 1573, 1151, 1575, 1138, 1573, 1125, 1572, 1111, 1575, 1097, 1574, 1084, 1570, 1073, 1561, 1064, 1554, 1056, 1555, 1045, 1561, 1037, 1564, 1028, 1575, 1014, 1598, 992, 1609, 978, 1629, 955, 1644, 964, 1665, 973, 1693, 984, 1711, 989, 1730, 995, 1756, 997, 1779, 994, 1795, 988, 1817, 979, 1838, 966, 1859, 954, 1877, 943, 1901, 925, 1920, 906, 1936, 888, 1949, 870, 1960, 851, 1974, 855, 1989, 860, 2005, 864, 2019, 866, 2030, 870, 2043, 873, 2055, 876, 2069, 879, 2083, 881, 2098, 885, 2110, 887, 2124, 890, 2134, 892, 2145, 894, 2152, 894, 2156, 904, 2161, 915, 2164, 928, 2168, 943, 2170, 954, 2171, 970, 2171, 981, 2171, 992, 2169, 1003, 2167, 1015, 2163, 1032, 2159, 1042, 2153, 1053, 2144, 1068, 2137, 1079, 2130, 1090, 2120, 1100, 2112, 1109, 2101, 1118, 2090, 1129, 2078, 1136, 2068, 1143, 2059, 1149, 2047, 1157, 2036, 1165, 2023, 1172, 2012, 1178, 1997, 1182, 1977, 1183, 1964, 1184, 1954, 1192, 1947, 1202, 1942, 1216, 1939, 1228, 1936, 1241, 1927, 1252, 1909, 1264, 1889, 1272, 1871, 1276, 1855, 1281, 1837, 1286, 1823, 1290, 1807, 1296, 1792, 1301, 1778, 1307, 1761, 1314, 1738, 1323, 1719, 1332, 1704, 1338, 1688, 1345, 1671, 1352, 1657, 1360, 1644, 1365, 1631, 1373, 1620, 1378, 1610, 1373, 1598, 1374, 1588, 1376, 1578, 1374, 1569, 1385, 1562, 1368, 1558, 1350, 1554, 1333, 1551, 1322, 1549, 1310, 1546, 1296, 1543, 1279, 1541, 1262, 1536, 1244, 1532, 1231, 1530, 1217, 1532, 1202"
+    },
+    {
+        name: "Eastern Empire",
+        url: "https://tensura.fandom.com/wiki/Nasca_Namrium_Ulmeria_United_Eastern_Empire",
+        ruler: "Emperor Masayuki Rudra Nam Ul Nasca",
+        capital: "Imperial Capital Nasca",
+        population: "800M Citizens<br>10M Free Association",
+        description: "A vast, militaristic power with ambitions of territorial expansion, the Eastern Empire boasts a formidable army and cutting-edge technology, driven by a desire for dominance over the Central Continent.",
+        points: "2151, 894, 2145, 894, 2133, 891, 2122, 889, 2110, 886, 2096, 884, 2082, 880, 2069, 878, 2055, 874, 2043, 871, 2030, 869, 2018, 865, 2005, 863, 1990, 859, 1974, 854, 1960, 850, 1967, 827, 1977, 803, 1979, 784, 1972, 774, 1976, 760, 1977, 744, 1975, 728, 1973, 717, 1960, 701, 1951, 691, 1954, 670, 1955, 654, 1956, 637, 1956, 618, 1951, 604, 1943, 592, 1935, 583, 1923, 571, 1912, 567, 1899, 559, 1892, 543, 1892, 533, 1888, 523, 1877, 512, 1866, 504, 1860, 497, 1858, 481, 1862, 471, 1873, 463, 1885, 457, 1892, 456, 1902, 460, 1914, 465, 1917, 466, 1922, 473, 1928, 477, 1939, 480, 1949, 477, 1963, 474, 1970, 471, 1977, 470, 1986, 475, 1997, 480, 2006, 483, 2022, 476, 2029, 471, 2039, 472, 2052, 467, 2062, 462, 2076, 456, 2081, 454, 2092, 460, 2097, 466, 2101, 473, 2105, 482, 2108, 493, 2112, 500, 2118, 507, 2127, 513, 2132, 519, 2143, 522, 2154, 524, 2165, 525, 2177, 523, 2192, 520, 2205, 517, 2213, 515, 2227, 520, 2236, 531, 2242, 542, 2246, 553, 2242, 561, 2241, 567, 2250, 582, 2258, 592, 2264, 591, 2276, 593, 2290, 592, 2301, 585, 2312, 572, 2317, 561, 2318, 538, 2315, 523, 2312, 509, 2303, 501, 2289, 496, 2284, 484, 2277, 475, 2274, 465, 2281, 457, 2296, 456, 2313, 457, 2328, 454, 2337, 444, 2350, 443, 2365, 442, 2378, 445, 2390, 451, 2403, 459, 2410, 463, 2415, 472, 2416, 482, 2423, 492, 2435, 500, 2440, 506, 2439, 518, 2434, 527, 2435, 537, 2438, 551, 2438, 559, 2431, 568, 2421, 583, 2417, 593, 2408, 598, 2404, 608, 2399, 624, 2394, 644, 2388, 646, 2371, 643, 2367, 655, 2368, 668, 2375, 677, 2386, 687, 2400, 684, 2411, 676, 2430, 660, 2432, 651, 2431, 640, 2439, 637, 2452, 642, 2459, 653, 2463, 664, 2465, 684, 2464, 701, 2463, 713, 2461, 729, 2458, 743, 2460, 753, 2467, 764, 2476, 778, 2474, 799, 2470, 817, 2467, 831, 2468, 841, 2475, 850, 2480, 858, 2479, 871, 2475, 885, 2471, 891, 2474, 903, 2470, 909, 2463, 915, 2455, 923, 2449, 931, 2444, 942, 2434, 934, 2423, 926, 2411, 919, 2397, 912, 2385, 905, 2371, 900, 2355, 895, 2339, 892, 2322, 891, 2302, 891, 2285, 892, 2271, 894, 2250, 896, 2231, 897, 2211, 898, 2186, 897, 2169, 896, 2159, 895"
+    },
+    {
+        name: "Puppet Nation of Jistav",
+        url: "https://tensura.fandom.com/wiki/Puppet_Nation_of_Jistav",
+        ruler: "Demon Lord Milim Nava<br><s>Clayman</s><br><s>Kagali</s>",
+        capital: "Amrita",
+        population: "100M (Large number of slaves)",
+        description: "The Puppet Nation of Jistav, once a formidable dark elf kingdom, has become a shadow of its former glory, now dependent on slave labor and external military aid for survival. Following Clayman’s death, the Demon Lord Milim Nava has taken control of the nation.",
+        points: "2113, 1107, 2119, 1101, 2129, 1092, 2138, 1078, 2144, 1069, 2153, 1053, 2158, 1042, 2163, 1032, 2167, 1014, 2169, 1003, 2171, 991, 2172, 981, 2171, 969, 2170, 953, 2168, 941, 2165, 928, 2161, 916, 2155, 905, 2149, 893, 2158, 894, 2169, 895, 2183, 898, 2208, 898, 2229, 898, 2248, 896, 2268, 895, 2282, 892, 2299, 891, 2321, 891, 2339, 893, 2352, 894, 2369, 899, 2385, 905, 2395, 911, 2409, 917, 2420, 925, 2431, 933, 2444, 942, 2443, 953, 2442, 959, 2436, 967, 2432, 975, 2431, 984, 2432, 993, 2435, 1003, 2438, 1012, 2444, 1022, 2446, 1028, 2449, 1033, 2451, 1038, 2459, 1041, 2467, 1040, 2474, 1042, 2476, 1049, 2483, 1052, 2487, 1060, 2492, 1068, 2496, 1076, 2501, 1083, 2503, 1089, 2504, 1097, 2504, 1104, 2506, 1110, 2508, 1116, 2512, 1122, 2519, 1129, 2525, 1138, 2531, 1144, 2533, 1151, 2532, 1158, 2532, 1168, 2532, 1178, 2528, 1185, 2522, 1190, 2515, 1193, 2512, 1194, 2502, 1202, 2493, 1206, 2481, 1201, 2464, 1191, 2452, 1181, 2442, 1175, 2440, 1165, 2436, 1157, 2429, 1149, 2415, 1134, 2404, 1133, 2394, 1130, 2385, 1124, 2379, 1129, 2371, 1131, 2366, 1129, 2357, 1141, 2353, 1154, 2353, 1161, 2359, 1167, 2357, 1172, 2359, 1177, 2351, 1181, 2340, 1183, 2328, 1181, 2317, 1179, 2304, 1175, 2293, 1170, 2281, 1166, 2269, 1159, 2259, 1154, 2243, 1145, 2230, 1138, 2219, 1132, 2206, 1125, 2194, 1121, 2177, 1117, 2162, 1114, 2146, 1111, 2131, 1110"
+    },
+    {
+        name: "Capital of the Forgotten Dragon",
+        url: "https://tensura.fandom.com/wiki/City_of_the_Forgotten_Dragon",
+        ruler: "Demon Lord Milim Nava",
+        capital: "Dragon City",
+        population: "< 100K",
+        description: "The City of the Forgotten Dragon, ruled by Demon Lord Milim, is a dragonewt society where resources are distributed equally through a temple-led system, blending communal support with rewards for hard work.",
+        points: "1926, 1251, 1935, 1241, 1937, 1229, 1940, 1217, 1944, 1206, 1953, 1193, 1962, 1185, 1976, 1183, 1995, 1182, 2010, 1179, 2022, 1173, 2036, 1164, 2046, 1159, 2058, 1150, 2066, 1144, 2076, 1137, 2089, 1129, 2101, 1117, 2112, 1109, 2129, 1109, 2144, 1110, 2161, 1114, 2175, 1117, 2192, 1121, 2204, 1125, 2217, 1131, 2229, 1139, 2241, 1145, 2257, 1153, 2266, 1158, 2278, 1165, 2291, 1170, 2302, 1175, 2316, 1179, 2327, 1181, 2338, 1183, 2350, 1182, 2357, 1178, 2375, 1195, 2384, 1198, 2390, 1205, 2397, 1213, 2407, 1223, 2417, 1230, 2423, 1233, 2422, 1237, 2414, 1236, 2413, 1244, 2419, 1254, 2428, 1263, 2434, 1267, 2434, 1275, 2434, 1282, 2426, 1300, 2420, 1312, 2411, 1325, 2406, 1333, 2397, 1340, 2392, 1351, 2389, 1361, 2384, 1373, 2376, 1381, 2368, 1385, 2358, 1385, 2346, 1381, 2338, 1373, 2327, 1372, 2310, 1370, 2296, 1366, 2290, 1352, 2279, 1341, 2278, 1347, 2285, 1361, 2286, 1365, 2278, 1365, 2268, 1367, 2258, 1365, 2252, 1369, 2246, 1374, 2246, 1381, 2236, 1383, 2222, 1387, 2209, 1389, 2197, 1393, 2185, 1396, 2176, 1400, 2172, 1401, 2165, 1397, 2153, 1396, 2148, 1393, 2144, 1384, 2140, 1375, 2134, 1368, 2122, 1361, 2117, 1350, 2109, 1344, 2097, 1343, 2084, 1343, 2074, 1343, 2064, 1337, 2054, 1335, 2046, 1335, 2040, 1327, 2034, 1320, 2024, 1319, 2014, 1314, 2000, 1308, 1986, 1299, 1972, 1290, 1964, 1285, 1953, 1272, 1946, 1263, 1938, 1257"
+    },
+    {
+        name: "Beast Kingdom of Eurazania",
+        url: "https://tensura.fandom.com/wiki/Beast_Kingdom_of_Eurazania",
+        ruler: "Demon Lord Milim Nava <span class='muted'>(Ruler)</span><br>Carrion <span class='muted'>(Governor, former ruler)</span>",
+        capital: "Laura",
+        population: "3M Higher-ranking Citizens<br>300M Citizens of Weaker Races</span>",
+        description: "Eurazania, is a might-based society of bestial demi-humans where only the strongest enjoy privileges. The nation thrives on agriculture and bartering, with a formidable military led by the elite Beast Master’s Brigade.",
+        points: "1777, 1306, 1793, 1301, 1805, 1296, 1822, 1290, 1835, 1287, 1853, 1282, 1870, 1277, 1889, 1272, 1908, 1264, 1925, 1252, 1935, 1255, 1943, 1263, 1951, 1272, 1961, 1283, 1970, 1290, 1984, 1298, 1998, 1307, 2011, 1314, 2023, 1319, 2026, 1325, 2041, 1340, 2050, 1348, 2051, 1356, 2046, 1368, 2042, 1382, 2041, 1393, 2040, 1401, 2044, 1413, 2045, 1427, 2046, 1440, 2044, 1448, 2040, 1456, 2034, 1462, 2034, 1469, 2040, 1477, 2043, 1484, 2041, 1490, 2037, 1495, 2026, 1503, 2019, 1508, 2015, 1520, 2012, 1528, 2008, 1536, 2000, 1533, 1993, 1527, 1989, 1519, 1985, 1513, 1977, 1511, 1970, 1514, 1962, 1518, 1954, 1521, 1946, 1523, 1939, 1528, 1932, 1533, 1926, 1537, 1923, 1543, 1922, 1529, 1921, 1516, 1920, 1502, 1919, 1491, 1917, 1480, 1916, 1470, 1915, 1459, 1913, 1446, 1909, 1437, 1905, 1427, 1900, 1416, 1894, 1407, 1887, 1397, 1881, 1389, 1874, 1380, 1867, 1372, 1858, 1363, 1848, 1352, 1840, 1345, 1831, 1338, 1822, 1331, 1814, 1326, 1803, 1319, 1792, 1314, 1783, 1310"
+    },
+    {
+        name: "Harpy Queendom of Fulbrosia",
+        url: "https://tensura.fandom.com/wiki/Harpy_Queendom_of_Fulbrosia",
+        ruler: "Demon Lord Milim Nava <span class='muted'>(Official)</span><br>Frey <span class='muted'>(Actual)</span>",
+        capital: "Jia",
+        population: "1M",
+        description: "The Harpy Queendom of Fulbrosia, ruled by former Demon Lord Frey, is a mountain-top nation where only flight-capable citizens reside. Known for its elite aerial military, the Heaven Fliers, and its rich mineral resources, the queendom is a powerful vassal under Milim Nava.",
+        points: "1619, 1379, 1628, 1374, 1643, 1365, 1655, 1361, 1670, 1353, 1687, 1345, 1703, 1338, 1718, 1333, 1736, 1325, 1759, 1316, 1778, 1306, 1783, 1310, 1790, 1314, 1802, 1319, 1811, 1324, 1819, 1330, 1829, 1337, 1838, 1344, 1845, 1351, 1857, 1362, 1865, 1370, 1873, 1380, 1880, 1388, 1885, 1395, 1892, 1406, 1898, 1413, 1903, 1425, 1907, 1435, 1911, 1444, 1913, 1457, 1914, 1467, 1915, 1478, 1916, 1489, 1918, 1501, 1919, 1514, 1920, 1527, 1922, 1542, 1918, 1550, 1910, 1557, 1899, 1559, 1887, 1562, 1875, 1568, 1864, 1575, 1854, 1582, 1843, 1590, 1840, 1597, 1841, 1606, 1840, 1614, 1832, 1624, 1823, 1633, 1811, 1644, 1799, 1653, 1782, 1669, 1780, 1680, 1781, 1691, 1781, 1703, 1776, 1715, 1771, 1724, 1762, 1733, 1752, 1742, 1744, 1751, 1736, 1760, 1727, 1770, 1722, 1779, 1717, 1790, 1716, 1797, 1708, 1808, 1704, 1816, 1702, 1825, 1698, 1831, 1693, 1832, 1687, 1828, 1682, 1823, 1677, 1814, 1673, 1798, 1673, 1788, 1674, 1775, 1676, 1763, 1677, 1750, 1677, 1737, 1683, 1722, 1687, 1710, 1692, 1700, 1693, 1691, 1691, 1687, 1696, 1678, 1703, 1672, 1708, 1664, 1710, 1653, 1704, 1644, 1694, 1637, 1680, 1626, 1671, 1618, 1663, 1609, 1656, 1595, 1654, 1581, 1656, 1566, 1659, 1540, 1660, 1527, 1662, 1515, 1657, 1508, 1658, 1498, 1657, 1489, 1649, 1480, 1642, 1472, 1644, 1465, 1647, 1457, 1649, 1444, 1652, 1436, 1654, 1427, 1656, 1417, 1655, 1409, 1643, 1401, 1635, 1392, 1627, 1384"
+    },
+    {
+        name: "Various Western States",
+        url: "https://tensura.fandom.com/wiki/Magic_Continent#Various_Western_States",
+        ruler: "",
+        capital: "",
+        population: "",
+        description: "The Western States are a collection of small, independent nations, each with its own governance and culture.",
+        points: "1114, 1061, 1124, 1081, 1142, 1109, 1178, 1124, 1213, 1134, 1249, 1145, 1282, 1155, 1318, 1154, 1344, 1155, 1368, 1157, 1384, 1145, 1393, 1126, 1397, 1104, 1399, 1090, 1410, 1073, 1422, 1061, 1444, 1066, 1460, 1069, 1472, 1066, 1474, 1074, 1478, 1087, 1476, 1099, 1473, 1115, 1471, 1136, 1473, 1151, 1478, 1161, 1485, 1171, 1496, 1177, 1509, 1184, 1525, 1186, 1537, 1190, 1531, 1201, 1529, 1215, 1530, 1231, 1536, 1244, 1540, 1260, 1541, 1276, 1543, 1295, 1546, 1309, 1550, 1324, 1538, 1323, 1527, 1319, 1510, 1314, 1496, 1311, 1483, 1307, 1468, 1303, 1456, 1301, 1445, 1299, 1432, 1297, 1421, 1295, 1409, 1295, 1395, 1295, 1377, 1297, 1364, 1299, 1352, 1303, 1334, 1308, 1321, 1311, 1308, 1317, 1291, 1323, 1281, 1328, 1268, 1334, 1258, 1339, 1246, 1343, 1236, 1347, 1225, 1352, 1214, 1351, 1202, 1355, 1192, 1361, 1182, 1364, 1175, 1365, 1169, 1372, 1164, 1373, 1156, 1367, 1148, 1360, 1139, 1354, 1130, 1345, 1122, 1336, 1114, 1332, 1108, 1331, 1099, 1335, 1090, 1333, 1078, 1335, 1067, 1337, 1059, 1338, 1049, 1332, 1042, 1329, 1032, 1332, 1020, 1334, 1010, 1337, 1000, 1337, 989, 1335, 977, 1333, 964, 1332, 954, 1333, 946, 1331, 941, 1325, 935, 1318, 927, 1315, 918, 1315, 910, 1310, 904, 1303, 900, 1293, 901, 1283, 904, 1278, 911, 1274, 924, 1268, 932, 1265, 943, 1261, 952, 1255, 958, 1249, 964, 1240, 972, 1234, 976, 1226, 980, 1214, 980, 1203, 978, 1188, 986, 1179, 995, 1170, 1001, 1163, 1008, 1154, 1013, 1144, 1018, 1135, 1023, 1124, 1026, 1112, 1025, 1100, 1028, 1090, 1033, 1081, 1042, 1075, 1053, 1069, 1064, 1067, 1074, 1066, 1086, 1064, 1099, 1063"
+    },
+    {
+        name: "The Sorcerous Dynasty of Sarion",
+        url: "https://tensura.fandom.com/wiki/Sorcerous_Dynasty_of_Sarion",
+        ruler: "Elmesia El Ru Sarion",
+        capital: "Elmine Sarion",
+        population: "100M Citizens<br>20M Free Association",
+        description: "An empire with thirteen elven noble families. Many of the population have elven ancestry and knowledge of magic. The empire is known for its magical prowess and its ability to manipulate the elements. Not part of the western alliance.",
+        points: "1186, 1363, 1196, 1359, 1201, 1355, 1212, 1351, 1224, 1353, 1235, 1349, 1244, 1344, 1257, 1340, 1268, 1335, 1279, 1330, 1291, 1324, 1306, 1319, 1321, 1314, 1334, 1309, 1351, 1304, 1364, 1300, 1378, 1297, 1393, 1296, 1408, 1296, 1420, 1296, 1431, 1298, 1446, 1300, 1455, 1303, 1466, 1304, 1483, 1308, 1495, 1311, 1510, 1315, 1526, 1319, 1536, 1323, 1549, 1325, 1553, 1333, 1557, 1350, 1560, 1367, 1568, 1384, 1562, 1395, 1555, 1403, 1554, 1412, 1554, 1426, 1552, 1436, 1552, 1450, 1554, 1464, 1549, 1472, 1547, 1479, 1545, 1492, 1547, 1502, 1556, 1510, 1558, 1515, 1550, 1526, 1539, 1519, 1527, 1515, 1518, 1514, 1505, 1511, 1494, 1510, 1482, 1510, 1468, 1515, 1453, 1522, 1435, 1532, 1425, 1541, 1425, 1552, 1434, 1561, 1425, 1561, 1415, 1565, 1405, 1570, 1396, 1570, 1387, 1565, 1376, 1561, 1367, 1557, 1359, 1555, 1352, 1551, 1337, 1552, 1330, 1548, 1320, 1536, 1311, 1528, 1309, 1522, 1301, 1516, 1291, 1511, 1280, 1495, 1271, 1480, 1262, 1464, 1253, 1447, 1244, 1429, 1232, 1412, 1218, 1393, 1208, 1389, 1201, 1382, 1188, 1381, 1182, 1376, 1194, 1361, 1199, 1356"
+    },
+    {
+        name: "Republic of Ulgracia",
+        url: "https://tensura.fandom.com/wiki/Republic_of_Ulgracia",
+        ruler: "",
+        capital: "Galut",
+        population: "10M Citizens<br>1M Free Association",
+        description: "A prosperous nation known for its technological advancements and emphasis on education, diplomacy, and commerce, Ulgreisia thrives as a hub of innovation and peaceful cooperation with its neighboring nations",
+        points: "1434, 1560, 1425, 1552, 1425, 1542, 1435, 1533, 1452, 1523, 1468, 1516, 1480, 1511, 1492, 1510, 1504, 1511, 1516, 1514, 1526, 1515, 1537, 1518, 1548, 1524, 1540, 1533, 1534, 1539, 1528, 1548, 1519, 1559, 1515, 1571, 1506, 1577, 1492, 1582, 1481, 1584, 1469, 1582, 1455, 1572, 1441, 1564"
+    },
+    {
+        name: "Holy Empire of Lubelius",
+        url: "https://tensura.fandom.com/wiki/Holy_Empire_of_Lubelius",
+        ruler: "Luminous Valentine (Holy Figure)<br>Louis Valentine (Holy Emperor)",
+        capital: "Lune",
+        population: "20M",
+        description: "The headquarters of the Western Saint's Chruch, a communistic theocracy led by the pope. A wealthy country amoong the western alliance with vast wheat producing regions.",
+        points: "1123, 936, 1117, 967, 1112, 1013, 1114, 1038, 1113, 1060, 1099, 1063, 1085, 1063, 1073, 1066, 1063, 1066, 1053, 1068, 1041, 1074, 1033, 1080, 1028, 1090, 1024, 1100, 1026, 1110, 1023, 1123, 1018, 1133, 1012, 1143, 1008, 1152, 1002, 1160, 995, 1170, 986, 1178, 978, 1187, 964, 1182, 949, 1176, 939, 1171, 923, 1163, 911, 1157, 900, 1152, 890, 1146, 879, 1141, 864, 1132, 852, 1123, 844, 1118, 835, 1110, 826, 1103, 819, 1096, 811, 1087, 803, 1079, 797, 1071, 790, 1061, 783, 1053, 775, 1043, 768, 1034, 757, 1021, 748, 1009, 741, 999, 734, 989, 727, 979, 721, 969, 713, 957, 704, 945, 698, 935, 690, 922, 684, 912, 682, 907, 690, 903, 696, 897, 703, 891, 713, 887, 717, 884, 722, 876, 726, 866, 729, 860, 732, 852, 740, 843, 744, 834, 744, 822, 740, 814, 740, 809, 734, 801, 734, 788, 727, 778, 731, 769, 735, 760, 743, 754, 751, 749, 757, 741, 765, 730, 772, 721, 782, 715, 790, 713, 798, 710, 807, 713, 814, 716, 821, 716, 826, 721, 830, 728, 838, 734, 849, 738, 856, 740, 868, 742, 879, 742, 885, 741, 890, 736, 896, 732, 902, 727, 905, 721, 905, 715, 900, 710, 901, 704, 898, 697, 892, 695, 891, 689, 897, 684, 905, 679, 915, 675, 921, 679, 926, 680, 936, 679, 948, 678, 954, 676, 961, 675, 971, 677, 974, 679, 977, 685, 983, 690, 987, 694, 993, 697, 998, 699, 1003, 706, 1008, 711, 1009, 718, 1009, 727, 1010, 736, 1015, 743, 1019, 751, 1023, 758, 1027, 766, 1030, 775, 1032, 784, 1024, 801, 1026, 813, 1028, 825, 1029, 838, 1030, 849, 1032, 861, 1036, 874, 1041, 883, 1048, 891, 1056, 898, 1064, 904, 1067, 909, 1067, 916, 1068, 922, 1080, 927, 1090, 930, 1102, 933"
+    },
+    {
+        name: "Barren Lands",
+        url: "https://tensura.fandom.com/wiki/Magic_Continent#Barren_Lands",
+        ruler: "Demon Lord Dagruel",
+        capital: "",
+        population: "",
+        description: "Region furthest west on the 'Magic Continent'. It is a great expanse of inhospitable sandy desert contamined with magicule radiations and the territory of Demon Lord Dagruel.",
+        points: "681, 908, 684, 913, 689, 922, 696, 933, 703, 943, 711, 956, 719, 969, 725, 977, 733, 988, 739, 997, 747, 1008, 755, 1019, 768, 1034, 774, 1043, 783, 1054, 789, 1061, 797, 1071, 803, 1079, 811, 1087, 818, 1096, 825, 1103, 833, 1109, 841, 1117, 850, 1123, 863, 1132, 878, 1141, 888, 1147, 899, 1152, 909, 1156, 921, 1163, 937, 1170, 948, 1177, 965, 1183, 974, 1187, 979, 1201, 981, 1214, 975, 1226, 972, 1233, 963, 1240, 958, 1248, 950, 1254, 943, 1260, 932, 1264, 923, 1268, 910, 1272, 903, 1277, 899, 1282, 899, 1291, 902, 1301, 909, 1309, 916, 1314, 926, 1322, 926, 1329, 922, 1336, 918, 1342, 912, 1345, 905, 1346, 897, 1350, 887, 1356, 868, 1356, 850, 1356, 842, 1362, 810, 1398, 809, 1406, 806, 1415, 795, 1418, 786, 1415, 777, 1409, 769, 1404, 758, 1398, 749, 1393, 742, 1385, 738, 1375, 733, 1365, 728, 1360, 712, 1361, 701, 1363, 691, 1369, 677, 1364, 669, 1358, 665, 1346, 657, 1346, 648, 1346, 641, 1343, 632, 1345, 623, 1345, 615, 1343, 608, 1334, 599, 1321, 591, 1314, 582, 1306, 570, 1304, 560, 1293, 551, 1281, 543, 1271, 536, 1266, 524, 1270, 512, 1275, 504, 1284, 499, 1293, 496, 1305, 489, 1311, 476, 1313, 465, 1318, 452, 1324, 439, 1331, 428, 1338, 423, 1345, 424, 1352, 414, 1357, 402, 1361, 385, 1356, 385, 1348, 384, 1340, 381, 1337, 389, 1330, 397, 1323, 405, 1312, 412, 1303, 413, 1292, 413, 1278, 425, 1267, 435, 1257, 441, 1250, 452, 1248, 463, 1248, 474, 1250, 483, 1252, 491, 1254, 503, 1249, 520, 1239, 524, 1231, 523, 1221, 519, 1211, 514, 1203, 508, 1198, 491, 1197, 482, 1195, 472, 1187, 467, 1179, 464, 1168, 463, 1164, 454, 1166, 445, 1166, 437, 1164, 434, 1170, 430, 1178, 420, 1184, 409, 1192, 403, 1198, 402, 1205, 405, 1213, 407, 1220, 402, 1229, 392, 1233, 383, 1238, 368, 1250, 360, 1252, 351, 1247, 343, 1241, 335, 1237, 325, 1236, 316, 1229, 310, 1221, 304, 1213, 301, 1207, 292, 1204, 277, 1203, 268, 1201, 259, 1196, 251, 1192, 243, 1189, 232, 1189, 223, 1187, 215, 1182, 205, 1177, 195, 1177, 184, 1177, 179, 1174, 175, 1165, 171, 1158, 162, 1152, 155, 1148, 147, 1145, 138, 1138, 131, 1136, 122, 1131, 118, 1123, 116, 1112, 114, 1104, 110, 1093, 114, 1083, 117, 1077, 115, 1060, 118, 1057, 124, 1059, 128, 1058, 136, 1055, 142, 1057, 148, 1063, 155, 1070, 162, 1075, 169, 1080, 180, 1081, 190, 1079, 197, 1078, 204, 1083, 211, 1087, 218, 1091, 225, 1097, 230, 1098, 240, 1100, 251, 1102, 262, 1101, 271, 1097, 277, 1093, 283, 1085, 291, 1077, 299, 1078, 307, 1078, 318, 1080, 333, 1081, 342, 1080, 349, 1075, 351, 1068, 356, 1059, 357, 1047, 358, 1039, 353, 1033, 347, 1026, 341, 1017, 335, 1009, 329, 999, 323, 990, 316, 981, 306, 976, 294, 971, 286, 961, 282, 954, 272, 946, 263, 940, 251, 931, 234, 931, 224, 920, 223, 909, 220, 900, 216, 891, 213, 882, 216, 874, 220, 867, 220, 858, 215, 849, 211, 844, 217, 825, 226, 827, 233, 824, 240, 817, 241, 813, 241, 803, 238, 794, 238, 782, 239, 774, 233, 763, 235, 753, 245, 749, 253, 747, 262, 751, 272, 751, 278, 753, 283, 760, 287, 772, 294, 782, 303, 789, 314, 794, 322, 797, 330, 804, 341, 808, 351, 811, 360, 815, 369, 818, 374, 823, 378, 831, 388, 844, 395, 854, 415, 874, 424, 874, 433, 876, 441, 876, 445, 882, 462, 878, 474, 873, 484, 870, 494, 868, 502, 872, 511, 879, 522, 882, 535, 885, 547, 888, 555, 893, 563, 895, 574, 896, 582, 893, 592, 892, 601, 892, 608, 899, 614, 906, 622, 914, 633, 923, 642, 923, 652, 920, 665, 915"
+    },
+    {
+        name: "El Dorado",
+        url: "https://tensura.fandom.com/wiki/Golden_City_of_El_Dorado",
+        ruler: "Demon Lord Leon Cromwell",
+        capital: "Golden City of El Dorado",
+        population: "20M",
+        description: "The Golden City of El Dorado is a magical realm characterized by its lush districts and protected by powerful barriers. Centered around a majestic active volcano, the city thrives on its rich natural reserves of precious metals, with a vibrant mining economy that fuels its opulent capital while facilitating discreet trade with neighboring nations.",
+        points: "803, 1544, 818, 1545, 831, 1555, 844, 1560, 860, 1561, 869, 1561, 884, 1555, 893, 1554, 900, 1557, 911, 1558, 917, 1566, 925, 1572, 937, 1579, 950, 1586, 959, 1593, 966, 1597, 958, 1602, 952, 1606, 955, 1610, 966, 1605, 974, 1602, 979, 1605, 985, 1609, 995, 1613, 1004, 1615, 1015, 1616, 1024, 1618, 1031, 1623, 1038, 1629, 1046, 1636, 1053, 1646, 1059, 1657, 1068, 1671, 1072, 1681, 1072, 1689, 1068, 1698, 1067, 1706, 1064, 1713, 1058, 1723, 1050, 1726, 1046, 1733, 1046, 1742, 1049, 1751, 1053, 1759, 1055, 1765, 1064, 1771, 1072, 1776, 1076, 1781, 1078, 1795, 1084, 1807, 1090, 1813, 1101, 1818, 1112, 1819, 1122, 1823, 1136, 1823, 1148, 1828, 1157, 1830, 1165, 1828, 1165, 1836, 1160, 1842, 1155, 1848, 1144, 1848, 1138, 1852, 1116, 1851, 1108, 1854, 1105, 1859, 1095, 1867, 1086, 1873, 1076, 1877, 1066, 1884, 1060, 1891, 1052, 1898, 1042, 1902, 1030, 1907, 1018, 1911, 1002, 1911, 992, 1906, 984, 1896, 978, 1891, 947, 1883, 939, 1887, 926, 1892, 913, 1891, 898, 1891, 891, 1893, 878, 1903, 872, 1909, 865, 1920, 853, 1926, 833, 1932, 818, 1933, 805, 1929, 794, 1925, 781, 1929, 762, 1933, 749, 1937, 740, 1934, 736, 1925, 737, 1916, 744, 1909, 753, 1905, 761, 1899, 771, 1886, 772, 1883, 786, 1879, 801, 1871, 805, 1857, 806, 1841, 808, 1836, 802, 1824, 802, 1819, 791, 1812, 783, 1817, 774, 1821, 762, 1821, 756, 1822, 750, 1836, 756, 1848, 752, 1853, 744, 1853, 734, 1858, 725, 1853, 716, 1846, 712, 1834, 704, 1824, 694, 1808, 687, 1799, 680, 1794, 666, 1795, 657, 1791, 650, 1788, 632, 1788, 618, 1776, 610, 1774, 599, 1769, 589, 1765, 580, 1766, 575, 1770, 566, 1768, 554, 1769, 554, 1769, 541, 1757, 530, 1748, 522, 1750, 510, 1749, 494, 1747, 480, 1747, 465, 1747, 450, 1749, 432, 1744, 416, 1739, 407, 1725, 398, 1720, 384, 1711, 385, 1687, 391, 1681, 401, 1677, 415, 1681, 427, 1682, 442, 1680, 456, 1675, 467, 1667, 486, 1663, 502, 1660, 508, 1665, 515, 1673, 524, 1677, 536, 1681, 549, 1681, 561, 1679, 570, 1679, 584, 1676, 592, 1671, 603, 1665, 613, 1659, 616, 1648, 617, 1639, 615, 1632, 627, 1625, 635, 1619, 645, 1610, 657, 1611, 668, 1609, 685, 1609, 694, 1607, 705, 1596, 718, 1579, 735, 1568, 745, 1560, 757, 1554, 768, 1549, 781, 1544, 790, 1542"
+    },
+    {
+        name: "Frozen Continent",
+        url: "https://tensura.fandom.com/wiki/Ice_Continent",
+        ruler: "Demon Lord Guy Crimson<br><s>Great Sorcerer Emperor Jahil</s>",
+        capital: "",
+        population: "Next to no organic life",
+        description: "The Ice Continent, governed by Guy Crimson, is a frigid land enveloped in permafrost and blizzards, where temperatures plunge below negative 120 degrees Celsius. Once the world’s central landmass teeming with life, it was devastated by war and subsequent conflicts, leaving it largely barren and inhabited only by Daemons and the Frost Dragon Velzard.",
+        points: "1049, 160, 1060, 159, 1070, 152, 1080, 144, 1085, 136, 1091, 127, 1098, 127, 1103, 124, 1105, 106, 1112, 105, 1120, 99, 1123, 94, 1134, 94, 1147, 97, 1152, 102, 1156, 105, 1169, 103, 1184, 106, 1183, 113, 1184, 123, 1173, 128, 1168, 133, 1178, 143, 1189, 145, 1203, 145, 1221, 142, 1231, 140, 1255, 134, 1261, 132, 1268, 133, 1284, 149, 1292, 155, 1306, 161, 1318, 165, 1327, 167, 1329, 165, 1336, 168, 1337, 160, 1345, 162, 1348, 171, 1360, 176, 1367, 176, 1378, 176, 1389, 171, 1394, 168, 1403, 168, 1416, 163, 1440, 147, 1446, 141, 1453, 128, 1456, 119, 1455, 112, 1487, 97, 1490, 95, 1497, 102, 1507, 106, 1521, 109, 1527, 114, 1541, 122, 1555, 126, 1566, 131, 1575, 139, 1579, 146, 1579, 170, 1587, 179, 1591, 189, 1586, 197, 1585, 206, 1588, 219, 1590, 232, 1590, 236, 1605, 244, 1639, 247, 1645, 249, 1654, 256, 1656, 268, 1659, 278, 1674, 293, 1675, 307, 1658, 317, 1649, 318, 1643, 329, 1637, 339, 1606, 342, 1588, 337, 1579, 341, 1565, 347, 1547, 357, 1535, 362, 1532, 371, 1518, 383, 1509, 384, 1506, 398, 1501, 401, 1492, 403, 1488, 407, 1478, 407, 1467, 412, 1457, 410, 1453, 408, 1447, 408, 1442, 403, 1434, 403, 1428, 407, 1421, 410, 1414, 413, 1411, 416, 1403, 415, 1402, 407, 1396, 401, 1392, 392, 1384, 389, 1381, 382, 1383, 370, 1378, 370, 1373, 375, 1374, 383, 1375, 387, 1373, 389, 1379, 396, 1386, 396, 1397, 408, 1398, 419, 1393, 423, 1384, 417, 1376, 415, 1367, 409, 1354, 408, 1345, 403, 1341, 406, 1335, 402, 1327, 403, 1322, 407, 1313, 405, 1302, 421, 1295, 423, 1289, 436, 1284, 455, 1283, 466, 1278, 474, 1265, 476, 1262, 483, 1238, 485, 1230, 484, 1220, 487, 1224, 491, 1222, 500, 1214, 511, 1211, 519, 1202, 513, 1197, 515, 1189, 514, 1187, 526, 1171, 535, 1164, 536, 1166, 540, 1149, 549, 1143, 549, 1119, 540, 1119, 525, 1129, 523, 1138, 519, 1146, 509, 1152, 497, 1153, 486, 1147, 478, 1136, 474, 1123, 473, 1114, 473, 1107, 462, 1098, 450, 1089, 443, 1073, 442, 1056, 442, 1036, 444, 1020, 445, 1007, 448, 994, 452, 983, 442, 972, 431, 959, 426, 945, 423, 930, 422, 922, 424, 913, 435, 899, 440, 887, 448, 875, 456, 863, 454, 852, 454, 849, 460, 856, 469, 870, 471, 875, 477, 872, 490, 864, 495, 837, 498, 818, 498, 801, 488, 798, 478, 793, 473, 783, 475, 767, 472, 754, 469, 743, 461, 734, 464, 724, 468, 717, 462, 705, 467, 692, 460, 692, 454, 683, 453, 679, 436, 684, 432, 690, 430, 709, 416, 713, 414, 724, 419, 731, 420, 740, 414, 752, 417, 760, 414, 768, 413, 775, 409, 783, 403, 794, 393, 800, 385, 804, 378, 813, 377, 833, 364, 839, 350, 837, 340, 830, 337, 823, 330, 814, 329, 810, 322, 811, 313, 821, 310, 828, 296, 842, 290, 846, 283, 852, 283, 853, 297, 864, 304, 874, 308, 884, 304, 891, 299, 893, 292, 911, 285, 924, 286, 938, 285, 952, 281, 960, 274, 966, 263, 985, 255, 1005, 270, 1012, 273, 1017, 269, 1027, 269, 1036, 259, 1037, 251, 1034, 246, 1034, 236, 1044, 227, 1052, 214, 1055, 202, 1058, 190, 1056, 179, 1047, 176"
+    },
+    {
+        name: "Kingdom of Siltrosso",
+        url: "https://tensura.fandom.com/wiki/Kingdom_of_Siltrosso",
+        ruler: "",
+        capital: "Shia",
+        population: "2M",
+        description: "One of the smallest constituent countries of the western alliance. It specializes in traditional crafts, but is also active in business and trade.",
+        points: "1317, 974, 1350, 974, 1377, 969, 1379, 956, 1370, 945, 1362, 952, 1348, 955, 1336, 957, 1329, 953, 1322, 960"
+    }
+]
@@ -0,0 +1,70 @@
+/**
+ * @typedef {Object} POIData
+ * @property {string} name
+ * @property {string} description
+ * @property {string?} url
+ * @property {{x:string,y:string}} position
+ */
+
+/**
+ * @type {[POIData]}
+ */
+const pois = [
+    {
+        name: "Sealed Cave",
+        description: "The cave where Veldora was sealed and where Rimuru was born.",
+        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.",
+        url: "https://tensura.fandom.com/wiki/Lake%20Siss",
+        position: { x: "1850", y: "1121" }
+    },
+    {
+        name: "Kusha Mountains",
+        description: "A large mountain range that runs from the coast into the Jura Forest. Home to the Tengu tribe.",
+        url: "https://tensura.fandom.com/wiki/Khusha%20Mountains",
+        position: { x: "1618", y: "1240" }
+    },
+    {
+        name: "Scroching God Mountain",
+        description: "The holy mountain where the scorch dragon Velgrynd is said to reside.",
+        url: "https://tensura.fandom.com/wiki/Scorching%20God%20Mountain",
+        position: { x: "2111", y: "700" }
+    },
+    {
+        name: "Dragon's Den",
+        description: "At the peak of the tallest mountain, the Great Canaat Mountains, lies the Dragon's Den where the Dragon Lords reside.",
+        position: { x: "1740", y: "665" }
+    },
+    {
+        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.",
+        position: { x: "1956", y: "1010" }
+    },
+    {
+        name: "Divine Tree",
+        description: "The Divine Tree, a sacred relic designed to maintain the world. It is home to Elmine, Sarion's Capital.",
+        url: "https://tensura.fandom.com/wiki/Divine%20Tree",
+        position: { x: "1420", y: "1450" }
+    },
+    {
+        name: "Ulgr Nature Park",
+        description: "A nature preserve that was formerly home to the Dwelling of the Spirits.",
+        position: { x: "1480", y: "1520" }
+    },
+    {
+        name: "Heaven Tower",
+        description: "The entrance to the Star Palace.",
+        url: "https://tensura.fandom.com/wiki/Heaven%20Tower",
+        position: { x: "350", y: "1205" }
+    },
+    {
+        name: "Magic Tower",
+        description: "The scholarly facility created by the Trinity Wisemen.",
+        url: "https://tensura.fandom.com/wiki/Magic%20Tower",
+        position: { x: "1165", y: "1375" }
+    },
+]
@@ -0,0 +1,85 @@
+function drawMap() {
+    const svg = document.getElementById("map");
+    svg.innerHTML = "";
+    svg.innerHTML += `<image href="img/map.webp" width="100%"/>`;
+
+    for (let nation of nations) {
+        addNation(svg, nation);
+    }
+
+    for (let capital of capitals) {
+        addCapital(svg, capital);
+    }
+
+    for (let poi of pois) {
+        addPOI(svg, poi);
+    }
+}
+
+/**
+ * @param {Element} svg
+ * @param {NationData} nation
+ */
+function addNation(svg, nation) {
+    const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    polygon.setAttribute("class", "region");
+    polygon.setAttribute("fill", "transparent");
+    polygon.setAttribute("stroke", "transparent");
+    polygon.setAttribute("stroke-width", "4");
+    polygon.setAttribute("points", nation.points);
+    polygon.setAttribute("data-name", nation.name);
+    polygon.setAttribute("data-ruler", nation.ruler);
+    polygon.setAttribute("data-capital", nation.capital);
+    polygon.setAttribute("data-population", nation.population);
+    polygon.setAttribute("data-description", nation.description);
+    polygon.setAttribute("data-url", nation.url ?? "");
+    svg.appendChild(polygon);
+}
+
+/**
+ * @param {Element} svg
+ * @param {CapitalData} capital
+ */
+function addCapital(svg, capital) {
+    const svgString = `
+    <g
+            transform="translate(${capital.position.x}, ${capital.position.y}) scale(2.5, 2.5 )"
+            class="location"
+            data-name="${capital.name}"
+            data-url="${capital.url ?? ""}"
+    >
+        <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" />
+    </g>
+    `;
+
+    svg.innerHTML += svgString;
+}
+
+/**
+ * @param {Element} svg
+ * @param {POIData} poi
+ */
+function addPOI(svg, poi) {
+    const svgString = `
+    <g
+            transform="translate(${poi.position.x}, ${poi.position.y}) scale(2, 2)"
+            class="location"
+            data-name="${poi.name}"
+            data-description="${poi.description}"
+            data-url="${poi.url ?? ""}"
+    >
+        <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" />
+    </g>
+    `;
+
+    svg.innerHTML += svgString;
+}
+
+drawMap();
@@ -0,0 +1,152 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const tooltip = document.getElementById('tooltip');
+    let isControlHeld = false;
+    let mouseOnTooltipableArea = false;
+    let currentTooltipContent = '';
+
+    const showTooltip = (content, e) => {
+        mouseOnTooltipableArea = true;
+        currentTooltipContent = content;
+        // console.log("Set currentTooltipContent to", currentTooltipContent);
+        if (isControlHeld) return;
+        tooltip.innerHTML = content;
+        tooltip.style.display = 'flex';
+        positionTooltip(e);
+    };
+
+    const hideTooltip = () => {
+        mouseOnTooltipableArea = false;
+        currentTooltipContent = '';
+        // console.log("Set currentTooltipContent to", currentTooltipContent);
+        if (isControlHeld) return;
+        tooltip.style.display = 'none';
+    };
+
+    const positionTooltip = (e) => {
+        if (isControlHeld) return;
+
+        tooltip.innerHTML = currentTooltipContent;
+        if (currentTooltipContent) tooltip.style.display = 'flex';
+
+        const tooltipWidth = tooltip.offsetWidth;
+        const screenWidth = window.innerWidth;
+
+        let tooltipX = e.pageX + 10;
+        const tooltipY = e.pageY + 10;
+
+        if (tooltipX + tooltipWidth > screenWidth) {
+            tooltipX = e.pageX - tooltipWidth - 10;
+        }
+
+        // Position the tooltip
+        tooltip.style.left = `${tooltipX}px`;
+        tooltip.style.top = `${tooltipY}px`;
+
+        console.log("Tooltip positioned at:", tooltipX, tooltipY);
+    };
+
+    const attachTooltipHandlers = (elements, getContentCallback) => {
+        elements.forEach(element => {
+            element.addEventListener('mouseover', (e) => {
+                const content = getContentCallback(element);
+                showTooltip(content, e);
+            });
+
+            element.addEventListener('mousemove', positionTooltip);
+
+            element.addEventListener('mouseout', hideTooltip);
+        });
+    };
+
+    document.addEventListener('keydown', (e) => {
+        if (e.ctrlKey || e.metaKey) isControlHeld = true;
+    });
+
+    document.addEventListener('keyup', (e) => {
+        if (!e.ctrlKey && !e.metaKey) {
+            isControlHeld = false;
+            // if (!mouseOnTooltipableArea) hideTooltip();
+        }
+    });
+
+    document.addEventListener('mousemove', (e) => {
+        // console.log("IsControlHeld", isControlHeld);
+        // console.log("MouseOnTooltipableArea", mouseOnTooltipableArea);
+        if (!isControlHeld && !mouseOnTooltipableArea) {
+            hideTooltip();
+        }
+    });
+
+    const locations = document.querySelectorAll('.location');
+    attachTooltipHandlers(locations, getLocationTooltip);
+
+    const regions = document.querySelectorAll('.region');
+    attachTooltipHandlers(regions, getRegionTooltip);
+});
+
+/**
+ * @typedef {Object} RegionData
+ * @property {string} name
+ * @property {string} capital
+ * @property {string} description
+ * @property {string} ruler
+ * @property {string} population
+ */
+
+/**
+ * Get region tooltip
+ * @param {Element} element
+ * @return {string}
+ */
+function getRegionTooltip(element) {
+    const regionName = element.getAttribute('data-name');
+    const regionPopulation = element.getAttribute('data-population');
+    const regionCapital = element.getAttribute('data-capital');
+    const regionDescription = element.getAttribute('data-description');
+    const regionRuler = element.getAttribute('data-ruler');
+    const url = element.getAttribute('data-url');
+
+    let data = url ? `<a href="${url}" target="_blank" rel="noreferrer noopener"><h3>${regionName}</h3></a>` : `<h3>${regionName}</h3>`;
+
+    data += `<div class="border"></div>`;
+
+    if (regionCapital) data += `
+        <div class="detailbox">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <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"></path> </g></svg>
+            <span>${regionCapital}</span>
+        </div>
+    `;
+    if (regionPopulation) data += `
+        <div class="detailbox">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M13 20V18C13 15.2386 10.7614 13 8 13C5.23858 13 3 15.2386 3 18V20H13ZM13 20H21V19C21 16.0545 18.7614 14 16 14C14.5867 14 13.3103 14.6255 12.4009 15.6311M11 7C11 8.65685 9.65685 10 8 10C6.34315 10 5 8.65685 5 7C5 5.34315 6.34315 4 8 4C9.65685 4 11 5.34315 11 7ZM18 9C18 10.1046 17.1046 11 16 11C14.8954 11 14 10.1046 14 9C14 7.89543 14.8954 7 16 7C17.1046 7 18 7.89543 18 9Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            <span>${regionPopulation}</span>
+        </div>
+    `;
+    if (regionRuler) data += `
+        <div class="detailbox">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4 8L6 20H18L20 8M4 8L5.71624 9.37299C6.83218 10.2657 7.39014 10.7121 7.95256 10.7814C8.4453 10.8421 8.94299 10.7173 9.34885 10.4314C9.81211 10.1051 10.0936 9.4483 10.6565 8.13476L12 5M4 8C4.55228 8 5 7.55228 5 7C5 6.44772 4.55228 6 4 6C3.44772 6 3 6.44772 3 7C3 7.55228 3.44772 8 4 8ZM20 8L18.2838 9.373C17.1678 10.2657 16.6099 10.7121 16.0474 10.7814C15.5547 10.8421 15.057 10.7173 14.6511 10.4314C14.1879 10.1051 13.9064 9.4483 13.3435 8.13476L12 5M20 8C20.5523 8 21 7.55228 21 7C21 6.44772 20.5523 6 20 6C19.4477 6 19 6.44772 19 7C19 7.55228 19.4477 8 20 8ZM12 5C12.5523 5 13 4.55228 13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5ZM12 4H12.01M20 7H20.01M4 7H4.01" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            <span>${regionRuler}</span>
+        </div>
+    `;
+    if (regionDescription) data += `
+        <div class="detailbox">
+            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M3 10H16M3 14H21M3 18H16M3 6H21" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+            <span>${regionDescription}</span>
+        </div>
+    `;
+
+    return data;
+}
+
+function getLocationTooltip(location) {
+    const locationName = location.getAttribute('data-name');
+    const locationDescription = location.getAttribute('data-description');
+    const url = location.getAttribute('data-url');
+
+    let locationString = url ? `<a href="${url}" target="_blank" rel="noreferrer noopener"><h3>${locationName}</h3></a>` : `<h3>${locationName}</h3>`;
+
+    if (locationDescription) locationString += `<div class="border"></div>`;
+    if (locationDescription) locationString += `<span>${locationDescription}</span>`;
+
+    return locationString;
+}