fix stupid error due to absolute paths
This commit is contained in:
parent
02b1f4aa6e
commit
5aa9eb2298
|
|
@ -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] {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,9 +109,7 @@ 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"}>
|
||||
<input className={s["setting-input"]} style={{
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user