Multiplayer kind of working

2020-11-18 11:43:45 +01:00 · 2020-11-18 11:43:45 +01:00 · 3a739e33a9
commit 3a739e33a9
parent eddfb721ab
10 changed files with 442 additions and 88 deletions
--- a/html/index.html
+++ b/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>
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
  }
 }
--- a/res/fonts/alarm
+++ b/res/fonts/alarm
--- a/scss/index.scss
+++ b/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;
-        bottom: 1em;
+        position: sticky;
+        bottom: 0;
        left: 1em;
        color: darkgray;
        height: 1em;
+        background: #111111;
+        width: 100%;
+        padding: 1em;
+
        a {
            color: white;
        }
--- a/src/helpers/log.js
+++ b/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;
--- a/src/helpers/multiplayer.js
+++ b/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");
--- a/src/index.js
+++ b/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);
--- a/src/screens/game.js
+++ b/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++) {
-        //     var rand = math.default.rand(0, this.size);
-        //     this.bombs[rand] = 1;
-        // }
+    update() {
+        if (this.active) {
+            if (this.time - 1 <= 0) {
+                this.gameOver();
+            } else {
+                this.time--;
+                this.drawTime();
+            }
+        }
+    }

-        console.log(this.bombs);
-        console.log(this.discovered);
+    drawTime() {
+        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 {
-            if (this.strikes - 1 == 0) {
-                this.gameOver();
-                return;
-            } else {
-                this.strikes--;
-                log(`Incorrectly flagged. ${String(this.strikes)} strikes left!`, "alert");
+
+                    this.time = this.time + 10;
+                    this.drawTime();
+
+                    if (this.bombAmount == 0) {
+                        log("You have cleared all bombs!", "success");
+                        this.active = false;
                    }
+                }
+            } else {
+                if (!this.discovered[cell]) {
+                    this.time = this.time - 30;
+                    this.drawTime();
+
                    this.discover(cell);
                }
            }
+        }
+    }

    gameOver() {
        log("Game over", "error");
--- a/webpack.config.js
+++ b/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/"
+                    }
+                }]
+            }
+        ]
    }
 };