From 6d8047cd424d97dc717613dce301f2c412440d3e Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 15:14:41 +0200
Subject: [PATCH 01/16] remove log

---
 components/Game/game.modal-template.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/Game/game.modal-template.tsx b/components/Game/game.modal-template.tsx
index 9761816..b68c10b 100644
--- a/components/Game/game.modal-template.tsx
+++ b/components/Game/game.modal-template.tsx
@@ -121,7 +121,6 @@ export const ModalContainer: React.FC<ModalTemplateType> = ({
           }),
         );
 
-  console.log({ modalType, isOpen });
   return (
     <>
       <Modal isOpen={isOpen} onClose={() => !isCommit && onClose()}>

From 5662c20a07ea7d01eb6f7aefaff2b2a6b7dafe17 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 15:14:48 +0200
Subject: [PATCH 02/16] add classname

---
 components/BoardCanvas/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/BoardCanvas/index.tsx b/components/BoardCanvas/index.tsx
index a123068..5c5c380 100644
--- a/components/BoardCanvas/index.tsx
+++ b/components/BoardCanvas/index.tsx
@@ -53,7 +53,14 @@ export const BoardCanvas: React.FC<BoardProps> = ({
           backgroundColor: "ghostwhite",
         }}
       >
-        <image xlinkHref={src} width={1200} height={1000} x={1} y={1} />
+        <image
+          className="background"
+          xlinkHref={src}
+          width={1200}
+          height={1000}
+          x={1}
+          y={1}
+        />
       </svg>
     </Box>
   );

From 63ea993c37ec23f0ee2bc9a8e34cf929b87aeeea Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 15:47:12 +0200
Subject: [PATCH 03/16] working with inline svg

---
 .../{useCanvas.ts => useCanvas.tsx}           | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)
 rename components/BoardCanvas/{useCanvas.ts => useCanvas.tsx} (77%)

diff --git a/components/BoardCanvas/useCanvas.ts b/components/BoardCanvas/useCanvas.tsx
similarity index 77%
rename from components/BoardCanvas/useCanvas.ts
rename to components/BoardCanvas/useCanvas.tsx
index 4edc065..0fe63c5 100644
--- a/components/BoardCanvas/useCanvas.ts
+++ b/components/BoardCanvas/useCanvas.tsx
@@ -1,6 +1,7 @@
 import * as d3 from "d3";
-import { MutableRefObject, RefObject, useEffect } from "react";
+import { MutableRefObject, RefObject, cloneElement, useEffect } from "react";
 import { PositionType } from "../Positions/position.type";
+import { FaBan } from "react-icons/fa";
 
 type CanvasProps = {
   canvasRef: RefObject<SVGSVGElement>;
@@ -12,6 +13,12 @@ type CanvasProps = {
   move?: (e: PositionType) => void;
 };
 
+const Cir = () => (
+  <svg width="100" height="100">
+    <circle cx="50" cy="50" r="40" fill="blue" />
+  </svg>
+);
+
 /**
  * Handles the Canvas, placing and moving the circles with the incoming data
  * */
@@ -44,12 +51,15 @@ export const useCanvas = ({
     }
     const g = d3.select(gRef.current);
 
-    g.selectAll<SVGCircleElement, PositionType>("circle")
+    g.selectAll<SVGCircleElement, PositionType>("g")
       .data(data)
-      .join("circle")
-      .attr("cx", ({ x }) => x)
-      .attr("cy", ({ y }) => y)
-      .attr("r", ({ r }) => (r ? r : 15))
+      .join((enter) => enter.append("g"))
+      .attr("transform", (d) => `translate(${d.x}, ${d.y})`)
+      .html(
+        `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
+</svg>`,
+      )
       .attr("fill", ({ color }) => color ?? "black")
       // TODO: replace this to limit which token the user can control
       .attr("opacity", ({ id }) => (id.includes(self as string) ? 1 : 0.75))

From 9beba9f2cee9dce61572e351c46518a17ae8db75 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 16:00:56 +0200
Subject: [PATCH 04/16] working with icon

---
 components/BoardCanvas/useCanvas.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/BoardCanvas/useCanvas.tsx b/components/BoardCanvas/useCanvas.tsx
index 0fe63c5..035d070 100644
--- a/components/BoardCanvas/useCanvas.tsx
+++ b/components/BoardCanvas/useCanvas.tsx
@@ -55,12 +55,12 @@ export const useCanvas = ({
       .data(data)
       .join((enter) => enter.append("g"))
       .attr("transform", (d) => `translate(${d.x}, ${d.y})`)
+      .attr("fill", ({ color }) => color ?? "black")
       .html(
-        `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+        `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 24 24">
   <path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
 </svg>`,
       )
-      .attr("fill", ({ color }) => color ?? "black")
       // TODO: replace this to limit which token the user can control
       .attr("opacity", ({ id }) => (id.includes(self as string) ? 1 : 0.75))
       .filter(({ id }) => {
@@ -70,7 +70,7 @@ export const useCanvas = ({
       })
       .call(
         d3
-          .drag<SVGCircleElement, PositionType>()
+          .drag<SVGGElement, PositionType>()
           .on("start", dragstarted)
           .on("drag", dragged)
           .on("end", dragended)

From 3411a84b769d70ea23699191145a2d03987370c1 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 16:36:41 +0200
Subject: [PATCH 05/16] prepare test

---
 components/BoardCanvas/Tokens/index.tsx | 12 ++++++++++++
 components/BoardCanvas/useCanvas.tsx    | 16 +++-------------
 2 files changed, 15 insertions(+), 13 deletions(-)
 create mode 100644 components/BoardCanvas/Tokens/index.tsx

diff --git a/components/BoardCanvas/Tokens/index.tsx b/components/BoardCanvas/Tokens/index.tsx
new file mode 100644
index 0000000..cc61180
--- /dev/null
+++ b/components/BoardCanvas/Tokens/index.tsx
@@ -0,0 +1,12 @@
+type IconProps = {
+  fill?: string;
+};
+
+const User = (props: IconProps = { fill: "black" }) =>
+  `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="${props.fill}" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" d="M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4h-4Z" clip-rule="evenodd"/>
+</svg>`;
+
+export const TokenIcon = {
+  User,
+};
diff --git a/components/BoardCanvas/useCanvas.tsx b/components/BoardCanvas/useCanvas.tsx
index 035d070..730b20e 100644
--- a/components/BoardCanvas/useCanvas.tsx
+++ b/components/BoardCanvas/useCanvas.tsx
@@ -2,6 +2,7 @@ import * as d3 from "d3";
 import { MutableRefObject, RefObject, cloneElement, useEffect } from "react";
 import { PositionType } from "../Positions/position.type";
 import { FaBan } from "react-icons/fa";
+import { TokenIcon } from "./Tokens";
 
 type CanvasProps = {
   canvasRef: RefObject<SVGSVGElement>;
@@ -13,12 +14,6 @@ type CanvasProps = {
   move?: (e: PositionType) => void;
 };
 
-const Cir = () => (
-  <svg width="100" height="100">
-    <circle cx="50" cy="50" r="40" fill="blue" />
-  </svg>
-);
-
 /**
  * Handles the Canvas, placing and moving the circles with the incoming data
  * */
@@ -55,13 +50,8 @@ export const useCanvas = ({
       .data(data)
       .join((enter) => enter.append("g"))
       .attr("transform", (d) => `translate(${d.x}, ${d.y})`)
-      .attr("fill", ({ color }) => color ?? "black")
-      .html(
-        `<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 24 24">
-  <path fill-rule="evenodd" d="M7 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a1 1 0 1 0 0 2v1a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H7Zm3 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-1 7a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3 1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1Z" clip-rule="evenodd"/>
-</svg>`,
-      )
-      // TODO: replace this to limit which token the user can control
+      .html((props) => TokenIcon.User({ fill: props.color }))
+      // NOTE: Bellow attr & filter shows and limits user to moving their own tokens
       .attr("opacity", ({ id }) => (id.includes(self as string) ? 1 : 0.75))
       .filter(({ id }) => {
         const isSidekick = id.includes("_");

From a157da15c1835316f87e2dfa2bf30564faa5b731 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 16:37:22 +0200
Subject: [PATCH 06/16] remove unused props

---
 components/BoardCanvas/useCanvas.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/BoardCanvas/useCanvas.tsx b/components/BoardCanvas/useCanvas.tsx
index 730b20e..3242fae 100644
--- a/components/BoardCanvas/useCanvas.tsx
+++ b/components/BoardCanvas/useCanvas.tsx
@@ -1,7 +1,6 @@
 import * as d3 from "d3";
-import { MutableRefObject, RefObject, cloneElement, useEffect } from "react";
+import { MutableRefObject, RefObject, useEffect } from "react";
 import { PositionType } from "../Positions/position.type";
-import { FaBan } from "react-icons/fa";
 import { TokenIcon } from "./Tokens";
 
 type CanvasProps = {

From b4e82b1a4ee4d488996a8d341045a06cb30a95e6 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 20:01:18 +0200
Subject: [PATCH 07/16] update with image

---
 components/BoardCanvas/Tokens/index.tsx | 28 ++++++++++++++++++-------
 components/BoardCanvas/useCanvas.tsx    |  6 +++++-
 components/Positions/position.type.ts   |  1 +
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/components/BoardCanvas/Tokens/index.tsx b/components/BoardCanvas/Tokens/index.tsx
index cc61180..27a70b2 100644
--- a/components/BoardCanvas/Tokens/index.tsx
+++ b/components/BoardCanvas/Tokens/index.tsx
@@ -1,12 +1,26 @@
-type IconProps = {
-  fill?: string;
-};
+const Image = ({ imageUrl }: { imageUrl: string }) =>
+  `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 24 24">
+<image href="${imageUrl}" height='100%' >
+</svg>`;
 
-const User = (props: IconProps = { fill: "black" }) =>
-  `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="72" height="72" fill="${props.fill}" viewBox="0 0 24 24">
-  <path fill-rule="evenodd" d="M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4h-4Z" clip-rule="evenodd"/>
+const Circle = ({
+  color,
+}: {
+  color?: string;
+}) => `<svg fill="${color ?? "black"}" stroke="2" viewBox="0 0 100 100" width="72" height="72" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="50" cy="50" r="50" />
 </svg>`;
 
 export const TokenIcon = {
-  User,
+  Image,
+  Circle,
 };
+
+/**
+ * WIP
+ *
+ *  - cannot have more than 2 props with defaults. If one is not empty, then the default on the other will break
+ *  - need a cleaner version for adding svgs with this function wrapper. Too much repetition
+ *  - how can I create an enum for this
+ *
+ * */
diff --git a/components/BoardCanvas/useCanvas.tsx b/components/BoardCanvas/useCanvas.tsx
index 3242fae..29885d9 100644
--- a/components/BoardCanvas/useCanvas.tsx
+++ b/components/BoardCanvas/useCanvas.tsx
@@ -49,7 +49,11 @@ export const useCanvas = ({
       .data(data)
       .join((enter) => enter.append("g"))
       .attr("transform", (d) => `translate(${d.x}, ${d.y})`)
-      .html((props) => TokenIcon.User({ fill: props.color }))
+      .html((props) =>
+        props?.imageUrl
+          ? TokenIcon.Image({ imageUrl: props.imageUrl })
+          : TokenIcon.Circle({ color: props.color }),
+      )
       // NOTE: Bellow attr & filter shows and limits user to moving their own tokens
       .attr("opacity", ({ id }) => (id.includes(self as string) ? 1 : 0.75))
       .filter(({ id }) => {
diff --git a/components/Positions/position.type.ts b/components/Positions/position.type.ts
index 3abe296..46e02df 100644
--- a/components/Positions/position.type.ts
+++ b/components/Positions/position.type.ts
@@ -7,6 +7,7 @@ export type PositionType = {
   tokenSize?: Size;
   color?: string;
   sidekicks?: Sidekick[];
+  imageUrl?: string;
 };
 
 type Sidekick = Omit<PositionType, "sidekicks">;

From a225f7306cf9bd36459a98d7d6474ab043767842 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 20:09:53 +0200
Subject: [PATCH 08/16] fix color on position modal

---
 components/Positions/position.modal.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/Positions/position.modal.tsx b/components/Positions/position.modal.tsx
index 7320b6a..a23e5fb 100644
--- a/components/Positions/position.modal.tsx
+++ b/components/Positions/position.modal.tsx
@@ -133,7 +133,11 @@ export const PositionModal: FC<{
           </Box>
         </ModalBody>
         <ModalFooter>
-          <Button variant="outline" bg="primary" onClick={updateYourColor}>
+          <Button
+            variant="outline"
+            bg="brand.primary"
+            onClick={updateYourColor}
+          >
             Apply
           </Button>
         </ModalFooter>

From 9939246cd85cebffc78c41e21e423c04c85d13e3 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 23:28:22 +0200
Subject: [PATCH 09/16] omg its finally working

---
 components/BoardCanvas/useCanvas.tsx    |  13 +--
 components/Positions/position.modal.tsx | 116 +++++++++++++++++-------
 2 files changed, 92 insertions(+), 37 deletions(-)

diff --git a/components/BoardCanvas/useCanvas.tsx b/components/BoardCanvas/useCanvas.tsx
index 29885d9..ae01ff1 100644
--- a/components/BoardCanvas/useCanvas.tsx
+++ b/components/BoardCanvas/useCanvas.tsx
@@ -85,7 +85,13 @@ export const useCanvas = ({
         }),
     );
 
-    function dragstarted(e: { target: any }) {
+    function dragstarted(e: any, d: PositionType) {
+      const isSelf = d?.id === self;
+      const isSidekick = d?.id.includes("_");
+      const isSidekickSelf = d?.id.split("_")[0] === self;
+      if (isSidekick && !isSidekickSelf) return;
+      if (!isSelf) return;
+
       d3.select(e.target).raise();
       g.attr("cursor", "grabbing");
       //@ts-expect-error: implicit any
@@ -101,11 +107,6 @@ export const useCanvas = ({
       event: DragEvent & { subject: PositionType },
       d: PositionType,
     ) {
-      //@ts-expect-error: implicit any
-      d3.select<SVGCircleElement, PositionType>(this)
-        .attr("cx", (d.x = event.x))
-        .attr("cy", (d.y = event.y));
-
       if (!move) return;
 
       move({
diff --git a/components/Positions/position.modal.tsx b/components/Positions/position.modal.tsx
index a23e5fb..5569750 100644
--- a/components/Positions/position.modal.tsx
+++ b/components/Positions/position.modal.tsx
@@ -10,8 +10,22 @@ import {
   Flex,
   ModalFooter,
   Button,
+  VStack,
+  Divider,
+  Grid,
+  Input,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Image,
+  MenuItemOption,
+  MenuGroup,
+  MenuOptionGroup,
+  MenuDivider,
+  FormLabel,
 } from "@chakra-ui/react";
-import { FC, useCallback, useState } from "react";
+import { Dispatch, FC, SetStateAction, useCallback, useState } from "react";
 import { MoonIcon, PlusSquareIcon, SunIcon } from "@chakra-ui/icons";
 import { useWebGame } from "@/lib/contexts/WebGameProvider";
 
@@ -37,6 +51,8 @@ export const PositionModal: FC<{
     name as keyof typeof gamePositions.content
   ] as PositionType;
 
+  const [images, setImages] = useState<{ id: string; url: string }[]>([]);
+
   const [selectedColor, setSelectedColor] = useState<string>(
     selectedPosition?.color ?? "#000",
   );
@@ -61,6 +77,8 @@ export const PositionModal: FC<{
       ...selected,
       color: selectedColor,
       r: selectedSize === "lg" ? 20 : selectedSize === "md" ? 15 : 10,
+      imageUrl:
+        images?.find((img) => img.id === selected?.id)?.url ?? undefined,
       sidekicks: sidekicks?.map((kick) => ({
         ...kick,
         color: selectedColor,
@@ -98,38 +116,26 @@ export const PositionModal: FC<{
         <ModalBody>
           <Box position="relative">
             <Flex alignItems="center" gap="1rem" minH="2.5rem">
-              <PlusSquareIcon onClick={addSidekick} />
-              <Box
-                bg={selectedColor}
-                h={setSize(selectedSize) + "rem"}
-                w={setSize(selectedSize) + "rem"}
-                cursor="pointer"
-                borderRadius="100%"
-                transition="all 0.25s ease-in-out"
-                onClick={() =>
-                  setSelectedSize((prev) =>
-                    prev === "lg" ? "md" : prev === "md" ? "sm" : "lg",
-                  )
-                }
-              />
-              {sidekicks?.map((kick) => (
-                <Box
-                  key={kick.id}
-                  boxSize="1rem"
-                  bg={selectedColor}
-                  borderRadius="100%"
+              <VStack alignItems="start">
+                <CirclePicker onChangeComplete={handleColorChange} />
+                <Divider />
+                <TokenPreview
+                  token={selectedPosition}
+                  selectedColor={selectedColor}
+                  setImages={setImages}
                 />
-              ))}
+                {sidekicks?.map((kick) => (
+                  <TokenPreview
+                    key={kick.id}
+                    token={kick}
+                    selectedColor={selectedColor}
+                    setImages={setImages}
+                  />
+                ))}
+
+                <PlusSquareIcon onClick={addSidekick} />
+              </VStack>
             </Flex>
-            <Box
-              position="absolute"
-              bg={bg}
-              p="0.5rem"
-              borderRadius="1rem"
-              filter="drop-shadow(0 5px 3px rgba(0,0,0,0.5))"
-            >
-              <CirclePicker onChangeComplete={handleColorChange} />
-            </Box>
           </Box>
         </ModalBody>
         <ModalFooter>
@@ -145,3 +151,51 @@ export const PositionModal: FC<{
     </Modal>
   );
 };
+
+const TokenPreview = ({
+  token,
+  selectedColor,
+  setImages,
+}: {
+  token: PositionType;
+  selectedColor: string;
+  setImages: Dispatch<SetStateAction<{ id: string; url: string }[]>>;
+}) => {
+  const setImage = (url: string) => {
+    setImages((prev) => {
+      return [...prev?.filter((p) => p.id !== token.id), { id: token.id, url }];
+    });
+  };
+
+  return (
+    <Grid templateColumns="1fr 2fr">
+      {token?.imageUrl ? (
+        <Image src={token.imageUrl} />
+      ) : (
+        <Box
+          bg={selectedColor}
+          boxSize="2rem"
+          cursor="pointer"
+          borderRadius="100%"
+          transition="all 0.25s ease-in-out"
+        />
+      )}
+
+      <Menu>
+        <MenuButton as={Button}>Tokens</MenuButton>
+        <MenuList>
+          <FormLabel fontSize="0.75rem" pl="0.75rem" color="black">
+            Your Tokens (via your bag)
+          </FormLabel>
+          <Divider />
+          <FormLabel fontSize="0.75rem" pl="0.75rem" color="black">
+            Default Tokens
+          </FormLabel>
+          <MenuItem onClick={() => setImage("https://picsum.photos/200")}>
+            <Image src="https://picsum.photos/200" w="100px" />
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    </Grid>
+  );
+};

From 689ca353cd7e28ad3b8a6b7f1f77ce7cbb284bfa Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 23:32:09 +0200
Subject: [PATCH 10/16] omg now it works with sidekicks

---
 components/Positions/position.modal.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/Positions/position.modal.tsx b/components/Positions/position.modal.tsx
index 5569750..4dfa44e 100644
--- a/components/Positions/position.modal.tsx
+++ b/components/Positions/position.modal.tsx
@@ -52,6 +52,7 @@ export const PositionModal: FC<{
   ] as PositionType;
 
   const [images, setImages] = useState<{ id: string; url: string }[]>([]);
+  console.log({ images });
 
   const [selectedColor, setSelectedColor] = useState<string>(
     selectedPosition?.color ?? "#000",
@@ -82,6 +83,7 @@ export const PositionModal: FC<{
       sidekicks: sidekicks?.map((kick) => ({
         ...kick,
         color: selectedColor,
+        imageUrl: images?.find((img) => img.id === kick?.id)?.url ?? undefined,
       })),
     });
   }

From 276ff2765177fbb2abe68d19856f573267c162e5 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Mon, 1 Apr 2024 23:52:33 +0200
Subject: [PATCH 11/16] working custom

---
 components/Positions/position.modal.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/components/Positions/position.modal.tsx b/components/Positions/position.modal.tsx
index 4dfa44e..3aea90e 100644
--- a/components/Positions/position.modal.tsx
+++ b/components/Positions/position.modal.tsx
@@ -24,6 +24,7 @@ import {
   MenuOptionGroup,
   MenuDivider,
   FormLabel,
+  HStack,
 } from "@chakra-ui/react";
 import { Dispatch, FC, SetStateAction, useCallback, useState } from "react";
 import { MoonIcon, PlusSquareIcon, SunIcon } from "@chakra-ui/icons";
@@ -52,7 +53,7 @@ export const PositionModal: FC<{
   ] as PositionType;
 
   const [images, setImages] = useState<{ id: string; url: string }[]>([]);
-  console.log({ images });
+  console.log({ selectedPosition });
 
   const [selectedColor, setSelectedColor] = useState<string>(
     selectedPosition?.color ?? "#000",
@@ -61,8 +62,9 @@ export const PositionModal: FC<{
   const [sidekicks, setSidekicks] = useState<
     PositionType["sidekicks"] | undefined
   >(selectedPosition?.sidekicks);
-  const setSize = (size: Size) =>
-    size === "lg" ? 2 : size === "md" ? 1.65 : 1.35;
+
+  console.log({ sidekicks });
+
   const handleColorChange = ({ hex }: { hex: string }) => setSelectedColor(hex);
 
   const _setGamePosition = (props: PositionType) => {
@@ -169,6 +171,10 @@ const TokenPreview = ({
     });
   };
 
+  const [imageUrl, setImageUrl] = useState("");
+
+  console.log({ token });
+
   return (
     <Grid templateColumns="1fr 2fr">
       {token?.imageUrl ? (
@@ -189,6 +195,13 @@ const TokenPreview = ({
           <FormLabel fontSize="0.75rem" pl="0.75rem" color="black">
             Your Tokens (via your bag)
           </FormLabel>
+          <HStack mb="0.5rem" px="0.5rem">
+            <Input
+              value={imageUrl}
+              onChange={(e) => setImageUrl(e.target.value)}
+            />
+            <Button onClick={() => setImage(imageUrl)}>X</Button>
+          </HStack>
           <Divider />
           <FormLabel fontSize="0.75rem" pl="0.75rem" color="black">
             Default Tokens

From f371c3d752f64784cb52421f18b0aa720df584e0 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Tue, 2 Apr 2024 00:03:26 +0200
Subject: [PATCH 12/16] fix sidekicks

---
 components/Positions/position.modal.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/Positions/position.modal.tsx b/components/Positions/position.modal.tsx
index 3aea90e..d5e2dc9 100644
--- a/components/Positions/position.modal.tsx
+++ b/components/Positions/position.modal.tsx
@@ -53,7 +53,6 @@ export const PositionModal: FC<{
   ] as PositionType;
 
   const [images, setImages] = useState<{ id: string; url: string }[]>([]);
-  console.log({ selectedPosition });
 
   const [selectedColor, setSelectedColor] = useState<string>(
     selectedPosition?.color ?? "#000",
@@ -63,7 +62,7 @@ export const PositionModal: FC<{
     PositionType["sidekicks"] | undefined
   >(selectedPosition?.sidekicks);
 
-  console.log({ sidekicks });
+  console.log("xxxxxxxxxxxx", selectedPosition?.sidekicks, sidekicks);
 
   const handleColorChange = ({ hex }: { hex: string }) => setSelectedColor(hex);
 
@@ -128,6 +127,15 @@ export const PositionModal: FC<{
                   selectedColor={selectedColor}
                   setImages={setImages}
                 />
+                {selectedPosition?.sidekicks?.map((kick) => (
+                  <TokenPreview
+                    key={kick.id}
+                    token={kick}
+                    selectedColor={selectedColor}
+                    setImages={setImages}
+                  />
+                ))}
+
                 {sidekicks?.map((kick) => (
                   <TokenPreview
                     key={kick.id}

From fd7b86db0cac390d8c0fc7bca459b4fbea32e534 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Tue, 2 Apr 2024 00:35:46 +0200
Subject: [PATCH 13/16] now will not reset othere tokens when opening model

---
 components/Positions/position.modal.tsx | 39 +++++++++++++------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/components/Positions/position.modal.tsx b/components/Positions/position.modal.tsx
index d5e2dc9..a259a1d 100644
--- a/components/Positions/position.modal.tsx
+++ b/components/Positions/position.modal.tsx
@@ -34,6 +34,7 @@ import { useWebGame } from "@/lib/contexts/WebGameProvider";
 import { CirclePicker } from "react-color";
 import { PositionType, Size } from "./position.type";
 import { useRouter } from "next/router";
+import { toast } from "react-hot-toast";
 
 export const PositionModal: FC<{
   isOpen: boolean;
@@ -62,8 +63,6 @@ export const PositionModal: FC<{
     PositionType["sidekicks"] | undefined
   >(selectedPosition?.sidekicks);
 
-  console.log("xxxxxxxxxxxx", selectedPosition?.sidekicks, sidekicks);
-
   const handleColorChange = ({ hex }: { hex: string }) => setSelectedColor(hex);
 
   const _setGamePosition = (props: PositionType) => {
@@ -80,11 +79,16 @@ export const PositionModal: FC<{
       color: selectedColor,
       r: selectedSize === "lg" ? 20 : selectedSize === "md" ? 15 : 10,
       imageUrl:
-        images?.find((img) => img.id === selected?.id)?.url ?? undefined,
+        images?.find((img) => img.id === selected?.id)?.url ??
+        selected?.imageUrl ??
+        undefined,
       sidekicks: sidekicks?.map((kick) => ({
         ...kick,
         color: selectedColor,
-        imageUrl: images?.find((img) => img.id === kick?.id)?.url ?? undefined,
+        imageUrl:
+          images?.find((img) => img.id === kick?.id)?.url ??
+          kick?.imageUrl ??
+          undefined,
       })),
     });
   }
@@ -106,7 +110,14 @@ export const PositionModal: FC<{
   }
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <Modal
+      isOpen={isOpen}
+      onClose={() => {
+        setSidekicks(selectedPosition?.sidekicks);
+        setImages([]);
+        onClose();
+      }}
+    >
       <ModalOverlay />
       <ModalContent bg={bg} color={color} transition="all 0.25s ease-in-out">
         <ModalHeader as={Flex} gap="1rem">
@@ -136,15 +147,6 @@ export const PositionModal: FC<{
                   />
                 ))}
 
-                {sidekicks?.map((kick) => (
-                  <TokenPreview
-                    key={kick.id}
-                    token={kick}
-                    selectedColor={selectedColor}
-                    setImages={setImages}
-                  />
-                ))}
-
                 <PlusSquareIcon onClick={addSidekick} />
               </VStack>
             </Flex>
@@ -177,20 +179,20 @@ const TokenPreview = ({
     setImages((prev) => {
       return [...prev?.filter((p) => p.id !== token.id), { id: token.id, url }];
     });
+    toast.success("New Image Prepared. Click Apply to confirm changes");
   };
 
   const [imageUrl, setImageUrl] = useState("");
 
-  console.log({ token });
-
   return (
-    <Grid templateColumns="1fr 2fr">
+    <Grid templateColumns="1fr 2fr" w="100%" gap="1rem" alignItems="center">
       {token?.imageUrl ? (
         <Image src={token.imageUrl} />
       ) : (
         <Box
           bg={selectedColor}
-          boxSize="2rem"
+          w="5rem"
+          h="5rem"
           cursor="pointer"
           borderRadius="100%"
           transition="all 0.25s ease-in-out"
@@ -203,6 +205,7 @@ const TokenPreview = ({
           <FormLabel fontSize="0.75rem" pl="0.75rem" color="black">
             Your Tokens (via your bag)
           </FormLabel>
+          {imageUrl && <Image src={imageUrl} w="3rem" />}
           <HStack mb="0.5rem" px="0.5rem">
             <Input
               value={imageUrl}

From 4e2d10d529a4438ddc2f45c8fa13641b1fabe2a5 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Tue, 2 Apr 2024 00:42:07 +0200
Subject: [PATCH 14/16] remove unused

---
 components/Positions/position.modal.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/components/Positions/position.modal.tsx b/components/Positions/position.modal.tsx
index a259a1d..3ae6bcb 100644
--- a/components/Positions/position.modal.tsx
+++ b/components/Positions/position.modal.tsx
@@ -19,10 +19,6 @@ import {
   MenuList,
   MenuItem,
   Image,
-  MenuItemOption,
-  MenuGroup,
-  MenuOptionGroup,
-  MenuDivider,
   FormLabel,
   HStack,
 } from "@chakra-ui/react";

From 0981d1a6575c7cee2fd12676b5dc47caed73f040 Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Tue, 2 Apr 2024 01:15:59 +0200
Subject: [PATCH 15/16] size works and also temp sidekicks displays

---
 components/BoardCanvas/Tokens/index.tsx |  4 ++-
 components/BoardCanvas/useCanvas.tsx    |  2 +-
 components/Positions/position.modal.tsx | 34 ++++++++++++++++++++-----
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/components/BoardCanvas/Tokens/index.tsx b/components/BoardCanvas/Tokens/index.tsx
index 27a70b2..bdfeaa2 100644
--- a/components/BoardCanvas/Tokens/index.tsx
+++ b/components/BoardCanvas/Tokens/index.tsx
@@ -5,9 +5,11 @@ const Image = ({ imageUrl }: { imageUrl: string }) =>
 
 const Circle = ({
   color,
+  size,
 }: {
   color?: string;
-}) => `<svg fill="${color ?? "black"}" stroke="2" viewBox="0 0 100 100" width="72" height="72" xmlns="http://www.w3.org/2000/svg">
+  size?: number;
+}) => `<svg fill="${color ?? "black"}" stroke="2" viewBox="0 0 100 100" width="${size ?? 72}" height="${size ?? 72}" xmlns="http://www.w3.org/2000/svg">
   <circle cx="50" cy="50" r="50" />
 </svg>`;
 
diff --git a/components/BoardCanvas/useCanvas.tsx b/components/BoardCanvas/useCanvas.tsx
index ae01ff1..40ae561 100644
--- a/components/BoardCanvas/useCanvas.tsx
+++ b/components/BoardCanvas/useCanvas.tsx
@@ -52,7 +52,7 @@ export const useCanvas = ({
       .html((props) =>
         props?.imageUrl
           ? TokenIcon.Image({ imageUrl: props.imageUrl })
-          : TokenIcon.Circle({ color: props.color }),
+          : TokenIcon.Circle({ color: props.color, size: props.r }),
       )
       // NOTE: Bellow attr & filter shows and limits user to moving their own tokens
       .attr("opacity", ({ id }) => (id.includes(self as string) ? 1 : 0.75))
diff --git a/components/Positions/position.modal.tsx b/components/Positions/position.modal.tsx
index 3ae6bcb..5a9eea0 100644
--- a/components/Positions/position.modal.tsx
+++ b/components/Positions/position.modal.tsx
@@ -26,9 +26,11 @@ import { Dispatch, FC, SetStateAction, useCallback, useState } from "react";
 import { MoonIcon, PlusSquareIcon, SunIcon } from "@chakra-ui/icons";
 import { useWebGame } from "@/lib/contexts/WebGameProvider";
 
+import { MdUpload as IconUpload } from "react-icons/md";
+
 //@ts-ignore
 import { CirclePicker } from "react-color";
-import { PositionType, Size } from "./position.type";
+import { PositionType } from "./position.type";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
 
@@ -54,7 +56,6 @@ export const PositionModal: FC<{
   const [selectedColor, setSelectedColor] = useState<string>(
     selectedPosition?.color ?? "#000",
   );
-  const [selectedSize, setSelectedSize] = useState<Size>("lg");
   const [sidekicks, setSidekicks] = useState<
     PositionType["sidekicks"] | undefined
   >(selectedPosition?.sidekicks);
@@ -73,7 +74,6 @@ export const PositionModal: FC<{
     setGamePosition({
       ...selected,
       color: selectedColor,
-      r: selectedSize === "lg" ? 20 : selectedSize === "md" ? 15 : 10,
       imageUrl:
         images?.find((img) => img.id === selected?.id)?.url ??
         selected?.imageUrl ??
@@ -81,6 +81,7 @@ export const PositionModal: FC<{
       sidekicks: sidekicks?.map((kick) => ({
         ...kick,
         color: selectedColor,
+        r: kick?.r ?? 50,
         imageUrl:
           images?.find((img) => img.id === kick?.id)?.url ??
           kick?.imageUrl ??
@@ -103,8 +104,12 @@ export const PositionModal: FC<{
         },
       ];
     });
+
+    toast.success("Preparing new token. Click apply to confirm changes");
   }
 
+  const gameKickIds = selectedPosition?.sidekicks?.map((kick) => kick.id);
+
   return (
     <Modal
       isOpen={isOpen}
@@ -142,13 +147,24 @@ export const PositionModal: FC<{
                     setImages={setImages}
                   />
                 ))}
+                <Divider />
+                {sidekicks
+                  ?.filter((kick) => !gameKickIds?.includes(kick.id))
+                  .map((kick) => (
+                    <TokenPreview
+                      key={kick.id}
+                      token={kick}
+                      selectedColor={selectedColor}
+                      setImages={setImages}
+                    />
+                  ))}
 
                 <PlusSquareIcon onClick={addSidekick} />
               </VStack>
             </Flex>
           </Box>
         </ModalBody>
-        <ModalFooter>
+        <ModalFooter flexDirection="column" alignItems="end">
           <Button
             variant="outline"
             bg="brand.primary"
@@ -156,6 +172,9 @@ export const PositionModal: FC<{
           >
             Apply
           </Button>
+          <FormLabel fontSize="0.75rem">
+            Clicking apply will reset token positions
+          </FormLabel>
         </ModalFooter>
       </ModalContent>
     </Modal>
@@ -199,15 +218,18 @@ const TokenPreview = ({
         <MenuButton as={Button}>Tokens</MenuButton>
         <MenuList>
           <FormLabel fontSize="0.75rem" pl="0.75rem" color="black">
-            Your Tokens (via your bag)
+            Add Token (via url)
           </FormLabel>
           {imageUrl && <Image src={imageUrl} w="3rem" />}
           <HStack mb="0.5rem" px="0.5rem">
             <Input
+              placeholder="image url"
               value={imageUrl}
               onChange={(e) => setImageUrl(e.target.value)}
             />
-            <Button onClick={() => setImage(imageUrl)}>X</Button>
+            <Button onClick={() => setImage(imageUrl)}>
+              <IconUpload />
+            </Button>
           </HStack>
           <Divider />
           <FormLabel fontSize="0.75rem" pl="0.75rem" color="black">

From 0d9f3dd9eb522501449b6bf33dd7671f043f577b Mon Sep 17 00:00:00 2001
From: jollygrin <JollyGrin@protonmail.com>
Date: Tue, 2 Apr 2024 01:46:14 +0200
Subject: [PATCH 16/16] adding default icons

---
 components/BoardCanvas/Tokens/index.tsx      |  2 +-
 components/BoardCanvas/defaultTokenImages.ts | 21 ++++++++++++++++++++
 components/Positions/position.modal.tsx      | 13 +++++++-----
 public/tokens/Alien.svg                      |  5 +++++
 public/tokens/BrickWall.svg                  |  5 +++++
 public/tokens/CloudFog.svg                   |  5 +++++
 public/tokens/Fire.svg                       |  5 +++++
 public/tokens/Flag.svg                       |  5 +++++
 public/tokens/HandShield.svg                 |  5 +++++
 public/tokens/ShieldHalf.svg                 |  5 +++++
 public/tokens/Totem.svg                      |  5 +++++
 public/tokens/Trap.svg                       |  5 +++++
 12 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 components/BoardCanvas/defaultTokenImages.ts
 create mode 100644 public/tokens/Alien.svg
 create mode 100644 public/tokens/BrickWall.svg
 create mode 100644 public/tokens/CloudFog.svg
 create mode 100644 public/tokens/Fire.svg
 create mode 100644 public/tokens/Flag.svg
 create mode 100644 public/tokens/HandShield.svg
 create mode 100644 public/tokens/ShieldHalf.svg
 create mode 100644 public/tokens/Totem.svg
 create mode 100644 public/tokens/Trap.svg

diff --git a/components/BoardCanvas/Tokens/index.tsx b/components/BoardCanvas/Tokens/index.tsx
index bdfeaa2..0ada566 100644
--- a/components/BoardCanvas/Tokens/index.tsx
+++ b/components/BoardCanvas/Tokens/index.tsx
@@ -1,5 +1,5 @@
 const Image = ({ imageUrl }: { imageUrl: string }) =>
-  `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 24 24">
+  `<svg aria-hidden="true"  xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 24 24">
 <image href="${imageUrl}" height='100%' >
 </svg>`;
 
diff --git a/components/BoardCanvas/defaultTokenImages.ts b/components/BoardCanvas/defaultTokenImages.ts
new file mode 100644
index 0000000..d84961e
--- /dev/null
+++ b/components/BoardCanvas/defaultTokenImages.ts
@@ -0,0 +1,21 @@
+/**
+ * Default Tokens for the board!
+ *
+ * To add to this list, add the file to /public/tokens/...
+ *
+ * Then add the filename to IMAGES
+ * */
+
+const IMAGES = [
+  "Alien.svg",
+  "BrickWall.svg",
+  "CloudFog.svg",
+  "Fire.svg",
+  "Flag.svg",
+  "HandShield.svg",
+  "ShieldHalf.svg",
+  "Totem.svg",
+  "Trap.svg",
+];
+
+export const DEFAULT_TOKEN_IMAGES = IMAGES.map((img) => `/tokens/${img}`);
diff --git a/components/Positions/position.modal.tsx b/components/Positions/position.modal.tsx
index 5a9eea0..974097d 100644
--- a/components/Positions/position.modal.tsx
+++ b/components/Positions/position.modal.tsx
@@ -33,6 +33,7 @@ import { CirclePicker } from "react-color";
 import { PositionType } from "./position.type";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
+import { DEFAULT_TOKEN_IMAGES } from "../BoardCanvas/defaultTokenImages";
 
 export const PositionModal: FC<{
   isOpen: boolean;
@@ -216,14 +217,14 @@ const TokenPreview = ({
 
       <Menu>
         <MenuButton as={Button}>Tokens</MenuButton>
-        <MenuList>
+        <MenuList maxH="400px" overflowY="auto">
           <FormLabel fontSize="0.75rem" pl="0.75rem" color="black">
             Add Token (via url)
           </FormLabel>
           {imageUrl && <Image src={imageUrl} w="3rem" />}
           <HStack mb="0.5rem" px="0.5rem">
             <Input
-              placeholder="image url"
+              placeholder="image url (.svg, .png, .jpeg)"
               value={imageUrl}
               onChange={(e) => setImageUrl(e.target.value)}
             />
@@ -235,9 +236,11 @@ const TokenPreview = ({
           <FormLabel fontSize="0.75rem" pl="0.75rem" color="black">
             Default Tokens
           </FormLabel>
-          <MenuItem onClick={() => setImage("https://picsum.photos/200")}>
-            <Image src="https://picsum.photos/200" w="100px" />
-          </MenuItem>
+          {DEFAULT_TOKEN_IMAGES.map((img) => (
+            <MenuItem key={img} onClick={() => setImage(img)}>
+              <Image src={img} fill="red" color="red" w="100px" />
+            </MenuItem>
+          ))}
         </MenuList>
       </Menu>
     </Grid>
diff --git a/public/tokens/Alien.svg b/public/tokens/Alien.svg
new file mode 100644
index 0000000..96bfd17
--- /dev/null
+++ b/public/tokens/Alien.svg
@@ -0,0 +1,5 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="200px"
+  width="200px" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12 2C16.6944 2 20.5 5.80558 20.5 10.5C20.5 17 15 22.5 12 22.5C9 22.5 3.5 17 3.5 10.5C3.5 5.80558 7.30558 2 12 2ZM17.5 12C15.0147 12 13 14.0147 13 16.5C13 16.6603 13.0084 16.8186 13.0252 16.9752C13.1812 16.9916 13.3396 17 13.5 17C15.9853 17 18 14.9853 18 12.5C18 12.3396 17.9916 12.1812 17.9746 12.0247C17.8186 12.0084 17.6603 12 17.5 12ZM6.5 12C6.33963 12 6.18121 12.0084 6.02475 12.0252C6.00839 12.1812 6 12.3396 6 12.5C6 14.9853 8.01472 17 10.5 17C10.6603 17 10.8186 16.9916 10.9753 16.9746C10.9916 16.8186 11 16.6603 11 16.5C11 14.0147 8.98528 12 6.5 12Z"></path>
+</svg>
diff --git a/public/tokens/BrickWall.svg b/public/tokens/BrickWall.svg
new file mode 100644
index 0000000..2955fe7
--- /dev/null
+++ b/public/tokens/BrickWall.svg
@@ -0,0 +1,5 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="200px"
+  width="200px" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M494 18.02l-101 .103V119h101zm-119 .12l-238 .247V119h238zm-256 .266L18 18.51V119h101zM18 137v110h229V137zm247 0v110h229V137zM18 265v110h101V265zm119 0v110h238V265zm256 0v110h101V265zM18 393v100.98l229-.236V393zm247 0v100.727l229-.237V393z"></path>
+</svg>
diff --git a/public/tokens/CloudFog.svg b/public/tokens/CloudFog.svg
new file mode 100644
index 0000000..f285ca3
--- /dev/null
+++ b/public/tokens/CloudFog.svg
@@ -0,0 +1,5 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="200px"
+  width="200px" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.5 3a5.001 5.001 0 0 1 4.905 4.027A3 3 0 0 1 13 13h-1.5a.5.5 0 0 0 0-1H1.05a3.51 3.51 0 0 1-.713-1H9.5a.5.5 0 0 0 0-1H.035a3.53 3.53 0 0 1 0-1H7.5a.5.5 0 0 0 0-1H.337a3.5 3.5 0 0 1 3.57-1.977A5.001 5.001 0 0 1 8.5 3z"></path>
+</svg>
diff --git a/public/tokens/Fire.svg b/public/tokens/Fire.svg
new file mode 100644
index 0000000..e20cf65
--- /dev/null
+++ b/public/tokens/Fire.svg
@@ -0,0 +1,5 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="200px"
+  width="200px" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M239.344 24.063c-9.56 0-17.313 7.754-17.313 17.312 0 9.558 7.755 17.313 17.314 17.313 9.558 0 17.28-7.755 17.28-17.313 0-9.56-7.722-17.313-17.28-17.313zM39.594 35.75c-10.393 0-18.813 8.42-18.813 18.813 0 10.39 8.42 18.812 18.814 18.812 10.393 0 18.812-8.42 18.812-18.813 0-10.392-8.42-18.812-18.812-18.812zM188.47 51.156c-14.34 0-25.97 11.6-25.97 25.938 0 14.336 11.63 25.97 25.97 25.97 14.337 0 25.968-11.634 25.968-25.97 0-14.338-11.63-25.938-25.97-25.938zm116.25 2.563c26.45 67.124-59.23 117.28-57 35.218-40.215 36.923-12.817 84.228 4.78 121.874 13.34 28.545 12.342 53.843-10.125 63.47-16.035 6.87-33.87-11.593-39.625-30.532-1.254-4.128-1.663-9.237-1.47-15.375 9.652-.805 17.22-8.892 17.22-18.75 0-10.393-8.42-18.813-18.813-18.813-10.392 0-18.812 8.42-18.812 18.813 0 7.014 3.84 13.14 9.53 16.375-18.82 20.668-37.66 10.494-25.186-51.78-59.608 67.83-38.06 198.86 45.03 238.874-12.994-25.466-20.146-57.053-14.25-84 36.35 78.815 121.1 1.41 126.03-69.094 13.49 44.606 11.636 109.75-10.78 156.47 90.405-35.317 110.666-171.47 63-239.47-5.868 82.112-70.492 50.032-44.03-58.406 6.495-26.622-12.05-57.205-25.5-64.875zM54.5 90.78c-9.56 0-17.313 7.756-17.313 17.314 0 9.557 7.754 17.312 17.313 17.312 9.56 0 17.313-7.755 17.313-17.312 0-9.56-7.754-17.313-17.313-17.313zm66.625 5.157c-11.525 0-20.844 9.352-20.844 20.876 0 2.88.57 5.628 1.626 8.124-11.332 2.75-19.75 12.98-19.75 25.157 0 14.284 11.59 25.875 25.875 25.875 14.287 0 25.876-11.592 25.876-25.876 0-5.263-1.582-10.166-4.28-14.25 7.284-3.256 12.374-10.537 12.374-19.03 0-11.526-9.35-20.876-20.875-20.876zm258.28 22.376c-9.557 0-17.28 7.754-17.28 17.312 0 9.558 7.723 17.313 17.28 17.313 9.56 0 17.314-7.755 17.314-17.313 0-9.56-7.755-17.313-17.314-17.313zM99.814 196.5c-9.56 0-17.313 7.755-17.313 17.313 0 9.557 7.754 17.312 17.313 17.312 9.558 0 17.312-7.755 17.312-17.313S109.37 196.5 99.812 196.5zm1.406 168c-50.154 13.628-82.564 33.797-82.564 56.188 0 41.017 106.546 74.375 237.72 74.375 131.172 0 237.687-33.358 237.687-74.375 0-22.31-32.125-42.562-81.97-56.188 17.232 8.88 27.5 19.243 27.5 30.438 0 32.13-82.28 58.562-183.218 58.562-100.937 0-182.688-26.435-182.688-58.563 0-11.254 10.125-21.528 27.532-30.437z"></path>
+</svg>
diff --git a/public/tokens/Flag.svg b/public/tokens/Flag.svg
new file mode 100644
index 0000000..12b1710
--- /dev/null
+++ b/public/tokens/Flag.svg
@@ -0,0 +1,5 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="200px"
+  width="200px" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M256 22.438c-130.314 0-235.97 105.654-235.97 235.968 0 130.315 105.656 235.938 235.97 235.938 1.483 0 2.96-.004 4.438-.03l80.75-202.94C144.107 203.56 256.543 420.788 38.906 313.5c9.302-40.373 31.205-131.175 51.157-161.47 220.625 108.762 105.205-113.935 313.812-16.25 3.196-4.52 7.158-7.076 10.875-7.905 7.96-1.777 14.27 4.87 9.938 17.53l-137.75 346.908c115.697-15.15 205-114.077 205-233.907 0-130.314-105.624-235.97-235.938-235.97zm139.625 132.03c-36.11 16.943-57.968 83.92-47.28 118.845l47.28-118.844z"></path>
+</svg>
diff --git a/public/tokens/HandShield.svg b/public/tokens/HandShield.svg
new file mode 100644
index 0000000..4775a39
--- /dev/null
+++ b/public/tokens/HandShield.svg
@@ -0,0 +1,5 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="200px"
+  width="200px" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M51.67 24.377c0 215.76 44.432 429.318 209.21 474.63 181.394-38.7 209.446-258.276 209.446-474.63H51.67zM276.482 44.79c1.448.018 2.916.13 4.375.34l.07.01c6.26.92 12.11 3.844 15.452 6.77L275.18 180.922l17.607 5.646L352.07 66.25c4.27-.31 10.41.832 16.05 3.863 5.992 3.22 10.74 8.133 12.995 12.658l-56.13 116.24 15.218 10.48 76.664-81.246c4.1 1.16 9.34 4.344 13.65 9.195 4.623 5.2 7.66 11.762 8.53 16.882L337.624 263.916l.135-.143c-14.347 14.864-16.183 38.756-12.852 68.202 3.173 28.047 11.84 62.157 23.774 100.28-25.156 24.603-55.416 40.65-85.72 47.116-28.74-10.175-50.453-19.478-72.64-39.227 20.222-52.778 24.746-101.603 23.157-140.637 6.284 2.99 12.498 5.453 18.69 7.197 15.103 4.253 30.777 3.893 44.453-4.392l-9.687-15.988c-8.748 5.3-17.79 5.74-29.7 2.387-11.91-3.355-25.99-10.902-41.486-20.733-28.876-18.32-62.683-44.228-101.223-63.307 4.407-8.026 9.135-12.05 13.983-13.96 6.228-2.456 14.186-1.912 24.166 1.56 15.198 5.29 33.493 17.21 52.21 28.808l16.007-9.14-.754-3.508c-.613-.38-1.218-.745-1.83-1.127L167.284 65.877c3.303-3.966 9.28-8.136 15.986-10.318 6.207-2.02 12.423-2.145 16.595-1.113l25.715 116.66 18.36-.543 19.59-123.007c3.058-1.567 7.08-2.622 11.513-2.756.477-.014.957-.017 1.44-.01z"></path>
+</svg>
diff --git a/public/tokens/ShieldHalf.svg b/public/tokens/ShieldHalf.svg
new file mode 100644
index 0000000..3061fd3
--- /dev/null
+++ b/public/tokens/ShieldHalf.svg
@@ -0,0 +1,5 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="200px"
+  width="200px" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M256 32C174 69.06 121.38 86.46 32 96c0 77.59 5.27 133.36 25.29 184.51a348.86 348.86 0 0 0 71.43 112.41c49.6 52.66 104.17 80.4 127.28 87.08 23.11-6.68 77.68-34.42 127.28-87.08a348.86 348.86 0 0 0 71.43-112.41C474.73 229.36 480 173.59 480 96c-89.38-9.54-142-26.94-224-64zm161.47 233.93a309.18 309.18 0 0 1-63.31 99.56C316 406 276.65 428.31 256 437.36V75.8c38.75 17 68.73 28.3 97.93 36.89a613.12 613.12 0 0 0 85.6 18.52c-1.72 60.22-8.36 99.69-22.06 134.72z"></path>
+</svg>
diff --git a/public/tokens/Totem.svg b/public/tokens/Totem.svg
new file mode 100644
index 0000000..0e0c879
--- /dev/null
+++ b/public/tokens/Totem.svg
@@ -0,0 +1,5 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="200px"
+  width="200px" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M201 23.363v50.12c4.603-5.394 11.432-8.846 19-8.846 13.7 0 25 11.3 25 25s-11.3 25-25 25c-7.568 0-14.397-3.453-19-8.848v18.792c11.52 7.362 21.84 12.615 31.514 15.9l15.435-30.87 8.05-16.1 23.484 46.97c9.675-3.285 19.996-8.538 31.516-15.9V105.79c-4.603 5.394-11.432 8.847-19 8.847-13.7 0-25-11.3-25-25s11.3-25 25-25c7.568 0 14.397 3.452 19 8.847v-50.12l-55 55-55-55zm19 59.274c-3.973 0-7 3.027-7 7 0 3.972 3.027 7 7 7s7-3.028 7-7c0-3.973-3.027-7-7-7zm72 0c-3.973 0-7 3.027-7 7 0 3.972 3.027 7 7 7s7-3.028 7-7c0-3.973-3.027-7-7-7zm-36 51.127l-21.05 42.095L256 196.91l21.05-21.05L256 133.763zm-229.92 4.873c2.246 9.43 8.006 18.132 16.838 26.445 4.568 4.3 9.936 8.4 15.877 12.268l9.678-38.713H26.08zm60.947 0l-12.004 48.01c4.656 2.363 9.497 4.6 14.47 6.695 10.593 4.46 21.776 8.27 32.857 11.457l11.027-66.163h-46.35zm64.596 0l-11.785 70.713c16.26 3.777 31.445 6.095 43.162 6.927v-77.64h-31.377zm177.377 0v77.64c11.717-.832 26.902-3.15 43.162-6.927l-11.785-70.713H329zm49.623 0L389.65 204.8c11.08-3.187 22.264-6.997 32.858-11.458a225.246 225.246 0 0 0 14.47-6.694l-12.005-48.01h-46.35zm64.904 0l9.678 38.713c5.94-3.868 11.31-7.97 15.877-12.268 8.832-8.313 14.592-17.015 16.838-26.445h-42.393zM201 145.805v102.832h110V145.805c-8 4.566-15.742 8.236-23.363 10.98l11.314 22.63-42.95 42.95-42.95-42.95 11.313-22.63c-7.62-2.744-15.363-6.414-23.363-10.98zm18 120.832l14.488 10.865c.752-3.474 1.65-6.76 2.723-9.766.134-.372.274-.734.41-1.1H219zm56.38 0c.136.365.276.727.41 1.1 1.073 3.007 1.97 6.292 2.722 9.767l14.49-10.867H275.38zM256 267.98c-.846 1.257-1.876 3.114-2.838 5.81-2.408 6.744-4.162 17.156-4.162 28.663 0 11.507 1.754 21.917 4.162 28.662.962 2.696 1.992 4.552 2.838 5.81.846-1.258 1.876-3.114 2.838-5.81 2.408-6.745 4.162-17.155 4.162-28.662 0-11.507-1.754-21.92-4.162-28.664-.962-2.696-1.992-4.553-2.838-5.81zm-61.523 2.764a54.308 54.308 0 0 0-2.717 8.45c-1.793 7.612-2.76 17.02-2.76 26.392 0 9.373.97 18.75 2.758 26.303a52.498 52.498 0 0 0 2.808 8.573l36.836-27.627c-.26-3.357-.402-6.82-.402-10.383 0-1.437.032-2.853.074-4.26l-36.597-27.45zm123.046 0l-36.597 27.45c.042 1.406.074 2.822.074 4.26 0 3.562-.143 7.025-.402 10.382l36.923 27.693a54.34 54.34 0 0 0 2.718-8.454c1.793-7.62 2.762-17.04 2.762-26.44 0-9.4-.97-18.82-2.762-26.44-.757-3.218-1.717-6.072-2.715-8.452zm-82.71 62.033L219 344.637h20.533c-1.285-2.296-2.363-4.783-3.322-7.47a71.727 71.727 0 0 1-1.398-4.39zm42.375 0a71.727 71.727 0 0 1-1.4 4.39c-.958 2.687-2.036 5.174-3.32 7.47H293l-15.812-11.86zM201 362.637v70.183l24.223-16.148-23.157-54.035H201zm20.648 0L256 442.79l34.352-80.153h-68.704zm88.286 0l-23.16 54.035L311 432.82v-70.183h-1.066zm-77.5 70.86L201 454.452v2.184h41.352l-9.918-23.14zm47.13 0l-9.916 23.14H311v-2.184l-31.436-20.957zM169 470.636v18h174v-18H169z"></path>
+</svg>
diff --git a/public/tokens/Trap.svg b/public/tokens/Trap.svg
new file mode 100644
index 0000000..5d8c5f5
--- /dev/null
+++ b/public/tokens/Trap.svg
@@ -0,0 +1,5 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="200px"
+  width="200px" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M106 113.773l-32.963 74.375c-1.058.223-2.103.455-3.12.704-5.293 1.296-9.95 2.918-14.044 4.79l-8.266-53.435-25.037 87.277c-1.296 3.723-2.424 7.607-3.338 11.635l-.26.905.07-.04c-3.632 16.665-3.56 35.726 3.597 55.818 3.306 14.022 15.515 30.355 40.24 48.135 29.193 20.992 75.05 42.954 138.495 63.86-.253-1.795-.393-3.625-.393-5.486 0-12.21 5.637-23.185 14.432-30.447l-4.07-42.73-31.54 37.69c-9.764-3.686-19.047-7.46-27.896-11.3l-2.95-78.177-33.57 60.615c-9.068-4.85-17.496-9.773-25.294-14.75l-4.627-90.04-28.932 65.057c-7.485-6.607-13.957-13.243-19.45-19.86-4.244-20.016-.412-38.063 6.145-52.42l4.483-2.602c15.852-5.496 35.514-7.645 58.504-6.182 32.732 2.084 72.51 11.748 118.152 30.803.098-13.092 7.704-24.51 18.692-30.142l-5.597-52.59-30.14 42.78c-9.68-3.6-19.025-6.73-28.012-9.41l-4.26-68.73-32.567 59.774c-11.784-2.163-22.712-3.436-32.716-3.91l-3.77-71.97zm323.08 29.936l-15.973 70.28c-9.928-1.244-20.884-1.876-32.837-1.777l-19.58-66.443-18.075 68.964c-9.342 1.12-19.127 2.635-29.316 4.55l-19.015-44.84-16.422 45.742c8.9 6.183 14.768 16.47 14.768 28.04 0 2.407-.257 4.758-.74 7.03 47.224-10.57 87.28-13.166 119.37-9.7 22.9 2.47 41.908 7.938 56.592 16.05l3.978 3.332c4.016 15.265 4.72 33.704-2.873 52.707-6.54 5.582-14.047 11.016-22.547 16.25l-17.43-69.034-19.89 87.94c-8.51 3.565-17.626 6.972-27.356 10.198l-19.724-61.576-19.274 72.674c-9.347 2.27-19.107 4.404-29.326 6.37l-22.605-45.43-14.87 49.995c2.57 5.23 4.02 11.097 4.02 17.283 0 5.728-1.25 11.18-3.476 16.107 70.416-9.85 122.176-24.18 155.893-40.565 27.394-13.31 42.205-27.326 47.852-40.582 10.472-18.58 13.79-37.348 13.048-54.388l.063.053-.102-.942c-.214-4.126-.664-8.146-1.308-12.035l-9.81-90.26-17.243 51.245c-3.714-2.54-8.03-4.93-13.023-7.11-.96-.417-1.95-.822-2.954-1.222L429.08 143.71zm-170.584 89.07c-8.642 0-15.443 6.802-15.443 15.445 0 3.53 1.15 6.74 3.084 9.318 3.42.025 6.915.164 10.468.422 4.313.313 8.527.796 12.633 1.422 2.91-2.793 4.705-6.733 4.705-11.162 0-8.64-6.806-15.446-15.447-15.446zm-12.652 43.468c-1.02-.003-2.032.005-3.033.025-12.016.244-22.59 2.134-30.23 4.98-5.094 1.9-8.82 4.23-10.85 6.22-2.03 1.99-2.375 3.155-2.375 4.37 0 2.426 3.81 8.437 14.258 13.844 10.448 5.408 25.905 9.714 42.992 10.954 17.088 1.24 32.486-.854 42.674-4.65 5.093-1.898 8.82-4.23 10.85-6.22 2.03-1.987 2.374-3.154 2.374-4.368 0-2.43-3.81-8.44-14.258-13.847-10.447-5.408-25.904-9.712-42.992-10.95-3.204-.234-6.348-.348-9.41-.357zm-5.688 57.215l-2.96 29.51c1.08-.09 2.17-.15 3.273-.15 5.382 0 10.524 1.1 15.214 3.077l3.05-30.406c-1.153-.06-2.313-.13-3.48-.215-5.18-.376-10.223-.992-15.098-1.817zm.313 48.05c-11.6 0-20.798 9.2-20.798 20.8 0 11.595 9.2 20.796 20.797 20.796 11.594 0 20.798-9.203 20.798-20.798 0-11.595-9.202-20.798-20.8-20.798z"></path>
+</svg>