From dffb1ce516b0a93b30c8940cc8abb4a3af004c8d Mon Sep 17 00:00:00 2001 From: Fabian Thome <42369664+Feburrrito@users.noreply.github.com> Date: Thu, 17 Jun 2021 17:23:53 +0200 Subject: [PATCH 01/12] player movement --- Webservice/Player.js | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/Webservice/Player.js b/Webservice/Player.js index 1de9a1b..a25899f 100644 --- a/Webservice/Player.js +++ b/Webservice/Player.js @@ -1,16 +1,35 @@ class Player { - constructor(socketUsername) { + curr_field = 0 ; + coord_x = 0; + coord_y = 0; + + constructor(socketUsername, sprites) { this.socketUsername = socketUsername; - this.position = 0; + this.sprites = sprites; this.isAlive = true; + this.coord_x = sprites[0].getX(); + this.coord_y = sprites[0].getY(); + this.curr_field = 0; } + getX(){ + return this.coord_x; + } + + getY(){ + return this.coord_y; + } + + move(amount) { - this.position += amount; + this.curr_field += amount; + this.coord_x = this.sprites[this.curr_field].getX(); + this.coord_y = this.sprites[this.curr_field].getY(); if (this.position === 15) { // todo: win } } + } -module.exports = Player; \ No newline at end of file +module.exports = Player; From 8f30d63b03e78480715daff00af66f8197758cff Mon Sep 17 00:00:00 2001 From: Thorsten Rausch Date: Thu, 17 Jun 2021 18:33:16 +0200 Subject: [PATCH 02/12] add methods to Game to access players by name --- Webservice/Game.js | 44 +++++++++++++++++++++++++++++++++++++------- Webservice/Hunter.js | 2 +- Webservice/Player.js | 9 +++++---- Webservice/server.js | 35 ++++++++++------------------------- 4 files changed, 53 insertions(+), 37 deletions(-) diff --git a/Webservice/Game.js b/Webservice/Game.js index 2cb500d..4e44386 100644 --- a/Webservice/Game.js +++ b/Webservice/Game.js @@ -1,26 +1,33 @@ +const Player = require('./Player'); const Hunter = require("./Hunter"); class Game { constructor() { this.players = []; - this.whosNext = 0; + this.currentPlayerIndex = 0; this.started = false; this.round = 0; this.hunter = new Hunter(); } finish_turn() { + let move_to_next_round = false; // move on to next player; skip dead players do { - this.whosNext++; - if (this.whosNext === this.players.length) { - this.whosNext = 0; - this.round++; + this.currentPlayerIndex++; + if (this.currentPlayerIndex >= this.players.length) { + this.currentPlayerIndex = 0; + move_to_next_round = true; } - } while (!this.players[this.whosNext].isAlive); + } while (!this.players[this.currentPlayerIndex].isAlive); // skip dead players + this.finish_round(); + } + + finish_round() { + this.round++; // kill players with hunter if (this.round >= 5) { - this.hunter.move(1); + this.hunter.move_by(1); this.hunter.hunt(this.players); } // check if all players are dead @@ -28,6 +35,29 @@ class Game { // todo: end game (all players are dead) } } + + add_player(name) { + this.players.push(new Player(name)); + } + + remove_player(name) { + let index = this.get_player_index(name); + if (index !== -1) this.players.splice(index, 1); + if (this.currentPlayerIndex === index) this.finish_turn(); // if current player leaves: move on to next + } + + current_player_is(name) { + return this.players[this.currentPlayerIndex].name === name; + } + + get_player_index(name) { + return this.players.findIndex(player => player.name === name); + } + + move_player(name, amount) { + let index = this.get_player_index(name); + this.players[index].move_by(amount); + } } module.exports = Game; \ No newline at end of file diff --git a/Webservice/Hunter.js b/Webservice/Hunter.js index 19a59ee..3538041 100644 --- a/Webservice/Hunter.js +++ b/Webservice/Hunter.js @@ -3,7 +3,7 @@ class Hunter { this.position = 0; } - move(amount) { + move_by(amount) { this.position += amount; } diff --git a/Webservice/Player.js b/Webservice/Player.js index 1de9a1b..7e80fca 100644 --- a/Webservice/Player.js +++ b/Webservice/Player.js @@ -1,13 +1,14 @@ class Player { - constructor(socketUsername) { - this.socketUsername = socketUsername; + constructor(name) { + this.name = name; this.position = 0; this.isAlive = true; } - move(amount) { + move_by(amount) { this.position += amount; - if (this.position === 15) { + //todo: move by 1 only on the last 3 fields + if (this.position >= 16) { // todo: win } } diff --git a/Webservice/server.js b/Webservice/server.js index aa1be80..31f1a46 100644 --- a/Webservice/server.js +++ b/Webservice/server.js @@ -1,4 +1,3 @@ -const Player = require('./Player'); const Game = require('./Game'); const express = require('express'); @@ -50,7 +49,7 @@ io.on('connection', socket => { } if (gameState[socket.room].players.length < 4 && !gameState[socket.room].started) { - gameState[socket.room].players.push(new Player(socket.username)); + gameState[socket.room].add_player(socket.username); addedUser = true; socket.emit('login'); @@ -77,38 +76,21 @@ io.on('connection', socket => { socket.on('disconnect', function () { if (gameState[socket.room] !== undefined && addedUser) { - socket.broadcast.to(socket.room).emit('user left', socket.username); - let index = -1; - for (let i = 0; i < gameState[socket.room].players.length; i++) { - if (gameState[socket.room].players[i].socketUsername === socket.username) { - index = i; - break; - } - } - - if (index > -1) { - gameState[socket.room].players.splice(index, 1); - } + gameState.remove_player(socket.username); socket.leave(socket.room); - if (gameState[socket.room].players.length === 0) { - delete gameState[socket.room]; - } + if (gameState[socket.room].players.length === 0) delete gameState[socket.room]; } + generate_log_message(socket.room, socket.username, "LEFT", ""); }); // Game socket.on('roll dice', function () { if (gameState[socket.room] !== undefined && addedUser) { - if(gameState[socket.room].players[gameState[socket.room].whosNext] === undefined) { - console.log(gameState[socket.room].players) - console.log(gameState[socket.room].whosNext) - } - - if (gameState[socket.room].players[gameState[socket.room].whosNext].socketUsername === socket.username) { + if (gameState[socket.room].current_player_is(socket.username)) { gameState[socket.room].started = true; let sides = 3; let randomNumber = Math.floor(Math.random() * sides) + 1; @@ -124,7 +106,7 @@ io.on('connection', socket => { socket.on('get card', function (difficulty) { if (gameState[socket.room] !== undefined && addedUser) { - if (gameState[socket.room].players[gameState[socket.room].whosNext].socketUsername === socket.username) { + if (gameState[socket.room].current_player_is(socket.username)) { io.in(socket.room).emit('card', {'username': socket.username, 'card': getRandomCard(difficulty)}); generate_log_message(socket.room, socket.username, "CARD", difficulty); @@ -136,7 +118,10 @@ io.on('connection', socket => { socket.on('card finished', function (difficulty, answerIsCorrect) { if (gameState[socket.room] !== undefined && addedUser) { - if (answerIsCorrect) gameState[socket.room].players[gameState[socket.room].whosNext].move(difficulty); + if (answerIsCorrect) { + gameState[socket.room].move_player(socket.username, difficulty); + generate_log_message(socket.room, socket.username, "MOVE", difficulty); + } io.in(socket.room).emit('card destroyed'); gameState[socket.room].finish_turn(); } From e85e66444c83aebad67bad7cd24b1270a9a5a8c7 Mon Sep 17 00:00:00 2001 From: Fabian Thome <42369664+Feburrrito@users.noreply.github.com> Date: Thu, 17 Jun 2021 18:49:31 +0200 Subject: [PATCH 03/12] emit 'player moved' --- Webservice/server.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Webservice/server.js b/Webservice/server.js index aa1be80..1dad0a5 100644 --- a/Webservice/server.js +++ b/Webservice/server.js @@ -138,6 +138,10 @@ io.on('connection', socket => { if (gameState[socket.room] !== undefined && addedUser) { if (answerIsCorrect) gameState[socket.room].players[gameState[socket.room].whosNext].move(difficulty); io.in(socket.room).emit('card destroyed'); + io.in(socket.room).emit('player moved', { + "player": gameState[socket.room].whosNext, + "position": gameState[socket.room].players[gameState[socket.room].whosNext].position + }); gameState[socket.room].finish_turn(); } }); @@ -191,4 +195,4 @@ function shuffleAnswers(card) { function pad(width, string, padding) { if (string === undefined || string === null) return pad(width, " ", " "); return (width <= string.length) ? string : pad(width, string + padding, padding); -} \ No newline at end of file +} From 7011f773a5aee551c419fa49903ff12877100f58 Mon Sep 17 00:00:00 2001 From: Fabian Thome <42369664+Feburrrito@users.noreply.github.com> Date: Thu, 17 Jun 2021 18:51:23 +0200 Subject: [PATCH 04/12] player movement - notice 'player moved' - added fourth player - added colors for players - remove players & add new players at new position --- public/js/game.js | 80 +++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 71 insertions(+), 9 deletions(-) diff --git a/public/js/game.js b/public/js/game.js index 73d025f..33c0254 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -66,14 +66,17 @@ function start_game() { // White circles - let first_circle = generate_circle(new PIXI.Graphics(), 3, 9); + let first_circle = generate_circle(new PIXI.Graphics(), 9, 9, 'yellow', 1); app.stage.addChild(first_circle); - let second_circle = generate_circle(new PIXI.Graphics(), 5, 9); + let second_circle = generate_circle(new PIXI.Graphics(), 9, 9, 'blue', 2); app.stage.addChild(second_circle); - - let third_circle = generate_circle(new PIXI.Graphics(), 7, 9); + + let third_circle = generate_circle(new PIXI.Graphics(), 9, 9, 'green', 3); app.stage.addChild(third_circle); + + let fourth_circle = generate_circle(new PIXI.Graphics(), 9, 9, 'red', 4); + app.stage.addChild(fourth_circle); // Card stacks @@ -102,7 +105,7 @@ function start_game() { app.stage.addChild(cards_3); - // Dice + // Die let diceTexture = PIXI.Texture.from('/img/dice.svg'); let dice = new PIXI.Sprite(diceTexture); dice.x = sprite_size * 7 - sprite_size * 0.2; @@ -162,6 +165,55 @@ function start_game() { border_card_stack.clear(); }); + socket.on('player moved', function(data){ + let player = data.player; + let position = data.position; + console.log("player: " + player); // test + console.log("position: " + position); // test + let x = 0; + let y = 0; + switch (position){ + case 0: x = 9; y = 9; break; + case 1: x = 9; y = 7; break; + case 2: x = 9; y = 5; break; + case 3: x = 9; y = 3; break; + case 4: x = 9; y = 1; break; + case 5: x = 7; y = 1; break; + case 6: x = 5; y = 1; break; + case 7: x = 3; y = 1; break; + case 8: x = 1; y = 1; break; + case 9: x = 1; y = 3; break; + case 10: x = 1; y = 5; break; + case 11: x = 1; y = 7; break; + case 12: x = 1; y = 9; break; + case 13: x = 3; y = 9; break; + case 14: x = 5; y = 9; break; + case 15: x = 7; y = 9; break; + } + switch(player){ + case 0: + first_circle.clear(); + first_circle = generate_circle(new PIXI.Graphics(), y, x, 'yellow', 1); + app.stage.addChild(first_circle); + break; + case 1: + second_circle.clear(); + second_circle = generate_circle(new PIXI.Graphics(), y, x, 'blue', 2); + app.stage.addChild(second_circle); + break; + case 2: + third_circle.clear(); + third_circle = generate_circle(new PIXI.Graphics(), y, x, 'green', 3); + app.stage.addChild(third_circle); + break; + case 3: + fourth_circle.clear(); + fourth_circle = generate_circle(new PIXI.Graphics(), y, x, 'red', 4); + app.stage.addChild(fourth_circle); + break; + } + }); + resize(); } @@ -183,10 +235,20 @@ function generate_red_border(graphics) { return graphics; } -function generate_circle(graphics, x, y) { +function generate_circle(graphics, x, y, color, offset) { graphics.lineStyle(0); - graphics.beginFill(0xffffff, 1); - graphics.drawCircle(sprite_size * x - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); + switch (color){ + case 'yellow': graphics.beginFill(0xFFDDA1, 1); break; + case 'red': graphics.beginFill(0xF47A93, 1); break; + case 'green': graphics.beginFill(0x6C9A8B, 1); break; + case 'blue': graphics.beginFill(0x4169E1, 1); break; + } + switch(offset){ + case 1: graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // upper left + case 2: graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // upper right + case 3: graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // lower left + case 4: graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // lower right + } graphics.endFill(); return graphics; } @@ -221,4 +283,4 @@ function resize() { app.stage.scale.set(size / game_board_size, size / game_board_size); app.renderer.resize(size, size); -} \ No newline at end of file +} From ae82565bbe851730a76a6e76a8cacd5a7bf40e2e Mon Sep 17 00:00:00 2001 From: Thorsten Rausch Date: Thu, 17 Jun 2021 19:22:36 +0200 Subject: [PATCH 05/12] fix missing broadcast "user left" --- Webservice/server.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Webservice/server.js b/Webservice/server.js index dea2df8..b4f8abc 100644 --- a/Webservice/server.js +++ b/Webservice/server.js @@ -76,6 +76,7 @@ io.on('connection', socket => { socket.on('disconnect', function () { if (gameState[socket.room] !== undefined && addedUser) { + socket.broadcast.to(socket.room).emit('user left', socket.username); gameState[socket.room].remove_player(socket.username); socket.leave(socket.room); From 559336fb65a1f384cca37479d6cf870131244ff7 Mon Sep 17 00:00:00 2001 From: Fabian Thome <42369664+Feburrrito@users.noreply.github.com> Date: Thu, 17 Jun 2021 19:57:32 +0200 Subject: [PATCH 06/12] player movement - changed direction of gameplay (now clockwise) - renamed player variables --- public/js/game.js | 107 +++++++++++++++++++++++----------------------- 1 file changed, 54 insertions(+), 53 deletions(-) diff --git a/public/js/game.js b/public/js/game.js index 33c0254..8bb9f2e 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -30,22 +30,22 @@ let rolled_number_text = new PIXI.Text("", rolled_number_style); // fields let sprites = [ - new Sprite(9, 9), - new Sprite(9, 7), - new Sprite(9, 5), - new Sprite(9, 3), - new Sprite(9, 1), - new Sprite(7, 1), - new Sprite(5, 1), - new Sprite(3, 1), - new Sprite(1, 1), - new Sprite(1, 3), - new Sprite(1, 5), - new Sprite(1, 7), - new Sprite(1, 9), - new Sprite(3, 9), + new Sprite(9, 9), // lower right + new Sprite(7, 9), new Sprite(5, 9), - new Sprite(7, 9) + new Sprite(3, 9), + new Sprite(1, 9), // upper right + new Sprite(1, 7), + new Sprite(1, 5), + new Sprite(1, 3), + new Sprite(1, 1), // upper left + new Sprite(3, 1), + new Sprite(5, 1), + new Sprite(7, 1), + new Sprite(9, 1), // lower left + new Sprite(9, 3), + new Sprite(9, 5), + new Sprite(9, 7) ]; function start_game() { @@ -66,17 +66,17 @@ function start_game() { // White circles - let first_circle = generate_circle(new PIXI.Graphics(), 9, 9, 'yellow', 1); - app.stage.addChild(first_circle); + let player_a = generate_circle(new PIXI.Graphics(), 9, 9, 'yellow', 1); + app.stage.addChild(player_a); - let second_circle = generate_circle(new PIXI.Graphics(), 9, 9, 'blue', 2); - app.stage.addChild(second_circle); + let player_b = generate_circle(new PIXI.Graphics(), 9, 9, 'blue', 2); + app.stage.addChild(player_b); - let third_circle = generate_circle(new PIXI.Graphics(), 9, 9, 'green', 3); - app.stage.addChild(third_circle); + let player_c = generate_circle(new PIXI.Graphics(), 9, 9, 'green', 3); + app.stage.addChild(player_c); - let fourth_circle = generate_circle(new PIXI.Graphics(), 9, 9, 'red', 4); - app.stage.addChild(fourth_circle); + let player_d = generate_circle(new PIXI.Graphics(), 9, 9, 'red', 4); + app.stage.addChild(player_d); // Card stacks @@ -168,48 +168,49 @@ function start_game() { socket.on('player moved', function(data){ let player = data.player; let position = data.position; - console.log("player: " + player); // test - console.log("position: " + position); // test let x = 0; let y = 0; switch (position){ - case 0: x = 9; y = 9; break; - case 1: x = 9; y = 7; break; - case 2: x = 9; y = 5; break; - case 3: x = 9; y = 3; break; - case 4: x = 9; y = 1; break; - case 5: x = 7; y = 1; break; - case 6: x = 5; y = 1; break; - case 7: x = 3; y = 1; break; - case 8: x = 1; y = 1; break; - case 9: x = 1; y = 3; break; - case 10: x = 1; y = 5; break; - case 11: x = 1; y = 7; break; - case 12: x = 1; y = 9; break; - case 13: x = 3; y = 9; break; - case 14: x = 5; y = 9; break; - case 15: x = 7; y = 9; break; + case 0: x = 9; y = 9; break; // lower right + case 1: x = 7; y = 9; break; + case 2: x = 5; y = 9; break; + case 3: x = 3; y = 9; break; + case 4: x = 1; y = 9; break; // upper right + case 5: x = 1; y = 7; break; + case 6: x = 1; y = 5; break; + case 7: x = 1; y = 3; break; + case 8: x = 1; y = 1; break; // upper left + case 9: x = 3; y = 1; break; + case 10: x = 5; y = 1; break; + case 11: x = 7; y = 1; break; + case 12: x = 9; y = 1; break; // lower left + case 13: x = 9; y = 3; break; + case 14: x = 9; y = 5; break; + case 15: x = 9; y = 7; break; + + + } switch(player){ case 0: - first_circle.clear(); - first_circle = generate_circle(new PIXI.Graphics(), y, x, 'yellow', 1); - app.stage.addChild(first_circle); + player_a.clear(); + player_a = generate_circle(new PIXI.Graphics(), y, x, 'yellow', 1); + app.stage.addChild(player_a); break; case 1: - second_circle.clear(); - second_circle = generate_circle(new PIXI.Graphics(), y, x, 'blue', 2); - app.stage.addChild(second_circle); + player_b.clear(); + player_b = generate_circle(new PIXI.Graphics(), y, x, 'blue', 2); + app.stage.addChild(player_b); break; case 2: - third_circle.clear(); - third_circle = generate_circle(new PIXI.Graphics(), y, x, 'green', 3); - app.stage.addChild(third_circle); + player_c.clear(); + player_c = generate_circle(new PIXI.Graphics(), y, x, 'green', 3); + app.stage.addChild(player_c); break; case 3: - fourth_circle.clear(); - fourth_circle = generate_circle(new PIXI.Graphics(), y, x, 'red', 4); - app.stage.addChild(fourth_circle); + player_d.clear(); + player_d = generate_circle(new PIXI.Graphics(), y, x, 'red', 4); + app.stage.addChild(player_d); break; } }); From ae4d7085bacaa83a4839d40ea1b58b6c5f3ee19d Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Fri, 18 Jun 2021 08:37:10 +0200 Subject: [PATCH 07/12] Removed unused files --- Webservice/mobileHandler.js | 11 ----------- public/css/mobile.css | 35 ----------------------------------- 2 files changed, 46 deletions(-) delete mode 100644 Webservice/mobileHandler.js delete mode 100644 public/css/mobile.css diff --git a/Webservice/mobileHandler.js b/Webservice/mobileHandler.js deleted file mode 100644 index 79a9890..0000000 --- a/Webservice/mobileHandler.js +++ /dev/null @@ -1,11 +0,0 @@ -function isMobile() { - let mobileDeviceIndicator = 0; - if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { - mobileDeviceIndicator = 1; - } - /* - let hasTouchscreen = 'ontouchstart' in window; - alert(hasTouchscreen ? 'has touchscreen' : 'doesn\'t have touchscreen'); - */ -} - diff --git a/public/css/mobile.css b/public/css/mobile.css deleted file mode 100644 index cdd1849..0000000 --- a/public/css/mobile.css +++ /dev/null @@ -1,35 +0,0 @@ -html { - width: 100%; - height: 100%; - font-family: Arial, sans-serif -} - -body { - width: 100%; - height: 100%; - padding: 0; - margin: 0; - overflow: hidden; -} - -main { - display: grid; - grid-template-rows: 80% 20%; - height: calc(100% - 3em - 10px); -} - -.material-icon { - font-family: Material Icons, sans-serif !important; - font-weight: 400; - font-style: normal; - font-size: 24px; - line-height: 1; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - -webkit-font-feature-settings: "liga"; - -webkit-font-smoothing: antialiased; -} \ No newline at end of file From a5ec342005723a66d566c51e7c8866292105012c Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Fri, 18 Jun 2021 08:55:55 +0200 Subject: [PATCH 08/12] Fix empty room bug --- Webservice/Game.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Webservice/Game.js b/Webservice/Game.js index 4e44386..e0baf8d 100644 --- a/Webservice/Game.js +++ b/Webservice/Game.js @@ -14,6 +14,8 @@ class Game { let move_to_next_round = false; // move on to next player; skip dead players do { + if(this.players.length === 0) break; + this.currentPlayerIndex++; if (this.currentPlayerIndex >= this.players.length) { this.currentPlayerIndex = 0; From 6ca95e697c7a9777030e0d4238e8d172e34a61f2 Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Fri, 18 Jun 2021 08:56:31 +0200 Subject: [PATCH 09/12] Improved positioning of players --- public/js/game.js | 27 ++++----------------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/public/js/game.js b/public/js/game.js index 8bb9f2e..18883bb 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -168,29 +168,10 @@ function start_game() { socket.on('player moved', function(data){ let player = data.player; let position = data.position; - let x = 0; - let y = 0; - switch (position){ - case 0: x = 9; y = 9; break; // lower right - case 1: x = 7; y = 9; break; - case 2: x = 5; y = 9; break; - case 3: x = 3; y = 9; break; - case 4: x = 1; y = 9; break; // upper right - case 5: x = 1; y = 7; break; - case 6: x = 1; y = 5; break; - case 7: x = 1; y = 3; break; - case 8: x = 1; y = 1; break; // upper left - case 9: x = 3; y = 1; break; - case 10: x = 5; y = 1; break; - case 11: x = 7; y = 1; break; - case 12: x = 9; y = 1; break; // lower left - case 13: x = 9; y = 3; break; - case 14: x = 9; y = 5; break; - case 15: x = 9; y = 7; break; - - - - } + + let x = sprites[position].coord_x; + let y = sprites[position].coord_y; + switch(player){ case 0: player_a.clear(); From f4d98041003aed8e22507e0ceb8b176fd175b163 Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Fri, 18 Jun 2021 09:09:50 +0200 Subject: [PATCH 10/12] - Added TODO - Fix Bug if active player leaves --- Webservice/Game.js | 7 +++++-- Webservice/server.js | 3 ++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/Webservice/Game.js b/Webservice/Game.js index e0baf8d..ccef9d2 100644 --- a/Webservice/Game.js +++ b/Webservice/Game.js @@ -14,7 +14,7 @@ class Game { let move_to_next_round = false; // move on to next player; skip dead players do { - if(this.players.length === 0) break; + if (this.players.length === 0) break; this.currentPlayerIndex++; if (this.currentPlayerIndex >= this.players.length) { @@ -44,7 +44,10 @@ class Game { remove_player(name) { let index = this.get_player_index(name); - if (index !== -1) this.players.splice(index, 1); + if (index !== -1) { + this.players.splice(index, 1); + if (this.currentPlayerIndex >= index) this.currentPlayerIndex--; + } if (this.currentPlayerIndex === index) this.finish_turn(); // if current player leaves: move on to next } diff --git a/Webservice/server.js b/Webservice/server.js index b4f8abc..d42fdc8 100644 --- a/Webservice/server.js +++ b/Webservice/server.js @@ -79,12 +79,13 @@ io.on('connection', socket => { socket.broadcast.to(socket.room).emit('user left', socket.username); gameState[socket.room].remove_player(socket.username); + // TODO Close card if card is opened and active player left + socket.leave(socket.room); if (gameState[socket.room].players.length === 0) delete gameState[socket.room]; } - generate_log_message(socket.room, socket.username, "LEFT", ""); }); From 73ced0222fb6e218fc292279952d2b80fad99506 Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Fri, 18 Jun 2021 09:43:40 +0200 Subject: [PATCH 11/12] - Refactoring - Show which player is active --- Webservice/server.js | 6 ++- public/js/game.js | 97 +++++++++++++++++++++++++++++--------------- 2 files changed, 70 insertions(+), 33 deletions(-) diff --git a/Webservice/server.js b/Webservice/server.js index d42fdc8..446e7c6 100644 --- a/Webservice/server.js +++ b/Webservice/server.js @@ -125,12 +125,16 @@ io.on('connection', socket => { generate_log_message(socket.room, socket.username, "MOVE", difficulty); } io.in(socket.room).emit('card destroyed'); + gameState[socket.room].finish_turn(); + let index = gameState[socket.room].get_player_index(socket.username); + let next_player = gameState[socket.room].players[gameState[socket.room].currentPlayerIndex].name; + io.in(socket.room).emit('player moved', { + "next_player": next_player, "player": index, "position": gameState[socket.room].players[index].position }); - gameState[socket.room].finish_turn(); } }); }); diff --git a/public/js/game.js b/public/js/game.js index 18883bb..91002c0 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -14,20 +14,12 @@ let rolled_number = null; let game = document.getElementById('game'); let app; let border_card_stack = new PIXI.Graphics(); +let my_turn; let game_board_size = 2000; let max_size = calculate_size(); let sprite_size = Math.floor(game_board_size / 11); -const rolled_number_style = new PIXI.TextStyle({ - fontFamily: 'Arial', - fontSize: 140, - fontWeight: 'bold', - wordWrap: true, - wordWrapWidth: game_board_size * 0.5 - 20, -}); -let rolled_number_text = new PIXI.Text("", rolled_number_style); - // fields let sprites = [ new Sprite(9, 9), // lower right @@ -71,10 +63,10 @@ function start_game() { let player_b = generate_circle(new PIXI.Graphics(), 9, 9, 'blue', 2); app.stage.addChild(player_b); - + let player_c = generate_circle(new PIXI.Graphics(), 9, 9, 'green', 3); app.stage.addChild(player_c); - + let player_d = generate_circle(new PIXI.Graphics(), 9, 9, 'red', 4); app.stage.addChild(player_d); @@ -105,7 +97,7 @@ function start_game() { app.stage.addChild(cards_3); - // Die + // Dice let diceTexture = PIXI.Texture.from('/img/dice.svg'); let dice = new PIXI.Sprite(diceTexture); dice.x = sprite_size * 7 - sprite_size * 0.2; @@ -134,6 +126,29 @@ function start_game() { // logo.rotation -= Math.PI / 8; app.stage.addChild(logo); + + my_turn = new PIXI.Text("", new PIXI.TextStyle({ + fontFamily: 'Arial', + fontSize: 70, + fontWeight: 'bold', + })); + my_turn.x = sprite_size * 3; + my_turn.y = sprite_size * 8; + app.stage.addChild(my_turn); + + + let rolled_number_text = new PIXI.Text("", new PIXI.TextStyle({ + fontFamily: 'Arial', + fontSize: 140, + fontWeight: 'bold', + wordWrap: true, + wordWrapWidth: game_board_size * 0.5 - 20, + })); + rolled_number_text.x = sprite_size * 7 - sprite_size * 0.2 + dice.width / 2 - rolled_number_text.width / 2; + rolled_number_text.y = sprite_size * 6 - sprite_size * 0.2; + app.stage.addChild(rolled_number_text); + + socket.on('dice', function (randomInt) { rolled_number = randomInt; diced = true; @@ -141,10 +156,7 @@ function start_game() { border_card_stack.lineStyle(15, 0x862323, 1); border_card_stack.drawRoundedRect(sprite_size * (1 + 2 * rolled_number) - sprite_size * 0.2, sprite_size * 3 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 3 * 0.72, 10); - rolled_number_text = new PIXI.Text(rolled_number, rolled_number_style); - rolled_number_text.x = sprite_size * 7 - sprite_size * 0.2 + dice.width / 2 - rolled_number_text.width / 2; - rolled_number_text.y = sprite_size * 6 - sprite_size * 0.2; - app.stage.addChild(rolled_number_text); + rolled_number_text.text = rolled_number; }); socket.on('card', function (data) { @@ -161,39 +173,44 @@ function start_game() { diced = false; show_card = false; card.destroyCard(); - rolled_number_text.destroy(); + rolled_number_text.text = ""; border_card_stack.clear(); }); - socket.on('player moved', function(data){ + socket.on('player moved', function (data) { + my_turn.text = ""; + let player = data.player; let position = data.position; + let next_player = data.next_player; let x = sprites[position].coord_x; let y = sprites[position].coord_y; - switch(player){ + switch (player) { case 0: player_a.clear(); player_a = generate_circle(new PIXI.Graphics(), y, x, 'yellow', 1); app.stage.addChild(player_a); break; - case 1: + case 1: player_b.clear(); player_b = generate_circle(new PIXI.Graphics(), y, x, 'blue', 2); app.stage.addChild(player_b); break; - case 2: + case 2: player_c.clear(); player_c = generate_circle(new PIXI.Graphics(), y, x, 'green', 3); app.stage.addChild(player_c); break; - case 3: + case 3: player_d.clear(); player_d = generate_circle(new PIXI.Graphics(), y, x, 'red', 4); app.stage.addChild(player_d); break; } + + if (next_player === username) my_turn.text = "Your Turn"; }); resize(); @@ -219,17 +236,33 @@ function generate_red_border(graphics) { function generate_circle(graphics, x, y, color, offset) { graphics.lineStyle(0); - switch (color){ - case 'yellow': graphics.beginFill(0xFFDDA1, 1); break; - case 'red': graphics.beginFill(0xF47A93, 1); break; - case 'green': graphics.beginFill(0x6C9A8B, 1); break; - case 'blue': graphics.beginFill(0x4169E1, 1); break; + switch (color) { + case 'yellow': + graphics.beginFill(0xFFDDA1, 1); + break; + case 'red': + graphics.beginFill(0xF47A93, 1); + break; + case 'green': + graphics.beginFill(0x6C9A8B, 1); + break; + case 'blue': + graphics.beginFill(0x4169E1, 1); + break; } - switch(offset){ - case 1: graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // upper left - case 2: graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // upper right - case 3: graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // lower left - case 4: graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); break; // lower right + switch (offset) { + case 1: + graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); + break; // upper left + case 2: + graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); + break; // upper right + case 3: + graphics.drawCircle(sprite_size * x - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); + break; // lower left + case 4: + graphics.drawCircle(sprite_size * x + 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - 65 - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4); + break; // lower right } graphics.endFill(); return graphics; From 0287f8aec07bb29dcacbec76da6e2400864e8656 Mon Sep 17 00:00:00 2001 From: H4CK3R-01 Date: Fri, 18 Jun 2021 10:19:03 +0200 Subject: [PATCH 12/12] Error if game already started or more than 4 players --- Webservice/server.js | 9 ++++++--- public/css/index.css | 4 ++++ public/index.html | 1 + public/js/chat.js | 25 ++++++++++++++++++------- public/js/game.js | 6 +++--- public/js/index.js | 12 +++++++----- 6 files changed, 39 insertions(+), 18 deletions(-) diff --git a/Webservice/server.js b/Webservice/server.js index 446e7c6..12e3159 100644 --- a/Webservice/server.js +++ b/Webservice/server.js @@ -59,7 +59,7 @@ io.on('connection', socket => { generate_log_message(socket.room, socket.username, "JOINED", ""); } else { - // TODO + io.to(socket.id).emit('error', 'Game started already or room has two many members'); } }); @@ -101,7 +101,7 @@ io.on('connection', socket => { generate_log_message(socket.room, socket.username, "DICE", randomNumber); } else { - // TODO + io.to(socket.id).emit('error', 'It\'s not your turn'); } } }); @@ -113,7 +113,7 @@ io.on('connection', socket => { generate_log_message(socket.room, socket.username, "CARD", difficulty); } else { - // TODO + io.to(socket.id).emit('error', 'It\'s not your turn'); } } }); @@ -157,6 +157,9 @@ function generate_log_message(room, user, type, message) { case 'DICE': color = '\x1b[34m'; break; + case 'MOVE': + color = '\x1b[30m'; + break; default: color = '\x1b[0m'; } diff --git a/public/css/index.css b/public/css/index.css index bc85301..2a6dae7 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -1,3 +1,7 @@ +#error { + color: red; +} + #login { background: #212121; height: 100%; diff --git a/public/index.html b/public/index.html index 75d4ffa..1c9a073 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,7 @@
+

diff --git a/public/js/chat.js b/public/js/chat.js index 724ccf4..e758a5a 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -2,15 +2,29 @@ let socket; let connected = false; function start_chat() { - socket = io("/", { - closeOnBeforeunload: false - }); - socket.on('login', function () { connected = true; + + document.getElementById('login').style.display = 'none'; + document.getElementById('game').style.display = 'flex'; + document.getElementById('chat').style.display = 'flex'; + start_chat(); + start_game(); + resize(); + addLogMessage("Welcome " + username + "!"); }); + socket.on('error', function (data) { + if (data === 'Game started already or room has two many members') { + document.getElementById('login').style.display = 'flex'; + document.getElementById('game').style.display = 'none'; + document.getElementById('chat').style.display = 'none'; + document.getElementById('error').innerText = data; + } + console.log(data); + }); + socket.on('new message', function (data) { addChatMessage(data); }); @@ -22,9 +36,6 @@ function start_chat() { socket.on('user left', function (data) { addLogMessage(data + ' left'); }); - - // Login - socket.emit('add user', {'username': username, 'room_name': room_name}); } function sendMessage() { diff --git a/public/js/game.js b/public/js/game.js index 91002c0..f594b5f 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -73,7 +73,7 @@ function start_game() { // Card stacks let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () { - if (!show_card && rolled_number === 1) { + if (diced && !show_card && rolled_number === 1) { console.log("1"); socket.emit('get card', 1); } @@ -81,7 +81,7 @@ function start_game() { app.stage.addChild(cards_1); let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () { - if (!show_card && rolled_number === 2) { + if (diced && !show_card && rolled_number === 2) { console.log("2"); socket.emit('get card', 2); } @@ -89,7 +89,7 @@ function start_game() { app.stage.addChild(cards_2); let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () { - if (!show_card && rolled_number === 3) { + if (diced && !show_card && rolled_number === 3) { console.log("3"); socket.emit('get card', 3); } diff --git a/public/js/index.js b/public/js/index.js index 2a25b46..93968bd 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -10,10 +10,12 @@ document.getElementById('ok').addEventListener('click', function () { username = document.getElementById('username').value; room_name = document.getElementById('room').value; - document.getElementById('login').style.display = 'none'; - document.getElementById('game').style.display = 'flex'; - document.getElementById('chat').style.display = 'flex'; + socket = io("/", { + closeOnBeforeunload: false + }); + start_chat(); - start_game(); - resize(); + + // Login + socket.emit('add user', {'username': username, 'room_name': room_name}); }); \ No newline at end of file