add improved controlls

app.go

@@ -49,7 +49,6 @@ func (a *App) GetGames() (games []model.Game) {
 }
 func (a *App) DeleteGame(g *model.Game) {
 	a.db.Delete(g)
-
 }
 func (a *App) NewGame() (id uint) {
 	game := model.Game{

frontend/src/components/TichuSelect.svelte

@@ -1,37 +1,37 @@
 <script lang="ts">
-  import { Button, ButtonGroup } from "flowbite-svelte";
+  import { Button } from "flowbite-svelte";
 
   let { value = $bindable() }: { value: number } = $props();
 
   const active: "primary" = "primary";
-  const passive: "yellow" | "none" = "none";
+  const passive: "none" = "none";
 </script>
 
 <div class="flex flex-col">
   <Button
-    class="rounded-none rounded-t-lg"
+    class="rounded-none rounded-t-lg dark:text-white"
     color={value === 200 ? active : passive}
     onclick={() => (value = 200)}>200</Button
   >
   <Button
-    class="rounded-none"
+    class="rounded-none dark:text-white"
     color={value === 100 ? active : passive}
     onclick={() => (value = 100)}
   >
     100</Button
   >
   <Button
-    class="rounded-none"
+    class="rounded-none dark:text-white"
     color={value === 0 ? active : passive}
     onclick={() => (value = 0)}>0</Button
   >
   <Button
-    class="rounded-none"
+    class="rounded-none dark:text-white"
     color={value === -100 ? active : passive}
     onclick={() => (value = -100)}>-100</Button
   >
   <Button
-    class="rounded-none rounded-b-lg"
+    class="rounded-none rounded-b-lg dark:text-white"
     color={value === -200 ? active : passive}
     onclick={() => (value = -200)}>-200</Button
   >

frontend/src/routes/Game.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import { Button, Heading, P, Range } from "flowbite-svelte";
-  import { onMount } from "svelte";
   import { GetGame, SaveStep, UndoFor } from "../../wailsjs/go/main/App";
   import { model } from "../../wailsjs/go/models";
   import { derived } from "svelte/store";
   import TichuSelect from "@/components/TichuSelect.svelte";
-  import { UndoOutline } from "flowbite-svelte-icons";
+  import { FloppyDiskSolid, UndoOutline } from "flowbite-svelte-icons";
 
   let { gameId }: { gameId: number } = $props();
 
@@ -30,6 +29,37 @@
 
     return rawPoints;
   });
+  function save() {
+    let step = new model.Step();
+    step.GameID = gameId;
+    step.PointsTeamA = pointsTeamA;
+    step.AdderTeamA = adderTeamA;
+    step.PointsTeamB = pointsTeamB;
+    step.AdderTeamB = adderTeamB;
+
+    SaveStep(step).then(() => {
+      update();
+      rawPoints = 50;
+      adderTeamA = 0;
+      adderTeamB = 0;
+    });
+  }
+
+  addEventListener("keydown", (event) => {
+    switch (event.key) {
+      case "Enter":
+        save();
+        break;
+      case "z":
+        if (event.ctrlKey) {
+          UndoFor(game).then(update);
+        }
+        break;
+      case "u":
+        UndoFor(game).then(update);
+        break;
+    }
+  });
 
   let adderTeamA = $state(0);
   let adderTeamB = $state(0);
@@ -40,7 +70,17 @@
   $effect(update);
 </script>
 
-<div class="grid grid-cols-2 gap-5 m-5">
+<div
+  class="grid grid-cols-2 gap-5 m-5"
+  onwheel={(e) => {
+    if (e.deltaY > 0 && rawPoints < 130) {
+      rawPoints += 5;
+    }
+    if (e.deltaY < 0 && rawPoints > -30) {
+      rawPoints -= 5;
+    }
+  }}
+>
   <Heading class="text-center">{game.TeamA}</Heading>
   <Heading class="text-center">{game.TeamB}</Heading>
   <div class="col-span-2 flex gap-5 items-center">
@@ -57,23 +97,7 @@
   <TichuSelect bind:value={adderTeamA} />
   <TichuSelect bind:value={adderTeamB} />
   <div class="col-span-2 flex gap-5 items-center justify-center">
-    <Button
+    <Button onclick={save}><FloppyDiskSolid /></Button>
-      onclick={() => {
-        let step = new model.Step();
-        step.GameID = gameId;
-        step.PointsTeamA = pointsTeamA;
-        step.AdderTeamA = adderTeamA;
-        step.PointsTeamB = pointsTeamB;
-        step.AdderTeamB = adderTeamB;
-
-        SaveStep(step).then(() => {
-          update();
-          rawPoints = 50;
-          adderTeamA = 0;
-          adderTeamB = 0;
-        });
-      }}>Save</Button
-    >
     <Button color="red" onclick={() => UndoFor(game).then(update)}
       ><UndoOutline /></Button
     >