hard mdoe

src/components/Game.svelte

@@ -5,6 +5,8 @@
   import RouteBuilder from "./RouteBuilder.svelte";
   import gsap from "gsap";
 
+  import { gameOptions } from "../store"
+
   const dispatch = createEventDispatcher()
 
   const questionCount = 10
@@ -99,17 +101,21 @@
     <h3 class="text-3xl inline-block" bind:this={stationsElement}>
       <span class="inline-flex items-center justify-center gap-2">
         <span class="font-bold">{agency.stations[from].stop_name}</span>
-        {#each agency.stations[from].routes as line}
-          <MbtaLine name={line} compact />
-        {/each}
+        {#if $gameOptions.showStationLines}
+          {#each agency.stations[from].routes as line}
+            <MbtaLine name={line} compact />
+          {/each}
+        {/if}
         to
       </span>
       <br>
       <span class="inline-flex items-center justify-center gap-2">
         <span class="font-bold">{agency.stations[to].stop_name}</span>
-        {#each agency.stations[to].routes as line}
-          <MbtaLine name={line} compact />
-        {/each}
+        {#if $gameOptions.showStationLines}
+          {#each agency.stations[to].routes as line}
+            <MbtaLine name={line} compact />
+          {/each}
+        {/if}
       </span>
     </h3>
   {:else}

src/components/Guesser.svelte

@@ -3,11 +3,13 @@
   import screenshot from "../screenshot.png"
   import Route from "./Route.svelte";
 
+  import { gameOptions } from "../store"
+
   let page = "welcome"
   let score = 0
 </script>
 
-<div class="flex flex-col h-screen justify-center items-center">
+<div class="flex flex-col min-h-screen justify-center items-center py-5">
   {#if page == "welcome" || page == "done"}
     <div class="grid gap-20" class:grid-cols-2={page == "done"}>
       {#if page == "done" }
@@ -76,6 +78,13 @@
       on:click={() => page = "play"}
       >Start</button
     >
+
+    <details class="mt-5">
+      <summary class="cursor-pointer text-center">Options</summary>
+
+      <input type="checkbox" id="showStationLines" checked={$gameOptions.showStationLines ?? true} on:input={e => gameOptions.update(opt => ({...opt, showStationLines: e.target.checked}))}>
+      <label for="showStationLines">Show available lines for station</label>
+    </details>
   {:else if page == "play"}
     <Game on:done={e => {score = e.detail; page = "done"}} />
   {:else if page == "done"}

src/store.js

@@ -0,0 +1,15 @@
+import { writable } from "svelte/store";
+
+export const gameOptions = writable(
+  import.meta.env.SSR
+    ? {}
+    : JSON.parse(
+        localStorage.getItem("gameOptions") || '{"showStationLines":true}'
+      )
+);
+
+if (!import.meta.env.SSR) {
+  gameOptions.subscribe((value) => {
+    localStorage.setItem("gameOptions", JSON.stringify(value));
+  });
+}