Clean up imports, add language support for map

data/lang/en.js

@@ -0,0 +1,68 @@
+export default {
+    map: {
+        unfocused: "Unfocused - click here to focus",
+    },
+    modes: {
+        sprint_10l: {
+            title: "Sprint",
+            subtitle: "10L",
+            description: "Clear 10 lines!"
+        },
+        sprint_20l: {
+            title: "Sprint",
+            subtitle: "20L",
+            description: "Clear 20 lines!"
+        },
+        sprint_40l: {
+            title: "Sprint",
+            subtitle: "40L",
+            description: "Clear 40 lines!"
+        },
+        sprint_100l: {
+            title: "Sprint",
+            subtitle: "100L",
+            description: "Clear 100 lines!"
+        },
+        sprint_400l: {
+            title: "Sprint",
+            subtitle: "400L",
+            description: "Clear 400 lines!"
+        },
+        sprint_1000l: {
+            title: "Sprint",
+            subtitle: "1000L",
+            description: "Clear 1000 lines!"
+        },
+        sprintPenta: {
+            title: "Sprint",
+            subtitle: "Pentomino",
+            description: "40L with 18 pentominoes"
+        },
+        sprintMPH: {
+            title: "Sprint",
+            subtitle: "MPH",
+            description: "Memoryless\nPreviewless\nHoldless"
+        },
+        sprint123: {
+            title: "Sprint",
+            subtitle: "M123",
+            description: "40L with only monominoes, dominoes, and triminoes"
+        },
+        construct_sg: {
+            title: "Construct",
+            subtitle: "SECRET GRADE",
+            description: "Build a zigzag pattern by following the guide!"
+        },
+        construct_checker: {
+            title: "Construct",
+            subtitle: "CHECKERBOARD",
+            description: "Build a checkerboard pattern!"
+        },
+        construct_invsg: {
+            title: "Construct",
+            subtitle: "INV. SG",
+            description: "Build an inverted zigzag pattern!"
+        },
+
+    }
+}

js/lang.js

@@ -0,0 +1,34 @@
+let langEntries = {};
+
+export function getCurrentLang() {
+    return localStorage.getItem('lang') || 'en';
+}
+export function getLangFilePath(lang) {
+    lang = lang ?? getCurrentLang();
+    return `/data/lang/${lang}.js`;
+}
+export function getLanguageEntry(key, fallback) {
+    if(typeof key !== 'string') throw new Error("Key must be a string!");
+    fallback ??= key;
+
+    let keys = key.split('.');
+    let scope = langEntries;
+    for(let i = 0; i < keys.length; i++) {
+        if(typeof scope !== 'object') return fallback;
+        if(!scope[keys[i]]) return fallback;
+        scope = scope[keys[i]];
+    }
+    return scope;
+};
+export function getLanguageEntries() {
+    return langEntries;
+};
+export async function setLanguage(lang){
+    if(lang === localStorage.getItem('lang')) return;
+    if(typeof lang !== 'string') throw new Error("Language must be a string!");
+    localStorage.setItem('lang', lang);
+
+    langEntries = (await import(getLangFilePath(lang))).default;
+}
+
+langEntries = (await import(getLangFilePath())).default;

js/map.js

@@ -1,3 +1,6 @@
+import {getModeIconDrawFunction, getModeIconDrawFunctionMap} from "/js/modeicon.js";
+import {getLanguageEntry} from "/js/lang.js";
+
 {
     const mapCanvas = document.getElementById("map");
     const mapContext = mapCanvas.getContext("2d");
@@ -78,7 +81,7 @@
         }
     }
     function getModeAtPoint(x, y) {
-        for(mode of Object.values(map.modes)){
+        for(let mode of Object.values(map.modes)){
             if(isPointInMode(x, y, mode)) return mode;
         }
         return null;
@@ -196,7 +199,7 @@
         }
 
         // Draw modes
-        for(mode of Object.values(map.modes)){
+        for(let mode of Object.values(map.modes)){
             // Draw connected mode lines
             mapContext.strokeStyle = "#FFFFFF5F";
             mode.unlock?.forEach(otherModeName => {
@@ -262,7 +265,7 @@
             mapContext.fillStyle = "#FFFFFFFF";
             mapContext.font = `bold ${Math.min(mapCanvas.width, mapCanvas.height) * 0.05}px techmino-proportional`;
             mapContext.textAlign = "center";
-            mapContext.fillText("Unfocused - Click here to focus", mapCanvas.width / 2, mapCanvas.height / 2);
+            mapContext.fillText(getLanguageEntry("map.unfocused"), mapCanvas.width / 2, mapCanvas.height / 2);
         }
         // #endregion
 

js/modeicon.js

@@ -332,7 +332,7 @@ const MODE_ICON_IMAGE_NAMES = [ // NOTE: Update this list whenever you add a new
 // Output: a function where:
 //   - input: the canvas context (object) and X/Y/size of the mode icon (number)
 //   - output: none
-const getModeIconDrawFunction = (icon) => {
+export function getModeIconDrawFunction(icon) {
     if(MODE_ICON_DRAW_FUNCTIONS[icon]) {
         return MODE_ICON_DRAW_FUNCTIONS[icon];
     }
@@ -364,7 +364,7 @@ const getModeIconDrawFunction = (icon) => {
 // Output: a map of mode icon names to functions that draw them, where each function:
 //   - input: the canvas context (object) and X/Y/size of the mode icon (number)
 //   - output: none
-const getModeIconDrawFunctionMap = () => {
+export function getModeIconDrawFunctionMap() {
     MODE_ICON_IMAGE_NAMES.forEach((icon) => {
         getModeIconDrawFunction(icon);
     })

map.html

@@ -43,7 +43,6 @@ <h1>(in development!)</h1>
 
 
     <script src="/js/background.js"></script>
-    <script src="/js/modeicon.js"></script>
-    <script src="/js/map.js"></script>
+    <script type="module" src="/js/map.js"></script>
 </body>
 </html>