From 7c12fc7d67aa34823e2c690643fe295ca6312f81 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 01:21:13 +0200
Subject: [PATCH 01/14] refactor to add data prop

---
 src/pages/game.tsx | 51 +++++++++++++++++++++++++++++++++-------------
 src/types/card.ts  |  8 +++++++-
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index e6693ba..f4d2661 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -7,18 +7,19 @@ import { useMemo, useState } from "react";
 
 const initGameState: GameCard[][] = Array.from({ length: 36 }, () => []);
 
+type PState = Record<string, { state: GameState; data: any }>;
+
 export default function GamePage() {
   const { query } = useRouter();
   const name = (query?.name as string | undefined) ?? "p1";
 
-  // const [gridItems, setGridItems] = useState<GameState>(initGameState);
   const [players, setPlayers] = useState<PlayersState>({
-    p1: initGameState,
-    p2: initGameState,
-    GLOBAL: initGameState,
+    p1: { state: initGameState, data: {} },
+    p2: { state: initGameState, data: {} },
+    GLOBAL: { state: initGameState, data: {} },
   });
 
-  function setPlayer(playerName: keyof typeof players) {
+  function setPlayerState(playerName: keyof typeof players) {
     return (state: GameState) => {
       const newState = [...state]; // make a copy of state
       const GLOBAL = newState.slice(0, GRIDS.AURA_12 + 1); // GLOBAL takes game grid
@@ -26,36 +27,58 @@ export default function GamePage() {
       const newGlobal = [...GLOBAL, ...GLOBAL_EMPTY];
       setPlayers((prev) => ({
         ...prev,
-        GLOBAL: newGlobal,
-        [playerName]: state,
+        GLOBAL: { state: newGlobal, data: {} },
+        [playerName]: { state, data: prev[playerName].data },
+      }));
+    };
+  }
+
+  function setPlayerData(playerName: keyof typeof players) {
+    return (data: PlayersState["GLOBAL"]["data"]) => {
+      setPlayers((prev) => ({
+        ...prev,
+        [playerName]: { state: prev[playerName].state, data },
       }));
     };
   }
 
   const state = useMemo(() => {
     return [
-      ...players.GLOBAL.slice(0, GRIDS.HAND),
-      ...players[name as keyof typeof players].slice(GRIDS.HAND),
+      ...players.GLOBAL.state.slice(0, GRIDS.HAND),
+      ...players[name as keyof typeof players].state.slice(GRIDS.HAND),
     ];
   }, [players, name]);
 
-  if (needsDeck(players["p1"]))
+  if (needsDeck(players["p1"].state))
     return (
       <div>
         <p>Load deck for player 1</p>
-        <LoadDeck gridItems={players["p1"]} setGridItems={setPlayer("p1")} />
+        <LoadDeck
+          gridItems={players["p1"].state}
+          setGridItems={setPlayerState("p1")}
+        />
       </div>
     );
 
-  if (needsDeck(players["p2"]))
+  if (needsDeck(players["p2"].state))
     return (
       <div>
         <p>Load deck for player 2</p>
-        <LoadDeck gridItems={players["p2"]} setGridItems={setPlayer("p2")} />
+        <LoadDeck
+          gridItems={players["p2"].state}
+          setGridItems={setPlayerState("p2")}
+        />
       </div>
     );
 
-  return <GameBoard gridItems={state} setGridItems={setPlayer(name)} />;
+  return (
+    <GameBoard
+      gridItems={state}
+      setGridItems={setPlayerState(name)}
+      players={players}
+      setMyData={setPlayerData(name)}
+    />
+  );
 }
 
 function needsDeck(state: GameState) {
diff --git a/src/types/card.ts b/src/types/card.ts
index e10ffcb..fb81a6c 100644
--- a/src/types/card.ts
+++ b/src/types/card.ts
@@ -49,4 +49,10 @@ export type GridItem = GameCard[];
  * */
 export type GameState = GridItem[];
 
-export type PlayersState = Record<string, GameState> & { GLOBAL: GameState };
+type PState = { state: GameState; data: any };
+export type PlayersState = Record<string, PState> & { GLOBAL: PState };
+
+export type PlayerDataProps = {
+  players?: PlayersState;
+  setMyData(data: PlayersState["GLOBAL"]["data"]): void;
+};

From 742fc784919815e7b57d3f891378521755667271 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 01:21:20 +0200
Subject: [PATCH 02/14] drill prop and adjust header

---
 src/components/organisms/GameBoard/Layout.tsx | 22 +++++++++----------
 src/components/organisms/GameBoard/index.tsx  | 19 +++++++++++++---
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx
index 80ebe97..e6e174e 100644
--- a/src/components/organisms/GameBoard/Layout.tsx
+++ b/src/components/organisms/GameBoard/Layout.tsx
@@ -6,12 +6,17 @@ import { GameFooter } from "./Footer";
 import { GameStateActions } from ".";
 import { Auras } from "./Auras";
 import Link from "next/link";
+import { PlayerDataProps } from "@/types/card";
 
 const { nav, body, footer } = LAYOUT_HEIGHTS;
 
 export const GameLayout = (
-  props: GameStateActions & { children: ReactNode },
+  props: GameStateActions & PlayerDataProps & { children: ReactNode },
 ) => {
+  const playerKeys = Object.keys(props?.players ?? {}).filter(
+    (key) => key !== "GLOBAL",
+  );
+
   return (
     <Grid style={{ gridTemplateRows: `${nav} ${body} ${footer}` }} gap={0}>
       <div
@@ -23,16 +28,11 @@ export const GameLayout = (
           gap: "2rem",
         }}
       >
-        <p style={{ width: "fit-content" }}>
-          Playtest cards on a grid. Click to tap. Right click to view big.
-        </p>
-        <Link href={{ query: { name: "p1" } }}>
-          <p>p1</p>
-        </Link>
-
-        <Link href={{ query: { name: "p2" } }}>
-          <p>p2</p>
-        </Link>
+        {playerKeys?.map((key) => (
+          <Link href={{ query: { name: key } }}>
+            <p>{key}</p>
+          </Link>
+        ))}
       </div>
       <Box position="relative" h="100%" w="100%" maxW="1200px" m="0 auto">
         <Auras {...props} />
diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx
index a60edc1..2d96149 100644
--- a/src/components/organisms/GameBoard/index.tsx
+++ b/src/components/organisms/GameBoard/index.tsx
@@ -12,7 +12,12 @@ import { Modal } from "@/components/atoms/Modal";
 
 import { useState } from "react";
 import { FullCardAtlas } from "@/components/atoms/card-view/atlas";
-import { GameCard, GameState } from "@/types/card";
+import {
+  GameCard,
+  GameState,
+  PlayerDataProps,
+  PlayersState,
+} from "@/types/card";
 import { GRIDS } from "./constants";
 import { useRouter } from "next/router";
 
@@ -20,7 +25,11 @@ export type GameStateActions = {
   gridItems: GameState;
   setGridItems: (state: GameState) => void;
 };
-export const GameBoard = ({ gridItems, setGridItems }: GameStateActions) => {
+export const GameBoard = ({
+  gridItems,
+  setGridItems,
+  ...playerDataProps
+}: GameStateActions & PlayerDataProps) => {
   const { query } = useRouter();
 
   const { activeCard, activeId, ...dragProps } = useHandleDrag({
@@ -33,7 +42,11 @@ export const GameBoard = ({ gridItems, setGridItems }: GameStateActions) => {
 
   return (
     <DndContext {...dragProps}>
-      <GameLayout gridItems={gridItems} setGridItems={setGridItems}>
+      <GameLayout
+        gridItems={gridItems}
+        setGridItems={setGridItems}
+        {...playerDataProps}
+      >
         {(isReversed
           ? gridItems.slice(0, 20).reverse()
           : gridItems.slice(0, 20)

From ccf21d18b168af995a944e1854587e81d63b075c Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 01:29:02 +0200
Subject: [PATCH 03/14] refactor the header

---
 .../organisms/GameBoard/Header/index.tsx      | 26 +++++++++++++++++++
 src/components/organisms/GameBoard/Layout.tsx | 22 ++--------------
 2 files changed, 28 insertions(+), 20 deletions(-)
 create mode 100644 src/components/organisms/GameBoard/Header/index.tsx

diff --git a/src/components/organisms/GameBoard/Header/index.tsx b/src/components/organisms/GameBoard/Header/index.tsx
new file mode 100644
index 0000000..502f378
--- /dev/null
+++ b/src/components/organisms/GameBoard/Header/index.tsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { PlayersState } from "@/types/card";
+import { LAYOUT_HEIGHTS } from "../constants";
+
+export const GameHeader = (props: { players?: PlayersState }) => {
+  const playerKeys = Object.keys(props?.players ?? {}).filter(
+    (key) => key !== "GLOBAL",
+  );
+  return (
+    <div
+      style={{
+        background: "rgba(0,200,0,0.2)",
+        padding: "0.5rem",
+        height: LAYOUT_HEIGHTS.nav,
+        display: "flex",
+        gap: "2rem",
+      }}
+    >
+      {playerKeys?.map((key) => (
+        <Link href={{ query: { name: key } }}>
+          <p>{key}</p>
+        </Link>
+      ))}
+    </div>
+  );
+};
diff --git a/src/components/organisms/GameBoard/Layout.tsx b/src/components/organisms/GameBoard/Layout.tsx
index e6e174e..d30d94d 100644
--- a/src/components/organisms/GameBoard/Layout.tsx
+++ b/src/components/organisms/GameBoard/Layout.tsx
@@ -5,35 +5,17 @@ import { LAYOUT_HEIGHTS } from "./constants";
 import { GameFooter } from "./Footer";
 import { GameStateActions } from ".";
 import { Auras } from "./Auras";
-import Link from "next/link";
 import { PlayerDataProps } from "@/types/card";
+import { GameHeader } from "./Header";
 
 const { nav, body, footer } = LAYOUT_HEIGHTS;
 
 export const GameLayout = (
   props: GameStateActions & PlayerDataProps & { children: ReactNode },
 ) => {
-  const playerKeys = Object.keys(props?.players ?? {}).filter(
-    (key) => key !== "GLOBAL",
-  );
-
   return (
     <Grid style={{ gridTemplateRows: `${nav} ${body} ${footer}` }} gap={0}>
-      <div
-        style={{
-          background: "rgba(0,200,0,0.2)",
-          padding: "0.5rem",
-          height: nav,
-          display: "flex",
-          gap: "2rem",
-        }}
-      >
-        {playerKeys?.map((key) => (
-          <Link href={{ query: { name: key } }}>
-            <p>{key}</p>
-          </Link>
-        ))}
-      </div>
+      <GameHeader players={props.players} />
       <Box position="relative" h="100%" w="100%" maxW="1200px" m="0 auto">
         <Auras {...props} />
         <div

From b782dbcf50fe653c547c5f6db45674ca337a02f1 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 02:36:50 +0200
Subject: [PATCH 04/14] setup header tray

---
 .../organisms/GameBoard/Header/PlayerBox.tsx  | 103 ++++++++++++++++++
 .../organisms/GameBoard/Header/index.tsx      |  12 +-
 2 files changed, 112 insertions(+), 3 deletions(-)
 create mode 100644 src/components/organisms/GameBoard/Header/PlayerBox.tsx

diff --git a/src/components/organisms/GameBoard/Header/PlayerBox.tsx b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
new file mode 100644
index 0000000..aa1c83f
--- /dev/null
+++ b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
@@ -0,0 +1,103 @@
+import Link from "next/link";
+import { PlayersState } from "@/types/card";
+import { GRIDS, LAYOUT_HEIGHTS } from "../constants";
+import { Box, Flex, HStack } from "styled-system/jsx";
+
+import { ReactNode } from "react";
+import { IconType } from "react-icons";
+import { JsxStyleProps } from "styled-system/types";
+
+import { PiCardsThreeFill as IconDeck } from "react-icons/pi";
+import { TbCardsFilled as IconHand } from "react-icons/tb";
+import { TbMap2 as IconMap } from "react-icons/tb";
+import { GiPirateGrave as IconGrave } from "react-icons/gi";
+import { GiHealthNormal as IconHealth } from "react-icons/gi";
+import { cva } from "styled-system/css/cva.mjs";
+
+export const PlayerBox = ({
+  name,
+  player,
+}: {
+  name: string;
+  player: PlayersState["GLOBAL"];
+}) => {
+  const { GRAVE, DECK, ATLAS_DECK, HAND } = GRIDS;
+  function length(position: number) {
+    return player.state[position].length;
+  }
+
+  return (
+    <HStack fontSize="1rem" gap={1}>
+      <p>{name}</p>
+
+      <Flex
+        bg="rgba(255,255,255,0.5)"
+        p="0.1rem 0.5rem"
+        borderRadius="0.75rem"
+        gap={2}
+      >
+        <Stat Icon={IconGrave} value={length(GRIDS.GRAVE)} />
+        <Stat Icon={IconDeck} value={length(GRIDS.DECK)} />
+        <Stat Icon={IconMap} value={length(GRIDS.ATLAS_DECK)} />
+        <Stat Icon={IconHand} value={length(GRIDS.HAND)} />
+      </Flex>
+
+      <Flex
+        bg="rgba(0,255,100,0.5)"
+        p="0.1rem 0.5rem"
+        borderRadius="0.75rem"
+        alignItems="center"
+        gap={1}
+      >
+        <IconHealth fontSize="0.75rem" />
+        <p>20</p>
+      </Flex>
+
+      <Flex
+        bg="rgba(255,255,255,0.5)"
+        p="0.1rem 0.5rem"
+        borderRadius="0.75rem"
+        gap={2}
+        alignItems="center"
+      >
+        <Resource icon="earth" value={3} />
+        <Resource icon="fire" value={5} />
+        <Resource icon="water" value={9} />
+        <Resource icon="wind" value={3} />
+      </Flex>
+    </HStack>
+  );
+};
+
+const Resource = (props: {
+  value: number;
+  icon: "earth" | "fire" | "water" | "wind";
+}) => (
+  <HStack gap={1}>
+    <img
+      src={`/icon/${props.icon}.webp`}
+      alt="fire"
+      style={{ height: "1rem", width: "1rem" }}
+    />
+    <p>{props.value}</p>
+  </HStack>
+);
+
+const Stat = ({
+  Icon,
+  value,
+  ...props
+}: { Icon: IconType; value: number } & JsxStyleProps) => {
+  return (
+    <HStack gap={1} alignItems="center" {...props}>
+      <Icon fontSize="0.875rem" opacity={0.5} />
+      <p>{value}</p>
+    </HStack>
+  );
+};
+
+const iconStyle = cva({
+  base: {
+    width: "1rem",
+  },
+});
diff --git a/src/components/organisms/GameBoard/Header/index.tsx b/src/components/organisms/GameBoard/Header/index.tsx
index 502f378..08ba205 100644
--- a/src/components/organisms/GameBoard/Header/index.tsx
+++ b/src/components/organisms/GameBoard/Header/index.tsx
@@ -1,6 +1,8 @@
 import Link from "next/link";
 import { PlayersState } from "@/types/card";
-import { LAYOUT_HEIGHTS } from "../constants";
+import { GRIDS, LAYOUT_HEIGHTS } from "../constants";
+import { Box, HStack } from "styled-system/jsx";
+import { PlayerBox } from "./PlayerBox";
 
 export const GameHeader = (props: { players?: PlayersState }) => {
   const playerKeys = Object.keys(props?.players ?? {}).filter(
@@ -9,16 +11,20 @@ export const GameHeader = (props: { players?: PlayersState }) => {
   return (
     <div
       style={{
-        background: "rgba(0,200,0,0.2)",
+        background: "rgba(0,200,200,0.2)",
         padding: "0.5rem",
         height: LAYOUT_HEIGHTS.nav,
         display: "flex",
         gap: "2rem",
+        overflowX: "auto",
+        maxWidth: "100vw",
       }}
     >
       {playerKeys?.map((key) => (
         <Link href={{ query: { name: key } }}>
-          <p>{key}</p>
+          {props?.players?.[key] && (
+            <PlayerBox player={props?.players[key]} name={key} />
+          )}
         </Link>
       ))}
     </div>

From 49130bc08bcd2f4590bc82ce066e8e5c3a25a6e5 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 02:39:02 +0200
Subject: [PATCH 05/14] rearrange

---
 .../organisms/GameBoard/Header/PlayerBox.tsx  | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/organisms/GameBoard/Header/PlayerBox.tsx b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
index aa1c83f..c218f4d 100644
--- a/src/components/organisms/GameBoard/Header/PlayerBox.tsx
+++ b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
@@ -30,18 +30,6 @@ export const PlayerBox = ({
     <HStack fontSize="1rem" gap={1}>
       <p>{name}</p>
 
-      <Flex
-        bg="rgba(255,255,255,0.5)"
-        p="0.1rem 0.5rem"
-        borderRadius="0.75rem"
-        gap={2}
-      >
-        <Stat Icon={IconGrave} value={length(GRIDS.GRAVE)} />
-        <Stat Icon={IconDeck} value={length(GRIDS.DECK)} />
-        <Stat Icon={IconMap} value={length(GRIDS.ATLAS_DECK)} />
-        <Stat Icon={IconHand} value={length(GRIDS.HAND)} />
-      </Flex>
-
       <Flex
         bg="rgba(0,255,100,0.5)"
         p="0.1rem 0.5rem"
@@ -65,6 +53,18 @@ export const PlayerBox = ({
         <Resource icon="water" value={9} />
         <Resource icon="wind" value={3} />
       </Flex>
+
+      <Flex
+        bg="rgba(255,255,255,0.5)"
+        p="0.1rem 0.5rem"
+        borderRadius="0.75rem"
+        gap={2}
+      >
+        <Stat Icon={IconGrave} value={length(GRIDS.GRAVE)} />
+        <Stat Icon={IconDeck} value={length(GRIDS.DECK)} />
+        <Stat Icon={IconMap} value={length(GRIDS.ATLAS_DECK)} />
+        <Stat Icon={IconHand} value={length(GRIDS.HAND)} />
+      </Flex>
     </HStack>
   );
 };
@@ -79,7 +79,7 @@ const Resource = (props: {
       alt="fire"
       style={{ height: "1rem", width: "1rem" }}
     />
-    <p>{props.value}</p>
+    <p style={{ fontFamily: "monospace" }}>{props.value}</p>
   </HStack>
 );
 
@@ -91,7 +91,7 @@ const Stat = ({
   return (
     <HStack gap={1} alignItems="center" {...props}>
       <Icon fontSize="0.875rem" opacity={0.5} />
-      <p>{value}</p>
+      <p style={{ fontFamily: "monospace" }}>{value}</p>
     </HStack>
   );
 };

From 39e0323674a40c50cb684ade561f91c970fe8aaa Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 03:04:51 +0200
Subject: [PATCH 06/14] adjust scrollbar css

---
 src/styles/globals.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index e27a23b..acc752e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1 +1,21 @@
 @layer reset, base, tokens, recipes, utilities;
+
+/* custom scrollbar */
+::-webkit-scrollbar {
+  width: 20px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}

From f3404d7584575e7b69900b4b851058b23a82955a Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 03:04:58 +0200
Subject: [PATCH 07/14] setup playerbox

---
 .../organisms/GameBoard/Header/PlayerBox.tsx     | 16 +++++++++++++---
 .../organisms/GameBoard/Header/index.tsx         |  6 +++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/organisms/GameBoard/Header/PlayerBox.tsx b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
index c218f4d..58a301d 100644
--- a/src/components/organisms/GameBoard/Header/PlayerBox.tsx
+++ b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
@@ -13,6 +13,7 @@ import { TbMap2 as IconMap } from "react-icons/tb";
 import { GiPirateGrave as IconGrave } from "react-icons/gi";
 import { GiHealthNormal as IconHealth } from "react-icons/gi";
 import { cva } from "styled-system/css/cva.mjs";
+import css from "styled-jsx/css";
 
 export const PlayerBox = ({
   name,
@@ -28,7 +29,7 @@ export const PlayerBox = ({
 
   return (
     <HStack fontSize="1rem" gap={1}>
-      <p>{name}</p>
+      <p className={textStyle({ visual: "bold" })}>{name}</p>
 
       <Flex
         bg="rgba(0,255,100,0.5)"
@@ -96,8 +97,17 @@ const Stat = ({
   );
 };
 
-const iconStyle = cva({
+const textStyle = cva({
   base: {
-    width: "1rem",
+    fontFamily: "monospace",
+  },
+  variants: {
+    visual: {
+      bold: { fontWeight: 600, fontFamily: "serif" },
+    },
+    // size: {
+    //   sm: { padding: '4', fontSize: '12px' },
+    //   lg: { padding: '8', fontSize: '24px' }
+    // }
   },
 });
diff --git a/src/components/organisms/GameBoard/Header/index.tsx b/src/components/organisms/GameBoard/Header/index.tsx
index 08ba205..55b3be2 100644
--- a/src/components/organisms/GameBoard/Header/index.tsx
+++ b/src/components/organisms/GameBoard/Header/index.tsx
@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { PlayersState } from "@/types/card";
-import { GRIDS, LAYOUT_HEIGHTS } from "../constants";
-import { Box, HStack } from "styled-system/jsx";
+import { LAYOUT_HEIGHTS } from "../constants";
 import { PlayerBox } from "./PlayerBox";
 
 export const GameHeader = (props: { players?: PlayersState }) => {
@@ -12,12 +11,13 @@ export const GameHeader = (props: { players?: PlayersState }) => {
     <div
       style={{
         background: "rgba(0,200,200,0.2)",
-        padding: "0.5rem",
+        padding: "0.5rem 1rem",
         height: LAYOUT_HEIGHTS.nav,
         display: "flex",
         gap: "2rem",
         overflowX: "auto",
         maxWidth: "100vw",
+        scrollbarGutter: "stable both-edges",
       }}
     >
       {playerKeys?.map((key) => (

From 8adc1a26a74a8090408057f07995460b2978958b Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 03:14:47 +0200
Subject: [PATCH 08/14] prepare data type

---
 .../organisms/GameBoard/Header/PlayerBox.tsx       |  7 +++----
 src/pages/game.tsx                                 | 14 +++++++++-----
 src/types/card.ts                                  | 11 ++++++++++-
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/organisms/GameBoard/Header/PlayerBox.tsx b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
index 58a301d..7e802c5 100644
--- a/src/components/organisms/GameBoard/Header/PlayerBox.tsx
+++ b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { PlayersState } from "@/types/card";
+import { PlayerData, PlayersState } from "@/types/card";
 import { GRIDS, LAYOUT_HEIGHTS } from "../constants";
 import { Box, Flex, HStack } from "styled-system/jsx";
 
@@ -22,7 +22,6 @@ export const PlayerBox = ({
   name: string;
   player: PlayersState["GLOBAL"];
 }) => {
-  const { GRAVE, DECK, ATLAS_DECK, HAND } = GRIDS;
   function length(position: number) {
     return player.state[position].length;
   }
@@ -39,7 +38,7 @@ export const PlayerBox = ({
         gap={1}
       >
         <IconHealth fontSize="0.75rem" />
-        <p>20</p>
+        <p>{player.data.life}</p>
       </Flex>
 
       <Flex
@@ -72,7 +71,7 @@ export const PlayerBox = ({
 
 const Resource = (props: {
   value: number;
-  icon: "earth" | "fire" | "water" | "wind";
+  icon: keyof PlayerData["resources"];
 }) => (
   <HStack gap={1}>
     <img
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index f4d2661..b496ba8 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -1,11 +1,15 @@
 import { LoadDeck } from "@/components/molecules/LoadDeck";
 import { GameBoard } from "@/components/organisms/GameBoard";
 import { GRIDS } from "@/components/organisms/GameBoard/constants";
-import { GameCard, GameState, PlayersState } from "@/types/card";
+import { GameCard, GameState, PlayerData, PlayersState } from "@/types/card";
 import { useRouter } from "next/router";
 import { useMemo, useState } from "react";
 
 const initGameState: GameCard[][] = Array.from({ length: 36 }, () => []);
+const initGameData: PlayerData = {
+  resources: { earth: 0, wind: 0, fire: 0, water: 0 },
+  life: 20,
+};
 
 type PState = Record<string, { state: GameState; data: any }>;
 
@@ -14,9 +18,9 @@ export default function GamePage() {
   const name = (query?.name as string | undefined) ?? "p1";
 
   const [players, setPlayers] = useState<PlayersState>({
-    p1: { state: initGameState, data: {} },
-    p2: { state: initGameState, data: {} },
-    GLOBAL: { state: initGameState, data: {} },
+    p1: { state: initGameState, data: initGameData },
+    p2: { state: initGameState, data: initGameData },
+    GLOBAL: { state: initGameState, data: initGameData },
   });
 
   function setPlayerState(playerName: keyof typeof players) {
@@ -27,7 +31,7 @@ export default function GamePage() {
       const newGlobal = [...GLOBAL, ...GLOBAL_EMPTY];
       setPlayers((prev) => ({
         ...prev,
-        GLOBAL: { state: newGlobal, data: {} },
+        GLOBAL: { state: newGlobal, data: initGameData },
         [playerName]: { state, data: prev[playerName].data },
       }));
     };
diff --git a/src/types/card.ts b/src/types/card.ts
index fb81a6c..0d8618d 100644
--- a/src/types/card.ts
+++ b/src/types/card.ts
@@ -49,7 +49,16 @@ export type GridItem = GameCard[];
  * */
 export type GameState = GridItem[];
 
-type PState = { state: GameState; data: any };
+export type PlayerData = {
+  resources: {
+    earth: number;
+    wind: number;
+    fire: number;
+    water: number;
+  };
+  life: number;
+};
+type PState = { state: GameState; data: PlayerData };
 export type PlayersState = Record<string, PState> & { GLOBAL: PState };
 
 export type PlayerDataProps = {

From 25edf57e170fe41047dc46c3e13f84c02a5b7dcb Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 03:34:46 +0200
Subject: [PATCH 09/14] add color styling

---
 .../organisms/GameBoard/Header/PlayerBox.tsx  | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/organisms/GameBoard/Header/PlayerBox.tsx b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
index 7e802c5..0f7e5d7 100644
--- a/src/components/organisms/GameBoard/Header/PlayerBox.tsx
+++ b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
@@ -3,7 +3,7 @@ import { PlayerData, PlayersState } from "@/types/card";
 import { GRIDS, LAYOUT_HEIGHTS } from "../constants";
 import { Box, Flex, HStack } from "styled-system/jsx";
 
-import { ReactNode } from "react";
+import { ReactNode, useMemo } from "react";
 import { IconType } from "react-icons";
 import { JsxStyleProps } from "styled-system/types";
 
@@ -15,6 +15,8 @@ import { GiHealthNormal as IconHealth } from "react-icons/gi";
 import { cva } from "styled-system/css/cva.mjs";
 import css from "styled-jsx/css";
 
+import { mix } from "polished";
+
 export const PlayerBox = ({
   name,
   player,
@@ -22,23 +24,37 @@ export const PlayerBox = ({
   name: string;
   player: PlayersState["GLOBAL"];
 }) => {
+  const life = 20;
+
   function length(position: number) {
     return player.state[position].length;
   }
 
+  const bg = useMemo(() => {
+    const percent = Math.min(life / 20, 1);
+    if (life > 10) return mix(percent, "#00b8a9", "#f8f3d4");
+    if (life > 1) return mix(life / 20, "#f8f3d4", "#f6416c");
+
+    return "purple";
+  }, [life]);
+
   return (
     <HStack fontSize="1rem" gap={1}>
       <p className={textStyle({ visual: "bold" })}>{name}</p>
 
       <Flex
-        bg="rgba(0,255,100,0.5)"
+        minW="3rem"
         p="0.1rem 0.5rem"
         borderRadius="0.75rem"
         alignItems="center"
+        justifyContent="center"
         gap={1}
+        style={{
+          background: bg,
+        }}
       >
         <IconHealth fontSize="0.75rem" />
-        <p>{player.data.life}</p>
+        <p>{life}</p>
       </Flex>
 
       <Flex

From 1170b26d0ff5c7734282ee5a4b5c2662a9ac06f0 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 03:34:52 +0200
Subject: [PATCH 10/14] add props to counter

---
 .../organisms/GameBoard/Footer/Counters/index.tsx           | 3 ++-
 src/components/organisms/GameBoard/Footer/index.tsx         | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/organisms/GameBoard/Footer/Counters/index.tsx b/src/components/organisms/GameBoard/Footer/Counters/index.tsx
index 8323f29..57936be 100644
--- a/src/components/organisms/GameBoard/Footer/Counters/index.tsx
+++ b/src/components/organisms/GameBoard/Footer/Counters/index.tsx
@@ -1,9 +1,10 @@
+import { PlayerDataProps } from "@/types/card";
 import { useState } from "react";
 import { cva } from "styled-system/css/cva.mjs";
 import { Flex, Grid, HStack, VStack } from "styled-system/jsx";
 import { button } from "styled-system/recipes";
 
-export const CountersTray = () => {
+export const CountersTray = (props: PlayerDataProps) => {
   return (
     <Flex
       direction="column"
diff --git a/src/components/organisms/GameBoard/Footer/index.tsx b/src/components/organisms/GameBoard/Footer/index.tsx
index 6cdabb4..c64d7db 100644
--- a/src/components/organisms/GameBoard/Footer/index.tsx
+++ b/src/components/organisms/GameBoard/Footer/index.tsx
@@ -11,7 +11,7 @@ import { CardAtlas } from "@/components/atoms/mock-cards/atlas";
 import { CardImage } from "@/components/atoms/mock-cards/card";
 import { DecksTray } from "./Decks";
 import { GraveTray } from "./Grave";
-import { GameCard } from "@/types/card";
+import { GameCard, PlayerDataProps } from "@/types/card";
 import { useState } from "react";
 import { Modal } from "@/components/atoms/Modal";
 import { FullCardAtlas } from "@/components/atoms/card-view/atlas";
@@ -28,7 +28,7 @@ import { CountersTray } from "./Counters";
 /**
  * HAND - Drag and Drop tray of all the cards in your hand
  * */
-export const GameFooter = (props: GameStateActions) => {
+export const GameFooter = (props: GameStateActions & PlayerDataProps) => {
   const gridIndex = GRIDS.HAND;
   const cardsInHand = props.gridItems[gridIndex] ?? [];
 
@@ -50,7 +50,7 @@ export const GameFooter = (props: GameStateActions) => {
       >
         <GraveTray {...props} />
         <DecksTray {...props} />
-        <CountersTray />
+        <CountersTray {...props} />
         <DroppableGridItem id={gridIndex.toString()} gridIndex={gridIndex}>
           <SortableContext
             id={`grid-${gridIndex}`}

From 693b2f600633187bc5a022f63f90968abc4220e9 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 03:46:40 +0200
Subject: [PATCH 11/14] attach the counters

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 24 +++++++++++++
 .../GameBoard/Footer/Counters/index.tsx       | 35 +++++++++++++++----
 .../organisms/GameBoard/Header/PlayerBox.tsx  | 19 ++++------
 src/pages/game.tsx                            |  5 ++-
 src/types/card.ts                             | 10 +++---
 6 files changed, 67 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 90b35bb..2a7822a 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@tanstack/react-query-devtools": "^5.55.4",
     "axios": "^1.7.7",
     "next": "14.2.8",
+    "polished": "^4.3.1",
     "react": "^18",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1a11e03..de5f1e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       next:
         specifier: 14.2.8
         version: 14.2.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      polished:
+        specifier: ^4.3.1
+        version: 4.3.1
       react:
         specifier: ^18
         version: 18.3.1
@@ -85,6 +88,10 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/runtime@7.25.6':
+    resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.25.6':
     resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
     engines: {node: '>=6.9.0'}
@@ -1878,6 +1885,10 @@ packages:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
 
+  polished@4.3.1:
+    resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
+    engines: {node: '>=10'}
+
   possible-typed-array-names@1.0.0:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
@@ -2017,6 +2028,9 @@ packages:
     resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
     engines: {node: '>= 0.4'}
 
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
   regexp.prototype.flags@1.5.2:
     resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
     engines: {node: '>= 0.4'}
@@ -2358,6 +2372,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.25.6
 
+  '@babel/runtime@7.25.6':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@babel/types@7.25.6':
     dependencies:
       '@babel/helper-string-parser': 7.24.8
@@ -4376,6 +4394,10 @@ snapshots:
 
   pluralize@8.0.0: {}
 
+  polished@4.3.1:
+    dependencies:
+      '@babel/runtime': 7.25.6
+
   possible-typed-array-names@1.0.0: {}
 
   postcss-discard-duplicates@7.0.0(postcss@8.4.41):
@@ -4511,6 +4533,8 @@ snapshots:
       globalthis: 1.0.4
       which-builtin-type: 1.1.4
 
+  regenerator-runtime@0.14.1: {}
+
   regexp.prototype.flags@1.5.2:
     dependencies:
       call-bind: 1.0.7
diff --git a/src/components/organisms/GameBoard/Footer/Counters/index.tsx b/src/components/organisms/GameBoard/Footer/Counters/index.tsx
index 57936be..bdf345e 100644
--- a/src/components/organisms/GameBoard/Footer/Counters/index.tsx
+++ b/src/components/organisms/GameBoard/Footer/Counters/index.tsx
@@ -1,10 +1,22 @@
-import { PlayerDataProps } from "@/types/card";
+import { PlayerData, PlayerDataProps } from "@/types/card";
+import { useRouter } from "next/router";
 import { useState } from "react";
 import { cva } from "styled-system/css/cva.mjs";
 import { Flex, Grid, HStack, VStack } from "styled-system/jsx";
 import { button } from "styled-system/recipes";
 
 export const CountersTray = (props: PlayerDataProps) => {
+  const { query } = useRouter();
+  const name = query?.name ?? "p1";
+  const me = props?.players?.[name as string].data;
+
+  function setField(field: keyof PlayerData) {
+    return (value: number) => {
+      const newData = { ...me, [field]: value };
+      props.setMyData(newData as PlayerData);
+    };
+  }
+
   return (
     <Flex
       direction="column"
@@ -16,20 +28,29 @@ export const CountersTray = (props: PlayerDataProps) => {
       alignItems="center"
     >
       {(["earth", "fire", "water", "wind"] as const).map((type) => (
-        <Resource key={type} type={type} />
+        <Resource
+          key={type}
+          type={type}
+          setValue={setField(type)}
+          value={me?.[type] ?? 0}
+        />
       ))}
     </Flex>
   );
 };
 
-const Resource = (props: { type: "fire" | "water" | "wind" | "earth" }) => {
-  const [amount, setAmount] = useState(0);
+const Resource = (props: {
+  type: "fire" | "water" | "wind" | "earth";
+  setValue(value: number): void;
+  value: number;
+}) => {
   function increment() {
-    setAmount((prev) => prev + 1);
+    props.setValue(props.value + 1);
   }
 
   function decrement() {
-    setAmount((prev) => (prev === 0 ? prev : prev - 1));
+    if (props.value === 0) return;
+    props.setValue(props.value - 1);
   }
 
   return (
@@ -41,7 +62,7 @@ const Resource = (props: { type: "fire" | "water" | "wind" | "earth" }) => {
           className={iconStyle()}
           style={{ height: "21px", width: "20px" }}
         />
-        <p style={{ justifySelf: "end", fontSize: "0.8rem" }}>{amount}</p>
+        <p style={{ justifySelf: "end", fontSize: "0.8rem" }}>{props.value}</p>
       </Grid>
       <HStack
         gap={0}
diff --git a/src/components/organisms/GameBoard/Header/PlayerBox.tsx b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
index 0f7e5d7..0603168 100644
--- a/src/components/organisms/GameBoard/Header/PlayerBox.tsx
+++ b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
@@ -24,7 +24,7 @@ export const PlayerBox = ({
   name: string;
   player: PlayersState["GLOBAL"];
 }) => {
-  const life = 20;
+  const life = player.data.life;
 
   function length(position: number) {
     return player.state[position].length;
@@ -64,10 +64,10 @@ export const PlayerBox = ({
         gap={2}
         alignItems="center"
       >
-        <Resource icon="earth" value={3} />
-        <Resource icon="fire" value={5} />
-        <Resource icon="water" value={9} />
-        <Resource icon="wind" value={3} />
+        <Resource icon="earth" value={player.data.earth} />
+        <Resource icon="fire" value={player.data.fire} />
+        <Resource icon="water" value={player.data.water} />
+        <Resource icon="wind" value={player.data.wind} />
       </Flex>
 
       <Flex
@@ -85,10 +85,7 @@ export const PlayerBox = ({
   );
 };
 
-const Resource = (props: {
-  value: number;
-  icon: keyof PlayerData["resources"];
-}) => (
+const Resource = (props: { value: number; icon: keyof PlayerData }) => (
   <HStack gap={1}>
     <img
       src={`/icon/${props.icon}.webp`}
@@ -120,9 +117,5 @@ const textStyle = cva({
     visual: {
       bold: { fontWeight: 600, fontFamily: "serif" },
     },
-    // size: {
-    //   sm: { padding: '4', fontSize: '12px' },
-    //   lg: { padding: '8', fontSize: '24px' }
-    // }
   },
 });
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index b496ba8..1ec0021 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -7,7 +7,10 @@ import { useMemo, useState } from "react";
 
 const initGameState: GameCard[][] = Array.from({ length: 36 }, () => []);
 const initGameData: PlayerData = {
-  resources: { earth: 0, wind: 0, fire: 0, water: 0 },
+  earth: 0,
+  wind: 0,
+  fire: 0,
+  water: 0,
   life: 20,
 };
 
diff --git a/src/types/card.ts b/src/types/card.ts
index 0d8618d..df9ffec 100644
--- a/src/types/card.ts
+++ b/src/types/card.ts
@@ -50,12 +50,10 @@ export type GridItem = GameCard[];
 export type GameState = GridItem[];
 
 export type PlayerData = {
-  resources: {
-    earth: number;
-    wind: number;
-    fire: number;
-    water: number;
-  };
+  earth: number;
+  wind: number;
+  fire: number;
+  water: number;
   life: number;
 };
 type PState = { state: GameState; data: PlayerData };

From 1099a649b91626615a1402d25ed9fe3ec11ea8b4 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 04:04:23 +0200
Subject: [PATCH 12/14] add counters

---
 .../GameBoard/Footer/Counters/index.tsx       | 123 +++++++++++-------
 .../organisms/GameBoard/Header/PlayerBox.tsx  |   8 +-
 2 files changed, 81 insertions(+), 50 deletions(-)

diff --git a/src/components/organisms/GameBoard/Footer/Counters/index.tsx b/src/components/organisms/GameBoard/Footer/Counters/index.tsx
index bdf345e..089128a 100644
--- a/src/components/organisms/GameBoard/Footer/Counters/index.tsx
+++ b/src/components/organisms/GameBoard/Footer/Counters/index.tsx
@@ -1,10 +1,15 @@
 import { PlayerData, PlayerDataProps } from "@/types/card";
+import { useHover } from "@/utils/hooks/useHover";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { cva } from "styled-system/css/cva.mjs";
 import { Flex, Grid, HStack, VStack } from "styled-system/jsx";
 import { button } from "styled-system/recipes";
 
+import { GiHealthNormal as IconHealth } from "react-icons/gi";
+
+import { mix } from "polished";
+
 export const CountersTray = (props: PlayerDataProps) => {
   const { query } = useRouter();
   const name = query?.name ?? "p1";
@@ -22,12 +27,12 @@ export const CountersTray = (props: PlayerDataProps) => {
       direction="column"
       h="100%"
       overflowY="auto"
-      p={0}
-      m={0}
-      justifyContent="center"
+      p="0.5rem"
+      justifyContent="space-between"
       alignItems="center"
+      gap="0.5rem"
     >
-      {(["earth", "fire", "water", "wind"] as const).map((type) => (
+      {(["life", "earth", "fire", "water", "wind"] as const).map((type) => (
         <Resource
           key={type}
           type={type}
@@ -40,10 +45,13 @@ export const CountersTray = (props: PlayerDataProps) => {
 };
 
 const Resource = (props: {
-  type: "fire" | "water" | "wind" | "earth";
+  type: "fire" | "water" | "wind" | "earth" | "life";
   setValue(value: number): void;
   value: number;
 }) => {
+  const hoverRef = useRef(null);
+  const isHovering = useHover(hoverRef);
+
   function increment() {
     props.setValue(props.value + 1);
   }
@@ -53,48 +61,73 @@ const Resource = (props: {
     props.setValue(props.value - 1);
   }
 
+  const bg = useMemo(() => {
+    if (props.type !== "life") return "";
+    const percent = Math.min(props.value / 20, 1);
+    if (props.value > 10) return mix(percent, "#00b8a9", "#f8f3d4");
+    if (props.value === 10) return "#f8f3d4";
+    if (props.value > 1) return mix(props.value / 20, "#f8f3d4", "#f6416c");
+
+    return "purple";
+  }, [props.value]);
+
   return (
-    <VStack gap={0} p={0}>
-      <Grid gridTemplateColumns="1fr 1fr" alignItems="center">
-        <img
-          src={`/icon/${props.type}.webp`}
-          alt="fire"
-          className={iconStyle()}
-          style={{ height: "21px", width: "20px" }}
-        />
+    <VStack gap={0} p={0} ref={hoverRef} w="100%">
+      <Grid gridTemplateColumns="2fr 1fr" alignItems="center" w="inherit">
+        {isHovering && (
+          <HStack
+            gap={0}
+            p={0}
+            opacity="0.05"
+            _hover={{ opacity: 1 }}
+            transition="all 0.25s ease"
+          >
+            <button
+              onClick={decrement}
+              className={button({ variant: "destructive", size: "sm" })}
+              style={{
+                padding: "0.5rem",
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+                height: "20px",
+              }}
+            >
+              -
+            </button>
+
+            <button
+              onClick={increment}
+              className={button({ size: "sm" })}
+              style={{
+                padding: "0.5rem",
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                height: "20px",
+              }}
+            >
+              +
+            </button>
+          </HStack>
+        )}
+        {!isHovering && props.type === "life" && (
+          <IconHealth
+            color={bg}
+            fontSize="1rem"
+            style={{
+              filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.45))",
+            }}
+          />
+        )}
+        {!isHovering && props.type !== "life" && (
+          <img
+            src={`/icon/${props.type}.webp`}
+            alt="fire"
+            className={iconStyle()}
+            style={{ height: "21px", width: "20px" }}
+          />
+        )}
         <p style={{ justifySelf: "end", fontSize: "0.8rem" }}>{props.value}</p>
       </Grid>
-      <HStack
-        gap={0}
-        p={0}
-        opacity="0.05"
-        _hover={{ opacity: 1 }}
-        transition="all 0.25s ease"
-      >
-        <button
-          onClick={decrement}
-          className={button({ variant: "destructive", size: "sm" })}
-          style={{
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-            height: "20px",
-          }}
-        >
-          -
-        </button>
-
-        <button
-          onClick={increment}
-          className={button({ size: "sm" })}
-          style={{
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-            height: "20px",
-          }}
-        >
-          +
-        </button>
-      </HStack>
     </VStack>
   );
 };
diff --git a/src/components/organisms/GameBoard/Header/PlayerBox.tsx b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
index 0603168..59b8797 100644
--- a/src/components/organisms/GameBoard/Header/PlayerBox.tsx
+++ b/src/components/organisms/GameBoard/Header/PlayerBox.tsx
@@ -1,9 +1,8 @@
-import Link from "next/link";
 import { PlayerData, PlayersState } from "@/types/card";
-import { GRIDS, LAYOUT_HEIGHTS } from "../constants";
-import { Box, Flex, HStack } from "styled-system/jsx";
+import { GRIDS } from "../constants";
+import { Flex, HStack } from "styled-system/jsx";
 
-import { ReactNode, useMemo } from "react";
+import { useMemo } from "react";
 import { IconType } from "react-icons";
 import { JsxStyleProps } from "styled-system/types";
 
@@ -13,7 +12,6 @@ import { TbMap2 as IconMap } from "react-icons/tb";
 import { GiPirateGrave as IconGrave } from "react-icons/gi";
 import { GiHealthNormal as IconHealth } from "react-icons/gi";
 import { cva } from "styled-system/css/cva.mjs";
-import css from "styled-jsx/css";
 
 import { mix } from "polished";
 

From ec73ebcbe334b1c739cb5425b230850ffaead77c Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 04:05:11 +0200
Subject: [PATCH 13/14] fix build

---
 .../organisms/GameBoard/Footer/Counters/index.tsx          | 2 +-
 src/components/organisms/GameBoard/index.tsx               | 7 +------
 src/pages/game.tsx                                         | 2 --
 3 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/src/components/organisms/GameBoard/Footer/Counters/index.tsx b/src/components/organisms/GameBoard/Footer/Counters/index.tsx
index 089128a..644cb3c 100644
--- a/src/components/organisms/GameBoard/Footer/Counters/index.tsx
+++ b/src/components/organisms/GameBoard/Footer/Counters/index.tsx
@@ -1,7 +1,7 @@
 import { PlayerData, PlayerDataProps } from "@/types/card";
 import { useHover } from "@/utils/hooks/useHover";
 import { useRouter } from "next/router";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useRef } from "react";
 import { cva } from "styled-system/css/cva.mjs";
 import { Flex, Grid, HStack, VStack } from "styled-system/jsx";
 import { button } from "styled-system/recipes";
diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx
index 2d96149..46bbd69 100644
--- a/src/components/organisms/GameBoard/index.tsx
+++ b/src/components/organisms/GameBoard/index.tsx
@@ -12,12 +12,7 @@ import { Modal } from "@/components/atoms/Modal";
 
 import { useState } from "react";
 import { FullCardAtlas } from "@/components/atoms/card-view/atlas";
-import {
-  GameCard,
-  GameState,
-  PlayerDataProps,
-  PlayersState,
-} from "@/types/card";
+import { GameCard, GameState, PlayerDataProps } from "@/types/card";
 import { GRIDS } from "./constants";
 import { useRouter } from "next/router";
 
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index 1ec0021..5325db0 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -14,8 +14,6 @@ const initGameData: PlayerData = {
   life: 20,
 };
 
-type PState = Record<string, { state: GameState; data: any }>;
-
 export default function GamePage() {
   const { query } = useRouter();
   const name = (query?.name as string | undefined) ?? "p1";

From 6cda4b889856c43f5a546d167480f3b8c75354c8 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Sat, 14 Sep 2024 04:06:17 +0200
Subject: [PATCH 14/14] fix build

---
 src/components/organisms/GameBoard/Header/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/GameBoard/Header/index.tsx b/src/components/organisms/GameBoard/Header/index.tsx
index 55b3be2..eff1426 100644
--- a/src/components/organisms/GameBoard/Header/index.tsx
+++ b/src/components/organisms/GameBoard/Header/index.tsx
@@ -21,7 +21,7 @@ export const GameHeader = (props: { players?: PlayersState }) => {
       }}
     >
       {playerKeys?.map((key) => (
-        <Link href={{ query: { name: key } }}>
+        <Link key={key} href={{ query: { name: key } }}>
           {props?.players?.[key] && (
             <PlayerBox player={props?.players[key]} name={key} />
           )}