From 0b76059df1f0f0524f7a030d02f583ab1395632a Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Thu, 16 Feb 2023 23:53:17 -0600
Subject: [PATCH] Implemented buying characters

---
 src/data/CharacterSlot.vue | 17 ++++++-
 src/data/common.css        | 12 +++++
 src/data/projEntry.tsx     | 94 ++++++++++++++++++++++++++++++++------
 src/data/socket.tsx        | 13 +++++-
 src/data/types.d.ts        |  8 +++-
 5 files changed, 125 insertions(+), 19 deletions(-)

diff --git a/src/data/CharacterSlot.vue b/src/data/CharacterSlot.vue
index e2a5c3a..b2b6711 100644
--- a/src/data/CharacterSlot.vue
+++ b/src/data/CharacterSlot.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="character">
+    <div class="character" :class="{ selected }">
         <span class="character-display">{{ character?.type }}</span>
     </div>
 </template>
@@ -9,7 +9,8 @@ const props = defineProps<{
     character?: {
         type: string;
         relevancy: number;
-    };
+    } | null;
+    selected?: boolean;
 }>();
 </script>
 
@@ -20,6 +21,8 @@ const props = defineProps<{
     position: relative;
     margin: 50px;
     justify-content: center;
+    cursor: pointer;
+    user-select: none;
 }
 
 .character-display {
@@ -37,4 +40,14 @@ const props = defineProps<{
     border-radius: 50%;
     z-index: -1;
 }
+
+.character.selected::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%2388C0D0' stroke-width='8' stroke-dasharray='10%25%2c90%25' stroke-dashoffset='5' stroke-linecap='square'/%3e%3c/svg%3e");
+}
 </style>
diff --git a/src/data/common.css b/src/data/common.css
index 728c160..0e65946 100644
--- a/src/data/common.css
+++ b/src/data/common.css
@@ -7,3 +7,15 @@
 .modifier-toggle.collapsed {
     transform: translate(-5px, -5px) rotate(-90deg);
 }
+
+.resource-box {
+    margin-right: 20px !important;
+    font-size: large;
+    border: solid 2px var(--bought);
+    padding: 4px;
+    border-radius: 4px;
+}
+
+.resource-box .material-icons {
+    margin-right: 6px;
+}
diff --git a/src/data/projEntry.tsx b/src/data/projEntry.tsx
index c534665..d8bc58d 100644
--- a/src/data/projEntry.tsx
+++ b/src/data/projEntry.tsx
@@ -7,7 +7,8 @@ import type { Player } from "game/player";
 import { computed, ref } from "vue";
 import CharacterSlot from "./CharacterSlot.vue";
 import "./socket";
-import { nickname } from "./socket";
+import "./common.css";
+import { emit, nickname } from "./socket";
 
 export const characters: Record<string, CharacterInfo> = {
     coots: {
@@ -41,6 +42,10 @@ export const characters: Record<string, CharacterInfo> = {
     car: {
         nickname: "Red Car",
         initialRelevancy: 1
+    },
+    hasan: {
+        nickname: "Hasanabi",
+        initialRelevancy: 1
     }
 };
 
@@ -51,31 +56,71 @@ export const main = createLayer("main", function (this: BaseLayer) {
     const lives = ref<number>(3);
     const wins = ref<number>(0);
     const turn = ref<number>(0);
-    const team = ref<Character[]>([]);
-    const shop = ref<string[]>([]);
+    const gold = ref<number>(0);
+    const team = ref<(Character | null)[]>([null, null, null]);
+    const shop = ref<(string | null)[]>([]);
+    const selectedCharacter = ref<number | null>(null);
+    const selectedShopItem = ref<number | null>(null);
 
     return {
         name: "Game",
         minimizable: false,
         display: jsx(() => (
-            <div style="display: flex; flex-direction: column">
+            <div
+                style="display: flex; flex-direction: column"
+                onClick={() => {
+                    selectedCharacter.value = null;
+                    selectedShopItem.value = null;
+                }}
+            >
+                <Row style="position: absolute; top: 20px">
+                    <div class="resource-box">
+                        <span class="material-icons">credit_card</span>
+                        {gold.value}
+                    </div>
+                    <div class="resource-box">
+                        <span class="material-icons">favorite</span>
+                        {lives.value}
+                    </div>
+                    <div class="resource-box">
+                        <span class="material-icons">emoji_events</span>
+                        {wins.value}/5
+                    </div>
+                </Row>
                 <h2>{nickname.value}</h2>
                 <Spacer height="10vh" />
                 <Row>
-                    <CharacterSlot character={team.value[0]} />
-                    <CharacterSlot character={team.value[1]} />
-                    <CharacterSlot character={team.value[2]} />
+                    <CharacterSlot
+                        character={team.value[0]}
+                        selected={selectedCharacter.value === 0}
+                        onClick={clickCharacter(0)}
+                    />
+                    <CharacterSlot
+                        character={team.value[1]}
+                        selected={selectedCharacter.value === 1}
+                        onClick={clickCharacter(1)}
+                    />
+                    <CharacterSlot
+                        character={team.value[2]}
+                        selected={selectedCharacter.value === 2}
+                        onClick={clickCharacter(2)}
+                    />
                 </Row>
                 <Spacer height="10vh" />
                 <Row>
-                    {shop.value.map(item => (
+                    {shop.value.map((item, i) => (
                         <CharacterSlot
                             character={
-                                item
-                                    ? { type: item, relevancy: characters[item].initialRelevancy }
-                                    : undefined
+                                item == null
+                                    ? undefined
+                                    : { type: item, relevancy: characters[item].initialRelevancy }
                             }
-                            onClick={() => console.log(item)}
+                            selected={selectedShopItem.value === i}
+                            onClick={(e: MouseEvent) => {
+                                selectedShopItem.value = selectedShopItem.value === i ? null : i;
+                                selectedCharacter.value = null;
+                                e.stopPropagation();
+                            }}
                         />
                     ))}
                 </Row>
@@ -86,11 +131,34 @@ export const main = createLayer("main", function (this: BaseLayer) {
         lives,
         wins,
         turn,
+        gold,
         team,
-        shop
+        shop,
+        selectedCharacter,
+        selectedShopItem
     };
 });
 
+function clickCharacter(index: number) {
+    return () => {
+        if (main.selectedCharacter.value != null && main.selectedCharacter.value !== index) {
+            const temp = main.team.value[index];
+            main.team.value[index] = main.team.value[main.selectedCharacter.value];
+            main.team.value[main.selectedCharacter.value] = temp;
+            main.selectedCharacter.value = null;
+        } else if (main.selectedCharacter.value === index) {
+            main.selectedCharacter.value = null;
+        } else if (main.selectedShopItem.value !== null && main.team.value[index] == null) {
+            if (main.gold.value >= 3) {
+                emit("buy", main.selectedShopItem.value, index);
+            }
+            main.selectedShopItem.value = null;
+        } else {
+            main.selectedCharacter.value = index;
+        }
+    };
+}
+
 /**
  * Given a player save data object being loaded, return a list of layers that should currently be enabled.
  * If your project does not use dynamic layers, this should just return all layers.
diff --git a/src/data/socket.tsx b/src/data/socket.tsx
index e9952b6..405417c 100644
--- a/src/data/socket.tsx
+++ b/src/data/socket.tsx
@@ -7,7 +7,7 @@ import satisfies from "semver/functions/satisfies";
 import { io, Socket } from "socket.io-client";
 import { ref, watch } from "vue";
 import { useToast } from "vue-toastification";
-import { main } from "./projEntry";
+import { characters, main } from "./projEntry";
 
 export const connected = ref<boolean>(false);
 export const nickname = ref<string>("");
@@ -98,9 +98,18 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
         nickname.value = nick;
     });
 
-    socket.on("shop", shop => {
+    socket.on("newTurn", shop => {
+        main.gold.value = 10;
         main.shop.value = shop;
     });
+    socket.on("reroll", shop => {
+        main.shop.value = shop;
+    });
+    socket.on("buy", (shopIndex, teamIndex, char) => {
+        main.team.value[teamIndex] = char;
+        main.shop.value[shopIndex] = null;
+        main.gold.value -= 3;
+    });
 }
 
 declare module "game/settings" {
diff --git a/src/data/types.d.ts b/src/data/types.d.ts
index 29dfa82..062d6ec 100644
--- a/src/data/types.d.ts
+++ b/src/data/types.d.ts
@@ -12,7 +12,11 @@ interface ServerToClientEvents {
     "server version": (semver: string) => void;
     nickname: (nickname: string) => void;
     info: (message: string) => void;
-    shop: (shop: string[]) => void;
+    newTurn: (shop: string[]) => void;
+    reroll: (shop: string[]) => void;
+    buy: (shopIndex: number, teamIndex: number, char: Character) => void;
 }
 
-interface ClientToServerEvents {}
+interface ClientToServerEvents {
+    buy: (shopIndex: number, teamIndex: number) => void;
+}