diff options
| -rw-r--r-- | api/game/socket.py | 15 | ||||
| -rw-r--r-- | api/game/voerbak_connector.py | 4 | ||||
| -rw-r--r-- | components/voerBord.tsx | 12 | ||||
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/game.tsx | 12 | ||||
| -rw-r--r-- | styles/disk.css | 3 |
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); } |