Basic stream setup

src/data/projEntry.tsx

@@ -83,6 +83,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
     const shop = ref<(Character | null)[]>([]);
     const selectedCharacter = ref<number | null>(null);
     const selectedShopItem = ref<number | null>(null);
+    const findingMatch = ref<boolean>(false);
 
     const reset = createReset(() => ({
         onReset() {
@@ -173,7 +174,18 @@ export const main = createLayer("main", function (this: BaseLayer) {
                     ))}
                 </Row>
                 <Spacer style="margin-top: 10vh" />
-                <button onClick={() => console.log("play")}>Start Stream!</button>
+                {findingMatch.value ? (
+                    <div style="font-size: 2vmin">Finding opposing team...</div>
+                ) : (
+                    <button
+                        onClick={() => {
+                            emit("stream");
+                            findingMatch.value = true;
+                        }}
+                    >
+                        Start Stream!
+                    </button>
+                )}
             </div>
         )),
         lives,
@@ -184,6 +196,7 @@ export const main = createLayer("main", function (this: BaseLayer) {
         shop,
         selectedCharacter,
         selectedShopItem,
+        findingMatch,
         reset
     };
 });

src/data/socket.tsx

@@ -132,6 +132,16 @@ function setupSocket(socket: Socket<ServerToClientEvents, ClientToServerEvents>)
         main.team.value[index] = null;
         main.team.value[otherIndex] = char;
     });
+    socket.on("stream", (enemyTeam, enemyNickname, victory) => {
+        if (victory) {
+            main.wins.value++;
+        } else {
+            main.lives.value--;
+        }
+        main.findingMatch.value = false;
+        // TODO display combat
+        emit("newTurn");
+    });
 }
 
 declare module "game/settings" {

src/data/types.d.ts

@@ -21,6 +21,7 @@ interface ServerToClientEvents {
     buy: (shopIndex: number, teamIndex: number, char: Character) => void;
     move: (index: number, otherIndex: number) => void;
     merge: (shopIndex: number, teamIndex: number, char: Character) => void;
+    stream: (enemyTeam: Character[], nickname: string, victory: boolean) => void;
 }
 
 interface ClientToServerEvents {
@@ -28,4 +29,6 @@ interface ClientToServerEvents {
     move: (index: number, otherIndex: number) => void;
     merge: (index: number, otherIndex: number) => void;
     reroll: () => void;
+    stream: () => void;
+    newTurn: () => void;
 }