diff options
| -rw-r--r-- | components/voerBord.tsx | 4 | ||||
| -rw-r--r-- | pages/game.tsx | 27 |
2 files changed, 26 insertions, 5 deletions
diff --git a/components/voerBord.tsx b/components/voerBord.tsx index 67bc86d..ce35ed8 100644 --- a/components/voerBord.tsx +++ b/components/voerBord.tsx @@ -1,7 +1,7 @@ export function VoerBord(props: { width: number; height: number; - onMove: (move: string) => void; + onMove: (move: number) => void; }) { return <table style={{ borderSpacing: 8, @@ -29,7 +29,7 @@ export function VoerBord(props: { opacity: .5, cursor: "pointer" }} id={`pos-${(props.height - row - 1) * props.width + column}`} onClick={event => { - props.onMove((event.target as HTMLElement).id.split("-")[1]) + props.onMove(Number((event.target as HTMLElement).id.split("-")[1])) }}/> </td> ))} diff --git a/pages/game.tsx b/pages/game.tsx index a206d7a..1c66f92 100644 --- a/pages/game.tsx +++ b/pages/game.tsx @@ -6,6 +6,13 @@ import * as cookies from 'react-cookies'; var socket = io("http://localhost:2080/api/game/socket/"); +socket.on("connect", () => { + console.log("connect") +}) +socket.on("disconnect", () => { + console.log("disconnect") +}) + import { NavBar } from '../components/navbar'; import { CenteredPage } from '../components/page'; import { VoerBord } from '../components/voerBord'; @@ -52,12 +59,21 @@ class VoerGame extends Component<VoerGameProps> { super(props); } - board = [...Array(7 * 6)].map(() => 0); + width = 7; + height = 6; + + state: { + userID: string; + } = { + userID: "" + } + + board = [...Array(this.width * this.height)].map(() => 0); userID = ""; move(column: number) { console.log(column) - if(this.userID == "") { + if(this.state.userID == "") { axios.request<userInfo>({ method: "get", url: `/api/user/info`, @@ -66,6 +82,11 @@ class VoerGame extends Component<VoerGameProps> { .then(request => this.setState({ userID: request.data.id })) .catch(() => {}); } + console.log("emitted this", { + move: column, + token: cookies.load("token"), + gameID: "fortnite" + }) socket.emit("new_move", { move: column, token: cookies.load("token"), @@ -81,7 +102,7 @@ class VoerGame extends Component<VoerGameProps> { maxWidth: "100vh", margin: "0 auto" }}> - <VoerBord width={7} height={6} onMove={m => this.move(Number(m))}/> + <VoerBord width={this.width} height={this.height} onMove={m => this.move(m % this.width + 1)}/> <GameBar/> </div> } |