From 02526f340a9934ab49d196474057560caf781d6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20T=C3=B8n=20L=C3=B8vhaug?=
 <henrik.lovhaug@gmail.com>
Date: Fri, 7 Mar 2025 14:21:58 +0100
Subject: [PATCH] Add change view button

---
 frontend/src/components/Container.svelte |  3 +-
 frontend/src/components/Modal.svelte     | 10 +++++++
 frontend/src/components/Slider.svelte    | 38 +++++++++++++++++++-----
 3 files changed, 43 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/Modal.svelte

diff --git a/frontend/src/components/Container.svelte b/frontend/src/components/Container.svelte
index a3b9fa4..ad87e1f 100644
--- a/frontend/src/components/Container.svelte
+++ b/frontend/src/components/Container.svelte
@@ -66,7 +66,8 @@
 </script>
 
 <svelte:window onresize={resize} />
-<div class="flex h-screen items-center justify-center">
+<div class="flex h-screen items-center justify-center w-screen">
+  <div class="w-20 mr-auto"></div>
   <div class="relative">
     <img
       src="/background_image?342038402"
diff --git a/frontend/src/components/Modal.svelte b/frontend/src/components/Modal.svelte
new file mode 100644
index 0000000..772be1f
--- /dev/null
+++ b/frontend/src/components/Modal.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  type Props = {
+    open: boolean;
+    onClose: () => void;
+  };
+</script>
+
+<dialog>
+  <div></div>
+</dialog>
diff --git a/frontend/src/components/Slider.svelte b/frontend/src/components/Slider.svelte
index b06327c..6c4da98 100644
--- a/frontend/src/components/Slider.svelte
+++ b/frontend/src/components/Slider.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import type { TrackerData } from "$lib/utils/types";
+  import { onMount } from "svelte";
+  import Modal from "./Modal.svelte";
 
   type Props = {
     selected: number;
@@ -17,6 +19,8 @@
     height = $bindable(),
   }: Props = $props();
 
+  let arena_state: "full_arena" | "scene_only" = $state("scene_only");
+
   const onchange = () => {
     const x_send = trackers[selected].x / width;
     const y_send = trackers[selected].y / height;
@@ -30,17 +34,39 @@
     );
   };
 
-  let z_viz = $derived((trackers[selected].z).toFixed(2))
+  type arenaResponse = {
+    mode: "full_arena" | "scene_only";
+  };
+
+  const buttonAction = async () => {
+    await fetch("/mode")
+      .then((res) => res.json())
+      .then((data: arenaResponse) => {
+        arena_state = data.mode;
+      });
+
+    await fetch("/mode", {
+      method: "POST",
+      body: JSON.stringify({
+        mode: arena_state === "full_arena" ? "scene_only" : "full_arena",
+      }),
+    });
+  };
+
+  let z_viz = $derived(trackers[selected].z.toFixed(2));
 </script>
 
-<div class="slider-container">
+<Modal />
+<div class="slider-container ml-auto">
+  <button class="bg-red-400 rounded-md p-2 mb-24"
+    onclick={buttonAction}>Change mode</button>
   <input
     type="range"
     id="z"
     min="0"
     max="4"
     step="0.01"
-    oninput="{onchange}"
+    oninput={onchange}
     bind:value={trackers[selected].z}
   />
   <output for="z">{z_viz} m</output>
@@ -57,13 +83,12 @@
     writing-mode: vertical-lr;
     direction: rtl;
     appearance: none;
-    width: 75px;
+    width: 120px;
     height: 50%;
     vertical-align: bottom;
   }
 
-
-    /* WebKit Browsers (Chrome, Safari, Edge) */
+  /* WebKit Browsers (Chrome, Safari, Edge) */
   input::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
@@ -80,5 +105,4 @@
     width: 6px;
     border-radius: 3px;
   }
-
 </style>