From 980e0ebbcff5bbb9d27394dcb4ba6f61980418b0 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 21 Feb 2021 10:30:33 +0100
Subject: hide new game dialog while looking for game + gamebar move works

---
 api/game/random.py     |  7 +++++--
 components/gameBar.tsx |  3 ++-
 pages/game.tsx         | 39 +++++++++++++++------------------------
 3 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/api/game/random.py b/api/game/random.py
index 09408e1..68ba44c 100644
--- a/api/game/random.py
+++ b/api/game/random.py
@@ -22,12 +22,13 @@ def index():
         user_id = token_login(token)[0]
 
     public_games = cursor.execute("select game_id from games where private = FALSE and status = \"wait_for_opponent\"").fetchall()
-    print(public_games)
+
     if len(public_games) == 0:
         game_id = new_uuid("games")
 
         cursor.execute("insert into games values (?, NULL, NULL, ?, NULL, NULL, 0, NULL, NULL, NULL, \"wait_for_opponent\", \"default\", FALSE) ", (game_id, user_id))
         connection.commit()
+        player_1 = True
     else:
         game_id = random.choice(public_games)[0]
         timestamp = int( time.time() * 1000 )
@@ -37,4 +38,6 @@ def index():
         players = cursor.execute("select player_1_id, player_2_id from games where game_id = ?", [game_id]).fetchone()
         games[game_id] = game(game_id, io, players[0], players[1])
 
-    return { "id": game_id }, 200
+        player_1 = False
+
+    return { "id": game_id, "player_1": player_1 }, 200
diff --git a/components/gameBar.tsx b/components/gameBar.tsx
index b1e6a2d..a2ced12 100644
--- a/components/gameBar.tsx
+++ b/components/gameBar.tsx
@@ -28,6 +28,7 @@ var GameBarAlignStyle: CSSProperties = {
 
 export function GameBar(props: {
 	turn: boolean;
+	player1: boolean;
 }) {
 	return <Vierkant className="gameBar" style={{
 		padding: 8,
@@ -47,7 +48,7 @@ export function GameBar(props: {
 					margin: 12,
 					verticalAlign: "top",
 					display: "inline-block"
-				}}>{ props.turn ? "Jouw beurt" : "Tegenstander" }</h2>
+				}}>{ props.turn == props.player1 ? "Jouw beurt" : "Tegenstander" }</h2>
 			</div>
 			<div style={{
 				...GameBarAlignStyle,
diff --git a/pages/game.tsx b/pages/game.tsx
index 6890a7e..481d7bd 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -1,7 +1,6 @@
 import { CSSProperties, Component } from 'react';
 import { io as socket, Socket } from 'socket.io-client';
 import axios from 'axios';
-import { userInfo } from '../api/api';
 import * as cookies from 'react-cookies';
 
 import { NavBar } from '../components/navbar';
@@ -19,6 +18,8 @@ import RefreshIcon from '@material-ui/icons/Refresh';
 interface VoerGameProps {
 	gameID: string;
 	token: string;
+	active: boolean;
+	player1: boolean;
 }
 
 class VoerGame extends Component<VoerGameProps> {
@@ -89,8 +90,8 @@ class VoerGame extends Component<VoerGameProps> {
 			maxWidth: "100vh",
 			margin: "0 auto"
 		}}>
-			<VoerBord width={this.width} height={this.height} onMove={m => this.move(m % this.width + 1)} active={this.state.outcome == -1}/>
-			<GameBar turn={this.state.turn}/>
+			<VoerBord width={this.width} height={this.height} onMove={m => this.move(m % this.width + 1)} active={this.props.active == true && this.state.outcome == -1}/>
+			<GameBar turn={this.state.turn} player1={this.props.player1}/>
 			<GameOutcomeDialog outcome={this.state.outcome} visible={this.state.outcome != -1}/>
 		</div>
 	}
@@ -162,35 +163,28 @@ var InviteButtonLabelStyle: CSSProperties = {
 export default class GamePage extends Component {
 	constructor(props: {}) {
 		super(props);
-
-		/* if (typeof window === "undefined") return; */
-		/* if (document.cookie.includes("token") == false) return; */
-		/* axios.request<userInfo>({ */
-		/* 	method: "get", */
-		/* 	url: `/api/user/info`, */
-		/* 	headers: {"content-type": "application/json"} */
-		/* }) */
-		/* .then(request => this.setState({ */
-		/* 	user: request.data, */
-		/* 	token: cookies.load("token") */
-		/* })) */
-		/* .catch(() => {}); */
 	}
 
 	state: {
 		gameID: string;
 		token: string;
+		player1: boolean;
 	} = {
 		gameID: "",
 		token: "",
+		player1: true
 	}
 
 	render() {
 		return <div>
 			<NavBar/>
 			<CenteredPage width={900} style={{ height: "100vh" }}>
-				<VoerGame gameID={this.state.gameID} token={this.state.token}/>
-				{true && <DialogBox title="Nieuw spel">
+				<VoerGame
+				active={!!this.state.gameID}
+				gameID={this.state.gameID}
+				token={this.state.token}
+				player1={this.state.player1}/>
+				<DialogBox title="Nieuw spel" style={{ display: !this.state.gameID ? "inline-block" : "none" }}>
 					<CurrentGameSettings/>
 					<div style={{
 						marginTop: 24,
@@ -199,7 +193,7 @@ export default class GamePage extends Component {
 						gridGap: 24
 					}}>
 						<Button style={InviteButtonStyle} onclick={() => {
-							axios.request<{ id: string }>({
+							axios.request<{ id: string, player_1: boolean }>({
 								method: "post",
 								url: "/api/game/random",
 								headers: {"content-type": "application/json"},
@@ -207,6 +201,7 @@ export default class GamePage extends Component {
 							})
 							.then(request => this.setState({
 								gameID: request.data.id,
+								player1: request.data.player_1,
 								token: cookies.load("token")
 							}))
 							.catch(() => {});
@@ -226,11 +221,7 @@ export default class GamePage extends Component {
 						</Button>
 					</div>
 					<SearchBar label="Zoeken in vriendenlijst"/>
-					<code>
-					{this.state.gameID}
-					{this.state.token}
-					</code>
-				</DialogBox>}
+				</DialogBox>
 			</CenteredPage>
 		</div>
 	}
-- 
cgit v1.2.3