fix stupid error due to absolute paths

This commit is contained in:
Neo 2025-05-18 20:16:22 -04:00
parent 02b1f4aa6e
commit 5aa9eb2298
7 changed files with 151 additions and 54 deletions

View File

@ -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] {

View File

@ -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;
}

View File

@ -13,12 +13,17 @@ export function ActionScreen() {
console.log("Game state changed: ", actionState)
}, [actionState]);
useEffect(() => {
console.log(gameState)
}, [gameState]);
return (
<div className={s["container"]}>
{actionState != "end-game-winner" && <>
<div className={s["top-container"]}>
<div className={s["player-top-display"]}>
<PlayerCard size={"xl"} name={gameState.players.get(gameState.cardPicker)!.name} color={"black"}/>
<SizableCard size={"xl"} content={gameState.blackCard} color={"black"}/>
<PlayerCard size={"xl"} name={gameState.players.get(gameState.cardPicker)?.name ?? "ERR!"} color={"black"}/>
<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"}/>
@ -50,6 +55,26 @@ export function ActionScreen() {
}} 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>
)
}

View File

@ -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) {

View File

@ -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(() => {
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();

View File

@ -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>

View File

@ -97,6 +97,9 @@ export function Settings({ onClose }: { onClose?: () => void }) {
setMaxPlayers(ev.currentTarget.value)
}} onKeyDown={(ev) => {
if (ev.code == "Enter") {
ev.currentTarget.blur()
}
}} onBlur={(ev) => {
let num = parseInt(ev.currentTarget.value)
if (isNaN(num))
num = 0
@ -106,8 +109,6 @@ export function Settings({ onClose }: { onClose?: () => void }) {
ev.currentTarget.value = String(num)
setUserSetting("MaxPlayers", num)
setMaxPlayers(num.toString())
ev.currentTarget.blur()
}
}}/>
</Setting>
<Setting label={"Points to Win"}>
@ -118,6 +119,9 @@ export function Settings({ onClose }: { onClose?: () => void }) {
setPointsToWin(ev.currentTarget.value)
}} onKeyDown={(ev) => {
if (ev.code == "Enter") {
ev.currentTarget.blur()
}
}} onBlur={(ev) => {
let num = parseInt(ev.currentTarget.value)
if (isNaN(num))
num = 0
@ -127,8 +131,6 @@ export function Settings({ onClose }: { onClose?: () => void }) {
ev.currentTarget.value = String(num)
setUserSetting("PointsToWin", num)
setPointsToWin(num.toString())
ev.currentTarget.blur()
}
}} />
</Setting>
</div>