DHBW/Projektmanagement-Game
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

Optimized css for mobile devices

Browse Source
This commit is contained in:
H4CK3R-01 2021-07-14 11:34:36 +02:00 committed by H4CK3R-01
parent 16683d049e
commit e2b6e88a3b
11 changed files with 160 additions and 4526 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Webservice/Game.js
View File

@ -16,7 +16,6 @@ class Game {
this.currentStatus = Game.STATUS.SETTING_UP; this.currentStatus = Game.STATUS.SETTING_UP;
this.players = []; this.players = [];
this.currentPlayerIndex = 0; this.currentPlayerIndex = 0;
this.winnerIndex = 0;
this.round = 0; this.round = 0;
this.hunter = new Hunter(); this.hunter = new Hunter();
this.playerNames = []; this.playerNames = [];
@ -90,7 +89,6 @@ class Game {
let index = this.players.findIndex(player => player.position >= Game.MAX_POSITION); let index = this.players.findIndex(player => player.position >= Game.MAX_POSITION);
if (index !== -1) { if (index !== -1) {
this.currentStatus = Game.STATUS.IS_WON; this.currentStatus = Game.STATUS.IS_WON;
this.winnerIndex = index;
} }
} }

11
Webservice/server.js
View File

@ -56,7 +56,7 @@ io.on('connection', socket => {
socket.emit('login', game[socket.room].get_player_index(socket.username)); socket.emit('login', game[socket.room].get_player_index(socket.username));
socket.join(socket.room); socket.join(socket.room);
io.in(socket.room).emit('updatePlayerNames', game[socket.room].getPlayerNames()); io.in(socket.room).emit('update player names', game[socket.room].getPlayerNames());
if (game[socket.room].players.length === 1) io.to(socket.id).emit('first player'); if (game[socket.room].players.length === 1) io.to(socket.id).emit('first player');
@ -87,7 +87,7 @@ io.on('connection', socket => {
if (game[socket.room].current_player_is(socket.username)) socket.broadcast.to(socket.room).emit('card destroyed'); if (game[socket.room].current_player_is(socket.username)) socket.broadcast.to(socket.room).emit('card destroyed');
game[socket.room].removePlayerName(socket.username); game[socket.room].removePlayerName(socket.username);
io.in(socket.room).emit('updatePlayerNames', game[socket.room].getPlayerNames()); io.in(socket.room).emit('update player names', game[socket.room].getPlayerNames());
socket.broadcast.to(socket.room).emit('user left', socket.username); socket.broadcast.to(socket.room).emit('user left', socket.username);
game[socket.room].remove_player(socket.username); game[socket.room].remove_player(socket.username);
@ -150,7 +150,7 @@ io.on('connection', socket => {
game[socket.room].finish_turn(); game[socket.room].finish_turn();
io.in(socket.room).emit('update Hunter', game[socket.room].hunter.getPosition()); io.in(socket.room).emit('update hunter', game[socket.room].hunter.getPosition());
io.in(socket.room).emit('player moved', { io.in(socket.room).emit('player moved', {
"next_player": game[socket.room].players[game[socket.room].currentPlayerIndex].name, "next_player": game[socket.room].players[game[socket.room].currentPlayerIndex].name,
@ -163,6 +163,7 @@ io.on('connection', socket => {
function generate_log_message(room, user, type, message) { function generate_log_message(room, user, type, message) {
let color; let color;
switch (type) { switch (type) {
case 'LEFT': case 'LEFT':
color = '\x1b[31m'; color = '\x1b[31m';
@ -185,12 +186,12 @@ function generate_log_message(room, user, type, message) {
default: default:
color = '\x1b[0m'; color = '\x1b[0m';
} }
room = pad(10, room, ' ').substr(0, 10); room = pad(10, room, ' ').substr(0, 10);
user = pad(10, user, ' ').substr(0, 10); user = pad(10, user, ' ').substr(0, 10);
type = pad(10, type, ' ').substr(0, 10); type = pad(10, type, ' ').substr(0, 10);
let reset_color = '\x1b[0m'; console.info("%s[%s] [%s] [%s] \x1b[36m%s\x1b[0m", color, room, user, type, message);
console.info("%s[%s] [%s] [%s]\x1b[0m %s", color, room, user, type, reset_color, message);
} }
function getRandomCard(difficulty, room) { function getRandomCard(difficulty, room) {

4562
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -4,6 +4,6 @@
"dependencies": { "dependencies": {
"@socket.io/admin-ui": "^0.2.0", "@socket.io/admin-ui": "^0.2.0",
"express": "^4.17.1", "express": "^4.17.1",
"socket.io": "^4.1.2" "socket.io": "^4.1.3"
} }
} }

2
public/css/game.css
View File

@ -5,7 +5,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: url(/img/background.jpg) no-repeat center center fixed; background: url(../img/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/ -webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/ -moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/ -o-background-size: cover; /* Opera*/

2
public/css/header.css
View File

@ -48,7 +48,7 @@ header {
@media only screen and (max-width: 980px) { @media only screen and (max-width: 980px) {
header { header {
height: 5em; height: 5em;
} }
.title { .title {

20
public/index.html
View File

@ -16,7 +16,7 @@
<body> <body>
<header> <header>
<div class="spielanleitung"><span <div class="spielanleitung"><span
onclick="open_manual();">Spielanleitung</span></div> onclick="open_manual();">Instructions</span></div>
<div class="title">WWPM</div> <div class="title">WWPM</div>
<div class="build"><span>DATE_TO_BE_REPLACED</span><span><a href="COMMIT_LINK_TO_BE_REPLACED" target="_blank">COMMIT_TO_BE_REPLACED</a></span> <div class="build"><span>DATE_TO_BE_REPLACED</span><span><a href="COMMIT_LINK_TO_BE_REPLACED" target="_blank">COMMIT_TO_BE_REPLACED</a></span>
</div> </div>
@ -26,13 +26,13 @@
<div id="login"> <div id="login">
<form> <form>
<h2 id="error"></h2> <h2 id="error"></h2>
<label for="username">Benutzername: </label> <label for="username">Username: </label>
<input id="username" name="username" placeholder="Benutzername" type="text"> <input id="username" name="username" placeholder="Username" type="text">
<label for="room">Raumnummer: </label> <label for="room">Room name: </label>
<input id="room" name="room" placeholder="Raumnummer" type="text"> <input id="room" name="room" placeholder="Room name" type="text">
<button id="ok" type="button">Bestätigen</button> <button id="ok" type="button">Submit</button>
</form> </form>
</div> </div>
<div id="game"> <div id="game">
@ -53,9 +53,11 @@
<div id="modal"> <div id="modal">
<div id="content"> <div id="content">
<div id="modal_header"> <div id="modal_header">
<h3 id="modal_title">Spielanleitung</h3> <h3 id="modal_title">Instructions</h3>
<span><i class="material-icon" <span>
onclick="document.getElementById('modal').style.display = 'none';">close</i></span> <i class="material-icon"
onclick="document.getElementById('modal').style.display = 'none';">close</i>
</span>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div id="manual"></div> <div id="manual"></div>

6
public/js/Card.js
View File

@ -117,7 +117,7 @@ function Card(game_board_size, question, answer_1, answer_2, answer_3, answer_4,
if (this.difficulty === 0) { if (this.difficulty === 0) {
color = 0xF47A93; 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.answer_4.text, this.answer_4.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, this.answer_4.text, this.answer_4.status, function () {
if (_this.your_turn) { if (_this.your_turn) {
select_answer(3, _this.answer_4.text); select_answer(3, _this.answer_4.text);
} }
@ -135,10 +135,8 @@ function Card(game_board_size, question, answer_1, answer_2, answer_3, answer_4,
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 () { 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 (answer !== null) {
if (_this.right_answer === answer) { //TODO: do this in backend instead to prevent cheating if (_this.right_answer === answer) { //TODO: do this in backend instead to prevent cheating
console.log("Richtig");
socket.emit('card finished', difficulty, true); socket.emit('card finished', difficulty, true);
} else { } else {
console.log("Falsch");
socket.emit('card finished', difficulty, false); socket.emit('card finished', difficulty, false);
} }
show_card = false; show_card = false;
@ -147,7 +145,7 @@ function Card(game_board_size, question, answer_1, answer_2, answer_3, answer_4,
rolled_number = null; rolled_number = null;
} else { } else {
if (your_turn === true) { if (your_turn === true) {
alert("Bitte wähle eine Antwortmöglichkeit aus"); alert("Please choose your answer!");
} else { } else {
show_card = false; show_card = false;
answer = null; answer = null;

2
public/js/Sprite.js
View File

@ -18,4 +18,4 @@ function Sprite(x, y, slow) {
sprite.width = size * 1.5; sprite.width = size * 1.5;
sprite.height = size * 1.5; sprite.height = size * 1.5;
}; };
} }

70
public/js/game.js
View File

@ -1,7 +1,5 @@
/* /*
Images Images
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 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 sprite.jpg: https://media.istockphoto.com/photos/gray-granite-stone-texture-seamless-square-background-tile-ready-picture-id1096464726
*/ */
@ -57,8 +55,8 @@ function start_game() {
sprites.forEach(sprite => app.stage.addChild(sprite.getSprite())); sprites.forEach(sprite => app.stage.addChild(sprite.getSprite()));
// Red border // Red border
let red_border = generate_red_border(new PIXI.Graphics(), 1, 9); let hunter = generate_hunter(new PIXI.Graphics(), 1, 9);
app.stage.addChild(red_border); app.stage.addChild(hunter);
// Player circles // Player circles
@ -77,26 +75,17 @@ function start_game() {
// Card stacks // Card stacks
let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack_1.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) { if (diced && !show_card && rolled_number === 1) socket.emit('get card', 1);
console.log("1");
socket.emit('get card', 1);
}
}); });
app.stage.addChild(cards_1); app.stage.addChild(cards_1);
let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack_2.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) { if (diced && !show_card && rolled_number === 2) socket.emit('get card', 2);
console.log("2");
socket.emit('get card', 2);
}
}); });
app.stage.addChild(cards_2); app.stage.addChild(cards_2);
let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack_3.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) { if (diced && !show_card && rolled_number === 3) socket.emit('get card', 3);
console.log("3");
socket.emit('get card', 3);
}
}); });
app.stage.addChild(cards_3); app.stage.addChild(cards_3);
@ -112,9 +101,7 @@ function start_game() {
dice.buttonMode = true; dice.buttonMode = true;
dice.defaultCursor = 'pointer'; dice.defaultCursor = 'pointer';
dice.on('pointerdown', function () { dice.on('pointerdown', function () {
if (!diced) { if (!diced) socket.emit('roll dice');
socket.emit('roll dice');
}
}); });
app.stage.addChild(dice); app.stage.addChild(dice);
@ -127,7 +114,6 @@ function start_game() {
logo.y = sprite_size * 5.5 - sprite_size * 0.2; logo.y = sprite_size * 5.5 - sprite_size * 0.2;
logo.width = sprite_size * 3.5; logo.width = sprite_size * 3.5;
logo.height = sprite_size * 1.5; logo.height = sprite_size * 1.5;
// logo.rotation -= Math.PI / 8;
app.stage.addChild(logo); app.stage.addChild(logo);
@ -174,13 +160,11 @@ function start_game() {
score_button.defaultCursor = 'pointer'; score_button.defaultCursor = 'pointer';
score_button.on('pointerdown', function () { score_button.on('pointerdown', function () {
card = new Card(game_board_size, "", card = new Card(game_board_size, "",
{"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("Kein Spieler"), "status": false}, {"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("N/A"), "status": false},
{"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("Kein Spieler"), "status": false}, {"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("N/A"), "status": false},
{"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("Kein Spieler"), "status": false}, {"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("N/A"), "status": false},
{ {"text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("N/A"), "status": false},
"text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("Kein Spieler"), 0, false);
"status": false
}, 0, false);
card.showCard(); card.showCard();
show_card = true; show_card = true;
}); });
@ -188,11 +172,11 @@ function start_game() {
app.stage.addChild(score_button); app.stage.addChild(score_button);
score_button.addChild(score_button_text); score_button.addChild(score_button_text);
socket.on('updatePlayerNames', function (p) {
socket.on('update player names', function (p) {
playerNames = p; playerNames = p;
}); });
socket.on('first player', function () { socket.on('first player', function () {
my_turn.text = "Your Turn"; my_turn.text = "Your Turn";
}); });
@ -208,11 +192,7 @@ function start_game() {
}); });
socket.on('card', function (data) { socket.on('card', function (data) {
let u = data.username; card = new Card(game_board_size, data.card.question, data.card['answers'][0], data.card['answers'][1], data.card['answers'][2], data.card['answers'][3], data.card['difficulty'], data.username === username);
let q = data.card.question;
let a = data.card.answers;
let d = data.card.difficulty;
card = new Card(game_board_size, q, a[0], a[1], a[2], a[3], d, u === username);
card.showCard(); card.showCard();
show_card = true; show_card = true;
}); });
@ -270,12 +250,12 @@ function start_game() {
if (data.state === 2 || data.state === 3) { if (data.state === 2 || data.state === 3) {
card = new Card(game_board_size, "", card = new Card(game_board_size, "",
{"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("Kein Spieler"), "status": false}, {"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("N/A"), "status": false},
{"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("Kein Spieler"), "status": false}, {"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("N/A"), "status": false},
{"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("Kein Spieler"), "status": false}, {"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("N/A"), "status": false},
{"text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("Kein Spieler"), "status": false}, {"text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("N/A"), "status": false},
0, false, data.state); 0, false, data.state);
red_border.clear(); hunter.clear();
card.showCard(); card.showCard();
show_card = true; show_card = true;
} }
@ -283,12 +263,12 @@ function start_game() {
if (next_player === username) my_turn.text = "Your Turn"; if (next_player === username) my_turn.text = "Your Turn";
}); });
socket.on('update Hunter', function (position) { socket.on('update hunter', function (position) {
let x = sprites[position].coord_x; let x = sprites[position].coord_x;
let y = sprites[position].coord_y; let y = sprites[position].coord_y;
red_border.clear(); hunter.clear();
red_border = generate_red_border(new PIXI.Graphics(), x, y); hunter = generate_hunter(new PIXI.Graphics(), x, y);
app.stage.addChild(red_border); app.stage.addChild(hunter);
}); });
resize(); resize();
@ -306,7 +286,7 @@ function generate_card_stack(sprite, x, y, onclick) {
return sprite; return sprite;
} }
function generate_red_border(graphics, x, y) { function generate_hunter(graphics, x, y) {
graphics.lineStyle(sprite_size * 0.10, 0x862323, 1); graphics.lineStyle(sprite_size * 0.10, 0x862323, 1);
graphics.drawRect(sprite_size * x - sprite_size * 0.2, sprite_size * y - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5); graphics.drawRect(sprite_size * x - sprite_size * 0.2, sprite_size * y - sprite_size * 0.2, sprite_size * 1.5, sprite_size * 1.5);
return graphics; return graphics;
@ -331,6 +311,7 @@ function generate_circle(graphics, x, y, color, offset) {
graphics.beginFill(0xFFFFFF, 1); graphics.beginFill(0xFFFFFF, 1);
break; break;
} }
switch (offset) { switch (offset) {
case 1: 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); 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);
@ -345,6 +326,7 @@ function generate_circle(graphics, x, y, color, offset) {
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); 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 break; // lower right
} }
graphics.endFill(); graphics.endFill();
return graphics; return graphics;
} }

7
public/js/index.js
View File

@ -2,8 +2,11 @@ let username;
let room_name; let room_name;
window.addEventListener('beforeunload', function (e) { window.addEventListener('beforeunload', function (e) {
// Prevent user from exiting page e.preventDefault(); // Prevent user from exiting page
e.preventDefault(); });
window.addEventListener('keydown', function (event) {
if (event.code === 'Enter' && app == null) document.getElementById('ok').click();
}); });
document.getElementById('ok').addEventListener('click', function () { document.getElementById('ok').addEventListener('click', function () {