diff --git a/Webservice/Game.js b/Webservice/Game.js index c54f0e0..1b3d6c6 100644 --- a/Webservice/Game.js +++ b/Webservice/Game.js @@ -4,7 +4,7 @@ const Hunter = require("./Hunter"); class Game { static MAX_PLAYERS = 4; - static WIN_POSITION = 16; + static MAX_POSITION = 16; static STATUS = { SETTING_UP: 0, ONGOING: 1, @@ -19,6 +19,7 @@ class Game { this.winnerIndex = 0; this.round = 0; this.hunter = new Hunter(); + this.playerNames = []; } finish_turn() { @@ -41,7 +42,10 @@ class Game { #finish_round() { this.round++; - if (this.round >= 5) { + if (this.players.some(player => player.position >= Game.MAX_POSITION / 2)) { + this.hunter.isAlive = true; + } + if (this.hunter.isAlive) { this.hunter.move_by(1); this.hunter.hunt(this.players); } @@ -82,12 +86,24 @@ class Game { update_game_status() { if (!this.players.some(player => player.isAlive === true)) this.currentStatus = Game.STATUS.IS_DRAW; - let index = this.players.findIndex(player => player.position >= Game.WIN_POSITION); + let index = this.players.findIndex(player => player.position >= Game.MAX_POSITION); if (index !== -1) { this.currentStatus = Game.STATUS.IS_WON; this.winnerIndex = index; } } + + getPlayerNames(){ + return this.playerNames; + } + + addPlayerName(playerName){ + this.playerNames.push(playerName); + } + + removePlayerName(playerName){ + this.playerNames.splice(this.playerNames.indexOf(playerName), 1) + } } module.exports = Game; \ No newline at end of file diff --git a/Webservice/Hunter.js b/Webservice/Hunter.js index 3538041..b244d18 100644 --- a/Webservice/Hunter.js +++ b/Webservice/Hunter.js @@ -1,6 +1,7 @@ class Hunter { constructor() { this.position = 0; + this.isAlive = false; } move_by(amount) { diff --git a/Webservice/Player.js b/Webservice/Player.js index f04a288..8eee32d 100644 --- a/Webservice/Player.js +++ b/Webservice/Player.js @@ -6,7 +6,15 @@ class Player { } move_by(amount) { - this.position += amount; + if (this.position !== 16) { + if (this.position > 11) { + this.position++; + } else if (this.position + amount > 11) { + this.position = 12; + } else { + this.position += amount; + } + } } } diff --git a/Webservice/server.js b/Webservice/server.js index c79ab05..be57531 100644 --- a/Webservice/server.js +++ b/Webservice/server.js @@ -50,10 +50,12 @@ io.on('connection', socket => { if (game[socket.room].add_player(socket.username)) { + game[socket.room].addPlayerName(data.username); addedUser = true; socket.emit('login'); socket.join(socket.room); + io.in(socket.room).emit('updatePlayerNames', game[socket.room].getPlayerNames()); if (game[socket.room].players.length === 1) io.to(socket.id).emit('first player'); @@ -61,7 +63,7 @@ io.on('connection', socket => { generate_log_message(socket.room, socket.username, "JOINED", ""); } else { - io.to(socket.id).emit('error', 'Game started already or room has two many members'); + io.to(socket.id).emit('error', 'Game started already or room has too many members'); } }); @@ -78,11 +80,14 @@ io.on('connection', socket => { socket.on('disconnect', function () { if (game[socket.room] !== undefined && addedUser) { + if (game[socket.room].current_player_is(socket.username)) socket.broadcast.to(socket.room).emit('card destroyed'); + + game[socket.room].removePlayerName(socket.username); + io.in(socket.room).emit('updatePlayerNames', game[socket.room].getPlayerNames()); + socket.broadcast.to(socket.room).emit('user left', socket.username); game[socket.room].remove_player(socket.username); - // TODO Close card if card is opened and active player left - socket.leave(socket.room); if (game[socket.room].players.length === 0) delete game[socket.room]; diff --git a/public/css/components.css b/public/css/components.css index ad7358e..2d8b8a8 100644 --- a/public/css/components.css +++ b/public/css/components.css @@ -96,6 +96,11 @@ main { height: calc(100% - 50px); } +#manual { + width: 100%; + height: calc(100% - 50px); +} + @media only screen and (max-width: 980px) { #main { display: grid; diff --git a/public/img/card_stack.png b/public/img/card_stack.png deleted file mode 100644 index 4ca59d2..0000000 Binary files a/public/img/card_stack.png and /dev/null differ diff --git a/public/img/card_stack_1.png b/public/img/card_stack_1.png new file mode 100644 index 0000000..0d5d90f Binary files /dev/null and b/public/img/card_stack_1.png differ diff --git a/public/img/card_stack_2.png b/public/img/card_stack_2.png new file mode 100644 index 0000000..059fc6a Binary files /dev/null and b/public/img/card_stack_2.png differ diff --git a/public/img/card_stack_3.png b/public/img/card_stack_3.png new file mode 100644 index 0000000..55cc576 Binary files /dev/null and b/public/img/card_stack_3.png differ diff --git a/public/img/sprite.jpg b/public/img/sprite.jpg index 2e8254d..f03c052 100644 Binary files a/public/img/sprite.jpg and b/public/img/sprite.jpg differ diff --git a/public/img/spriteSlow.jpg b/public/img/spriteSlow.jpg new file mode 100644 index 0000000..812774c Binary files /dev/null and b/public/img/spriteSlow.jpg differ diff --git a/public/index.html b/public/index.html index 90bcc6d..79a0cd4 100644 --- a/public/index.html +++ b/public/index.html @@ -17,7 +17,7 @@
Spielanleitung
+ onclick="open_manual();">Spielanleitung
PM-Game
DATE_TO_BE_REPLACEDCOMMIT_TO_BE_REPLACED
@@ -59,11 +59,7 @@ onclick="document.getElementById('modal').style.display = 'none';">close
- +
diff --git a/public/js/Card.js b/public/js/Card.js index 2997c4c..a4a7368 100644 --- a/public/js/Card.js +++ b/public/js/Card.js @@ -1,15 +1,15 @@ -function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) { +function Card(game_board_size, question, answer_1, answer_2, answer_3, answer_4, difficulty, your_turn) { this.card = new PIXI.Graphics(); - this.s = s; - this.a1 = a1; - this.a2 = a2; - this.a3 = a3; - this.a4 = a4; - if (a1.status) this.right_answer = this.a1.text; - if (a2.status) this.right_answer = this.a2.text; - if (a3.status) this.right_answer = this.a3.text; - if (a4.status) this.right_answer = this.a4.text; - this.d = d; + this.question = question; + this.answer_1 = answer_1; + this.answer_2 = answer_2; + this.answer_3 = answer_3; + this.answer_4 = answer_4; + if (answer_1.status) this.right_answer = this.answer_1.text; + if (answer_2.status) this.right_answer = this.answer_2.text; + if (answer_3.status) this.right_answer = this.answer_3.text; + if (answer_4.status) this.right_answer = this.answer_4.text; + this.difficulty = difficulty; this.your_turn = your_turn; this.card_x = game_board_size * 0.25 + 2.5; this.card_y = game_board_size / 2 - game_board_size * 0.72 / 2 + 2.5; @@ -33,64 +33,89 @@ function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) { wordWrapWidth: game_board_size * 0.5 - 20, }); - this.card.lineStyle(20, 0x6C9A8B, 1); this.card.beginFill(0xffffff); - this.card.drawRoundedRect(this.card_x, this.card_y, this.card_width, this.card_height, 10); + switch (difficulty) { + case 1: + this.card.lineStyle(30, 0x6C9A8B, 1); + break; + case 2: + this.card.lineStyle(30, 0xFFDDA1, 1); + break; + case 3: + this.card.lineStyle(30, 0xF47A93, 1); + break; + } + this.card.beginFill(0xFFFFFF); + this.card.moveTo(this.card_x + 50, this.card_y); + this.card.lineTo(this.card_x + 0, this.card_y + 50); + this.card.lineTo(this.card_x + 0, this.card_y + this.card_height); + this.card.lineTo(this.card_x + 50, this.card_y + this.card_height + 50); + this.card.lineTo(this.card_x + this.card_width - 50, this.card_y + this.card_height + 50); + this.card.lineTo(this.card_x + this.card_width, this.card_y + this.card_height); + this.card.lineTo(this.card_x + this.card_width, this.card_y + 50); + this.card.lineTo(this.card_x + this.card_width - 50, this.card_y + 0); + this.card.closePath(); this.card.endFill(); let header; - if (this.d === 0) { + if (this.difficulty === 0) { header = new PIXI.Text("Scoreboard", header_style); } else { - header = new PIXI.Text("Schwierigkeit " + this.d, header_style); + header = new PIXI.Text("Schwierigkeit " + this.difficulty, 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); - const basicText = new PIXI.Text(this.s, style); + if (difficulty === 0) { + for (let i = 0; i < positions.length; i++) { + if (positions[i] > 15) this.question = "Gewinner: " + playerNames[i]; + } + } + + const basicText = new PIXI.Text(this.question, style); basicText.x = this.card_x + 20; basicText.y = this.card_y + 50 + header.height; this.card.addChild(basicText); // Answers let color = 0xffffff; - if (this.d === 0) { + if (this.difficulty === 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 () { + 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.answer_1.text, this.answer_1.status, function () { if (_this.your_turn) { - select_answer(0, _this.a1.text); + select_answer(0, _this.answer_1.text); } })); color = 0xffffff; - if (this.d === 0) { + if (this.difficulty === 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 () { + 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.answer_2.text, this.answer_2.status, function () { if (_this.your_turn) { - select_answer(1, _this.a2.text); + select_answer(1, _this.answer_2.text); } })); color = 0xffffff; - if (this.d === 0) { + if (this.difficulty === 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 () { + 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.answer_3.text, this.answer_3.status, function () { if (_this.your_turn) { - select_answer(2, _this.a3.text); + select_answer(2, _this.answer_3.text); } })); color = 0xffffff; - if (this.d === 0) { + if (this.difficulty === 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 () { + 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.answer_4.text, this.answer_4.status, function () { if (_this.your_turn) { - select_answer(3, _this.a4.text); + select_answer(3, _this.answer_4.text); } })); @@ -98,32 +123,38 @@ function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) { // OK-Button - this.card.addChild(new Button(0xffffff, 0xcccccc, 0xffffff, this.card_width - 40, 100, this.card_x + 20, this.card_y + this.card_height - 120, "OK", null, function () { - if (answer !== null) { - if (_this.right_answer === answer) { //TODO: do this in backend instead to prevent cheating - console.log("Richtig"); - socket.emit('card finished', d, true); - } else { - console.log("Falsch"); - socket.emit('card finished', d, false); - } - show_card = false; - answer = null; - diced = false; - rolled_number = null; - } else { - if (your_turn === true) { - alert("Bitte wähle eine Antwortmöglichkeit aus"); - } else { + if (difficulty === 0 && (positions[0] > 15 || positions[1] > 15 || positions[2] > 15 || positions[3] > 15)) { + this.card.addChild(new Button(0xffffff, 0xcccccc, 0xffffff, this.card_width - 40, 100, this.card_x + 20, this.card_y + this.card_height - 120, "New Game", null, function () { + window.location.reload(); + }).getButton()); + } else { + this.card.addChild(new Button(0xffffff, 0xcccccc, 0xffffff, this.card_width - 40, 100, this.card_x + 20, this.card_y + this.card_height - 120, "OK", null, function () { + if (answer !== null) { + if (_this.right_answer === answer) { //TODO: do this in backend instead to prevent cheating + console.log("Richtig"); + socket.emit('card finished', difficulty, true); + } else { + console.log("Falsch"); + socket.emit('card finished', difficulty, false); + } show_card = false; answer = null; diced = false; rolled_number = null; - card.destroyCard(); - border_card_stack.clear(); + } else { + 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()); + }).getButton()); + } app.stage.addChild(this.card); }; diff --git a/public/js/Sprite.js b/public/js/Sprite.js index 2d588b3..b07113c 100644 --- a/public/js/Sprite.js +++ b/public/js/Sprite.js @@ -1,5 +1,9 @@ -function Sprite(x, y) { - this.sprite = PIXI.Sprite.from('/img/sprite.jpg'); +function Sprite(x, y, slow) { + if(slow){ + this.sprite = PIXI.Sprite.from('/img/spriteSlow.jpg'); + }else{ + this.sprite = PIXI.Sprite.from('/img/sprite.jpg'); + } this.coord_x = x; this.coord_y = y; @@ -14,4 +18,4 @@ function Sprite(x, y) { sprite.width = size * 1.5; sprite.height = size * 1.5; }; -} \ No newline at end of file +} diff --git a/public/js/game.js b/public/js/game.js index 07a2a11..045ebc5 100644 --- a/public/js/game.js +++ b/public/js/game.js @@ -22,24 +22,26 @@ let game_board_size = 2000; let max_size = calculate_size(); let sprite_size = Math.floor(game_board_size / 11); +let playerNames = []; + // fields let sprites = [ - new Sprite(9, 9), // lower right - new Sprite(7, 9), - new Sprite(5, 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) + new Sprite(1, 9, false), // lower left + new Sprite(1, 7, false), + new Sprite(1, 5, false), + new Sprite(1, 3, false), + new Sprite(1, 1, false), // upper left + new Sprite(3, 1, false), + new Sprite(5, 1, false), + new Sprite(7, 1, false), + new Sprite(9, 1, false), // upper right + new Sprite(9, 3, false), + new Sprite(9, 5, false), + new Sprite(9, 7, false), + new Sprite(9, 9, true), // lower right + new Sprite(7, 9, true), + new Sprite(5, 9, true), + new Sprite(3, 9, true) ]; function start_game() { @@ -59,22 +61,22 @@ function start_game() { app.stage.addChild(red_border); - // White circles - let player_a = generate_circle(new PIXI.Graphics(), 9, 9, 'yellow', 1); + // Player circles + let player_a = generate_circle(new PIXI.Graphics(), 1, 9, 'yellow', 1); app.stage.addChild(player_a); - let player_b = generate_circle(new PIXI.Graphics(), 9, 9, 'blue', 2); + let player_b = generate_circle(new PIXI.Graphics(), 1, 9, 'blue', 2); app.stage.addChild(player_b); - let player_c = generate_circle(new PIXI.Graphics(), 9, 9, 'green', 3); + let player_c = generate_circle(new PIXI.Graphics(), 1, 9, 'green', 3); app.stage.addChild(player_c); - let player_d = generate_circle(new PIXI.Graphics(), 9, 9, 'red', 4); + let player_d = generate_circle(new PIXI.Graphics(), 1, 9, 'red', 4); app.stage.addChild(player_d); // Card stacks - let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () { + let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack_1.png'), 3, 3, function () { if (diced && !show_card && rolled_number === 1) { console.log("1"); socket.emit('get card', 1); @@ -82,7 +84,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 () { + let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack_2.png'), 5, 3, function () { if (diced && !show_card && rolled_number === 2) { console.log("2"); socket.emit('get card', 2); @@ -90,7 +92,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 () { + let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack_3.png'), 7, 3, function () { if (diced && !show_card && rolled_number === 3) { console.log("3"); socket.emit('get card', 3); @@ -172,18 +174,25 @@ function start_game() { 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); + {"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("Kein Spieler"), "status": false}, + {"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("Kein Spieler"), "status": false}, + {"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("Kein Spieler"), "status": false}, + { + "text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("Kein Spieler"), + "status": false + }, 0, false); card.showCard(); show_card = true; }); - app.stage.addChild(score_button); score_button.addChild(score_button_text); + socket.on('updatePlayerNames', function (p) { + playerNames = p; + }); + + socket.on('first player', function () { my_turn.text = "Your Turn"; }); @@ -223,36 +232,53 @@ function start_game() { let position = data.position; let next_player = data.next_player; - let x = sprites[position].coord_x; - let y = sprites[position].coord_y; + let x, y; + if (position < 16) { + x = sprites[position].coord_x; + y = sprites[position].coord_y; + } else { + x = 1; + y = 9; + } switch (player) { case 0: positions[0] = data.position; player_a.clear(); - player_a = generate_circle(new PIXI.Graphics(), y, x, 'yellow', 1); + player_a = generate_circle(new PIXI.Graphics(), x, y, '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); + player_b = generate_circle(new PIXI.Graphics(), x, y, '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); + player_c = generate_circle(new PIXI.Graphics(), x, y, '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); + player_d = generate_circle(new PIXI.Graphics(), x, y, 'red', 4); app.stage.addChild(player_d); break; } + if (x === 1 && y === 9 && data.position !== 0) { + card = new Card(game_board_size, "", + {"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("Kein Spieler"), "status": false}, + {"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("Kein Spieler"), "status": false}, + {"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("Kein Spieler"), "status": false}, + {"text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("Kein Spieler"), "status": false}, + 0, false); + card.showCard(); + show_card = true; + } + if (next_player === username) my_turn.text = "Your Turn"; }); @@ -273,7 +299,7 @@ function generate_card_stack(sprite, x, y, onclick) { function generate_red_border(graphics) { graphics.lineStyle(sprite_size * 0.10, 0x862323, 1); - graphics.drawRect(sprite_size * 9 - sprite_size * 0.2, sprite_size * 9 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5); + graphics.drawRect(sprite_size * 1 - sprite_size * 0.2, sprite_size * 9 - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5); return graphics; } @@ -292,6 +318,9 @@ function generate_circle(graphics, x, y, color, offset) { case 'blue': graphics.beginFill(0x4169E1, 1); break; + case 'white': + graphics.beginFill(0xFFFFFF, 1); + break; } switch (offset) { case 1: @@ -341,4 +370,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 diff --git a/public/js/index.js b/public/js/index.js index 8493e39..618d46f 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -51,4 +51,14 @@ document.getElementById('ok').addEventListener('click', function () { socket.on('user left', function (data) { addLogMessage(data + ' left'); }); -}); \ No newline at end of file +}); + +function open_manual() { + let frame = document.createElement('iframe'); + frame.src = 'data/Spielanleitung.pdf'; + frame.id = 'spielanleitung'; + + document.getElementById('manual').innerHTML = ''; + document.getElementById('manual').appendChild(frame); + document.getElementById('modal').style.display = 'block'; +} \ No newline at end of file