From fb5959998ab26b8b5e28effeb7e3484c950022a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Fri, 14 Feb 2025 15:31:17 +0100
Subject: [PATCH] feat: sentence trainer custom prompt

resolves #162
---
 src/routes/(app)/learn/chords/+page.svelte   |  2 --
 src/routes/(app)/learn/sentence/+page.svelte | 31 +++++++++++++++-----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/routes/(app)/learn/chords/+page.svelte b/src/routes/(app)/learn/chords/+page.svelte
index bcf47610..bd40c46a 100644
--- a/src/routes/(app)/learn/chords/+page.svelte
+++ b/src/routes/(app)/learn/chords/+page.svelte
@@ -30,8 +30,6 @@
     return a + (b - a) * t;
   }
 
-  $inspect(chords);
-
   $effect(() => {
     const [chord] = chords;
     if (!chord) return;
diff --git a/src/routes/(app)/learn/sentence/+page.svelte b/src/routes/(app)/learn/sentence/+page.svelte
index 200351ff..193999ea 100644
--- a/src/routes/(app)/learn/sentence/+page.svelte
+++ b/src/routes/(app)/learn/sentence/+page.svelte
@@ -11,7 +11,8 @@
   import { onMount } from "svelte";
   import TrackText from "$lib/charrecorder/TrackText.svelte";
   import { browser } from "$app/environment";
-  import { expoIn, expoOut } from "svelte/easing";
+  import { expoOut } from "svelte/easing";
+  import { goto } from "$app/navigation";
 
   function viaLocalStorage<T>(key: string, initial: T) {
     try {
@@ -66,18 +67,18 @@
 
   let idleTimeout: ReturnType<typeof setTimeout> | null = null;
 
-  let cooldown = $state(false);
-
-  onMount(() => {
-    selectNextWord();
-  });
-
   $effect(() => {
     if (wpm > bestWPM) {
       bestWPM = wpm;
     }
   });
 
+  $effect(() => {
+    if (browser && $page.url.searchParams) {
+      selectNextWord();
+    }
+  });
+
   $effect(() => {
     localStorage.setItem("idle-timeout", idleTime.toString());
   });
@@ -219,6 +220,15 @@
 
 <div>
   <h1>Sentence Trainer</h1>
+  <input
+    type="text"
+    value={inputSentence}
+    onchange={(it) => {
+      const params = new URLSearchParams(window.location.search);
+      params.set("sentence", (it.target as HTMLInputElement).value);
+      goto(`?${params.toString()}`);
+    }}
+  />
 
   <div class="levels">
     {#each masteryThresholds as [, , title], i}
@@ -577,4 +587,11 @@
       opacity: 1;
     }
   }
+
+  input[type="text"] {
+    background: none;
+    color: inherit;
+    font: inherit;
+    border: none;
+  }
 </style>