From 338710d76227dc0b37d44aed514bae0a94210ced Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Fri, 28 Mar 2025 00:25:30 +0100
Subject: [PATCH] feat(deck-hexv1): add HexV1Card component

---
 .../src/components/Cards/HexV1Card.svelte     | 110 ++++++++++++++++++
 frontend/src/views/Game/Main.svelte           |   3 +-
 2 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Cards/HexV1Card.svelte

diff --git a/frontend/src/components/Cards/HexV1Card.svelte b/frontend/src/components/Cards/HexV1Card.svelte
new file mode 100644
index 0000000..a23e034
--- /dev/null
+++ b/frontend/src/components/Cards/HexV1Card.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+    import type { Card } from "../../stores/sessionStore";
+
+    interface ClassicCard {
+        Symbol: string;
+        Color: string;
+    }
+    export let data: ClassicCard = { Color: "", Symbol: "" };
+    export let canUpdateCard: boolean = false;
+    export let updateCard: (newCard: Card) => void = () => {};
+    export let width: number;
+    export let height: number;
+
+    const COLOR_MAP: { [key: string]: string } = {
+        blue: "#009bff",
+        green: "#00c841",
+        yellow: "#ffa500",
+        purple: "#7300c8",
+        rainbow: "#ababab",
+        black: "#000000",
+        "": "#999",
+    };
+
+    function selectColor(color: string) {
+        let newCard: ClassicCard = {
+            Color: color,
+            Symbol: data.Symbol,
+        };
+        updateCard(newCard);
+    }
+</script>
+
+<div class="card" style:background={COLOR_MAP[data.Color]} style:--width={`${width}px`} style:--height={`${height}px`}>
+    {#if data.Symbol.length <= 2}
+        <span class="symbol">{data.Symbol}</span>
+    {:else}
+        <span class="symbol large">{data.Symbol.split(":")[1].replace("_", " ")}</span>
+    {/if}
+    {#if data.Color == "rainbow" && canUpdateCard}
+        <div class="select mt-5">
+            <div>
+                <button
+                    style:background={COLOR_MAP["blue"]}
+                    aria-label="Blue"
+                    on:click={() => {
+                        selectColor("blue");
+                    }}
+                ></button>
+                <button
+                    style:background={COLOR_MAP["green"]}
+                    aria-label="Green"
+                    on:click={() => {
+                        selectColor("green");
+                    }}
+                ></button>
+            </div>
+            <div>
+                <button
+                    style:background={COLOR_MAP["yellow"]}
+                    aria-label="Yellow"
+                    on:click={() => {
+                        selectColor("yellow");
+                    }}
+                ></button>
+                <button
+                    style:background={COLOR_MAP["purple"]}
+                    aria-label="Purple"
+                    on:click={() => {
+                        selectColor("purple");
+                    }}
+                ></button>
+            </div>
+        </div>
+    {/if}
+</div>
+
+<style>
+    .card {
+        display: flex;
+        flex-direction: column;
+        width: var(--width);
+        height: var(--height);
+        padding: 5px;
+        border-radius: 8px;
+    }
+
+    .select button {
+        width: 20px;
+        height: 20px;
+        border-radius: 30px;
+    }
+
+    .card span {
+        text-align: left;
+        word-wrap: anywhere;
+    }
+
+    .card .symbol {
+        font-size: 25px;
+        text-transform: capitalize;
+    }
+
+    .card .symbol.large {
+        font-size: 17px;
+    }
+
+    button {
+        cursor: pointer;
+    }
+</style>
diff --git a/frontend/src/views/Game/Main.svelte b/frontend/src/views/Game/Main.svelte
index 3f179d7..828279a 100644
--- a/frontend/src/views/Game/Main.svelte
+++ b/frontend/src/views/Game/Main.svelte
@@ -5,12 +5,13 @@
     import CardDisplay from "../../components/Game/CardDisplay.svelte";
     import { sessionStore } from "../../stores/sessionStore";
     import OpponentDisplay from "../../components/Game/OpponentDisplay.svelte";
+    import HexV1Card from "../../components/Cards/HexV1Card.svelte";
 
     let maxRotationDeg = 20;
     let centerDistancePx = 200;
     let cardWidth = 100;
     let cardHeight = 150;
-    let cardComponent = ClassicCard;
+    let cardComponent = [ClassicCard, HexV1Card][$sessionStore.cardDeckId ?? 0];
 
     let opponents = derived(sessionStore.store, ($store) => $store.players.filter((e) => e.PlayerId != sessionStore.getUserId()));
     let playerActive = derived(sessionStore.store, ($store) => ($store.playerStates[$store.userId ?? ""] ?? "").Active ?? false);