0.9.3: Bump deps

package.json

@@ -1,29 +1,29 @@
 {
   "name": "digifall",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@chainsafe/libp2p-gossipsub": "13.1.0",
-    "@libp2p/bootstrap": "10.1.4",
-    "@libp2p/circuit-relay-v2": "1.1.4",
-    "@libp2p/identify": "2.1.4",
-    "@libp2p/mplex": "10.1.4",
-    "@libp2p/peer-id-factory": "4.2.3",
-    "@libp2p/plaintext": "1.1.4",
+    "@chainsafe/libp2p-gossipsub": "13.1.1",
+    "@libp2p/bootstrap": "10.1.5",
+    "@libp2p/circuit-relay-v2": "1.1.5",
+    "@libp2p/identify": "2.1.5",
+    "@libp2p/mplex": "10.1.5",
+    "@libp2p/peer-id-factory": "4.2.4",
+    "@libp2p/plaintext": "1.1.6",
     "@libp2p/pubsub-peer-discovery": "10.0.2",
-    "@libp2p/websockets": "8.1.4",
+    "@libp2p/websockets": "8.2.0",
     "@sveltejs/vite-plugin-svelte": "3.1.1",
     "howler": "2.2.4",
     "idb-keyval": "6.2.1",
     "it-pipe": "3.0.1",
-    "libp2p": "1.8.3",
+    "libp2p": "1.9.2",
     "svelte": "4.2.18",
     "uint8arrays": "5.1.0",
-    "vite": "5.3.5"
+    "vite": "5.4.1"
   }
 }

src/Game.svelte

@@ -109,6 +109,7 @@
         <button
           class="digifall"
           class:screen
+          title="[open menu]"
           on:click={() => ($overlay = OVERLAYS.menu)}
           bind:this={digifallElement}
         >

src/Leaderboard.svelte

@@ -36,7 +36,7 @@
     page = Math.trunc(selfIndex / pageSize);
   }
 
-  function changeType(event) {
+  function switchType(event) {
     type = type === KEYS.highScore ? KEYS.highCombo : KEYS.highScore;
   }
 
@@ -78,11 +78,11 @@
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
       class="type"
-      title="change leaderboard type"
+      title="[switch leaderboard]"
       tabindex="0"
       role="button"
       in:fly={{ y: -48 }}
-      on:click={changeType}
+      on:click={switchType}
     >
       <span>
         <span>high</span>
@@ -97,7 +97,7 @@
     <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
     <ul
       class="pages"
-      title="select page"
+      title="[select page]"
       tabindex="0"
       role="button"
       on:click={selectPage}
@@ -123,14 +123,13 @@
           {@const nth = page * pageSize + index + 1}
           {@const marginLeft = (nth.toString().length === 1 ? 8 : 14) + "rem"}
           {@const delay = index % 10}
-          {@const title = (
-            "PLACE: " +
+          {@const title =
+            "place: " +
             nth +
-            '\nPLAYER NAME: "' +
-            playerName +
-            '"\nSCORE: ' +
-            value
-          ).toUpperCase()}
+            "\nname: " +
+            playerName.toUpperCase() +
+            "\nscore: " +
+            value}
           <dt class:self style:margin-left={marginLeft} data-nth={nth}>
             <div class="player-name" style:--delay={delay} {title}>
               {playerName}
@@ -145,11 +144,7 @@
   </div>
   <div class="section-4">
     <div class="col">
-      <button
-        title="return to main menu"
-        on:click={showMenu}
-        in:fly={{ y: 48 }}
-      >
+      <button title="[open menu]" on:click={showMenu} in:fly={{ y: 48 }}>
         return
       </button>
     </div>

src/Options.svelte

@@ -4,7 +4,7 @@
   import Dialog from "./Dialog.svelte";
   import PlayerName from "./PlayerName.svelte";
 
-  import { INITIAL_VALUES, KEYS, OVERLAYS } from "./constants.js";
+  import { INITIAL_VALUES, OVERLAYS } from "./constants.js";
   import { options, overlay, records, resetGame } from "./stores.js";
 
   let dialogComponent = null;
@@ -56,7 +56,9 @@
         <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
         <label
           for="leaderboard"
-          title="for those who like to share records"
+          title="sharing records {$options.leaderboard
+            ? 'enabled'
+            : 'disabled'}"
           tabindex="0"
           role="button"
         >
@@ -66,7 +68,7 @@
         <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
         <label
           for="rapid"
-          title="pro mode w/o boring animations"
+          title="boring animations {$options.rapid ? 'disabled' : 'enabled'}"
           tabindex="0"
           role="button">rapid mode</label
         >
@@ -77,18 +79,17 @@
           on:click={() => ($options.sound = !$options.sound)}
         />
         <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
-        <label for="sound" title="auditory pleasure" tabindex="0" role="button"
-          >sound effects</label
+        <label
+          for="sound"
+          title="making sounds {$options.sound ? 'enabled' : 'disabled'}"
+          tabindex="0"
+          role="button">sound effects</label
         >
       </div>
     </div>
     <div class="section-4">
       <div class="col">
-        <button
-          type="submit"
-          title="return to main menu"
-          in:fly|global={{ y: 48 }}
-        >
+        <button type="submit" title="[open menu]" in:fly|global={{ y: 48 }}>
           return
         </button>
       </div>

src/PlayerName.svelte

@@ -1,5 +1,6 @@
 <script>
   import { options } from "./stores.js";
+  import { sanitizePlayerName } from "./validation.js";
 
   export let playerName = $options.playerName;
 
@@ -15,9 +16,7 @@
 
   $: {
     let playerNamePrev = playerName;
-    playerName = playerName
-      .toLowerCase()
-      .replace(/[^a-z0-9\@\&\$\!\?\-\+\=\.\:\/\_]/g, "");
+    playerName = sanitizePlayerName(playerName);
     visibility = playerNamePrev !== playerName ? "visible" : "hidden";
     if (playerName === "") inputElement && inputElement.focus();
   }

src/Score.svelte

@@ -76,13 +76,21 @@
     visible = true;
   }
   $: value = type === KEYS.score ? $score.value : $records[type][KEYS.value];
+  $: title =
+    "current score: " +
+    value +
+    "\nlocal high score: " +
+    $records[KEYS.highScore][KEYS.value] +
+    "\nlocal high combo: " +
+    $records[KEYS.highCombo][KEYS.value];
 </script>
 
 {#key type}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <span
     class="score"
     class:focus={focused}
+    {title}
     tabindex="0"
     role="button"
     in:blurTransition

src/leaderboard.js

@@ -255,7 +255,13 @@ async function forceSync(connection) {
   });
   libp2p.addEventListener("peer:discovery", handlePeerDiscovery);
   libp2p.addEventListener("connection:open", handleConnectionOpen);
-  setInterval(() => restoreRelay().then(forceSync), 6e4);
+  setInterval(
+    () =>
+      restoreRelay()
+        .then(forceSync)
+        .catch((error) => DEBUG && console.error(error)),
+    6e4
+  );
   if (DEBUG) window.libp2p = libp2p;
 })();
 

src/validation.js

@@ -3,11 +3,18 @@ import { get, readable, writable } from "svelte/store";
 import { INITIAL_VALUES, KEYS, PHASES } from "./constants.js";
 import { getSeed, initCore } from "./core.js";
 
+export function sanitizePlayerName(playerName) {
+  return playerName.toLowerCase().replace(/[^a-z0-9@&$!?\-+=.:/_]/g, "");
+}
+
 export async function validateRecord(gameData = {}) {
   const { type, moves, playerName, timestamp, value } = gameData;
   if (!type || !moves || !playerName || !timestamp || !value) {
     throw new Error(["RECORD VALIDATION: BAD GAME DATA!", gameData]);
   }
+  if (sanitizePlayerName(playerName) !== playerName) {
+    throw new Error(["RECORD VALIDATION: BAD PLAYER NAME!", gameData]);
+  }
   return new Promise((resolve, reject) => {
     const timer = setTimeout(
       () => reject(["RECORD VALIDATION: TIMEOUT!", gameData]),