Merge branch 'main' into logic

# Conflicts:
#	public/js/game.js

Dockerfile

@@ -10,6 +10,10 @@ COPY Webservice Webservice
 COPY public public
 COPY data data
 
+RUN sed -i "s/DATE_TO_BE_REPLACED/$(date +%s)/" public/index.html
+RUN sed -i "s/COMMIT_TO_BE_REPLACED/GitHub: $(git ls-remote https://github.com/H4CK3R-01/Projektmanagement-Game refs/heads/main | awk '{print $1;}' | cut -c1-7)/" public/index.html
+RUN sed -i "s/COMMIT_LINK_TO_BE_REPLACED/https\:\/\/github.com\/H4CK3R-01\/Projektmanagement-Game\/commit\/$(git ls-remote https://github.com/H4CK3R-01/Projektmanagement-Game refs/heads/main | awk '{print $1;}')/" public/index.html
+
 EXPOSE 5000
 
 CMD [ "node", "Webservice/server.js" ]

README.md

@@ -1,31 +1,46 @@
 # Projektmanagement Game
 
 ## Docker
-
 ### Build
-
 ```
 docker build Projektmanagement-Game/ -t pm-game
 ```
 
 ### Deploy
-
 ```
 docker run -d -p 80:5000 pm-game
 ```
 
 ### Check if it works
-
 Open `http://127.0.0.1` in your Browser
 
+
 ## Without docker
+### Install dependencies
+```
+npm install
+```
+
+### (Optional) Use credentials for monitoring
+Set environment variables `WEBSOCKET_MONITOR_USERNAME` and `WEBSOCKET_MONITOR_PASSWORD`
+
+`WEBSOCKET_MONITOR_USERNAME`: Username
+
+`WEBSOCKET_MONITOR_PASDSWORD`: bcrypt hashed password. Generate with 
+```
+node
+> require("bcrypt").hashSync("<your-password>", 10)
+```
+
+Linux & MacOS: `export NAME="VALUE"`
+
+Windows: `set NAME="VALUE"`
+
 
 ### Run
-
 ```
 node Webservice/server.js
 ```
 
 ### Check if it works
-
 Open `http://127.0.0.1:5000` in your Browser

Webservice/mobileHandler.js

@@ -0,0 +1,11 @@
+function isMobile() {
+    let mobileDeviceIndicator = 0;
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+        mobileDeviceIndicator = 1;
+    }
+    /*
+    let hasTouchscreen = 'ontouchstart' in window;
+    alert(hasTouchscreen ? 'has touchscreen' : 'doesn\'t have touchscreen');
+    */
+}
+

Webservice/server.js

@@ -1,27 +1,56 @@
-let express = require('express');
+const express = require('express');
-let fs = require('fs');
+const fs = require('fs');
-let app = express();
+const {instrument} = require("@socket.io/admin-ui");
-let server = require('http').createServer(app);
+const app = express();
-let {Server} = require("socket.io");
+const server = require('http').createServer(app);
-let io = new Server(server);
+const {Server} = require("socket.io");
-let cards = JSON.parse(fs.readFileSync(__dirname + '/../data/cards.json'));
+const io = new Server(server);
+let cards = JSON.parse(fs.readFileSync(__dirname + '/../data/fragen_10_06_21_final_new_format.json'));
+
+let gameState = {
+    players: [],
+    positions: [],
+    whosNext: 0,
+    started: false
+};
 
 let port = 5000;
 server.listen(port, function () {
     generate_log_message("MAIN", "Server", 'RUNNING', "PORT " + port);
 });
 
+// Monitor websockets
+if (process.env.WEBSOCKET_MONITOR_USERNAME && process.env.WEBSOCKET_MONITOR_PASSWORD) {
+    instrument(io, {
+        auth: {
+            type: "basic",
+            username: process.env.WEBSOCKET_MONITOR_USERNAME,
+            password: process.env.WEBSOCKET_MONITOR_PASSWORD
+        },
+        serverId: `${require("os").hostname()}#${process.pid}`
+    });
+} else {
+    instrument(io, {
+        auth: false,
+        serverId: `${require("os").hostname()}#${process.pid}`
+    });
+}
 
+// Serve static files (html, css, js)
 app.use(express.static(__dirname + '/../public'));
 
 
+// Websockets
 io.on('connection', socket => {
     let addedUser = false;
 
     socket.on('add user', function (data) {
+        if (gameState['players'].length < 4 && !gameState['started']) {
             socket.username = data.username;
             socket.room = data.room_name;
 
+            gameState['players'].push(socket.username);
+            gameState['positions'].push(1);
             addedUser = true;
 
             socket.emit('login');
@@ -30,6 +59,9 @@ io.on('connection', socket => {
             socket.broadcast.to(socket.room).emit('user joined', socket.username);
 
             generate_log_message(socket.room, socket.username, "JOINED", "");
+        } else {
+            // TODO
+        }
     });
 
     socket.on('new message', function (data) {
@@ -44,6 +76,21 @@ io.on('connection', socket => {
     socket.on('disconnect', function () {
         if (addedUser) {
             socket.broadcast.to(socket.room).emit('user left', socket.username);
+            let index = gameState['players'].indexOf(socket.username);
+
+            if (index > -1) {
+                gameState['players'].splice(index, 1);
+                gameState['positions'].splice(index, 1);
+            }
+
+            socket.leave(socket.room);
+
+            if (gameState['players'].length === 0) {
+                gameState['players'] = [];
+                gameState['positions'] = [];
+                gameState['whosNext'] = 0;
+                gameState['started'] = false;
+            }
         }
 
         generate_log_message(socket.room, socket.username, "LEFT", "");
@@ -52,18 +99,34 @@ io.on('connection', socket => {
 
     // Game
     socket.on('roll dice', function () {
+        if (gameState['whosNext'] === gameState['players'].indexOf(socket.username)) {
+            gameState['started'] = true;
             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);
+        } else {
+            // TODO
+        }
     });
 
     socket.on('get card', function (difficulty) {
-        io.in(socket.room).emit('card', getRandomCard(difficulty));
+        if (gameState['whosNext'] === gameState['players'].indexOf(socket.username)) {
+            io.in(socket.room).emit('card', {'username': socket.username, 'card': getRandomCard(difficulty)});
 
             generate_log_message(socket.room, socket.username, "CARD", difficulty);
+        } else {
+            // TODO
+        }
+    });
+
+    socket.on('card finished', function (difficulty) {
+        gameState['positions'][gameState['players'].indexOf(socket.username)] += difficulty;
+        gameState['whosNext'] += 1;
+        if(gameState['whosNext'] === gameState['players'].length) gameState['whosNext'] = 0;
+        io.in(socket.room).emit('card destroyed');
     });
 });
 
@@ -100,7 +163,6 @@ function getRandomCard(difficulty) {
     let filtered_cards = cards.filter(card => {
         return card.difficulty === difficulty;
     });
-
     return shuffleAnswers(filtered_cards[Math.floor(Math.random() * filtered_cards.length)]);
 }
 
@@ -115,5 +177,5 @@ function shuffleAnswers(card) {
 
 function pad(width, string, padding) {
     if (string === undefined || string === null) return pad(width, " ", " ");
-    return (width <= string.length) ? string : pad(width, string + padding, padding)
+    return (width <= string.length) ? string : pad(width, string + padding, padding);
 }

data/cards.json

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

data/main.py

@@ -0,0 +1,59 @@
+import json
+
+if __name__ == '__main__':
+    array = []
+    with open('fragen_10_06_21_final.json') as file:
+        data = json.load(file)
+
+        length_q = 0
+        id_q = 0
+        length = 0
+        id = 0
+        for i in range(0, len(data)):
+            new = {'id': int(data[i]['id']), 'difficulty': int(data[i]['difficulty']), 'question': data[i]['question'],
+                   'answers': []}
+
+            new['answers'].append({"text": data[i]['A'],
+                                   "status": 'A' == data[i]['key']
+                                   })
+            new['answers'].append({"text": data[i]['B'],
+                                   "status": 'B' == data[i]['key']
+                                   })
+            new['answers'].append({"text": data[i]['C'],
+                                   "status": 'C' == data[i]['key']
+                                   })
+            new['answers'].append({"text": data[i]['D'],
+                                   "status": 'D' == data[i]['key']
+                                   })
+
+
+            if(length_q < len(data[i]['question'])):
+                length_q = len(data[i]['question'])
+
+
+            if(length < len(data[i]['A'])):
+                length = len(data[i]['A'])
+            if(length < len(data[i]['B'])):
+                length = len(data[i]['B'])
+            if(length < len(data[i]['C'])):
+                length = len(data[i]['C'])
+            if(length < len(data[i]['D'])):
+                length = len(data[i]['D'])
+
+            array.append(new)
+
+    print("Längste Frage: " + str(length))
+    print("Längste Antwort: " + str(length_q))
+
+    with open('fragen_10_06_21_final.json') as file:
+        data = json.load(file)
+
+        for i in range(0, len(data)):
+            if(length_q == len(data[i]['question'])):
+                print("Längste Frage ID: " + str(data[i]['id']))
+
+            if(length == len(data[i]['A']) or length == len(data[i]['B']) or length == len(data[i]['C']) or length == len(data[i]['D'])):
+                print("Längste Antwort ID: " + str(data[i]['id']))
+
+    with open('fragen_10_06_21_final_new_format.json', 'w', encoding='utf8') as file:
+        json.dump(array, file, ensure_ascii=False)

package.json

@@ -2,6 +2,7 @@
   "name": "projektmanagement-game",
   "version": "1.0.0",
   "dependencies": {
+    "@socket.io/admin-ui": "^0.2.0",
     "express": "^4.17.1",
     "socket.io": "^4.1.2"
   }

public/css/header.css

@@ -5,7 +5,11 @@ header {
     background-color: #7d7d7d;
     color: #ffffff;
     height: 3em;
-    padding-top: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    display: grid;
+    grid-gap: 5%;
+    grid-template-columns: 25% 40% 25%;
 }
 
 .title {
@@ -16,3 +20,12 @@ header {
     font-size: 2em;
     vertical-align: central;
 }
+
+.build {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    font-size: 1em;
+    padding-right: 10px;
+    flex-direction: column;
+}

public/css/mobile.css

@@ -0,0 +1,35 @@
+html {
+    width: 100%;
+    height: 100%;
+    font-family: Arial, sans-serif
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}
+
+main {
+    display: grid;
+    grid-template-rows: 80% 20%;
+    height: calc(100% - 3em - 10px);
+}
+
+.material-icon {
+    font-family: Material Icons, sans-serif !important;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-feature-settings: "liga";
+    -webkit-font-smoothing: antialiased;
+}

public/index.html

@@ -16,7 +16,10 @@
 </head>
 <body>
 <header>
-    <div class="title">Projektmanagement Game</div>
+    <div></div>
+    <div class="title">PM-Game</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>
 </header>
 <main>
     <div id="login">
@@ -50,8 +53,8 @@
 </footer>
 
 <script crossorigin="anonymous" referrerpolicy="no-referrer"
-        src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+        src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.2/browser/pixi.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.4/browser/pixi.js"></script>
 <script src="js/Card.js"></script>
 <script src="js/Button.js"></script>
 <script src="js/Sprite.js"></script>

public/js/Button.js

@@ -1,4 +1,4 @@
-function Button(default_color, hover_color, select_color, width, height, x, y, text, status, button_is_answer, click) {
+function Button(default_color, hover_color, select_color, width, height, x, y, text, status, click) {
     this.graphics = new PIXI.Graphics();
     this.default_color = default_color;
     this.hover_color = hover_color;
@@ -8,8 +8,7 @@ function Button(default_color, hover_color, select_color, width, height, x, y, t
     this.y = y;
     this.text = text;
     this.status = status;
-    this.button_is_answer = button_is_answer;
+    this.pointerdown = click;
-    this.click = click;
     this.selected = false;
     let _this = this;
 
@@ -20,24 +19,26 @@ function Button(default_color, hover_color, select_color, width, height, x, y, t
         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,
+            fontSize: 40,
             wordWrap: true,
-            wordWrapWidth: game_board_size * 0.5 - 20,
+            wordWrapWidth: this.width,
+            breakWords: true,
+            padding: 50
         });
 
         this.graphics.clear();
@@ -55,14 +56,7 @@ function Button(default_color, hover_color, select_color, width, height, x, y, t
         this.graphics.interactive = true;
         this.graphics.buttonMode = true;
         this.graphics.defaultCursor = 'pointer';
-        this.graphics.on('click', function () {
+        this.graphics.on('pointerdown', function () {
-            if (_this.button_is_answer) {
-                if (_this.selected === true) {
-                    _this.unSelectButton();
-                } else {
-                    _this.selectButton();
-                }
-            }
             click();
         });
         this.graphics.on('mouseover', function () {
@@ -74,5 +68,5 @@ function Button(default_color, hover_color, select_color, width, height, x, y, t
             if (!_this.selected) _this.changeButtonColor(_this.default_color);
         });
         return this.graphics;
-    }
+    };
 }

public/js/Card.js

@@ -1,4 +1,4 @@
-function Card(game_board_size, s, a1, a2, a3, a4, d) {
+function Card(game_board_size, s, a1, a2, a3, a4, d, your_turn) {
     this.card = new PIXI.Graphics();
     this.s = s;
     this.a1 = a1;
@@ -10,6 +10,7 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
     if (a3.status) this.right_answer = this.a3.text;
     if (a4.status) this.right_answer = this.a4.text;
     this.d = d;
+    this.your_turn = your_turn;
     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;
@@ -20,7 +21,7 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
     this.showCard = function () {
         const style = new PIXI.TextStyle({
             fontFamily: 'Arial',
-            fontSize: 60,
+            fontSize: 50,
             wordWrap: true,
             wordWrapWidth: game_board_size * 0.5 - 20,
         });
@@ -48,27 +49,35 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
         this.card.addChild(basicText);
 
         // Answers
-        this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 4, this.a1.text, this.a1.status, true, function () {
+        this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 4, this.a1.text, this.a1.status, function () {
+            if (_this.your_turn) {
                 select_answer(0, _this.a1.text);
+            }
         }));
 
-        this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 3, this.a2.text, this.a2.status, true, function () {
+        this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 3, this.a2.text, this.a2.status, function () {
+            if (_this.your_turn) {
                 select_answer(1, _this.a2.text);
+            }
         }));
 
-        this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 2, this.a3.text, this.a3.status, true, function () {
+        this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 2, this.a3.text, this.a3.status, function () {
+            if (_this.your_turn) {
                 select_answer(2, _this.a3.text);
+            }
         }));
 
-        this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 150, this.card_x + 20, this.card_y + this.card_height - 120 - 170 * 1, this.a4.text, this.a4.status, true, function () {
+        this.buttons.push(new Button(0xffffff, 0xcccccc, 0x4169E1, this.card_width - 40, 200, this.card_x + 20, this.card_y + this.card_height - 120 - 220 * 1, this.a4.text, this.a4.status, function () {
+            if (_this.your_turn) {
                 select_answer(3, _this.a4.text);
+            }
         }));
 
         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", null, false, 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 (_this.right_answer === answer) {
                     console.log("Richtig");
@@ -79,9 +88,7 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
                 answer = null;
                 diced = false;
                 rolled_number = null;
-                rolled_number_text.destroy();
+                socket.emit('card finished', d);
-                border_card_stack.clear();
-                _this.card.destroy();
             } else {
                 alert("Bitte wähle eine Antwortmöglichkeit aus");
             }
@@ -90,6 +97,11 @@ function Card(game_board_size, s, a1, a2, a3, a4, d) {
         app.stage.addChild(this.card);
     };
 
+    this.destroyCard = function () {
+        if (this.card !== null) {
+            this.card.destroy();
+        }
+    };
 
     function select_answer(id, text) {
         _this.buttons.forEach(button => button.unSelectButton());

public/js/Sprite.js

@@ -6,12 +6,12 @@ function Sprite(x, 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

@@ -2,7 +2,9 @@ let socket;
 let connected = false;
 
 function start_chat() {
-    socket = io();
+    socket = io("/", {
+        closeOnBeforeunload: false
+    });
 
     socket.on('login', function () {
         connected = true;
@@ -43,6 +45,7 @@ function addLogMessage(message) {
     li.innerText = message;
 
     document.getElementById("messages_received").appendChild(li);
+    document.getElementById("messages_received").scrollTop = document.getElementById("messages_received").scrollHeight;
 }
 
 function addChatMessage(data) {
@@ -65,4 +68,12 @@ function addChatMessage(data) {
     messageDiv.appendChild(messageBody);
 
     document.getElementById('messages_received').append(messageDiv);
+    document.getElementById("messages_received").scrollTop = document.getElementById("messages_received").scrollHeight;
 }
+
+document.getElementById('message_input').onkeydown = function (e) {
+    if (e.key === "Enter") {
+        sendMessage();
+        e.preventDefault();
+    }
+};

public/js/game.js

@@ -11,6 +11,7 @@ let player_color = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00];
 let player_sprite_array = [];
 let hunter = new Hunter();
 
+let card;
 let answer = null;
 let show_card = false;
 let diced = false;
@@ -56,7 +57,7 @@ let sprites = [
 function start_game() {
     app = new PIXI.Application({
         autoResize: true,
-        resolution: devicePixelRatio,
+        resolution: 1,
         backgroundAlpha: 0,
         width: max_size / game_board_size,
         height: max_size / game_board_size
@@ -117,7 +118,7 @@ function start_game() {
     dice.interactive = true;
     dice.buttonMode = true;
     dice.defaultCursor = 'pointer';
-    dice.on('click', function () {
+    dice.on('pointerdown', function () {
         if (!diced) {
             socket.emit('roll dice');
         }
@@ -147,17 +148,26 @@ function start_game() {
         rolled_number_text.x = sprite_size * 7 - sprite_size * 0.2 + dice.width / 2 - rolled_number_text.width / 2;
         rolled_number_text.y = sprite_size * 6 - sprite_size * 0.2;
         app.stage.addChild(rolled_number_text);
-
     });
 
     socket.on('card', function (data) {
-        let q = data.question;
+        let u = data.username;
-        let a = data.answers;
+        let q = data.card.question;
-        let d = data.difficulty;
+        let a = data.card.answers;
-        new Card(game_board_size, q, a[0], a[1], a[2], a[3], d).showCard();
+        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();
         show_card = true;
     });
 
+    socket.on('card destroyed', function () {
+        diced = false;
+        show_card = false;
+        card.destroyCard();
+        rolled_number_text.destroy();
+        border_card_stack.clear();
+    });
+
     resize();
 }
 
@@ -169,7 +179,7 @@ function generate_card_stack(sprite, x, y, onclick) {
     sprite.interactive = true;
     sprite.buttonMode = true;
     sprite.defaultCursor = 'pointer';
-    sprite.on('click', onclick);
+    sprite.on('pointerdown', onclick);
     return sprite;
 }
 
@@ -188,10 +198,24 @@ function generate_circle(graphics, x, y) {
 }
 
 function calculate_size() {
-    if (game.offsetWidth > game.offsetHeight) {
+    let width;
-        return game.offsetHeight;
+    let height;
+    if (game.offsetWidth > window.innerWidth) {
+        width = window.innerWidth - document.getElementById('chat').offsetWidth;
     } else {
-        return game.offsetWidth;
+        width = game.offsetWidth;
+    }
+
+    if (game.offsetHeight > window.innerHeight) {
+        height = window.innerHeight - document.getElementsByTagName('header')[0].offsetHeight;
+    } else {
+        height = game.offsetHeight;
+    }
+
+    if (width > height) {
+        return height;
+    } else {
+        return width;
     }
 }