feat: update routes

src/App.svelte

@@ -7,9 +7,10 @@
 
   const routes = {
     "/": Canvas,
-    "/spellbook/:spell": Spellbook,
-    "/strokes/:stroke": Strokes,
-    "/effects/:effect": Effects
+    "/spellbook/:id?": Spellbook,
+    "/strokes": Strokes,
+    "/effects": Effects,
+    "*": Canvas // 404
   };
 </script>
 

src/lib/spells.ts

@@ -18,98 +18,98 @@ type Spell =
 
 export type SpellConfig = {name: Spell; stroke: Stroke; effect: Effect; minScore: number; description: string};
 
-const spells: SpellConfig[] = [
-  {
+const spells: Record<string, SpellConfig> = {
+  fireball: {
     name: "Fireball",
     stroke: "circle",
     minScore: 0.2,
     effect: "fireball",
     description: "A ball of fire that explodes on impact."
   },
-  {
+  dessintegrate: {
     name: "Dessintegrate",
     stroke: "x",
     minScore: 0.2,
     effect: "wildMagic",
     description: "A beam of energy that disintegrates anything in its path."
   },
-  {
+  earthenShield: {
     name: "Earthen Shield",
     stroke: "rectangle",
     minScore: 0.2,
     effect: "shield",
     description: "A shield of earth that protects the caster."
   },
-  {
+  lightningBolt: {
     name: "Lightning Bolt",
     stroke: "zig-zag",
     minScore: 0.2,
     effect: "lightning",
     description: "A bolt of lightning that strikes the target."
   },
-  {
+  frostWave: {
     name: "Frost Wave",
     stroke: "triangle",
     minScore: 0.2,
     effect: "frostWave",
     description: "A wave of frost that freezes the target."
   },
-  {
+  windGust: {
     name: "Wind Gust",
     stroke: "pigtail",
     minScore: 0.2,
     effect: "wind",
     description: "A gust of wind that pushes the target."
   },
-  {
+  novaBlast: {
     name: "Nova Blast",
     stroke: "pentagon",
     minScore: 0.2,
     effect: "novaBlast",
     description: "A blast of energy that damages all enemies."
   },
-  {
+  missiles: {
     name: "Missiles",
     stroke: "arrow",
     minScore: 0.2,
     effect: "missiles",
     description: "A barrage of missiles that strike the target."
   },
-  {
+  healingLight: {
     name: "Healing Light",
     stroke: "check",
     minScore: 0.2,
     effect: "heal",
     description: "A light that heals the target."
   },
-  {
+  summonDemon: {
     name: "Summon Demon",
     stroke: "pentagram",
     minScore: 0.2,
     effect: "star",
     description: "A demon that fights for the caster."
   },
-  {
+  chronoshift: {
     name: "Chronoshift",
     stroke: "hourglass",
     minScore: 0.2,
     effect: "wind",
     description: "A shift in time that slows the target."
   },
-  {
+  shadowStep: {
     name: "Shadow Step",
     stroke: "ankh",
     minScore: 0.2,
     effect: "shadowStep",
     description: "A step into the shadows that teleports the caster."
   },
-  {
+  pillarOfFlame: {
     name: "Pillar of Flame",
     stroke: "left square bracket",
     minScore: 0.2,
     effect: "pillar",
     description: "A pillar of flame that burns the target."
   }
-];
+};
 
 export default spells;

src/pages/Canvas.svelte

@@ -127,7 +127,9 @@
 
     const unistroke = Recognize(drawnPoints, false);
     console.info(unistroke);
-    const spell = spells.find(spell => spell.stroke === unistroke.Name && unistroke.Score >= spell.minScore);
+    const spell = Object.values(spells).find(
+      spell => spell.stroke === unistroke.Name && unistroke.Score >= spell.minScore
+    );
 
     if (!spell) {
       comment = "You failed to cast a spell!";
@@ -215,9 +217,9 @@
     <div id="comment" class="text-xl min-h-16 text-center text-shadow">{comment}</div>
     <div id="control-buttons" class="flex flex-col gap-2">
       <PrimaryButton onClick={clearCanvas}>Clear all</PrimaryButton>
-      <PrimaryLinkButton href="#/spellbook/0">Spellbook</PrimaryLinkButton>
-      <PrimaryLinkButton href="#/strokes/0">Strokes</PrimaryLinkButton>
-      <PrimaryLinkButton href="#/effects/0">Effects</PrimaryLinkButton>
+      <PrimaryLinkButton href="#/spellbook">Spellbook</PrimaryLinkButton>
+      <PrimaryLinkButton href="#/strokes">Strokes</PrimaryLinkButton>
+      <PrimaryLinkButton href="#/effects">Effects</PrimaryLinkButton>
     </div>
     <blockquote class="m-0 p-4 rounded italic bg-primary/30">
       {quote}

src/pages/Effects.svelte

@@ -2,6 +2,7 @@
   import {onMount} from "svelte";
   import PageContainer from "~components/PageContainer.svelte";
   import PrimaryButton from "~components/PrimaryButton.svelte";
+  import PrimaryLinkButton from "~components/PrimaryLinkButton.svelte";
   import {PI2} from "~lib/config";
   import {createEffect, type Effect, effectsMap, type Particle} from "~lib/effects";
 

src/pages/Spellbook.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
   import {draw, fly} from "svelte/transition";
   import PageContainer from "~components/PageContainer.svelte";
-  import PrimaryButton from "~components/PrimaryButton.svelte";
   import PrimaryLinkButton from "~components/PrimaryLinkButton.svelte";
   import {DRAW_TIME} from "~lib/config";
   import spells from "~lib/spells";
   import strokes from "~lib/strokes";
 
-  let spellIndex = 0;
-  let currentSpell = spells[spellIndex];
+  const defaultId = Object.keys(spells)[0];
+
+  export let params = {id: defaultId};
+  let spell = spells[params.id] || spells[defaultId];
+  $: spell = spells[params.id] || spells[defaultId];
 </script>
 
 <PageContainer>
@@ -17,16 +19,16 @@
       id="book"
       class="flex flex-col gap-2 p-5 w-[90%] h-[90%] rounded-lg bg-[#eae5de] shadow-glow overflow-y-auto bg-[url('/book.webp')] bg-[size:100%_100%]"
     >
-      <h2 class="text-3xl m-4 text-left text-primary">{currentSpell.name}</h2>
+      <h2 class="text-3xl m-4 text-left text-primary">{spell.name}</h2>
 
       <div class="flex h-full">
         <div id="left-page" class="flex flex-col flex-1 gap-8 px-6 text-dark text-lg">
           <p
             id="spell-description"
             class="first-letter:[initial-letter:3] first-letter:text-primary first-letter:pr-2 first-letter:font-serif"
           >
-            {currentSpell.name} is a fundamental chronomancy spell that freezes a target in time. When cast successfully,
-            the target becomes immobilized and unaware of the passage of time.
+            {spell.name} is a fundamental chronomancy spell that freezes a target in time. When cast successfully, the target
+            becomes immobilized and unaware of the passage of time.
           </p>
 
           <div class="p-5 rounded-lg bg-primary/5 flex flex-col gap-1 text-base">
@@ -39,11 +41,11 @@
 
         <div id="right-page" class="flex flex-col justify-between flex-1 gap-8 px-6 text-dark text-lg">
           <div class="[&>*:not(:last-child)]:mb-8">
-            <button on:click={() => (currentSpell = currentSpell)} class="ml-4 p-0 float-right rounded-lg bg-primary/5">
+            <button on:click={() => (spell = spell)} class="ml-4 p-0 float-right rounded-lg bg-primary/5">
               <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-                {#key currentSpell}
+                {#key spell}
                   <polyline
-                    points={strokes[currentSpell.stroke].join(" ")}
+                    points={strokes[spell.stroke].join(" ")}
                     fill="none"
                     stroke="var(--primary-color)"
                     stroke-width="3"
@@ -55,24 +57,24 @@
               </svg>
             </button>
             <p>
-              {currentSpell.name} is often considered the cornerstone of chronomancy. Its ability to halt the flow of time
-              for a single target makes it invaluable in both combat and non-combat situations. When casting {currentSpell.name},
+              {spell.name} is often considered the cornerstone of chronomancy. Its ability to halt the flow of time for a
+              single target makes it invaluable in both combat and non-combat situations. When casting {spell.name},
               visualize time as a river flowing around your target. Your goal is to create a perfectly still eddy in
               that river, isolating your target from the timestream.
             </p>
-            <p>Common applications of {currentSpell.name} include:</p>
+            <p>Common applications of {spell.name} include:</p>
             <ul>
               <li>Freezing an opponent in combat</li>
               <li>Preserving a dying creature until healing can be administered</li>
               <li>Protecting fragile objects during transport</li>
               <li>Creating "living statues" for artistic or strategic purposes</li>
             </ul>
             <p>
-              Warning: overuse of {currentSpell.name} on living beings can have unforeseen consequences. Always release the
-              spell carefully, allowing the target to gradually reintegrate with the normal flow of time.
+              Warning: overuse of {spell.name} on living beings can have unforeseen consequences. Always release the spell
+              carefully, allowing the target to gradually reintegrate with the normal flow of time.
             </p>
           </div>
-          <div id="page-number" class="text-right text-lg pb-4">- {spellIndex + 1} -</div>
+          <div id="page-number" class="text-right text-lg pb-4">- {Object.values(spells).indexOf(spell) + 1} -</div>
         </div>
       </div>
     </div>
@@ -88,13 +90,9 @@
 
     <nav class="flex flex-col gap-4">
       <div id="spells-list" class="flex flex-col gap-2">
-        {#each spells as spell, index}
-          <PrimaryButton
-            onClick={() => {
-              spellIndex = index;
-              currentSpell = spells[index];
-            }}
-            current={index === spellIndex}>{spell.name}</PrimaryButton
+        {#each Object.entries(spells) as [id, config]}
+          <PrimaryLinkButton href={`#/spellbook/${id}`} current={config.name === spell.name}
+            >{config.name}</PrimaryLinkButton
           >
         {/each}
       </div>

src/pages/Strokes.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {draw} from "svelte/transition";
   import PageContainer from "~components/PageContainer.svelte";
+  import PrimaryLinkButton from "~components/PrimaryLinkButton.svelte";
   import {DRAW_TIME} from "~lib/config";
   import strokes from "~lib/strokes";