README.md

@@ -1,12 +1,31 @@
 # Projektmanagement Game
 
+## Docker
+
+### Build
 
-## Build
 ```
 docker build Projektmanagement-Game/ -t pm-game
 ```
 
-## Deploy
+### Deploy
+
 ```
 docker run -d -p 80:5000 pm-game
 ```
+
+### Check if it works
+
+Open `http://127.0.0.1` in your Browser
+
+## Without docker
+
+### Run
+
+```
+node Webservice/server.js
+```
+
+### Check if it works
+
+Open `http://127.0.0.1:5000` in your Browser

Webservice/server.js

@@ -1,8 +1,11 @@
 let express = require('express');
+let fs = require('fs');
 let app = express();
 let server = require('http').createServer(app);
 let {Server} = require("socket.io");
 let io = new Server(server);
+let {raw_data} = fs.readFileSync(__dirname + '/../data/cards.json');
+let cards = JSON.parse(raw_data);
 
 let port = 5000;
 server.listen(port, function () {
@@ -46,6 +49,23 @@ io.on('connection', socket => {
 
         generate_log_message(socket.room, socket.username, "LEFT", "");
     });
+
+
+    // Game
+    socket.on('roll dice', function () {
+        let sides = 3;
+        let randomNumber = Math.floor(Math.random() * sides) + 1;
+
+        io.in(socket.room).emit('dice', randomNumber);
+
+        generate_log_message(socket.room, socket.username, "DICE", randomNumber);
+    });
+
+    socket.on('get card', function (difficulty) {
+        io.in(socket.room).emit('card', getRandomCard(difficulty));
+
+        generate_log_message(socket.room, socket.username, "CARD", difficulty);
+    });
 });
 
 function generate_log_message(room, user, type, message) {
@@ -63,6 +83,9 @@ function generate_log_message(room, user, type, message) {
         case 'RUNNING':
             color = '\x1b[35m';
             break;
+        case 'DICE':
+            color = '\x1b[34m';
+            break;
         default:
             color = '\x1b[0m';
     }
@@ -74,6 +97,23 @@ function generate_log_message(room, user, type, message) {
     console.info("%s[%s] [%s] [%s]\x1b[0m %s", color, room, user, type, reset_color, message);
 }
 
+function getRandomCard(difficulty) {
+    let filtered_cards = cards.filter(card => {
+        return card.diffuculty === difficulty;
+    });
+
+    return shuffleAnswers(filtered_cards[Math.floor(Math.random() * filtered_cards.length)]);
+}
+
+function shuffleAnswers(card) {
+    for (let i = card.answers.length - 1; i > 0; i--) {
+        let j = Math.floor(Math.random() * (i + 1));
+        [card.answers[i], card.answers[j]] = [card.answers[j], card.answers[i]];
+    }
+    return card;
+}
+
+
 function pad(width, string, padding) {
     if (string === undefined || string === null) return pad(width, " ", " ");
     return (width <= string.length) ? string : pad(width, string + padding, padding)

data/cards.json

@@ -0,0 +1,71 @@
+[
+  {
+    "id": 1,
+    "diffuculty": 1,
+    "question": "Was?",
+    "answers": [
+      {
+        "answer_a": "A",
+        "status": false
+      },
+      {
+        "answer_b": "B",
+        "status": true
+      },
+      {
+        "answer_c": "C",
+        "status": false
+      },
+      {
+        "answer_d": "D",
+        "status": false
+      }
+    ]
+  },
+  {
+    "id": 2,
+    "diffuculty": 2,
+    "question": "Wie?",
+    "answers": [
+      {
+        "answer_a": "A",
+        "status": false
+      },
+      {
+        "answer_b": "B",
+        "status": true
+      },
+      {
+        "answer_c": "C",
+        "status": false
+      },
+      {
+        "answer_d": "D",
+        "status": false
+      }
+    ]
+  },
+  {
+    "id": 3,
+    "diffuculty": 3,
+    "question": "Wo?",
+    "answers": [
+      {
+        "answer_a": "A",
+        "status": false
+      },
+      {
+        "answer_b": "B",
+        "status": true
+      },
+      {
+        "answer_c": "C",
+        "status": false
+      },
+      {
+        "answer_d": "D",
+        "status": false
+      }
+    ]
+  }
+]

public/css/game.css

@@ -1,13 +1,4 @@
 #game {
     height: 100%;
-    width: 100%;
     grid-column-start: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    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*/
-    background-size: cover; /* Generic*/
 }

public/index.html

@@ -30,9 +30,7 @@
             <button id="ok" type="button">Bestätigen</button>
         </form>
     </div>
-    <div id="game">
+    <div id="game"></div>
-
-    </div>
     <div id="chat">
         <div id="messages_received"></div>
 
@@ -49,13 +47,8 @@
 
 </footer>
 
-<script crossorigin="anonymous"
+<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA=="
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
-        referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.2/browser/pixi.js"></script>
-<script src="js/Card.js"></script>
-<script src="js/Button.js"></script>
-<script src="js/Sprite.js"></script>
 <script src="js/chat.js"></script>
 <script src="js/game.js"></script>
 <script src="js/index.js"></script>

public/js/Button.js

@@ -1,77 +0,0 @@
-function Button(default_color, hover_color, select_color, width, height, x, y, text, button_is_answer, click) {
-    this.graphics = new PIXI.Graphics();
-    this.default_color = default_color;
-    this.hover_color = hover_color;
-    this.width = width;
-    this.height = height;
-    this.x = x;
-    this.y = y;
-    this.text = text;
-    this.button_is_answer = button_is_answer;
-    this.click = click;
-    this.selected = false;
-    let _this = this;
-
-    this.changeButtonColor = function (color) {
-        this.graphics.clear();
-
-        this.graphics.lineStyle(4, 0x000000, 1);
-        this.graphics.beginFill(color);
-        this.graphics.drawRect(this.x, this.y, this.width, this.height);
-        this.graphics.endFill();
-    }
-
-    this.selectButton = function () {
-        this.selected = true;
-        this.changeButtonColor(select_color);
-    }
-
-    this.unSelectButton = function () {
-        this.selected = false;
-        this.changeButtonColor(default_color);
-    }
-
-    this.getButton = function () {
-        const style = new PIXI.TextStyle({
-            fontFamily: 'Arial',
-            fontSize: 60,
-            wordWrap: true,
-            wordWrapWidth: game_board_size * 0.5 - 20,
-        });
-
-        this.graphics.clear();
-
-        this.graphics.lineStyle(4, 0x000000, 1);
-        this.graphics.beginFill(this.default_color);
-        this.graphics.drawRect(this.x, this.y, this.width, this.height);
-        this.graphics.endFill();
-
-        let text_field = new PIXI.Text(this.text, style);
-        text_field.x = this.x + this.width / 2 - text_field.width / 2;
-        text_field.y = this.y + this.height / 2 - text_field.height / 2;
-        this.graphics.addChild(text_field);
-
-        this.graphics.interactive = true;
-        this.graphics.buttonMode = true;
-        this.graphics.defaultCursor = 'pointer';
-        this.graphics.on('click', function () {
-            if (_this.button_is_answer) {
-                if (_this.selected === true) {
-                    _this.unSelectButton();
-                } else {
-                    _this.selectButton();
-                }
-            }
-            click();
-        });
-        this.graphics.on('mouseover', function () {
-            if (!_this.selected) {
-                _this.changeButtonColor(_this.hover_color);
-            }
-        });
-        this.graphics.on('mouseout', function () {
-            if (!_this.selected) _this.changeButtonColor(_this.default_color);
-        });
-        return this.graphics;
-    }
-}

public/js/Card.js

@@ -1,88 +0,0 @@
-function Card(game_board_size, s, a1, a2, a3, a4, right_answer, d) {
-    this.card = new PIXI.Graphics();
-    this.s = s;
-    this.a1 = a1;
-    this.a2 = a2;
-    this.a3 = a3;
-    this.a4 = a4;
-    this.right_answer = right_answer;
-    this.d = d;
-    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;
-    this.card_height = game_board_size * 0.72;
-    this.card_width = game_board_size * 0.5;
-    this.buttons = [];
-    let _this = this;
-
-    this.showCard = function () {
-        const style = new PIXI.TextStyle({
-            fontFamily: 'Arial',
-            fontSize: 60,
-            wordWrap: true,
-            wordWrapWidth: game_board_size * 0.5 - 20,
-        });
-
-        const header_style = new PIXI.TextStyle({
-            fontFamily: 'Arial',
-            fontSize: 70,
-            wordWrap: true,
-            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);
-        this.card.endFill();
-
-        const 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);
-
-        const basicText = new PIXI.Text(this.s, style);
-        basicText.x = this.card_x + 20;
-        basicText.y = this.card_y + 50 + header.height;
-        this.card.addChild(basicText);
-
-        // Answers
-        this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 4, this.a1, true, function () {
-            select_answer(0);
-        }));
-
-        this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 3, this.a2, true, function () {
-            select_answer(1);
-        }));
-
-        this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 2, this.a3, true, function () {
-            select_answer(2);
-        }));
-
-        this.buttons.push(new Button(0xffffff, 0xcccccc, 0xff00ff, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 1, this.a4, true, function () {
-            select_answer(3);
-        }));
-
-        this.buttons.forEach(button => this.card.addChild(button.getButton()));
-
-
-        // 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", false, function () {
-            if (_this.right_answer === answer) {
-                console.log("Richtig")
-            } else {
-                console.log("Falsch")
-            }
-            show_card = false;
-            _this.card.destroy();
-        }).getButton());
-
-        app.stage.addChild(this.card);
-    }
-
-
-    function select_answer(id) {
-        console.log(id)
-        _this.buttons.forEach(button => button.unSelectButton());
-        _this.buttons[id].selectButton();
-        answer = id;
-    }
-}

public/js/Sprite.js

@@ -1,17 +0,0 @@
-function Sprite(x, y) {
-    this.sprite = PIXI.Sprite.from('/img/sprite.jpg');
-    this.coord_x = x;
-    this.coord_y = y;
-
-    this.getSprite = function () {
-        this.setSize(this.sprite, sprite_size);
-        return this.sprite;
-    }
-
-    this.setSize = function (sprite, size) {
-        sprite.x = this.coord_x * size - size * 0.2;
-        sprite.y = this.coord_y * size - size * 0.2;
-        sprite.width = size * 1.5;
-        sprite.height = size * 1.5;
-    }
-}

public/js/chat.js

@@ -1,7 +1,9 @@
 let socket;
+let username = prompt("Please enter your name");
+let room_name = prompt("Please enter room name");
 let connected = false;
 
-function start_chat() {
+window.addEventListener('load', function () {
     socket = io();
 
     socket.on('login', function () {
@@ -23,7 +25,7 @@ function start_chat() {
 
     // Login
     socket.emit('add user', {'username': username, 'room_name': room_name});
-}
+});
 
 function sendMessage() {
     let message = document.getElementById('message_input').value;

public/js/game.js

@@ -1,141 +1,27 @@
-let answer = null;
+let app;
-let show_card = false;
 
-let game = document.getElementById('game');
-
-let game_board_size = 2000;
-let max_size = calculate_size();
-let sprite_size = Math.floor(game_board_size / 11);
-
-const app = new PIXI.Application({
-    autoResize: true,
-    resolution: devicePixelRatio,
-    backgroundAlpha: 0,
-    width: max_size / game_board_size,
-    height: max_size / game_board_size
-});
-document.getElementById('game').appendChild(app.view);
-
-
-// fields
-let sprites = [
-    // First row
-    new Sprite(1, 1),
-    new Sprite(3, 1),
-    new Sprite(5, 1),
-    new Sprite(7, 1),
-    new Sprite(9, 1),
-
-    // Second row
-    new Sprite(1, 3),
-    new Sprite(9, 3),
-
-    // Third row
-    new Sprite(1, 5),
-    new Sprite(9, 5),
-
-    // Fourth row
-    new Sprite(1, 7),
-    new Sprite(9, 7),
-
-    // Fifth row
-    new Sprite(1, 9),
-    new Sprite(3, 9),
-    new Sprite(5, 9),
-    new Sprite(7, 9),
-    new Sprite(9, 9),
-]
-
-sprites.forEach(sprite => app.stage.addChild(sprite.getSprite()));
-
-
-// Red border
-let red_border = generate_red_border(new PIXI.Graphics());
-app.stage.addChild(red_border);
-
-
-// White circles
-let first_circle = generate_circle(new PIXI.Graphics(), 3, 9);
-app.stage.addChild(first_circle);
-
-let second_circle = generate_circle(new PIXI.Graphics(), 5, 9);
-app.stage.addChild(second_circle);
-
-let third_circle = generate_circle(new PIXI.Graphics(), 7, 9);
-app.stage.addChild(third_circle);
-
-
-// Card stacks
-let cards_1 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 3, 3, function () {
-    if (!show_card) {
-        console.log("1");
-        new Card(game_board_size, "Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1).showCard();
-        show_card = true;
-    }
-});
-app.stage.addChild(cards_1);
-
-let cards_2 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 5, 3, function () {
-    if (!show_card) {
-        console.log("2");
-        new Card(game_board_size, "Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1).showCard();
-        show_card = true;
-    }
-});
-app.stage.addChild(cards_2);
-
-let cards_3 = generate_card_stack(PIXI.Sprite.from('/img/card_stack.png'), 7, 3, function () {
-    if (!show_card) {
-        console.log("3");
-        new Card(game_board_size, "Ein Bäcker möchte eine neue Filiale eröffnen. Wie sollte er das Budget einteilen?", "a1", "a2", "a3", "a4", 1, 1).showCard();
-        show_card = true;
-    }
-});
-app.stage.addChild(cards_3);
-
-
-function generate_card_stack(sprite, x, y, onclick) {
-    sprite.x = sprite_size * x - sprite_size * 0.2;
-    sprite.y = sprite_size * y - sprite_size * 0.2;
-    sprite.width = sprite_size * 1.5;
-    sprite.height = sprite_size * 3 * 0.72;
-    sprite.interactive = true;
-    sprite.buttonMode = true;
-    sprite.defaultCursor = 'pointer';
-    sprite.on('click', onclick);
-    return sprite
-}
-
-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);
-    return graphics;
-}
-
-function generate_circle(graphics, x, y) {
-    graphics.lineStyle(0);
-    graphics.beginFill(0xffffff, 1);
-    graphics.drawCircle(sprite_size * x - sprite_size * 0.2 + sprite_size * 0.75, sprite_size * y - sprite_size * 0.2 + sprite_size * 0.75, sprite_size / 4);
-    graphics.endFill();
-    return graphics;
-}
-
-function calculate_size() {
-    if (game.offsetWidth > game.offsetHeight) {
-        return game.offsetHeight;
-    } else {
-        return game.offsetWidth;
-    }
-}
-
-// Resize
 window.addEventListener('resize', resize);
+window.addEventListener('load', function () {
+    app = new PIXI.Application({
+        autoResize: true,
+        resolution: devicePixelRatio,
+        backgroundColor: 0x0073db
+    });
+    document.getElementById('game').appendChild(app.view);
+
+
+    socket.on('dice', function (data) {
+        console.log(data);
+    });
+
+    socket.on('card', function (data) {
+        console.log(data);
+    });
+
+    resize();
+});
 
 function resize() {
-    let size = calculate_size();
+    let game = document.getElementById('game');
-    app.stage.scale.set(size / game_board_size, size / game_board_size);
+    app.renderer.resize(game.offsetWidth, game.offsetHeight);
-
-    app.renderer.resize(size, size)
 }
-
-resize();

public/js/index.js

@@ -1,18 +1,4 @@
-let username;
-let room_name;
-
 window.addEventListener('beforeunload', function (e) {
     // Prevent user from exiting page
     e.preventDefault();
 });
-
-document.getElementById('ok').addEventListener('click', function () {
-    username = document.getElementById('username').value;
-    room_name = document.getElementById('room').value;
-
-    document.getElementById('login').style.display = 'none';
-    document.getElementById('game').style.display = 'flex';
-    document.getElementById('chat').style.display = 'flex';
-    start_chat();
-    resize();
-})