do things like "enhance commercial compatibility"

assets/scripts/KaplayMap/map.js

@@ -210,27 +210,6 @@ export class KaplayMap {
     this.events.dispatchEvent(event);
   }
 
-  initGrid() {
-    const grid = this.kp.loadSprite(null, "/assets/images/grid.png");
-
-    this.kp.onDraw(() => {
-      this.kp.drawSprite({
-        sprite: grid,
-        tiled: true,
-        opacity: 0.25,
-        width: this.kp.width() + 200,
-        height: this.kp.height() + 200,
-        anchor: "center",
-        pos: this.kp.vec2(
-          Math.floor(this.kp.camPos().x / 100) * 100 + 0.5,
-          Math.floor(this.kp.camPos().y / 100) * 100 + 0.5
-        ),
-      });
-    });
-
-    return grid;
-  }
-
   clearMouseMode() {
     this.lastReleaseTime = null;
     this.lastReleasePos = null;

assets/scripts/KaplayMap/mapper.js

@@ -45,6 +45,12 @@ export class EventMapperManager {
 
   // Init
 
+  __initFloor() {
+    const allFloors = Array.from(this.getAllFocusObject("floor").keys());
+
+    location.hash = allFloors[0];
+  }
+
   async load() {
     this.uimanager.setLoading(true);
 
@@ -68,6 +74,8 @@ export class EventMapperManager {
 
     window.addEventListener("hashchange", () => this.hashchange());
 
+    this.__initFloor();
+
     await this.hashchange();
 
     this.uimanager.setLoading(false);

assets/scripts/script.js

@@ -22,7 +22,22 @@ const kaplaymap = new KaplayMap(kp, {});
 const eventmappermanager = new EventMapperManager(kaplaymap, mapUi);
 
 async function main() {
-  kaplaymap.initGrid();
+  const grid = kp.loadSprite(null, "/files/images/grid.png");
+
+  kp.onDraw(() => {
+    kp.drawSprite({
+      sprite: grid,
+      tiled: true,
+      opacity: 0.25,
+      width: kp.width() + 200,
+      height: kp.height() + 200,
+      anchor: "center",
+      pos: kp.vec2(
+        Math.floor(kp.camPos().x / 100) * 100 + 0.5,
+        Math.floor(kp.camPos().y / 100) * 100 + 0.5
+      ),
+    });
+  });
 
   await eventmappermanager.load();
 }

assets/styles/style.css

@@ -1,6 +1,10 @@
 @import url("./components.css");
 @import url("./elements.css");
 
+@keyframes load {
+  to { transform: rotate(1turn) }
+}
+
 body, html {
   margin: 0;
   height: 100%;

package-lock.json

@@ -10,12 +10,29 @@
       "license": "MIT",
       "dependencies": {
         "express": "^4.19.2",
+        "http-proxy-middleware": "^3.0.0",
         "https": "^1.0.0"
       },
       "devDependencies": {
         "nodemon": "^3.1.1"
       }
     },
+    "node_modules/@types/http-proxy": {
+      "version": "1.17.14",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.14.tgz",
+      "integrity": "sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.14.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz",
+      "integrity": "sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -101,7 +118,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -283,6 +299,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/express": {
       "version": "4.19.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
@@ -328,7 +349,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -353,6 +373,25 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -500,6 +539,56 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-proxy-middleware": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.0.tgz",
+      "integrity": "sha512-36AV1fIaI2cWRzHo+rbcxhe3M3jUDCNzc4D5zRl57sEWRAxdXYtw7FSQKYY6PDKssiAKjLYypbssHk+xs/kMXw==",
+      "dependencies": {
+        "@types/http-proxy": "^1.17.10",
+        "debug": "^4.3.4",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.5"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/debug": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
+      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
     "node_modules/https": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz",
@@ -551,7 +640,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -560,7 +648,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -572,11 +659,21 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -598,6 +695,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/micromatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -749,7 +858,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -823,6 +931,11 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -975,7 +1088,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -1018,6 +1130,11 @@
       "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
       "dev": true
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "express": "^4.19.2",
+    "http-proxy-middleware": "^3.0.0",
     "https": "^1.0.0"
   },
   "devDependencies": {

pages/index.html

@@ -10,6 +10,10 @@
       rel="stylesheet"
       href="/assets/styles/style.css"
     />
+    <link
+      rel="stylesheet"
+      href="/files/styles/branding.css"
+    />
   </head>
   <body>
     <canvas id="map"></canvas>
@@ -84,5 +88,6 @@
       </div>
     </div>
     <script src="/assets/scripts/script.js" type="module"></script>
+    <script src="/files/scripts/script.js" type="module"></script>
   </body>
 </html>

scripts/server.js

@@ -1,4 +1,5 @@
 import express from 'express';
+import { createProxyMiddleware } from 'http-proxy-middleware';
 
 import config from "../eventmapper_config.json" with { type: "json" };
 
@@ -9,11 +10,15 @@ app.use("/assets", express.static('assets'));
 app.use("/", express.static('pages'));
 
 app.use("/dataServer", express.static('data')); // Example data file-server
-app.use("/files", express.static('files')); // Example file file-server
+app.use("/fileServer", express.static('files')); // Example file file-server
+
+app.use("/files", createProxyMiddleware({
+  target: config.files_url
+}));
 
 app.get('/data/:lang/events/:floor', async (req, res) => {
   // Get events
-  let eventsReq = await fetch(new URL(`events/${req.params.floor}.json`, config.data_url));
+  let eventsReq = await fetch(new URL(`./events/${req.params.floor}.json`, config.data_url));
   let events;
   if (eventsReq.ok)
     events = await eventsReq.json();
@@ -39,7 +44,7 @@ app.get('/data/:lang/events/:floor', async (req, res) => {
 
 app.get('/data/:lang/events/', async (req, res) => {
   // Get floors
-  let floorsReq = await fetch(new URL("floors.json", config.data_url));
+  let floorsReq = await fetch(new URL("./floors.json", config.data_url));
   let floors;
   if (floorsReq.ok)
     floors = await floorsReq.json();
@@ -49,7 +54,7 @@ app.get('/data/:lang/events/', async (req, res) => {
   let allEvents = [];
   
   await Promise.allSettled(floors.map(async (curFloor) => {
-    let eventsReq = await fetch(new URL(`events/${curFloor.id}.json`, config.data_url));
+    let eventsReq = await fetch(new URL(`./events/${curFloor.id}.json`, config.data_url));
     let events;
     if (eventsReq.ok)
       events = await eventsReq.json();
@@ -78,7 +83,7 @@ app.get('/data/:lang/events/', async (req, res) => {
 
 app.get('/data/:lang/floors', async (req, res) => {
   // Get floors
-  let floorsReq = await fetch(new URL("floors.json", config.data_url));
+  let floorsReq = await fetch(new URL("./floors.json", config.data_url));
   let floors;
   if (floorsReq.ok)
     floors = await floorsReq.json();