Implemented selling

src/data/common.css

@@ -51,6 +51,7 @@
     height: 16vmin;
     cursor: pointer;
     filter: drop-shadow(2px 4px 6px black);
+    margin-right: 0;
 }
 
 .waiting {
@@ -186,6 +187,20 @@
     position: absolute;
 }
 
+.bottom-row {
+    width: 90%;
+}
+
+.bottom-row .row {
+    width: 100%;
+    align-items: center;
+}
+
+.bottom-row .button {
+    font-size: 4vmin;
+    padding: 4vmin;
+}
+
 @media (orientation: portrait) {
     .teams-container {
         flex-direction: column;

src/data/projEntry.tsx

@@ -537,15 +537,38 @@ export const main = createLayer("main", function (this: BaseLayer) {
                     {findingMatch.value ? (
                         <div class="waiting">Finding opposing team...</div>
                     ) : (
-                        <img
+                        <Row class="bottom-row">
-                            class="startStream"
+                            {selectedCharacter.value == null ? null : (
-                            draggable="false"
+                                <button
-                            onClick={() => {
+                                    class="button"
-                                emit("stream");
+                                    onDragover={e => e.preventDefault()}
-                                findingMatch.value = true;
+                                    onClick={() => emit("sell", selectedCharacter.value!)}
-                            }}
+                                    onDrop={() => emit("sell", selectedCharacter.value!)}
-                            src={startStream}
+                                >
-                        />
+                                    Sell
+                                </button>
+                            )}
+                            {selectedShopItem.value == null ? null : (
+                                <button
+                                    class="button"
+                                    onDragover={e => e.preventDefault()}
+                                    onClick={() => emit("freeze", selectedShopItem.value!)}
+                                    onDrop={() => emit("freeze", selectedShopItem.value!)}
+                                >
+                                    Freeze
+                                </button>
+                            )}
+                            <div style="flex-grow: 1" />
+                            <img
+                                class="startStream"
+                                draggable="false"
+                                onClick={() => {
+                                    emit("stream");
+                                    findingMatch.value = true;
+                                }}
+                                src={startStream}
+                            />
+                        </Row>
                     )}
                     {render(particles)}
                 </div>

src/data/socket.tsx

@@ -184,6 +184,20 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
         main.playClicked.value = false;
         setTimeout(main.prepareMove, 1000);
     });
+    socket.on("sell", index => {
+        const member = main.team.value[index]!;
+        let level;
+        if (member.exp >= 6) {
+            level = 3;
+        } else if (member.exp >= 3) {
+            level = 2;
+        } else {
+            level = 1;
+        }
+        main.gold.value += level;
+        main.team.value[index] = null;
+        poof(`team-char-${index}`);
+    });
 }
 
 declare module "game/settings" {

src/data/types.d.ts

@@ -40,12 +40,16 @@ interface ServerToClientEvents {
         },
         outcome: BattleOutcome
     ) => void;
+    freeze: (index: number) => void;
+    sell: (index: number) => void;
 }
 
 interface ClientToServerEvents {
     buy: (shopIndex: number, teamIndex: number) => void;
     move: (index: number, otherIndex: number) => void;
     merge: (index: number, otherIndex: number) => void;
+    freeze: (index: number) => void;
+    sell: (index: number) => void;
     reroll: () => void;
     stream: () => void;
     newTurn: () => void;