Optimized css for mobile devices

2021-07-14 11:34:36 +02:00 · 2021-07-14 11:34:36 +02:00 · e2b6e88a3b
commit e2b6e88a3b
parent 16683d049e
11 changed files with 160 additions and 4526 deletions
--- a/Webservice/Game.js
+++ b/Webservice/Game.js
@ -16,7 +16,6 @@ class Game {
        this.currentStatus = Game.STATUS.SETTING_UP;
        this.players = [];
        this.currentPlayerIndex = 0;
-        this.winnerIndex = 0;
        this.round = 0;
        this.hunter = new Hunter();
        this.playerNames = [];
@ -90,7 +89,6 @@ class Game {
        let index = this.players.findIndex(player => player.position >= Game.MAX_POSITION);
        if (index !== -1) {
            this.currentStatus = Game.STATUS.IS_WON;
-            this.winnerIndex = index;
        }
    }

--- a/Webservice/server.js
+++ b/Webservice/server.js
@ -56,7 +56,7 @@ io.on('connection', socket => {

                socket.emit('login', game[socket.room].get_player_index(socket.username));
                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');

@ -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');

            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);
            game[socket.room].remove_player(socket.username);
@ -150,7 +150,7 @@ io.on('connection', socket => {

        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', {
            "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) {
    let color;
+
    switch (type) {
        case 'LEFT':
            color = '\x1b[31m';
@ -185,12 +186,12 @@ function generate_log_message(room, user, type, message) {
        default:
            color = '\x1b[0m';
    }
+
    room = pad(10, room, ' ').substr(0, 10);
    user = pad(10, user, ' ').substr(0, 10);
    type = pad(10, type, ' ').substr(0, 10);

-    let reset_color = '\x1b[0m';
-    console.info("%s[%s] [%s] [%s]\x1b[0m %s", color, room, user, type, reset_color, message);
+    console.info("%s[%s] [%s] [%s] \x1b[36m%s\x1b[0m", color, room, user, type, message);
 }

 function getRandomCard(difficulty, room) {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -4,6 +4,6 @@
  "dependencies": {
    "@socket.io/admin-ui": "^0.2.0",
    "express": "^4.17.1",
-    "socket.io": "^4.1.2"
+    "socket.io": "^4.1.3"
  }
 }
--- a/public/css/game.css
+++ b/public/css/game.css
@ -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*/
--- a/public/index.html
+++ b/public/index.html
@ -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>
--- a/public/js/Card.js
+++ b/public/js/Card.js
@ -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;
--- a/public/js/game.js
+++ b/public/js/game.js
@ -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;
 }
--- a/public/js/index.js
+++ b/public/js/index.js
@ -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 () {