game outcome done

1 files changed, 99 insertions, 41 deletions

diff --git a/pages/game.tsx b/pages/game.tsx
index 8be8f5a..57eca5e 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -9,37 +9,12 @@ import { CenteredPage } from '../components/page';
 import { VoerBord } from '../components/voerBord';
 import { DialogBox } from '../components/dialogBox';
 import { CurrentGameSettings } from '../components/gameSettings';
-import { Button, SearchBar } from '../components/ui';
+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';
-
-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"
-}
+import RefreshIcon from '@material-ui/icons/Refresh';
 
 interface VoerGameProps {
 
@@ -50,19 +25,30 @@ class VoerGame extends Component<VoerGameProps> {
 		super(props);
 
 		if (typeof document === "undefined") return;
-		this.io = socket(window.location.origin, { resource: 'api/game/socket/socket.io' });
-
-		this.io.on("connect", () => {
-			console.log("connect")
-			this.io.emit("resign", {"cool": "data"});
-		})
-		this.io.on("disconnect", () => {
-			console.log("disconnect")
-		})
+		this.io = socket();
+
+		this.io.on("connect", () => console.log("connect"));
+		this.io.on("disconnect", () => console.log("disconnect"));
+
 		this.io.on("fieldUpdate", (data: { field: string }) => {
+			this.setState({ 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]}`);
-		})
+		});
+
+		this.io.on("turnUpdate", (data: { player1: boolean }) => this.setState({ turn: data.player1 }));
+
+		this.io.on("finish", (data: {
+			winPositions: Array<Array<number>>
+			boardFull: boolean }) => {
+
+			this.setState({ winPositions: data.winPositions });
+
+			var outcome = -1;
+			if (data.winPositions.length > 0) outcome = this.state.board[data.winPositions[0][0]];
+			if (data.boardFull) outcome = 0;
+			this.setState({ outcome });
+		});
 	}
 
 	io: Socket;
@@ -72,9 +58,17 @@ class VoerGame extends Component<VoerGameProps> {
 
 	state: {
 		userID: string;
+		turn: boolean;
+		winPositions: Array<Array<number>>;
+		outcome: number;
+		board: Array<number>;
 	} = {
-		userID: ""
-	}
+		userID: "",
+		turn: true,
+		winPositions: [],
+		outcome: -1,
+		board: [],
+	};
 
 	board = [...Array(this.width * this.height)].map(() => 0);
 	userID = "";
@@ -93,7 +87,7 @@ class VoerGame extends Component<VoerGameProps> {
 			move: column,
 			token: cookies.load("token"),
 			gameID: "fortnite"
-		})
+		});
 	}
 
 	render() {
@@ -105,11 +99,75 @@ class VoerGame extends Component<VoerGameProps> {
 			margin: "0 auto"
 		}}>
 			<VoerBord width={this.width} height={this.height} onMove={m => this.move(m % this.width + 1)}/>
-			<GameBar/>
+			<GameBar turn={this.state.turn}/>
+			<GameOutcomeDialog outcome={this.state.outcome} visible={this.state.outcome != -1}/>
 		</div>
 	}
 }
 
+function GameOutcomeDialog(props: {
+	outcome: number;
+	visible: boolean;
+}) {
+	return <DialogBox title="Speluitkomst" style={{ display: props.visible ? "inline-block" : "none" }}>
+		<div style={{
+			width: "100%",
+			textAlign: "center"
+		}}>
+			<h2 style={{
+				color:
+					props.outcome == 0 ? "var(--text)" :
+					props.outcome == 1 ? "var(--disk-a-text)" :
+					props.outcome == 2 ? "var(--disk-b-text)" :
+					"var(--text)",
+				opacity: props.outcome == 0 ? .75 : 1,
+				marginTop: 8
+			}}>{
+				props.outcome == 0 ? "Gelijkspel" :
+				props.outcome == 1 ? "Verloren" :
+				props.outcome == 2 ? "Gewonnen" :
+				"???"
+			}</h2>
+			{ false && <p style={{ marginTop: 24 }}>
+					0 Gemiste winstzetten<br/>
+					6 Optimale zetten<br/>
+					0 Blunders
+			</p> }
+			<IconLabelButton text="Opnieuw spelen" icon={<RefreshIcon/>} style={{
+				float: "none",
+				marginTop: 24,
+				padding: "12px 32px"
+			}}/>
+		</div>
+	</DialogBox>
+}
+
+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() {
 	return (
 		<div>