Revert "Update readme"

README.md

@@ -1,31 +1,12 @@
 # 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

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/css/index.css

@@ -1,11 +0,0 @@
-#login {
-    display: block;
-}
-
-#game {
-    display: none;
-}
-
-#chat {
-    display: none;
-}

public/index.html

@@ -19,20 +19,7 @@
     <div class="title">Projektmanagement Game</div>
 </header>
 <main>
-    <div id="login">
+    <div id="game"></div>
-        <form>
-            <label for="username">Anmeldename: </label>
-            <input type="text" name="username" id="username" placeholder="Benutzername">
-
-            <label for="room">Raumnummer: </label>
-            <input type="text" name="room" id="room" placeholder="Raumnummer">
-
-            <button id="ok" type="button">Bestätigen</button>
-        </form>
-    </div>
-    <div id="game">
-
-    </div>
     <div id="chat">
         <div id="messages_received"></div>
 
@@ -49,13 +36,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,22 @@
-let answer = null;
-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,
+    backgroundColor: 0x0073db
-    width: max_size / game_board_size,
-    height: max_size / game_board_size
 });
 document.getElementById('game').appendChild(app.view);
 
 
-// fields
+// -------------------------------------- code --------------------------------------
-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
+// ------------------------------------ end code ------------------------------------
-    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
+// Resize (Do Not modify)
-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);
 
 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();
-})