Updating the theme selector and made things look better on mobile

src/routes/fest/clicker/+page.svelte

@@ -1,19 +1,29 @@
 <script lang="ts">
+  import type { MouseEventHandler } from "svelte/elements";
+
   let { data } = $props<{ html: string }>();
   let people = $state(data.people);
   let tents = $state(data.tents);
   let cars = $state(data.cars);
 
-  function add(type) {
-    if (type == "people") people += 1;
-    if (type == "tents") tents += 1;
-    if (type == "cars") cars += 1;
-  }
-  function subtract(type) {
-    if (type == "people") people -= 1;
-    if (type == "tents") tents -= 1;
-    if (type == "cars") cars -= 1;
-  }
+  const add: MouseEventHandler<HTMLButtonElement> = ({
+    currentTarget: {
+      dataset: { id },
+    },
+  }) => {
+    if (id == "people") people += 1;
+    if (id == "tents") tents += 1;
+    if (id == "cars") cars += 1;
+  };
+  const subtract: MouseEventHandler<HTMLButtonElement> = ({
+    currentTarget: {
+      dataset: { id },
+    },
+  }) => {
+    if (id == "people") people -= 1;
+    if (id == "tents") tents -= 1;
+    if (id == "cars") cars -= 1;
+  };
 </script>
 
 <section>
@@ -21,24 +31,24 @@
   <div>
     <div>
       <h3>~{people} people</h3>
-      <button onclick={() => add("people")}>+</button>
-      <button onclick={() => subtract("people")}>-</button>
+      <button data-id="people" onclick={add}>+</button>
+      <button data-id="people" onclick={subtract}>-</button>
     </div>
     <div>
       <h3>~{tents} tents</h3>
-      <button onclick={() => add("tents")}>+</button>
-      <button onclick={() => subtract("tents")}>-</button>
+      <button data-id="tents" onclick={add}>+</button>
+      <button data-id="tents" onclick={subtract}>-</button>
     </div>
     <div>
       <h3>~{cars} cars</h3>
-      <button onclick={() => add("cars")}>+</button>
-      <button onclick={() => subtract("cars")}>-</button>
+      <button data-id="cars" onclick={add}>+</button>
+      <button data-id="cars" onclick={subtract}>-</button>
     </div>
   </div>
   <form method="POST">
-    <input hidden name="people" value={people} />
-    <input hidden name="cars" value={cars} />
-    <input hidden name="tents" value={tents} />
+    <input hidden type="number" name="people" value={people} />
+    <input hidden type="number" name="cars" value={cars} />
+    <input hidden type="number" name="tents" value={tents} />
     <button>Save</button>
   </form>
 </section>