fix stupid error due to absolute paths

src/UserSettings.ts

@@ -14,6 +14,7 @@ let internalState: UserSettings = {
 
 export function setUserSetting<K extends keyof UserSettings>(setting: K, value: UserSettings[K]) {
     internalState[setting] = value
+    saveUserSettings()
 }
 
 export function getUserSetting<K extends keyof UserSettings>(setting: K): UserSettings[K] {

src/game/ActionScreen.module.scss

@@ -83,3 +83,23 @@
   justify-content: center;
   gap: 1.5rem;
 }
+
+.winner-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column nowrap;
+  gap: 4rem;
+}
+
+.loser-box {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.winner {
+  font-size: 2.5rem;
+  font-weight: 800;
+}

src/game/ActionScreen.tsx

@@ -13,43 +13,68 @@ export function ActionScreen() {
         console.log("Game state changed: ", actionState)
     }, [actionState]);
 
+  useEffect(() => {
+    console.log(gameState)
+  }, [gameState]);
+
     return (
         <div className={s["container"]}>
-            <div className={s["top-container"]}>
+          {actionState != "end-game-winner" && <>
-                <div className={s["player-top-display"]}>
+              <div className={s["top-container"]}>
-                    <PlayerCard size={"xl"} name={gameState.players.get(gameState.cardPicker)!.name} color={"black"}/>
+                  <div className={s["player-top-display"]}>
-                    <SizableCard size={"xl"} content={gameState.blackCard} color={"black"}/>
+                      <PlayerCard size={"xl"} name={gameState.players.get(gameState.cardPicker)?.name ?? "ERR!"} color={"black"}/>
-                </div>
+                      <SizableCard size={"xl"} content={gameState.blackCard ?? "ERR!"} color={"black"}/>
+                  </div>
                 {actionState == "reveal-winner" && <div className={s["player-top-display"]}>
                     <PlayerCard size={"xl"} name={gameState.winningPlayer?.name ?? "ERR"} color={"white"}/>
                     <SizableCard size={"xl"} content={gameState.playedWhiteCards.get(gameState.winningPlayer?.uuid ?? "") ?? "ERR"} color={"white"}/>
                 </div>}
-            </div>
+              </div>
-            <div className={s["what-to-do"]}>{gameHeader}</div>
+              <div className={s["what-to-do"]}>{gameHeader}</div>
             {actionState == "selecting-cards" && <div className={s["player-choosing-grid"]}>
                 <div>
-                    {gameState.getWhiteCharacters().slice(0, 4).map((player) => (
+                  {gameState.getWhiteCharacters().slice(0, 4).map((player) => (
-                        <div>
+                      <div>
-                            <PlayerCard key={player.uuid} points={player.points} className={player.isThinking ? s["thinking-player"] : ""} size={"nm"} name={player.name} color={"white"}/>
+                        <PlayerCard key={player.uuid} points={player.points} className={player.isThinking ? s["thinking-player"] : ""} size={"nm"} name={player.name} color={"white"}/>
-                        </div>
+                      </div>
-                    ))}
+                  ))}
                 </div>
                 <div>
-                    {gameState.getWhiteCharacters().slice(4, 8).map((player) => (
+                  {gameState.getWhiteCharacters().slice(4, 8).map((player) => (
-                        <div>
+                      <div>
-                            <PlayerCard key={player.uuid} points={player.points} className={player.isThinking ? s["thinking-player"] : ""} size={"nm"} name={player.name} color={"white"}/>
+                        <PlayerCard key={player.uuid} points={player.points} className={player.isThinking ? s["thinking-player"] : ""} size={"nm"} name={player.name} color={"white"}/>
-                        </div>
+                      </div>
-                    ))}
+                  ))}
                 </div>
             </div>}
 
             {(actionState == "picking-card" || actionState == "reveal-winner" )&& <div className={s["played-cards"]}>
-                {[...gameState.playedWhiteCards.entries()].map(([userId, cardContent], i) => (
+              {[...gameState.playedWhiteCards.entries()].map(([userId, cardContent], i) => (
-                    <SizableCard style={{
+                  <SizableCard style={{
-                        ["--delay" as string]: `${150*i}ms`
+                    ["--delay" as string]: `${150*i}ms`
-                    }} className={s["played-card"]} size={"nm"} player={gameState.players.get(userId)!.name} obfuscatePlayer={actionState != "reveal-winner"} content={cardContent} color={"white"}/>
+                  }} className={s["played-card"]} size={"nm"} player={gameState.players.get(userId)!.name} obfuscatePlayer={actionState != "reveal-winner"} content={cardContent} color={"white"}/>
-                ))}
+              ))}
             </div>}
+          </>}
+
+          {actionState == "end-game-winner" && <div className={s["winner-box"]}>
+              <div className={s["winner"]}>Winner!</div>
+              <SizableCard style={{
+                ["--delay" as string]: `150ms`
+              }} className={s["player-card"]} size={"lg"} content={`${gameState.winningPlayer?.name ?? "ERR!"}`}
+                           player={`${gameState.winningPlayer?.points} point${gameState.winningPlayer?.points == 1 ? "" : "s"}`}
+                           color={"white"}/>
+              <div className={s["loser-box"]}>
+                {[...gameState.players.values()].filter(p => p.uuid != gameState.winningPlayer?.uuid).map((player) => {
+                  return (
+                      <SizableCard style={{
+                        ["--delay" as string]: `150ms`
+                      }} className={s["player-card"]} size={"lg"} content={`${player.name ?? "ERR!"}`} color={"black"}
+                                   player={`${player.points} point${player.points == 1 ? "" : "s"}`}/>
+                  )
+                })}
+              </div>
+          </div>}
         </div>
     )
 }

src/game/GameContext.ts

@@ -1,7 +1,7 @@
 import {createContext} from "react";
 import {create} from "zustand";
 
-export type ActionState = "selecting-cards" | "picking-card" | "reveal-winner" | "showing-black"
+export type ActionState = "selecting-cards" | "picking-card" | "reveal-winner" | "showing-black" | "end-game-winner"
 
 type Player = {
     name: string,
@@ -26,13 +26,14 @@ export const useGameState = create(() => ({
 
     getBlackCard() {
         const card = this.decks.blacks[Math.floor(Math.random() * this.decks.blacks.length)];
+        console.log(this.decks)
         this.decks.blacks = this.decks.blacks.filter(c => c != card)
         return card
     },
     async fetchCards() {
-        const blacksRes = await fetch("https://inhumane.tv.neothedeveloper.com/api/v1/pick-card/black")
+        const blacksRes = await fetch("https://inhumane-tv-api.neothedeveloper.com/api/v1/pick-card/black")
         this.decks.blacks = await blacksRes.json()
-        const whitesRes = await fetch("https://inhumane.tv.neothedeveloper.com/api/v1/pick-card/white")
+        const whitesRes = await fetch("https://inhumane-tv-api.neothedeveloper.com/api/v1/pick-card/white")
         this.decks.whites = await whitesRes.json()
     },
     getWhiteCards(amount: number) {

src/game/HumanityBoxGame.tsx

@@ -4,7 +4,7 @@ import {useEffect, useState} from "react";
 import {useNavigate} from "react-router";
 import {ActionState, GameContext, useGameState} from "./GameContext.ts";
 import {ConnectionScreen} from "./ConnectionScreen.tsx";
-import useWebSocket, {SendMessage} from "react-use-websocket";
+import useWebSocket, {ReadyState, SendMessage} from "react-use-websocket";
 import {BSON} from "bson";
 import {handlePacket, handlers} from "./socketHandler.ts";
 import { createPacket, GameSecretsCfg, GamePlayerJoin } from "../socket.ts";
@@ -13,6 +13,15 @@ import {ActionScreen} from "./ActionScreen.tsx";
 import {v4} from "uuid";
 import {WebSocketMessage} from "react-use-websocket/dist/lib/types";
 
+function shuffleArray<T>(array: T[]) {
+    let out = [...array];
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [out[i], out[j]] = [out[j], out[i]];
+    }
+    return out
+}
+
 export function HumanityBoxGame() {
     const navigate = useNavigate();
     const [exitVisible, setExitVisible] = useState(false);
@@ -39,7 +48,7 @@ export function HumanityBoxGame() {
     const [gameCode, setGameCode] = useState<string>()
 
     const [screenState, setScreenState] = useState("connecting")
-    const [actionState, setActionState] = useState<ActionState>("showing-black")
+    const [actionState, setActionState] = useState<ActionState>("picking-card")
     const [gameHeader, setGameHeader] = useState<string>("")
 
     function ser(obj: any) {
@@ -136,6 +145,7 @@ export function HumanityBoxGame() {
             if (state.players.size < 3) {
                 setScreenState("join-lobby")
                 setActionState("showing-black")
+                state.fetchCards().then()
             } else if (state.cardPicker == uuid) {
                 chooseBlackCardAndPicker(send)
             }
@@ -190,6 +200,7 @@ export function HumanityBoxGame() {
             if (state.playedWhiteCards.size >= (state.players.size - 1)) {
                 setActionState("picking-card")
                 const state = useGameState.getState()
+                state.playedWhiteCards = new Map(shuffleArray([...state.playedWhiteCards.entries()]))
                 state.players.forEach((player) => {
                     if (player.uuid == state.cardPicker) {
                         send(ser(createPacket("game.setScreen", {
@@ -207,6 +218,30 @@ export function HumanityBoxGame() {
         })
     })
 
+    handlers.set("vip.endAction", (data: { action: number }, send, conn) => {
+        if (data.action == 1) {
+            async function reset() {
+                await gameState.fetchCards()
+                useGameState.setState((state) => {
+                    state.players.forEach((player) => {
+                        player.points = 0
+                        player.availableCards = gameState.getWhiteCards(7)
+                        send(ser(createPacket("game.updateCards", {
+                            cards: player.availableCards
+                        }, conn)))
+                    })
+                    setTimeout(() => {
+                        beginSelectCardsScreen(send)
+                    }, 1000)
+                    return {...state}
+                })
+            }
+            reset().then()
+        } else {
+            window.location.reload()
+        }
+    })
+
     handlers.set("game.action.pickCard", (data: { uuid: string }, send, conn) => {
         if (connRelationMap.get(conn!)! != gameState.cardPicker) {
             return
@@ -220,7 +255,15 @@ export function HumanityBoxGame() {
                 screen: "reveal-winner",
             })))
             setTimeout(() => {
-                chooseBlackCardAndPicker(send)
+                if (player.points >= getUserSetting("PointsToWin")) {
+                    setActionState("end-game-winner")
+                    send(ser(createPacket("game.setScreen", {
+                        screen: "reveal-winner",
+                        control: true
+                    })));
+                } else {
+                    chooseBlackCardAndPicker(send)
+                }
             }, 5000)
             return {...state}
         })
@@ -248,7 +291,6 @@ export function HumanityBoxGame() {
     function beginSelectCardsScreen(send: SendMessage) {
         setActionState("selecting-cards")
         const state = useGameState.getState()
-        console.log(state)
         state.players.forEach((player) => {
             if (player.uuid != state.cardPicker) {
                 send(ser(createPacket("game.setScreen", {
@@ -269,10 +311,6 @@ export function HumanityBoxGame() {
 
     }
 
-    useEffect(() => {
-        console.log(actionState)
-    }, [actionState]);
-
     handlers.set("vip.startGame", (_1, send, conn) => {
         if (gameState.vip != conn) {
             return
@@ -283,12 +321,22 @@ export function HumanityBoxGame() {
         }
     });
 
-    const { sendMessage, lastMessage } = useWebSocket("https://inhumane.tv.neothedeveloper.com/live/start-game", {
+    const { sendMessage, lastMessage, readyState } = useWebSocket("wss://inhumane-tv-api.neothedeveloper.com/live/start-game", {
         reconnectAttempts: 5,
         retryOnError: true,
         reconnectInterval: (lastAttemptNumber) => lastAttemptNumber * 6000
     })
 
+    useEffect(() => {
+        let interval= 0;
+        if (readyState == ReadyState.OPEN) {
+            interval = setInterval(() => {
+                sendMessage(ser(createPacket("ping", {})))
+            }, 5000)
+        }
+        return () => clearInterval(interval)
+    }, [readyState, sendMessage]);
+
     async function handleMessage(msg: MessageEvent | null, send: SendMessage) {
         if (msg) {
             let data = await (msg.data as Blob).arrayBuffer();

src/game/HumanityBoxGameCode.tsx

@@ -22,7 +22,7 @@ export default function HumanityBoxGameCode() {
                     {[...gameState.players.values()].map((p) => {
                         return <PlayerCard  key={p.uuid} className={s["card-flip"]} size={"xl"} name={p.name} color={"white"}/>
                     })}
-                    {new Array<boolean>(getUserSetting("MaxPlayers")).fill(false, 0, 8-gameState.players.size).map((_, i) => {
+                    {new Array<boolean>(getUserSetting("MaxPlayers")).fill(false, 0, getUserSetting("MaxPlayers")-gameState.players.size).map((_, i) => {
                         return <SizableCard key={i} className={[s["join-card"], s["player-card"]].join(" ")} size={"xl"} content={"Join"} color={"white"}/>
                     })}
                 </div>

src/popups/SettingsPopup.tsx

@@ -97,18 +97,19 @@ export function Settings({ onClose }: { onClose?: () => void }) {
                     setMaxPlayers(ev.currentTarget.value)
                 }} onKeyDown={(ev) => {
                     if (ev.code == "Enter") {
-                        let num = parseInt(ev.currentTarget.value)
-                        if (isNaN(num))
-                            num = 0
-
-                        num = Math.min(8, Math.max(3, num))
-
-                        ev.currentTarget.value = String(num)
-                        setUserSetting("MaxPlayers", num)
-                        setMaxPlayers(num.toString())
                         ev.currentTarget.blur()
                     }
-                }} />
+                }} onBlur={(ev) => {
+                    let num = parseInt(ev.currentTarget.value)
+                    if (isNaN(num))
+                        num = 0
+
+                    num = Math.min(8, Math.max(3, num))
+
+                    ev.currentTarget.value = String(num)
+                    setUserSetting("MaxPlayers", num)
+                    setMaxPlayers(num.toString())
+                }}/>
             </Setting>
             <Setting label={"Points to Win"}>
                 <input className={s["setting-input"]} style={{
@@ -118,17 +119,18 @@ export function Settings({ onClose }: { onClose?: () => void }) {
                     setPointsToWin(ev.currentTarget.value)
                 }} onKeyDown={(ev) => {
                     if (ev.code == "Enter") {
-                        let num = parseInt(ev.currentTarget.value)
-                        if (isNaN(num))
-                            num = 0
-
-                        num = Math.min(8, Math.max(3, num))
-
-                        ev.currentTarget.value = String(num)
-                        setUserSetting("PointsToWin", num)
-                        setPointsToWin(num.toString())
                         ev.currentTarget.blur()
                     }
+                }} onBlur={(ev) => {
+                    let num = parseInt(ev.currentTarget.value)
+                    if (isNaN(num))
+                        num = 0
+
+                    num = Math.min(8, Math.max(3, num))
+
+                    ev.currentTarget.value = String(num)
+                    setUserSetting("PointsToWin", num)
+                    setPointsToWin(num.toString())
                 }} />
             </Setting>
         </div>