From f538fa4bfe1f2e75e01ee1f958bcd5dfdc1eb6fb Mon Sep 17 00:00:00 2001 From: H4CK3R-01 <44125287+H4CK3R-01@users.noreply.github.com> Date: Mon, 21 Jun 2021 22:45:58 +0200 Subject: [PATCH] - Fixed "your turn" - Scoreboard --- Webservice/server.js | 19 +++++++++-------- public/js/Card.js | 42 +++++++++++++++++++++++++++++++------ public/js/game.js | 49 +++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 93 insertions(+), 17 deletions(-) diff --git a/Webservice/server.js b/Webservice/server.js index 98e2176..c79ab05 100644 --- a/Webservice/server.js +++ b/Webservice/server.js @@ -55,6 +55,8 @@ io.on('connection', socket => { socket.emit('login'); socket.join(socket.room); + if (game[socket.room].players.length === 1) io.to(socket.id).emit('first player'); + socket.broadcast.to(socket.room).emit('user joined', socket.username); generate_log_message(socket.room, socket.username, "JOINED", ""); @@ -130,18 +132,19 @@ io.on('connection', socket => { if (answerIsCorrect) { game[socket.room].move_player(socket.username, difficulty); generate_log_message(socket.room, socket.username, "MOVE", difficulty); - - let index = game[socket.room].get_player_index(socket.username); - let next_player = game[socket.room].players[game[socket.room].currentPlayerIndex].name; - io.in(socket.room).emit('player moved', { - "next_player": next_player, - "player": index, - "position": game[socket.room].players[index].position - }); } + let index = game[socket.room].get_player_index(socket.username); + let position = game[socket.room].players[index].position; + game[socket.room].finish_turn(); + io.in(socket.room).emit('player moved', { + "next_player": game[socket.room].players[game[socket.room].currentPlayerIndex].name, + "player": index, + "position": position + }); + switch (game[socket.room].currentStatus) { case Game.STATUS.IS_WON: //TODO show clients the winner diff --git a/public/js/Card.js b/public/js/Card.js index 2fd7f81..2997c4c 100644 --- a/public/js/Card.js +++ b/public/js/Card.js @@ -38,7 +38,12 @@ function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) { this.card.drawRoundedRect(this.card_x, this.card_y, this.card_width, this.card_height, 10); this.card.endFill(); - const header = new PIXI.Text("Schwierigkeit " + this.d, header_style); + let header; + if (this.d === 0) { + header = new PIXI.Text("Scoreboard", header_style); + } else { + header = new PIXI.Text("Schwierigkeit " + this.d, header_style); + } header.x = this.card_x + 20 + this.card.width / 2 - header.width / 2 - 2.5 - 20; header.y = this.card_y + 20; this.card.addChild(header); @@ -49,25 +54,41 @@ function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) { this.card.addChild(basicText); // Answers - this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 4, this.a1.text, this.a1.status, function () { + let color = 0xffffff; + if (this.d === 0) { + color = 0xFFDDA1; + } + this.buttons.push(new Button(color, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 4, this.a1.text, this.a1.status, function () { if (_this.your_turn) { select_answer(0, _this.a1.text); } })); - this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 3, this.a2.text, this.a2.status, function () { + color = 0xffffff; + if (this.d === 0) { + color = 0x4169E1; + } + this.buttons.push(new Button(color, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 3, this.a2.text, this.a2.status, function () { if (_this.your_turn) { select_answer(1, _this.a2.text); } })); - this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 2, this.a3.text, this.a3.status, function () { + color = 0xffffff; + if (this.d === 0) { + color = 0x6C9A8B; + } + this.buttons.push(new Button(color, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 2, this.a3.text, this.a3.status, function () { if (_this.your_turn) { select_answer(2, _this.a3.text); } })); - this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 1, this.a4.text, this.a4.status, function () { + color = 0xffffff; + if (this.d === 0) { + color = 0xF47A93; + } + this.buttons.push(new Button(color, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 1, this.a4.text, this.a4.status, function () { if (_this.your_turn) { select_answer(3, _this.a4.text); } @@ -91,7 +112,16 @@ function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) { diced = false; rolled_number = null; } else { - alert("Bitte wähle eine Antwortmöglichkeit aus"); + if (your_turn === true) { + alert("Bitte wähle eine Antwortmöglichkeit aus"); + } else { + show_card = false; + answer = null; + diced = false; + rolled_number = null; + card.destroyCard(); + border_card_stack.clear(); + } } }).getButton()); diff --git a/public/js/game.js b/public/js/game.js index f594b5f..07a2a11 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -1,10 +1,11 @@ /* Images - background.jpg: https://www.lignaushop.de/images/product_images/popup_images/treppenstufe-buecherregal-fensterbank-eiche-country-rustikal-unbehandelt-wuppertal.JPG + background.jpg: https://pixabay.com/get/ge3fe775ba1a5bfd2cc937b0687982214d547e5cf538543560fc25041c070ad5b860d8dd24df751dbc5c7d5ede3f672e7_1920.jpg?attachment= card_stack.png: https://www.google.de/url?sa=i&url=https%3A%2F%2Fwww.pngegg.com%2Fpt%2Fsearch%3Fq%3Drainha%2Bde%2Bcopas&psig=AOvVaw3wwfk87wAXBxqmdXnoGSfe&ust=1623254731054000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCMjUoaG1iPECFQAAAAAdAAAAABA5 dice.svg: https://www.svgrepo.com/download/198836/gambler-casino.svg sprite.jpg: https://media.istockphoto.com/photos/gray-granite-stone-texture-seamless-square-background-tile-ready-picture-id1096464726 */ +let positions = [0, 0, 0, 0]; let card; let answer = null; let show_card = false; @@ -15,6 +16,7 @@ let game = document.getElementById('game'); let app; let border_card_stack = new PIXI.Graphics(); let my_turn; +let score_button; let game_board_size = 2000; let max_size = calculate_size(); @@ -118,7 +120,7 @@ function start_game() { // Logo - let logo = PIXI.Sprite.from('/img/logo_2.png'); + let logo = PIXI.Sprite.from('/img/logo.png'); logo.x = sprite_size * 3 - sprite_size * 0.2; logo.y = sprite_size * 5.5 - sprite_size * 0.2; logo.width = sprite_size * 3.5; @@ -132,7 +134,7 @@ function start_game() { fontSize: 70, fontWeight: 'bold', })); - my_turn.x = sprite_size * 3; + my_turn.x = sprite_size * 6; my_turn.y = sprite_size * 8; app.stage.addChild(my_turn); @@ -149,6 +151,43 @@ function start_game() { app.stage.addChild(rolled_number_text); + let score_button_text = new PIXI.Text("Scoreboard", new PIXI.TextStyle({ + fontFamily: 'Arial', + fontSize: 40, + wordWrap: true, + wordWrapWidth: this.width, + breakWords: true, + padding: 50 + })); + score_button_text.x = sprite_size * 3 + 25 - sprite_size * 0.2; + score_button_text.y = sprite_size * 7 + 25 - sprite_size * 0.2 + sprite_size * 0.5; + + score_button = new PIXI.Graphics(); + score_button.lineStyle(4, 0x000000, 1); + score_button.beginFill(0x7d7d7d); + score_button.drawRect(sprite_size * 3 - sprite_size * 0.2, sprite_size * 7 - sprite_size * 0.2 + sprite_size * 0.5, score_button_text.width + 50, score_button_text.height + 50); + score_button.endFill(); + score_button.interactive = true; + score_button.buttonMode = true; + score_button.defaultCursor = 'pointer'; + score_button.on('pointerdown', function () { + card = new Card(game_board_size, "", + {"text": "Spieler 1: " + positions[0], "status": false}, + {"text": "Spieler 2: " + positions[1], "status": false}, + {"text": "Spieler 3: " + positions[2], "status": false}, + {"text": "Spieler 4: " + positions[3], "status": false}, 0, false); + card.showCard(); + show_card = true; + }); + + + app.stage.addChild(score_button); + score_button.addChild(score_button_text); + + socket.on('first player', function () { + my_turn.text = "Your Turn"; + }); + socket.on('dice', function (randomInt) { rolled_number = randomInt; diced = true; @@ -189,21 +228,25 @@ function start_game() { switch (player) { case 0: + positions[0] = data.position; player_a.clear(); player_a = generate_circle(new PIXI.Graphics(), y, x, 'yellow', 1); app.stage.addChild(player_a); break; case 1: + positions[1] = data.position; player_b.clear(); player_b = generate_circle(new PIXI.Graphics(), y, x, 'blue', 2); app.stage.addChild(player_b); break; case 2: + positions[2] = data.position; player_c.clear(); player_c = generate_circle(new PIXI.Graphics(), y, x, 'green', 3); app.stage.addChild(player_c); break; case 3: + positions[3] = data.position; player_d.clear(); player_d = generate_circle(new PIXI.Graphics(), y, x, 'red', 4); app.stage.addChild(player_d);