Merge branch 'main' of github.com:flamingchickens1540/submergedchicke…

…ns into azalea/queue-fix

src/lib/components/CheckGroup.svelte

@@ -4,7 +4,7 @@
         selected: string[]
     }
 
-    let { labels, selected = [] }: Props = $props()
+    let { labels, selected = $bindable([]) }: Props = $props()
 
     function toggleLabel(label: string) {
         if (selected.includes(label)) {

src/lib/components/Rating.svelte

@@ -4,7 +4,7 @@
         value: number
     }
 
-    let { name, value = 3 }: RatingProps = $props()
+    let { name, value = $bindable(3) }: RatingProps = $props()
 </script>
 
 <span class="font-heading text-xl font-semibold">Driver Skill</span>

src/lib/components/UndoButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { AutoActionData, TeleActionData } from "@/types"
+
+    let {
+        timeline = $bindable(),
+    }: { timeline: AutoActionData[] | TeleActionData[] } = $props()
+</script>
+
+{#if timeline.length > 0}
+    <button onclick={() => timeline.pop()}>
+        Undo: <span
+            class={timeline[timeline?.length - 1]?.success
+                ? "text-green-400"
+                : "text-red-400"}
+        >
+            {timeline[timeline?.length - 1]?.action ?? ""}
+        </span>
+    </button>
+{/if}

src/lib/types.ts

@@ -1,8 +1,10 @@
+import type { Tag } from "lucide-svelte"
+
 // Match Scout Page State Enums
 export type TelePageState =
     | "Verify"
     | "ScoreAlgae"
-    | "RemoveAlgae"
+    | "CleanAlgae"
     | "ScoreCoral"
     | "Incap"
     | "None"
@@ -16,7 +18,7 @@ export type TeleActionState =
     | "None"
 export type AutoAction =
     | TeleActionState
-    | `Intake${`Coral${"Station" | "Preplaced"}` | `Algae${"Preplaced" | "Reef"}`}`
+    | `Intake${`Coral${"Station" | "Preplaced" | "Floor"}` | `Algae${"Preplaced" | "Reef" | "Floor"}`}`
     | "Leave"
 
 export type AutoActionData = {
@@ -29,6 +31,7 @@ export type TeleActionData = {
 }
 
 // The TeamMatch sent to the database
+//TODO IMPLEMENT TAGS INTO MATCHDATA
 export type TeamMatchData = {
     scout_id: string
     team_key: string
@@ -38,6 +41,7 @@ export type TeamMatchData = {
     end: EndAction
     driver_skill: 1 | 2 | 3 | 4 | 5
     notes: string
+    tags: TagCategory[]
 }
 
 export type Timeline = {
@@ -47,5 +51,9 @@ export type Timeline = {
 
 export type EndAction = "DeepClimb" | "ShallowClimb" | "Failed" | "None"
 
+type TagCategory = {
+    category: string
+    tags: string[]
+}
 // NOTE Structs for interfacing with the db are autogenerated by prisma with
 // `bun db:load`

src/routes/admin/+page.svelte

@@ -1,22 +1,29 @@
 <script lang="ts">
     import { X, Check } from "lucide-svelte"
     import { io, Socket } from "socket.io-client"
-    import { Progress } from "$lib/components/ui/progress/index.js"
-    // import { SubmittedMatch } from "$lib/types.ts"
-    import Modal from "./Modal.svelte"
+    import { localStore } from "@/localStore.svelte"
 
-    let next_match_key = $state("")
+    let next_match_key = $state(localStore<string>("next_match_key", ""))
 
-    let next_red_robots = $state(["", "", ""])
-    let next_blue_robots = $state(["", "", ""])
+    let next_red_robots = $state(
+        localStore<string[]>("next_red_robots", ["", "", ""])
+    )
+    let next_blue_robots = $state(
+        localStore<string[]>("next_blue_robots", ["", "", ""])
+    )
 
-    let curr_red_robots = $state(["", "", ""])
-    let curr_blue_robots = $state(["", "", ""])
+    let curr_red_robots = $state(
+        localStore<string[]>("curr_red_robots", ["", "", ""])
+    )
+    let curr_blue_robots = $state(
+        localStore<string[]>("curr_blue_robots", ["", "", ""])
+    )
 
     let new_users: string[] = $state([])
     let scout_queue: string[] = $state([])
-    // TODO change to actual type
-    let submitted_team_matches: string[] = $state(["qm14:1540"])
+    // TODO Change to actual type
+    // TODO Pull from backend
+    let submitted_team_matches: string[] = $state([])
 
     let socket: Socket = io({
         auth: {
@@ -49,33 +56,21 @@
     })
 
     const queue_match = async () => {
-        // NOTE robot == "" gets filted out on the backend so color is preserved through index
-        let next_robots = [...next_red_robots, ...next_red_robots]
-        // TODO robot_queue = []
-        // TODO next_robots.toReversed().forEach((team_key, i) =>
-        //     team_matches.value.push({
-        //         status: "pending",
-        //         team_match_key: `${next_match_key} ${team_key}`,
-        //         color: team_color[i][1],
-        //         timeline: null,
-        //     })
-        // )
-        socket.emit("send_match", [next_match_key, next_robots])
-
-        await fetch("/api/newmatch", {
-            method: "POST",
-            body: JSON.stringify(next_match_key),
-            headers: {
-                "Content-Type": "application/json",
-            },
-        })
-
-        next_match_key = ""
-        next_red_robots = ["", "", ""]
-        next_blue_robots = ["", "", ""]
-
-        curr_red_robots = next_robots.slice(0, 2)
-        curr_blue_robots = next_robots.slice(3, 6)
+        let next_robots = [
+            ...next_red_robots.value.map(team => [team, "red"]),
+            ...next_blue_robots.value.map(team => [team, "blue"]),
+        ]
+
+        socket.emit("send_match", [next_match_key.value, next_robots])
+
+        curr_red_robots.value = next_red_robots.value
+        curr_blue_robots.value = next_blue_robots.value
+
+        next_match_key.value =
+            next_match_key.value.slice(0, 2) +
+            (Number.parseInt(next_match_key.value.slice(2)) + 1).toString()
+        next_red_robots.value = ["", "", ""]
+        next_blue_robots.value = ["", "", ""]
     }
 
     const remove_scout = (scout_id: string) => {
@@ -107,8 +102,6 @@
 
         socket.emit("approve_new_user", user)
     }
-
-    const percent_team_matches_submitted = $state(36)
 </script>
 
 <div
@@ -117,7 +110,7 @@
     <div class="col-span-2 row-span-2 grid grid-cols-subgrid grid-rows-subgrid">
         <div class="col-span-2 grid grid-cols-3 gap-2 rounded bg-gunmetal p-2">
             <input
-                bind:value={next_match_key}
+                bind:value={next_match_key.value}
                 placeholder="Next Match"
                 class="rounded bg-eerie_black p-2"
             />
@@ -127,26 +120,26 @@
             <button onclick={queue_match} class="rounded bg-eerie_black p-2"
                 >Queue Match</button
             >
-            {#each next_red_robots as _robot, i}
+            {#each next_red_robots.value as _robot, i}
                 <input
-                    bind:value={next_red_robots[i]}
+                    bind:value={next_red_robots.value[i]}
                     class="rounded bg-bittersweet p-2"
                 />
             {/each}
-            {#each next_blue_robots as _robot, i}
+            {#each next_blue_robots.value as _robot, i}
                 <input
-                    bind:value={next_blue_robots[i]}
+                    bind:value={next_blue_robots.value[i]}
                     class="rounded bg-steel_blue p-2"
                 />
             {/each}
         </div>
         <div class="col-span-2 flex flex-col gap-2 rounded bg-gunmetal p-2">
-            <span class="col-span-3 text-center">Currently Scouting</span>
+            <span class="col-span-3 text-center">Currently Playing</span>
             <div class="grid flex-grow grid-cols-3 grid-rows-2 gap-2">
-                {#each curr_red_robots as robot}
+                {#each curr_red_robots.value as robot}
                     <div class="rounded bg-bittersweet p-2">{robot}</div>
                 {/each}
-                {#each curr_blue_robots as robot}
+                {#each curr_blue_robots.value as robot}
                     <div class="rounded bg-steel_blue p-2">{robot}</div>
                 {/each}
             </div>
@@ -202,13 +195,4 @@
             {/each}
         </div>
     </div>
-    <div class="flex flex-col gap-2 rounded bg-gunmetal p-2">
-        <span class="text-center">Team Matches Submitted</span>
-        <div class="h-4 w-full rounded-full bg-eerie_black">
-            <div
-                class="h-4 rounded-full bg-xanthous"
-                style="width: {percent_team_matches_submitted}%"
-            ></div>
-        </div>
-    </div>
 </div>

src/routes/home/+page.svelte

@@ -15,23 +15,30 @@
     })
 
     let bugReportVisible = $state(false)
+
+    const logout = () => {
+        localStorage.removeItem("username")
+        goto("/")
+    }
+
+    const disable = "opacity-30 pointer-events-none"
 </script>
 
-<div class="flex w-full flex-col gap-2 p-2">
+<div class="flex h-full w-full flex-grow flex-col gap-4 p-2">
     <div class="flex w-full items-center justify-between gap-2">
-        <button class="rounded p-1"><LogOut /></button>
+        <button class="rounded p-1" onclick={logout}><LogOut /></button>
         <span class="font-semibold">{name}</span>
         <button class="rounded p-1"><Settings /></button>
     </div>
-    <div class="grid gap-2 text-xl font-semibold">
+    <div class="grid flex-grow gap-2 text-xl font-semibold">
         <button
-            class="rounded bg-gunmetal p-2"
+            class="rounded bg-gunmetal p-2 {disable}"
             onclick={() => {
                 goto("pit-display")
             }}>Pit Display</button
         >
         <button
-            class="rounded bg-gunmetal p-2"
+            class="rounded bg-gunmetal p-2 {disable}"
             onclick={() => {
                 goto("qual-scout")
             }}>Pit Scout</button
@@ -43,7 +50,7 @@
             }}>Match Scout</button
         >
         <button
-            class="rounded bg-gunmetal p-2"
+            class="rounded bg-gunmetal p-2 {disable}"
             onclick={() => {
                 goto("analysis")
             }}>Analysis</button

src/routes/match-scout/+layout.ts

@@ -0,0 +1 @@
+export const ssr = false

src/routes/match-scout/Action.svelte

@@ -5,11 +5,13 @@
     let {
         action_data = $bindable(),
         index,
+        sub_timeline_len,
         shift,
         remove,
     }: {
         action_data: AutoActionData
         index: number
+        sub_timeline_len: number
         shift: (index: number, change: -1 | 1) => void
         remove: (index: number) => void
     } = $props()
@@ -21,6 +23,15 @@
               ? "bg-jungle_green/50"
               : "bg-imperial_red/50"
     )
+
+    const disable_up = $derived(
+        sub_timeline_len == index + 1 ? "opacity-30 pointer-events-none" : ""
+    )
+    // NOTE This is redundant in the case of auto but not in the case of tele
+    // The only other way to do this is to pass what sub_timeline it's in as well
+    const disable_down = $derived(
+        index == 0 ? "opacity-30 pointer-events-none" : ""
+    )
 </script>
 
 <div
@@ -29,13 +40,13 @@
     <span class="w-auto shrink text-clip">{action_data.action}</span>
     <div class="flex shrink-0 flex-row content-center justify-end gap-4">
         <button
-            class="group-first:pointer-events-none group-first:opacity-30"
+            class="group-first:pointer-events-none group-first:opacity-30 {disable_up}"
             onclick={() => shift(index, 1)}
         >
             <MoveUp />
         </button>
         <button
-            class="group-last:pointer-events-none group-last:opacity-30"
+            class="group-last:pointer-events-none group-last:opacity-30 {disable_down}"
             onclick={() => shift(index, -1)}
         >
             <MoveDown />

src/routes/match-scout/Header.svelte

@@ -1,29 +1,43 @@
 <script lang="ts">
-    import type { TelePageState, AutoPageState, AutoAction } from "$lib/types"
+    import type {
+        TelePageState,
+        AutoPageState,
+        AutoAction,
+        TeleActionData,
+        AutoActionData,
+    } from "$lib/types"
+    import UndoButton from "@/components/UndoButton.svelte"
+    import { localStore } from "@/localStore.svelte"
     import { ArrowRight, ArrowLeft } from "lucide-svelte"
 
+    let team_color = $state(localStore<"blue" | "red" | "">("team_color", ""))
+
     let {
         team_name,
         game_stage,
         page_state = $bindable(),
         next_page,
         prev_page,
+        timeline = $bindable(),
     }: {
-        team_name: String
-        game_stage: String
+        team_name: string
+        game_stage: string
         page_state: AutoPageState
-        prev_page: null | (() => void)
-        next_page: null | (() => void)
+        prev_page?: () => void
+        next_page?: () => void
+        timeline?: AutoActionData[] | TeleActionData[]
     } = $props()
 </script>
 
 <header
     class="font-heading flex flex-row justify-between border-b-2 border-white/10 p-2 text-lg font-semibold"
 >
-    <span class="">
+    <span class="text-{team_color.value}-400">
         {team_name}
     </span>
-    <!-- TODO: Undo button -->
+    {#if timeline}
+        <UndoButton {timeline} />
+    {/if}
     <div class="align-item-center flex gap-2">
         <button
             onclick={prev_page}
@@ -33,7 +47,9 @@
         </button>
         <span
             >{page_state == "None" || page_state == null
-                ? game_stage
+                ? game_stage == "Prematch"
+                    ? "Prematch"
+                    : game_stage.slice(0, 4)
                 : page_state}</span
         >
         <button