diff --git a/src/components/Game.svelte b/src/components/Game.svelte index 4538d92..46a3774 100644 --- a/src/components/Game.svelte +++ b/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 @@

{agency.stations[from].stop_name} - {#each agency.stations[from].routes as line} - - {/each} + {#if $gameOptions.showStationLines} + {#each agency.stations[from].routes as line} + + {/each} + {/if} to
{agency.stations[to].stop_name} - {#each agency.stations[to].routes as line} - - {/each} + {#if $gameOptions.showStationLines} + {#each agency.stations[to].routes as line} + + {/each} + {/if}

{:else} diff --git a/src/components/Guesser.svelte b/src/components/Guesser.svelte index 9e594e7..42b6d40 100644 --- a/src/components/Guesser.svelte +++ b/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 -
+
{#if page == "welcome" || page == "done"}
{#if page == "done" } @@ -76,6 +78,13 @@ on:click={() => page = "play"} >Start + +
+ Options + + gameOptions.update(opt => ({...opt, showStationLines: e.target.checked}))}> + +
{:else if page == "play"} {score = e.detail; page = "done"}} /> {:else if page == "done"} diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..f8799e5 --- /dev/null +++ b/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)); + }); +}