Multiplayer kind of working

html/index.html

@@ -11,20 +11,49 @@
     <h1><i class="fas fa-bomb"></i>Minesweeper 99</h1>
 
     <div id="main">
+        <div>
+
             <div id="board">
                 <!-- Renderer will push content here -->
             </div>
 
+        </div>
+
+        <div>
+
+            <div id="time">
+                <h2>Time left:</h2>
+                <span>00:00</span>
+                <hr>
+            </div>
+
+            <div id="register">
+                <h2>Welcome</h2>
+                <form action="#">
+                    <label for="username">Username:</label><br>
+                    <input type="text" name="username" placeholder="Username"><br><br>
+
+                    <label for="store">Use this username every game:</label>
+                    <input type="checkbox" name="store"><br>
+                    <label for="store" style="color: tomato">This feature uses cookies.</label><br><br>
+
+                    <button type="submit">Submit</button>
+                </form>
+            </div>
+
             <div id="log">
                 <h2>Gamelog</h2>
+                <div>
                     <!-- Game log will be pushed here -->
                 </div>
             </div>
+        </div>
+    </div>
 
     <script src="/main.js"></script>
 
     <footer>
-        > Coded by <a href="//arnweb.nl">McArn</a>.
+        > Coded by <a href="//arnweb.nl" target="new">McArn</a>.
     </footer>
 
 </body>

package-lock.json

@@ -56,6 +56,11 @@
         "strip-json-comments": "^3.1.1"
       }
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz",
+      "integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ=="
+    },
     "@types/component-emitter": {
       "version": "1.2.10",
       "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.10.tgz",
@@ -506,6 +511,16 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "dev": true,
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
     "backo2": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
@@ -760,6 +775,14 @@
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
+    "chainsaw": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.0.9.tgz",
+      "integrity": "sha1-EaBRAtHEx4W20EFdM21aOhYSkT4=",
+      "requires": {
+        "traverse": ">=0.3.0 <0.4"
+      }
+    },
     "chalk": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
@@ -1049,11 +1072,22 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "cookie-storage": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cookie-storage/-/cookie-storage-6.1.0.tgz",
+      "integrity": "sha512-HeVqbVy8BjXhAAuFtL6MTG+witHoLbxfky2jgVh9FmxmyL6IKa9gSSyPNjevXCCCxPu6Tzd9J8+eXTRQzYU/cg=="
+    },
     "copy-descriptor": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "core-js": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+      "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
+      "dev": true
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -1940,21 +1974,10 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
       "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
       "requires": {
         "loader-utils": "^2.0.0",
         "schema-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        }
       }
     },
     "fill-range": {
@@ -2371,6 +2394,14 @@
         }
       }
     },
+    "hashish": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/hashish/-/hashish-0.0.4.tgz",
+      "integrity": "sha1-bWC8b/r3Ebav1g5CbQd5iAFOZVQ=",
+      "requires": {
+        "traverse": ">=0.2.4"
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -2676,6 +2707,12 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=",
+      "dev": true
+    },
     "is-negative-zero": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz",
@@ -2889,6 +2926,17 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "9.8.7",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz",
+      "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==",
+      "dev": true,
+      "requires": {
+        "is-in-browser": "^1.1.3",
+        "symbol-observable": "^1.1.0",
+        "warning": "^3.0.0"
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -2951,6 +2999,17 @@
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.1.0.tgz",
       "integrity": "sha512-oR4lB4WvwFoC70ocraKhn5nkKSs23t57h9udUgw8o0iH8hMXeEoRuUgfcvgUwAJ1ZpRqBvcou4N2SMvM1DwMrA=="
     },
+    "loader-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+      "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+      "dev": true,
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      }
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -2969,6 +3028,15 @@
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.0.tgz",
       "integrity": "sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ=="
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "loud-rejection": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
@@ -3042,6 +3110,12 @@
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
     },
+    "microbuffer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/microbuffer/-/microbuffer-1.0.0.tgz",
+      "integrity": "sha1-izgy7UDIfVH0e7I0kTppinVtGdI=",
+      "dev": true
+    },
     "micromatch": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@@ -3648,6 +3722,12 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
     },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4038,6 +4118,12 @@
       "resolved": "https://registry.npmjs.org/reduce-flatten/-/reduce-flatten-2.0.0.tgz",
       "integrity": "sha512-EJ4UNY/U1t2P/2k6oqotuX2Cc3T6nxJwsM0N0asT7dhrtH1ltUxDn4NalSYmPE2rCkVpcf/X6R0wDwcFpzhd4w=="
     },
+    "regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+      "dev": true
+    },
     "regex-not": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -4081,6 +4167,14 @@
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
       "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q=="
     },
+    "remove": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/remove/-/remove-0.1.5.tgz",
+      "integrity": "sha1-CV/9gn1lyfQa2X0z5BanWBEHmVU=",
+      "requires": {
+        "seq": ">= 0.3.5"
+      }
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -4355,6 +4449,15 @@
         }
       }
     },
+    "seq": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/seq/-/seq-0.3.5.tgz",
+      "integrity": "sha1-rgKvOkJHk9jMvyEtaRdODFTf/jg=",
+      "requires": {
+        "chainsaw": ">=0.0.7 <0.1",
+        "hashish": ">=0.0.2 <0.1"
+      }
+    },
     "serialize-javascript": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-5.0.1.tgz",
@@ -4976,6 +5079,12 @@
         "has-flag": "^3.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+      "dev": true
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -5124,6 +5233,11 @@
         "punycode": "^2.1.1"
       }
     },
+    "traverse": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
+      "integrity": "sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk="
+    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
@@ -5142,6 +5256,29 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "ttf-loader": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ttf-loader/-/ttf-loader-1.0.2.tgz",
+      "integrity": "sha512-IMlcqjkSxqfOD4UpPrJ+LGm98JQ5URDFami19mR7lfjNR1XAEoG93Xd3loGYUMSxuhfzSTxsnLXu8emIawx/6A==",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "jss": "^9.5.1",
+        "ttf2woff": "^2.0.1",
+        "uuid": "^3.2.1"
+      }
+    },
+    "ttf2woff": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ttf2woff/-/ttf2woff-2.0.2.tgz",
+      "integrity": "sha512-X68badwBjAy/+itU49scLjXUL094up+rHuYk+YAOTTBYSUMOmLZ7VyhZJuqQESj1gnyLAC2/5V8Euv+mExmyPA==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.6",
+        "microbuffer": "^1.0.0",
+        "pako": "^1.0.0"
+      }
+    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -5336,6 +5473,15 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.0.1.tgz",

package.json

@@ -15,11 +15,13 @@
   "author": "Arne van Iterson",
   "license": "GPL-3.0-or-later",
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.1",
+    "cookie-storage": "^6.1.0",
     "css-loader": "^5.0.1",
     "eslint": "^7.12.1",
-    "file-loader": "^6.2.0",
     "jquery": "^3.5.1",
     "node-sass": "^5.0.0",
+    "remove": "^0.1.5",
     "sass": "^1.29.0",
     "sass-loader": "^10.0.5",
     "socket.io-client": "^3.0.0",
@@ -27,5 +29,9 @@
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^3.11.0"
+  },
+  "devDependencies": {
+    "file-loader": "^6.2.0",
+    "ttf-loader": "^1.0.2"
   }
 }

scss/index.scss

@@ -1,15 +1,19 @@
+@font-face {
+    font-family: "Alarm Clock";
+    src: url("../res/fonts/alarm\ clock.ttf") format("truetype"),
+}
+
 body {
     font-family: monospace;
     padding: 2em;
     margin: 0;
     background-color: #111111;
     color: white;
-    // * {
+
-    //     border: 1px solid white;
-    // }
     h1 {
         text-align: center;
     }
+
     div#main {
         height: 100%;
         width: max-content;
@@ -17,17 +21,22 @@ body {
         grid-template-columns: auto auto;
         column-gap: 1em;
         margin: 0 auto;
+
         div {
             padding: 1em;
+            margin-bottom: 1em;
             border-radius: 0.25em;
             background-color: #212121;
-            &#board {
+            display: block;
+
+            div#board {
                 text-align: center;
                 width: min-content;
                 display: grid;
-                grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
                 column-gap: 3px;
                 row-gap: 3px;
+                margin-bottom: 0;
+
                 span.cell {
                     color: white;
                     text-align: center;
@@ -37,34 +46,64 @@ body {
                     border-radius: 0.1em;
                     background-color: #303030;
                     font-size: large;
+
                     &.discovered {
                         background-color: #424242;
                     }
+
                     &.bomb {
                         background-color: #FC5130;
                     }
+
                     &.flag {
                         background-color: #51CB20;
                     }
                 }
             }
-            &#log {
-                font-size: 12px;
-                width: 20vw;
-                h2 {
-                    text-align: center;
         }
+
+        div:nth-of-type(2) {
+            min-width: 300px;
+
+            div {
+                margin-bottom: 0;
+
+                &#time {
+                    span {
+                        margin: 0 auto;
+                        display: block;
+                        text-align: center;
+                        font-size: 5em;
+                        font-family: "Alarm Clock";
+                    }
+                }
+
+                &#register {
+                    display: none;
+                }
+
+                &#log {
+                    display: none;
+                    font-size: 12px;
+
+                    div {
+                        max-height: 23rem;
+                        overflow: auto;
+
                         span {
                             display: block;
                             width: 100%;
                             color: darkgray;
                             padding-bottom: 0.5em;
+    
                             &.error {
                                 color: red;
                             }
+    
                             &.alert {
                                 color: orange;
                             }
+    
                             &.success {
                                 color: cyan;
                             }
@@ -72,12 +111,19 @@ body {
                     }
                 }
             }
+        }
+    }
+
     footer {
-        position: absolute;
+        position: sticky;
-        bottom: 1em;
+        bottom: 0;
         left: 1em;
         color: darkgray;
         height: 1em;
+        background: #111111;
+        width: 100%;
+        padding: 1em;
+
         a {
             color: white;
         }

src/helpers/log.js

@@ -1,8 +1,11 @@
 function log(message, type) {
     var child = document.createElement("span");
-    child.innerHTML = "- " + message;
+    child.innerHTML = "- " + String(message);
     child.className = type;
-    document.getElementById("log").appendChild(child);
+
+    var log = document.querySelectorAll("div#log > div")[0];
+    log.appendChild(child);
+    log.scrollTo(0, log.scrollHeight);
 }
 
 export default log;

src/helpers/multiplayer.js

@@ -1,7 +1,12 @@
 /* eslint-disable no-unused-vars */
 import io from "socket.io-client";
+import {
+    CookieStorage
+} from "cookie-storage";
 import log from "./log.js";
 
+const cookie = new CookieStorage();
+
 class Multiplayer {
     constructor() {
         // Keep local and external players 
@@ -9,23 +14,43 @@ class Multiplayer {
         this.connected = false;
         this.game;
 
+        this.cookie = cookie.getItem("ms99_usr");
+        if (this.cookie != null) {
+            log(`Using previous username ${this.cookie}, delete cookies for this site to reset.`, "alert");
+            this.connect(this.cookie);
+        } else {
+            this.register();
+        }
+    }
+
+    connect(username) {
+        // Show gamelog
+        document.querySelectorAll("div#log")[0].style.display = "block";
+
         // Connect to TanksJS-Server instance
         log("Connecting to server...");
-        this.socket = io("http://localhost:3000");
+        this.socket = io("http://localhost:3000/", {
+            reconnection: false
+        });
+
+        this.socket.on("connect_error", err => this.handleError(err));
+        this.socket.on("connect_failed", err => this.handleError(err));
+        this.socket.on("disconnect", err => this.handleError(err));
+
         this.socket.on("identify", () => {
             this.socket.emit("identification", {
-                name: "Arn",
+                name: username,
                 playersMax: 2,
                 gameID: "ms99"
             });
-            log(`Connected to server as ${this.socket.id}`, "success");
+            log(`Connected to server as ${username}`, "success");
+            console.log(this.socket);
             this.connected = true;
-            this.game.active = true;
         });
 
         // Handle player logins    
         this.socket.on("roomUpdate", (data) => {
-            console.log("roomUpdate");
+            console.log(data);
             // Add any player that is not the local player and is not already added
             for (const id in data) {
                 if (id != this.socket.id && this.players.indexOf(id)) {
@@ -47,15 +72,35 @@ class Multiplayer {
 
         // Handle player updates
         this.socket.on("update", (data) => {
-            console.log("update");
+            console.log(data);
         });
 
         // Start game
         this.socket.on("gameStart", () => {
             console.log("gameStart");
+            this.game.active = true;
         });
     }
 
+    register() {
+        var form = document.querySelectorAll("div#register > form")[0];
+        form.parentElement.style.display = "block";
+        form.addEventListener("submit", (e) => {
+            e.preventDefault();
+            form.parentElement.style.display = "none";
+
+            var username = String(form.querySelector("input[name=username]").value);
+            if (form.querySelector("input[name=store]").checked) {
+                cookie.setItem("ms99_usr", username);
+            }
+            this.connect(username);
+        });
+    }
+
+    handleError(error) {
+        log(error, "error");
+    }
+
     setInstance(game) {
         this.game = game;
         log("Game instance initialized");

src/index.js

@@ -1,11 +1,31 @@
 /* eslint-disable no-unused-vars */
 import "../scss/index.scss";
+import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
 import log from "./helpers/log.js";
 import Game from "./screens/game.js";
 import Multiplayer from "./helpers/multiplayer.js";
 
+
+["DOMContentLoaded", "resize"].forEach(evt =>
+    window.addEventListener(evt, (e) => {
+        var main = document.getElementById("main");
+        var info = main.children[1];
+
+        if (main.scrollWidth > window.innerWidth) {
+            main.style.display = "block";
+            info.style.maxWidth = "unset";
+        } else {
+            main.style.display = "grid";
+            info.style.maxWidth = "350px";
+        }
+    })
+);
+
 var board = document.getElementById("board");
 var mp = new Multiplayer();
 var game = new Game(board);
 mp.setInstance(game);
 
+window.setInterval(function () {
+    game.update();
+}, 1000);

src/screens/game.js

@@ -5,16 +5,29 @@ class Game {
     constructor(element) {
         this.board = element;
         this.children = element.children;
+        this.colours = [
+            "#B8E5E5",
+            "#A9C6E5",
+            "#A79AE6",
+            "#CE8BE7",
+            "#E97DC1",
+            "#EB6D6E",
+            "#ED9B5C",
+            "#ECED4C"
+        ];
 
         this.active = false;
 
-        this.sides = 15;
+        this.sides = 20;
         this.size = Math.pow(this.sides, 2);
+        this.board.style.gridTemplateColumns = `repeat(${this.sides}, auto)`;
 
         this.generated = false;
-        this.bombAmount = 25;
+        this.bombAmount = 60;
         this.bombs = [];
         this.discovered = [];
+
+        this.time = 60;
         this.strikes = 3;
 
         for (let cell = 0; cell < this.size; cell++) {
@@ -35,14 +48,37 @@ class Game {
 
             this.board.appendChild(child);
         }
+    }
 
-        // for (let index = 0; index < this.bombAmount; index++) {
+    update() {
-        //     var rand = math.default.rand(0, this.size);
+        if (this.active) {
-        //     this.bombs[rand] = 1;
+            if (this.time - 1 <= 0) {
-        // }
+                this.gameOver();
+            } else {
+                this.time--;
+                this.drawTime();
+            }
+        }
+    }
 
-        console.log(this.bombs);
+    drawTime() {
-        console.log(this.discovered);
+        var minutes = 0;
+
+        while (this.time - 60 - (minutes * 60) >= 0) {
+            minutes++;
+        }
+        var seconds = this.time - (minutes * 60);
+
+        if (minutes < 10) {
+            minutes = String("0" + minutes);
+        }
+
+        if (seconds < 10) {
+            seconds = String("0" + seconds);
+        }
+
+        var timer = document.getElementById("time").children[1];
+        timer.innerHTML = String(minutes + ":" + seconds);
     }
 
     discover(cell) {
@@ -99,7 +135,7 @@ class Game {
                 if (!limit.bottom) {
                     surrounds.push(cell + this.sides + 1);
                 }
-            } else if ((cell + 1) % this.sides === 0 ) {
+            } else if ((cell + 1) % this.sides === 0) {
                 // Cell is on the right side of the map
                 surrounds.push(cell - 1);
                 if (!limit.top) {
@@ -138,28 +174,39 @@ class Game {
                     }
                 });
             } else {
+                this.children[cell].style.color = this.colours[value];
                 this.children[cell].innerHTML = String(value);
             }
         }
     }
 
     flag(cell) {
+        if (this.active) {
             if (this.bombs[cell]) {
+                if (!this.discovered[cell]) {
+                    this.discovered[cell] = 1;
                     this.children[cell].innerHTML = "#";
                     this.children[cell].classList.add("flag");
                     this.bombAmount--;
-            log(`Correctly flagged. ${String(this.bombAmount)} bombs left!`);
+
-        } else {
+                    this.time = this.time + 10;
-            if (this.strikes - 1 == 0) {
+                    this.drawTime();
-                this.gameOver();
+
-                return;
+                    if (this.bombAmount == 0) {
-            } else {
+                        log("You have cleared all bombs!", "success");
-                this.strikes--;
+                        this.active = false;
-                log(`Incorrectly flagged. ${String(this.strikes)} strikes left!`, "alert");
                     }
+                }
+            } else {
+                if (!this.discovered[cell]) {
+                    this.time = this.time - 30;
+                    this.drawTime();
+
                     this.discover(cell);
                 }
             }
+        }
+    }
 
     gameOver() {
         log("Game over", "error");

webpack.config.js

@@ -1,6 +1,7 @@
 module.exports = {
     module: {
-        rules: [{
+        rules: [
+            {
                 test: /\.s[ac]ss$/i,
                 use: [
                     // Creates `style` nodes from JS strings
@@ -10,6 +11,17 @@ module.exports = {
                     // Compiles Sass to CSS
                     "sass-loader",
                 ],
-        }, ]
+            },
+            {
+                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [{
+                    loader: "file-loader",
+                    options: {
+                        name: "[name].[ext]",
+                        outputPath: "res/fonts/"
+                    }
+                }]
+            }
+        ]
     }
 };