diff options
| -rw-r--r-- | components/voerBord.tsx | 16 | ||||
| -rw-r--r-- | nginx.conf | 1 | ||||
| -rw-r--r-- | pages/game.tsx | 4 |
3 files changed, 12 insertions, 9 deletions
diff --git a/components/voerBord.tsx b/components/voerBord.tsx index 3e319a1..67bc86d 100644 --- a/components/voerBord.tsx +++ b/components/voerBord.tsx @@ -1,18 +1,17 @@ -interface VoerBordProps { +export function VoerBord(props: { width: number; height: number; -} - -export function VoerBord(props: VoerBordProps) { + onMove: (move: string) => void; +}) { return <table style={{ borderSpacing: 8, width: "100%" }}> <tbody> { - [...Array(props.height)].map(() => ( + [...Array(props.height).keys()].map((row) => ( <tr> - {[...Array(props.width)].map(() => ( + {[...Array(props.width).keys()].map((column) => ( <td style={{ position: "relative", width: "100%", @@ -27,7 +26,10 @@ export function VoerBord(props: VoerBordProps) { top: 0, left: 0, right: 0, bottom: 0, borderRadius: 6, border: "2px solid var(--background-alt)", - opacity: .5 + opacity: .5, + cursor: "pointer" + }} id={`pos-${(props.height - row - 1) * props.width + column}`} onClick={event => { + props.onMove((event.target as HTMLElement).id.split("-")[1]) }}/> </td> ))} @@ -1,4 +1,5 @@ user nobody; +daemon off; events {} diff --git a/pages/game.tsx b/pages/game.tsx index f56452f..a206d7a 100644 --- a/pages/game.tsx +++ b/pages/game.tsx @@ -4,7 +4,7 @@ import axios from 'axios'; import { userInfo } from '../api/api'; import * as cookies from 'react-cookies'; -var socket = io("http://localhost:5000/game/socket"); +var socket = io("http://localhost:2080/api/game/socket/"); import { NavBar } from '../components/navbar'; import { CenteredPage } from '../components/page'; @@ -81,7 +81,7 @@ class VoerGame extends Component<VoerGameProps> { maxWidth: "100vh", margin: "0 auto" }}> - <VoerBord width={7} height={6}/> + <VoerBord width={7} height={6} onMove={m => this.move(Number(m))}/> <GameBar/> </div> } |