fix small issues. add end game screen

src/views/ActionScreen.module.scss

@@ -32,4 +32,12 @@
   max-width: 25rem;
   width: 100%;
   height: min-content;
+}
+
+.game-over-buttons {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
 }

src/views/ActionScreen.tsx

@@ -9,11 +9,11 @@ import useWebSocket, {ReadyState} from "react-use-websocket";
 import {BSON} from "bson";
 import {GameContext} from "../GameContext.ts";
 
-type ActionState = "connecting" | "waiting-for-players" | "playing-card" | "disconnected" | "default" | "picking-card"
+type ActionState = "connecting" | "waiting-for-players" | "playing-card" | "disconnected" | "default" | "picking-card" | "game-over"
 
 const randomWaitingPrompts = [
     "Hope your card gets picked <3",
-    "Damn. Awful card bro.",
+    "Dang. Awful card bro.",
     "Let's see how long he takes",
     "Crazy pick. Good stuff bro",
     "Erm..."
@@ -33,7 +33,7 @@ export function ActionScreen () {
 
     const navigate = useNavigate()
 
-    const { sendMessage, lastMessage, readyState } = useWebSocket(`wss://inhumane.tv.neothedeveloper.com/live/join-game/${gameContext.channel.current}`, {
+    const { sendMessage, lastMessage, readyState } = useWebSocket(`ws://localhost:8080/live/join-game/${gameContext.channel.current}`, {
         reconnectAttempts: 5,
         retryOnError: true,
         reconnectInterval: (lastAttemptNumber) => lastAttemptNumber * 6000
@@ -42,8 +42,14 @@ export function ActionScreen () {
     async function handleMessage(msg: MessageEvent | null) {
         if (msg) {
             const data = await (msg.data as Blob).arrayBuffer();
-            console.log(`Last Message Received:`, BSON.deserialize(new Uint8Array(data)));
-            handlePacket(BSON.deserialize(new Uint8Array(data)), sendMessage)
+            const message = BSON.deserialize(new Uint8Array(data))
+            console.log(`Last Message Received:`, message);
+
+            if (message.op != "ping") {
+                setUpdateScreen(v => ++v)
+            }
+
+            handlePacket(message, sendMessage)
         }
     }
 
@@ -75,7 +81,7 @@ export function ActionScreen () {
         gameContext.me.current!.availableCards = data.cards
     })
 
-    handlers.set("game.setScreen", (data: {screen: string, cards?: {[key: string]: string}}) => {
+    handlers.set("game.setScreen", (data: {screen: string, control?: boolean, cards?: {[key: string]: string}}) => {
         if (data.screen == "waiting-for-cards") {
             setActionState("default")
             setInstruction("Waiting for player responses")
@@ -97,6 +103,10 @@ export function ActionScreen () {
         if (data.screen == "reveal-winner") {
             setActionState("default")
             setInstruction("Look at the hosts screen to see who got picked!")
+            if (data.control == true) {
+                setActionState("game-over")
+                setInstruction("Game over!")
+            }
             return
         }
 
@@ -139,8 +149,7 @@ export function ActionScreen () {
     }, [readyState, sendMessage]);
 
     useEffect(() => {
-        handleMessage(lastMessage)
-        setUpdateScreen(v => ++v)
+        handleMessage(lastMessage).then()
     }, [lastMessage]);
 
     useEffect(() => {
@@ -149,6 +158,10 @@ export function ActionScreen () {
         }
     }, [readyState])
 
+    useEffect(() => {
+        gameContext.isVip.current = false
+    }, []);
+
     return (
         <div key={updateScreen} className={s["game-container"]}>
             {actionState === "connecting" && (
@@ -162,6 +175,24 @@ export function ActionScreen () {
                     <div className={s["instruction"]}>
                         {instruction}
                     </div>
+                    {actionState == "game-over" && gameContext.isVip.current && (
+                        <div className={s["game-over-buttons"]}>
+                            <button onClick={() => {
+                                sendMessage(ser(createPacket("vip.endAction", {
+                                    action: 1
+                                })))
+                            }}>
+                                Same Players
+                            </button>
+                            <button onClick={() => {
+                                sendMessage(ser(createPacket("vip.endAction", {
+                                    action: 2
+                                })))
+                            }}>
+                                New Players
+                            </button>
+                        </div>
+                    )}
                     {actionState == "playing-card" && (
                         <div className={s["cards-list"]}>
                             {gameContext.me.current?.availableCards.map((card) => (
@@ -193,7 +224,7 @@ export function ActionScreen () {
                             ))}
                         </div>
                     )}
-                    {(actionState == "waiting-for-players" && gameContext.isVip.current) && (
+                    {(actionState == "waiting-for-players" && gameContext.isVip.current == true) && (
                         <button disabled={players.length < 3} onClick={() => {
                             sendMessage(ser(createPacket("vip.startGame", {})))
                         }}>

src/views/JoinGame.tsx

@@ -28,7 +28,7 @@ export function JoinGame() {
       return;
     }
 
-    const res = await fetch(`https://inhumane.tv.neothedeveloper.com/api/v1/play/${code.toLowerCase()}`)
+    const res = await fetch(`http://localhost:8080/api/v1/play/${code.toLowerCase()}`)
     if (!res.ok) {
       setErrorMessage((await res.json()).message)
       return;