import { CSSProperties, useState, useEffect, useContext } from 'react'; import axios from 'axios'; import * as cookies from 'react-cookies'; import { useRouter } from 'next/router'; import { SocketContext } from '../components/socketContext'; import { Socket } from 'socket.io-client'; import { NavBar } from '../components/navbar'; import { CenteredPage } from '../components/page'; import { VoerBord } from '../components/voerBord'; import { DialogBox } from '../components/dialogBox'; import { CurrentGameSettings } from '../components/gameSettings'; import { Button, SearchBar, IconLabelButton } from '../components/ui'; import { GameBar } from '../components/gameBar'; import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded'; import LinkRoundedIcon from '@material-ui/icons/LinkRounded'; import RefreshIcon from '@material-ui/icons/Refresh'; function VoerGame(props: { gameID: string; active: boolean; player1: boolean; io: Socket; }) { var width = 7; var height = 6; var [ioListeners, setIoListeners] = useState(false); var [turn, setTurn] = useState(true); // var [winPositions, setWinPositions] = useState>>([]); var [outcome, setOutcome] = useState(-1); var board: Array = [...Array(width * height)].map(() => 0); useEffect(() => { if (ioListeners) return; props.io.on("connect", () => console.log("connect")); props.io.on("disconnect", () => console.log("disconnect")); props.io.on("fieldUpdate", (data: { field: string }) => { board = data.field.split("").map(i => Number(i)); for(let i = 0; i < data.field.length; i++) document.getElementById(`pos-${i}`).parentNode.children.item(1).classList.add(`state-${data.field[i]}`); }); props.io.on("turnUpdate", (data: { player1: boolean }) => setTurn(data.player1)); props.io.on("finish", (data: { winPositions: Array> boardFull: boolean winner: number }) => { // setWinPositions(data.winPositions); if (data.boardFull) setOutcome(0); if (data.winPositions.length > 0) setOutcome(board[data.winPositions[0][0]]); }); props.io.on("resign", () => { alert("resign") }); setIoListeners(true); }, []); return
{ props.io.emit("newMove", { move: move % width + 1, token: cookies.load("token"), //TODO: get token from request game_id: props.gameID }); }} active={props.active && outcome == -1} /> { props.io.emit("resign", { game_id: props.gameID }) }} />
} function GameOutcomeDialog(props: { outcome: number; player: number; visible: boolean; }) { return { window.history.replaceState(null, null, "/"); window.location.reload(); }}>

{ props.outcome == 0 ? "Gelijkspel" : props.outcome == props.player ? "Verloren" : props.outcome != props.player ? "Gewonnen" : "???" }

{ false &&

0 Gemiste winstzetten
6 Optimale zetten
0 Blunders

} { false && } style={{ float: "none", marginTop: 24, padding: "12px 32px" }}/> }
} var InviteButtonStyle: CSSProperties = { backgroundColor: "var(--page-background)", height: 160, padding: 12 } var InviteButtonIconStyle: CSSProperties = { fontSize: 100, position: "absolute", top: 12, left: "50%", transform: "translateX(-50%)" } var InviteButtonLabelStyle: CSSProperties = { position: "absolute", bottom: 12, left: "50%", transform: "translateX(-50%)", textAlign: "center", color: "var(--text-alt)", width: 136, fontSize: 20, userSelect: "none" } export default function GamePage() { var [ioListeners, setIoListeners] = useState(false); var [gameID, setGameID] = useState(""); var [player1, setPlayer1] = useState(true); var [active, setActive] = useState(false); var gameIDUrl = useRouter().query["id"] as string; var { io } = useContext(SocketContext); if (gameIDUrl && gameIDUrl != gameID) { // join game axios.request<{ id: string, player_1: boolean }>({ method: "post", url: "/api/game/accept", headers: {"content-type": "application/json"}, data: { id: gameIDUrl } }) .then(() => { setActive(true); io.emit("registerGameListener", { game_id: gameIDUrl }); }) .catch(() => {}); setGameID(gameIDUrl); } useEffect(() => { if (ioListeners) return; io.on("gameStart", () => setActive(true)); setIoListeners(true); }, []); return
{ window.history.go(-1); }}>
}