Merge branch 'main' into multiplayer

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,10 +1,11 @@
-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: [],
@@ -18,10 +19,28 @@ 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;
 
@@ -142,7 +161,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)]);
 }
 

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,30 @@
+import json
+
+if __name__ == '__main__':
+    array = []
+    with open('fragen_10_06_21_final.json') as file:
+        data = json.load(file)
+        print(len(data))
+
+        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']
+                                   })
+
+            array.append(new)
+
+    with open('fragen_10_06_21_final_new_format.json', 'w', encoding='utf8') as file:
+        json.dump(array, file, ensure_ascii=False)
+        print(len(data))

package.json

@@ -2,6 +2,7 @@
   "name": "projektmanagement-game",
   "version": "1.0.0",
   "dependencies": {
+    "@socket.io/admin-ui": "^0.1.2",
     "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,7 +53,7 @@
 </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="js/Card.js"></script>
 <script src="js/Button.js"></script>

public/js/Button.js

@@ -9,7 +9,7 @@ function Button(default_color, hover_color, select_color, width, height, x, y, t
     this.text = text;
     this.status = status;
     this.button_is_answer = button_is_answer;
-    this.click = click;
+    this.pointerdown = click;
     this.selected = false;
     let _this = this;
 
@@ -20,17 +20,17 @@ 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({
@@ -55,7 +55,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 () {
             click();
         });
         this.graphics.on('mouseover', function () {
@@ -67,5 +67,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/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

@@ -64,7 +64,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
@@ -126,7 +126,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');
         }
@@ -185,7 +185,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;
 }