Add default avatar generation

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "svg.preview.background": "transparent"
+}

js/avatar.js

@@ -1,8 +1,37 @@
 import * as DB from "./db.js";
 {
-    const DEFAULT_AVATAR_PATHS = [
+    const DEFAULT_AVATAR_PATHS = [];
 
-    ].map(s => `"/data/img/avatars/"${s}`);
+    { // Generate default avatar paths
+        const MIN_CHAR = 0xF0040;
+        const MAX_CHAR = 0xF005C;
+
+        function generateHexStrings(min, max) {
+            const hexStrings = [];
+            for(let i = min; i <= max; i++) {
+                hexStrings.push(i.toString(16));
+            }
+            return hexStrings;
+        }
+
+        function getAvatarWithChar(hexCharCode) {
+            return `
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+                <rect width="100" height="100" fill="black" />
+                <text font-family="techmino-proportional" fill="white" text-anchor="middle" transform="rotate(-11.46 50 50)">
+                    <tspan x="50%" y="50%" dy="0.3em" font-size="50">&#x${hexCharCode}</tspan>
+                </text>
+            </svg>`;
+        }
+
+        function toDataURI(svgString) {
+            return `data:image/svg+xml;base64,${btoa(svgString)}`;
+        }
+
+        for(const hexString of generateHexStrings(MIN_CHAR, MAX_CHAR)) {
+            DEFAULT_AVATAR_PATHS.push(toDataURI(getAvatarWithChar(hexString)));
+        }
+    }
 
     /** @param {string} id The user's UID */
     function getDefaultAvatarPath(id) {

js/map.js

@@ -21,7 +21,6 @@ import * as LANG from "./lang.js";
  */
 {
     const INIT_TIME = performance.now();
-    const DEBUG_MODE = true;
     const IS_IN_IFRAME = window.self === window.top;
 
     const MODE_ID_PREFIX = "mode_";
@@ -36,7 +35,6 @@ import * as LANG from "./lang.js";
     const ROOT = document.documentElement;
     const BODY = document.body;
     const MAIN = document.getElementById("main");
-    const DEBUG_ELEMENT = document.getElementById("debug-info");
     const EDGES_SVG = document.getElementById("edge-display");
     const CROSSHAIR = document.getElementById("crosshair");
 
@@ -223,10 +221,6 @@ import * as LANG from "./lang.js";
 
         handleKeys(dt);
 
-        if(DEBUG_MODE) {
-            updateDebugInfo(dt);
-        }
-
         if(continueUpdate) {
             return requestAnimationFrame(() => update(true));
         }
@@ -252,22 +246,6 @@ import * as LANG from "./lang.js";
         if(!MODE_INFO_ELEMENT) list.push("MODE_INFO_ELEMENT not found");
         return list;
     }
-    function updateDebugInfo(dt) {
-        const invalidValues = getInvalidValueList();
-        const debugText =
-            `FPS: ${
-                (heldKeyCodes.size > 0 && dt) ?
-                    (1000 / dt).toFixed(1) :
-                    "--"
-            }` + (invalidValues.length > 0 ?
-                `\nERROR: Invalid values found:\n${
-                    invalidValues.map(v => `- ${v}`).join("\n")
-                }`
-                : "\nNo invalid values found."
-            ) + `\nTouch length: ${prevTouches.length}`;
-
-        DEBUG_ELEMENT.innerText = debugText;
-    }
 
     function loadMapData(){
         const urlParams = new URLSearchParams(window.location.search);
@@ -713,9 +691,6 @@ import * as LANG from "./lang.js";
     MODE_INFO_ELEMENTS.closeButton?.addEventListener("click", unselectMode);
     MODE_INFO_ELEMENTS.expandButton?.addEventListener("click", modeInfoExpandFull);
     MODE_INFO_ELEMENTS.collapseButton?.addEventListener("click", modeInfoCollapseToSmall);
-
-    // Timed events
-    setInterval(updateDebugInfo, 1000);
     // #endregion
 
     function clamp(min, val, max) {

testing.html

@@ -17,8 +17,6 @@
     <script type="module">
         import { SUPABASE } from '/js/db.js';
 
-        SUPABASE.auth.getUser().then(console.log).catch(console.error); // DEBUG
-
         document.getElementById("login").addEventListener("click", async () => 
             await SUPABASE.auth.signInWithOAuth({
                 provider: "discord",