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
Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/game.css
View File

@@ -5,7 +5,7 @@
display: flex;
justify-content: 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*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/

2
public/css/header.css
View File

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

20
public/index.html
View File

@@ -16,7 +16,7 @@
<body>
<header>
<div class="spielanleitung"><span
onclick="open_manual();">Spielanleitung</span></div>
onclick="open_manual();">Instructions</span></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>
@@ -26,13 +26,13 @@
<div id="login">
<form>
<h2 id="error"></h2>
<label for="username">Benutzername: </label>
<input id="username" name="username" placeholder="Benutzername" type="text">
<label for="username">Username: </label>
<input id="username" name="username" placeholder="Username" type="text">
<label for="room">Raumnummer: </label>
<input id="room" name="room" placeholder="Raumnummer" type="text">
<label for="room">Room name: </label>
<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>
</div>
<div id="game">
@@ -53,9 +53,11 @@
<div id="modal">
<div id="content">
<div id="modal_header">
<h3 id="modal_title">Spielanleitung</h3>
<span><i class="material-icon"
onclick="document.getElementById('modal').style.display = 'none';">close</i></span>
<h3 id="modal_title">Instructions</h3>
<span>
<i class="material-icon"
onclick="document.getElementById('modal').style.display = 'none';">close</i>
</span>
</div>
<div class="divider"></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) {
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) {
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 () {
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;
@@ -147,7 +145,7 @@ function Card(game_board_size, question, answer_1, answer_2, answer_3, answer_4,
rolled_number = null;
} else {
if (your_turn === true) {
alert("Bitte wähle eine Antwortmöglichkeit aus");
alert("Please choose your answer!");
} else {
show_card = false;
answer = null;

2
public/js/Sprite.js
View File

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

70
public/js/game.js
View File

@@ -1,7 +1,5 @@
/*
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
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()));
// Red border
let red_border = generate_red_border(new PIXI.Graphics(), 1, 9);
app.stage.addChild(red_border);
let hunter = generate_hunter(new PIXI.Graphics(), 1, 9);
app.stage.addChild(hunter);
// Player circles
@@ -77,26 +75,17 @@ function start_game() {
// Card stacks
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);
}
if (diced && !show_card && rolled_number === 1) socket.emit('get card', 1);
});
app.stage.addChild(cards_1);
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);
}
if (diced && !show_card && rolled_number === 2) socket.emit('get card', 2);
});
app.stage.addChild(cards_2);
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);
}
if (diced && !show_card && rolled_number === 3) socket.emit('get card', 3);
});
app.stage.addChild(cards_3);
@@ -112,9 +101,7 @@ function start_game() {
dice.buttonMode = true;
dice.defaultCursor = 'pointer';
dice.on('pointerdown', function () {
if (!diced) {
socket.emit('roll dice');
}
if (!diced) socket.emit('roll dice');
});
app.stage.addChild(dice);
@@ -127,7 +114,6 @@ function start_game() {
logo.y = sprite_size * 5.5 - sprite_size * 0.2;
logo.width = sprite_size * 3.5;
logo.height = sprite_size * 1.5;
// logo.rotation -= Math.PI / 8;
app.stage.addChild(logo);
@@ -174,13 +160,11 @@ function start_game() {
score_button.defaultCursor = 'pointer';
score_button.on('pointerdown', function () {
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);
{"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("N/A"), "status": false},
{"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("N/A"), "status": false},
{"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("N/A"), "status": false},
{"text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("N/A"), "status": false},
0, false);
card.showCard();
show_card = true;
});
@@ -188,11 +172,11 @@ function start_game() {
app.stage.addChild(score_button);
score_button.addChild(score_button_text);
socket.on('updatePlayerNames', function (p) {
socket.on('update player names', function (p) {
playerNames = p;
});
socket.on('first player', function () {
my_turn.text = "Your Turn";
});
@@ -208,11 +192,7 @@ function start_game() {
});
socket.on('card', function (data) {
let u = data.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 = 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);
card.showCard();
show_card = true;
});
@@ -270,12 +250,12 @@ function start_game() {
if (data.state === 2 || data.state === 3) {
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},
{"text": playerNames[0] ? playerNames[0] + ": " + positions[0] : ("N/A"), "status": false},
{"text": playerNames[1] ? playerNames[1] + ": " + positions[1] : ("N/A"), "status": false},
{"text": playerNames[2] ? playerNames[2] + ": " + positions[2] : ("N/A"), "status": false},
{"text": playerNames[3] ? playerNames[3] + ": " + positions[3] : ("N/A"), "status": false},
0, false, data.state);
red_border.clear();
hunter.clear();
card.showCard();
show_card = true;
}
@@ -283,12 +263,12 @@ function start_game() {
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 y = sprites[position].coord_y;
red_border.clear();
red_border = generate_red_border(new PIXI.Graphics(), x, y);
app.stage.addChild(red_border);
hunter.clear();
hunter = generate_hunter(new PIXI.Graphics(), x, y);
app.stage.addChild(hunter);
});
resize();
@@ -306,7 +286,7 @@ function generate_card_stack(sprite, x, y, onclick) {
return sprite;
}
function generate_red_border(graphics, x, y) {
function generate_hunter(graphics, x, y) {
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);
return graphics;
@@ -331,6 +311,7 @@ function generate_circle(graphics, x, y, color, offset) {
graphics.beginFill(0xFFFFFF, 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);
@@ -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);
break; // lower right
}
graphics.endFill();
return graphics;
}

7
public/js/index.js
View File

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