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 1/2] 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 2/2] 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 +}