working connect 4 game on website

6 files changed, 31 insertions, 16 deletions

diff --git a/api/game/socket.py b/api/game/socket.py
index 55bff0f..33fbf1b 100644
--- a/api/game/socket.py
+++ b/api/game/socket.py
@@ -6,28 +6,31 @@ import time
 import json
 
 class game:
-    def __init__(self, game_id):
+    def __init__(self, game_id, io):
         self.game_id = game_id
         self.board = bord(7, 6)
+        self.io = io
 
     def move(self, user_id, column):
         # player_1 = cursor.execute("select player_1_id from games where game_id = ?", [self.game_id]).fetchone()[0]
         # player_1_move = player_1 == user_id
         # if not self.board.player_1 == player_1_move: return
         self.board.drop_fisje(column)
+        self.io.emit("fieldUpdate", { "field": self.board.board })
 
 def run(app):
     io = SocketIO(app, cors_allowed_origins="*")
+    games = [game("test_game", io)]
 
     namespace = "/game/socket/"
     @io.on("connect", namespace)
     def connect():
-        print("new connection", namespace)
+        print("connect")
 
-    @io.on("new_move")
-    def connect(data):
-        print("new_move")
-        print(data)
+    @io.on("newMove")
+    def new_move(data):
+        # json_data = json.loads(data)
+        games[0].move(data["token"], data["move"])
 
     io.run(app, host="127.0.0.1", port=5000, debug=True)
 
diff --git a/api/game/voerbak_connector.py b/api/game/voerbak_connector.py
index 6274ada..9627f29 100644
--- a/api/game/voerbak_connector.py
+++ b/api/game/voerbak_connector.py
@@ -11,7 +11,7 @@ DISC_A = Fore.RED + DISC_SHAPE + Fore.RESET
 DISC_B = Fore.BLUE + DISC_SHAPE + Fore.RESET
 EMPTY = Fore.LIGHTBLACK_EX + "_" + Fore.RESET
 
-VOERBAK_LOCATION = "./voerbak"
+VOERBAK_LOCATION = os.path.dirname(__file__) + "/voerbak"
 if os.name == "nt": VOERBAK_LOCATION += ".exe"
 
 class bord:
@@ -21,7 +21,7 @@ class bord:
         self.player_1 = True
         self.board = "0" * (w * h)
         self.win_positions = []
-        self.process = subprocess.Popen(["./voerbak"],
+        self.process = subprocess.Popen([VOERBAK_LOCATION],
                 stdin=subprocess.PIPE,
                 stdout=subprocess.PIPE,
                 stderr=None)
diff --git a/components/voerBord.tsx b/components/voerBord.tsx
index ce35ed8..74db65d 100644
--- a/components/voerBord.tsx
+++ b/components/voerBord.tsx
@@ -1,9 +1,18 @@
+function Disc() {
+	return <div className="disk" style={{
+		position: "absolute",
+		top: 0, left: 0, right: 0, bottom: 0,
+		borderRadius: 999999,
+		margin: 3
+	}}/>
+}
+
 export function VoerBord(props: {
 	width: number;
 	height: number;
 	onMove: (move: number) => void;
 }) {
-	return <table style={{
+	return <table className="voerBord" style={{
 		borderSpacing: 8,
 		width: "100%"
 	}}>
@@ -21,6 +30,7 @@ export function VoerBord(props: {
 									display: "block",
 									marginTop: "100%"
 								}}/>
+								<Disc/>
 								<div style={{
 									position: "absolute",
 									top: 0, left: 0, right: 0, bottom: 0,
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 23f9f79..8bf06e2 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,6 @@
 import '../styles/global.css';
 import '../styles/dark.css';
+import '../styles/disk.css';
 
 export default function VierOpEenRijWebsite({ Component, pageProps }) {
 	return <Component {...pageProps}/>
diff --git a/pages/game.tsx b/pages/game.tsx
index f49e248..8be8f5a 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -59,6 +59,10 @@ class VoerGame extends Component<VoerGameProps> {
 		this.io.on("disconnect", () => {
 			console.log("disconnect")
 		})
+		this.io.on("fieldUpdate", (data: { field: string }) => {
+			for(let i = 0; i < data.field.length; i++)
+				document.getElementById(`pos-${i}`).parentNode.children.item(1).classList.add(`state-${data.field[i]}`);
+		})
 	}
 
 	io: Socket;
@@ -76,7 +80,6 @@ class VoerGame extends Component<VoerGameProps> {
 	userID = "";
 
 	move(column: number) {
-		console.log(column)
 		if(this.state.userID == "") {
 			axios.request<userInfo>({
 				method: "get",
@@ -86,12 +89,7 @@ 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"
-		})
-		this.io.emit("new_move", {
+		this.io.emit("newMove", {
 			move: column,
 			token: cookies.load("token"),
 			gameID: "fortnite"
diff --git a/styles/disk.css b/styles/disk.css
new file mode 100644
index 0000000..d858335
--- /dev/null
+++ b/styles/disk.css
@@ -0,0 +1,3 @@
+.voerBord .disk.state-0 { background-color: var(--page-background); }
+.voerBord .disk.state-1 { background-color: var(--disk-a); }
+.voerBord .disk.state-2 { background-color: var(--disk-b); }