typescript(lunargame/client): login and sign up buttons

Signed-off-by: prescientmoon <git@moonythm.dev>

typescript/lunargame/client/.prettierignore

@@ -2,5 +2,4 @@ coverage
 dist
 docs
 node_modules
-*.html
 *.md

typescript/lunargame/client/package-lock.json

@@ -898,6 +898,14 @@
         "@babel/plugin-transform-typescript": "^7.3.2"
       }
     },
+    "@babel/runtime": {
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.0.tgz",
+      "integrity": "sha512-2xsuyZ0R0RBFwjgae5NpXk8FcfH4qovj5cEM5VEeB7KXnKqzaisIu2HSV/mCEISolJJuR4wkViUGYujA8MH9tw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.2"
+      }
+    },
     "@babel/template": {
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz",
@@ -937,6 +945,117 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@eix/utils": {
+      "version": "git+https://github.com/eix-js/utils.git#a21d3b755e965e3c1b6022d0ccc8db457e5a706c",
+      "from": "git+https://github.com/eix-js/utils.git"
+    },
+    "@emotion/hash": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.2.tgz",
+      "integrity": "sha512-RMtr1i6E8MXaBWwhXL3yeOU8JXRnz8GNxHvaUfVvwxokvayUY0zoBeWbKw1S9XkufmGEEdQd228pSZXFkAln8Q=="
+    },
+    "@material-ui/core": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.1.3.tgz",
+      "integrity": "sha512-cSrI3yZ2L1XVi5IyO0/dPGUq1FaDBKTL9ygDOlvojD6bGuD/Qu17dCFAD8/mHV4CPNQMJYUKLYyOmqtDYdEB9g==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "@material-ui/styles": "^4.1.2",
+        "@material-ui/system": "^4.3.0",
+        "@material-ui/types": "^4.1.1",
+        "@material-ui/utils": "^4.1.0",
+        "@types/react-transition-group": "^2.0.16",
+        "clsx": "^1.0.2",
+        "convert-css-length": "^2.0.0",
+        "debounce": "^1.1.0",
+        "deepmerge": "^3.0.0",
+        "hoist-non-react-statics": "^3.2.1",
+        "is-plain-object": "^3.0.0",
+        "normalize-scroll-left": "^0.2.0",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.7.2",
+        "react-event-listener": "^0.6.6",
+        "react-transition-group": "^4.0.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.0.tgz",
+          "integrity": "sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==",
+          "requires": {
+            "isobject": "^4.0.0"
+          }
+        },
+        "isobject": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
+          "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA=="
+        }
+      }
+    },
+    "@material-ui/icons": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.2.1.tgz",
+      "integrity": "sha512-FvSD5lUBJ66frI4l4AYAPy2CH14Zs2Dgm0o3oOMr33BdQtOAjCgbdOcvPBeaD1w6OQl31uNW3CKOE8xfPNxvUQ==",
+      "requires": {
+        "@babel/runtime": "^7.2.0"
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.2.0.tgz",
+      "integrity": "sha512-VpPCNWYK1KjpurFh1gH02xpAmCqKZrC/rmiBosZcCRDl8AOcUkSxBMNU0rziHgSQ/jYTEh3MdKNs3Gq0vGCQ/w==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "@emotion/hash": "^0.7.1",
+        "@material-ui/types": "^4.1.1",
+        "@material-ui/utils": "^4.1.0",
+        "clsx": "^1.0.2",
+        "csstype": "^2.5.2",
+        "deepmerge": "^3.0.0",
+        "hoist-non-react-statics": "^3.2.1",
+        "jss": "10.0.0-alpha.17",
+        "jss-plugin-camel-case": "10.0.0-alpha.17",
+        "jss-plugin-default-unit": "10.0.0-alpha.17",
+        "jss-plugin-global": "10.0.0-alpha.17",
+        "jss-plugin-nested": "10.0.0-alpha.17",
+        "jss-plugin-props-sort": "10.0.0-alpha.17",
+        "jss-plugin-rule-value-function": "10.0.0-alpha.17",
+        "jss-plugin-vendor-prefixer": "10.0.0-alpha.17",
+        "prop-types": "^15.7.2",
+        "warning": "^4.0.1"
+      }
+    },
+    "@material-ui/system": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.3.0.tgz",
+      "integrity": "sha512-VQh3mWZSmzm1JR7Ci35AHKwOhhxHHMrBWCdP4mh7UAwSdjWBE6s2Y9Y0iJiqMoEsHP64vU3W1JpsW2AgkUeHsQ==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "deepmerge": "^3.0.0",
+        "prop-types": "^15.7.2",
+        "warning": "^4.0.1"
+      }
+    },
+    "@material-ui/types": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.1.1.tgz",
+      "integrity": "sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@material-ui/utils": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.1.0.tgz",
+      "integrity": "sha512-muwmVU799tzPjzb+Q5E/CTDle0rXwkCAdvMVyU0BfbJhenkUsFmuYiCmbvMVOU1m6F1S5HWfXz8EP4pXwwAvrw==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
     "@types/events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@@ -954,6 +1073,12 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.2.tgz",
+      "integrity": "sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -966,12 +1091,55 @@
       "integrity": "sha512-Uy0PN4R5vgBUXFoJrKryf5aTk3kJ8Rv3PdlHjl6UaX+Cqp1QE0yPQ68MPXGrZOfG7gZVNDIJZYyot0B9ubXUrQ==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.1",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz",
+      "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg=="
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
       "dev": true
     },
+    "@types/react": {
+      "version": "16.8.23",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.23.tgz",
+      "integrity": "sha512-abkEOIeljniUN9qB5onp++g0EY38h7atnDHxwKUFz1r3VH1+yG1OKi2sNPTyObL40goBmfKFpdii2lEzwLX1cA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-router": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.0.3.tgz",
+      "integrity": "sha512-j2Gge5cvxca+5lK9wxovmGPgpVJMwjyu5lTA/Cd6fLGoPq7FXcUE1jFkEdxeyqGGz8VfHYSHCn5Lcn24BzaNKA==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-4.3.4.tgz",
+      "integrity": "sha512-xrwaWHpnxKk/TTRe7pmoGy3E4SyF/ojFqNfFJacw7OLdfLXRvGfk4r/XePVaZNVfeJzL8fcnNilPN7xOdJ/vGw==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.2.tgz",
+      "integrity": "sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
@@ -2071,6 +2239,11 @@
         "shallow-clone": "^1.0.0"
       }
     },
+    "clsx": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz",
+      "integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg=="
+    },
     "coa": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@@ -2240,6 +2413,11 @@
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
       "dev": true
     },
+    "console-polyfill": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/console-polyfill/-/console-polyfill-0.1.2.tgz",
+      "integrity": "sha1-ls/tUcr3gYn2mVcubxgnHcN8DjA="
+    },
     "constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -2261,6 +2439,15 @@
       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
       "dev": true
     },
+    "convert-css-length": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.0.tgz",
+      "integrity": "sha512-ygBgHNzImHJ/kjgqdzC0oaY2+EMID3s88/CZD2C9O1stM3PwsOwXzzlFTTkZy/bPZe0wjyt1UoYjilfunQGjlw==",
+      "requires": {
+        "console-polyfill": "^0.1.2",
+        "parse-unit": "^1.0.1"
+      }
+    },
     "convert-source-map": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
@@ -2504,6 +2691,15 @@
       "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=",
       "dev": true
     },
+    "css-vendor": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.5.tgz",
+      "integrity": "sha512-36w+4Cg0zqFIt5TAkaM3proB6XWh5kSGmbddRCPdrRLQiYNfHPTgaWPOlCrcuZIO0iAtrG+5wsHJZ6jj8AUULA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -2614,6 +2810,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.5.tgz",
+      "integrity": "sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA=="
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -2644,6 +2845,11 @@
       "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
       "dev": true
     },
+    "debounce": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
+      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -2671,6 +2877,11 @@
       "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA=="
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -2837,6 +3048,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
@@ -4330,6 +4549,11 @@
       "integrity": "sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==",
       "dev": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "handle-thing": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
@@ -4452,6 +4676,19 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "history": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
+      "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^2.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^0.4.0"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -4463,6 +4700,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
+      "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -4689,6 +4934,11 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -4991,6 +5241,11 @@
         "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="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -5158,8 +5413,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-      "dev": true
     },
     "js-yaml": {
       "version": "3.13.1",
@@ -5234,6 +5488,82 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.17.tgz",
+      "integrity": "sha512-egGIUg+YRu0+U+XXlD0gmVtU/gW5sn7+qmDv7opwK5s8emZBE/VoN55X6CaMrAa0kLeGMldnI43KOWea6M9/mA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.17.tgz",
+      "integrity": "sha512-aPY4kr6MwliH7KToLRzeSk1NxXUo9n7MQsAa0Hghwj01x9UnMkDkGAKENMKUtPjGkQZfiJpB9tTLFrSJ/6VrIQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.0.0-alpha.17"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.17.tgz",
+      "integrity": "sha512-KQgiXczvzJ9AlFdD8NS7FZLub0NSctSrCA9Yi/GqdsfJg4ZCriU4DzIybCZBHCi/INFGJmLIESYWSxnuhAzgSQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.0-alpha.17"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.17.tgz",
+      "integrity": "sha512-WYxiwwI+CLk0ozW8loeceqXBAZXBMsLBEZeRwVf9WX+FljdJkGwVZpRCk6LBX4aXnqAGyKqCxIAIJ3KP2yBdEg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.0-alpha.17"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.17.tgz",
+      "integrity": "sha512-onpFqv904KCujryf2t6IIV1/QoB7cSF7ojrd4UujcN5TPvYOvXF5bchi7jnHG5U0SLlRSDGMLJ9fhtoCknhEbw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.0-alpha.17",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.17.tgz",
+      "integrity": "sha512-KnbyrxCbtQTqpDx2mSZU/r/E5QnDPIVfIxRi8K+W/q4gZpomBvqWC+xgvAk9hbpmA6QBoQaOilV8o12w2IZ6fg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.0-alpha.17"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.17.tgz",
+      "integrity": "sha512-8AuJB44Q+ehfkWVRi2XlRbUf6SrLmrHTa5EXd6dgQRCCRuvGmqX8Dl4fZvNeKRFjTLPZgzg9+31rqeOMhKa2vA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.0-alpha.17"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.17.tgz",
+      "integrity": "sha512-wDq9EL0QaoMGSGifPEBb+/SA9LBcqPEW0jpL9ht+Z2t+lV7NNz0j7uCEOuE6FvNWqHzUKTsiATs1rTHPkzNBEQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.1",
+        "jss": "10.0.0-alpha.17"
+      }
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -5367,7 +5697,6 @@
       "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"
       }
@@ -5575,6 +5904,16 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "mini-create-react-context": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz",
+      "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==",
+      "requires": {
+        "@babel/runtime": "^7.4.0",
+        "gud": "^1.0.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.7.0.tgz",
@@ -5963,6 +6302,11 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
+    "normalize-scroll-left": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz",
+      "integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA=="
+    },
     "normalize-url": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
@@ -6020,8 +6364,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -6322,6 +6665,11 @@
       "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
       "dev": true
     },
+    "parse-unit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz",
+      "integrity": "sha1-fhu21b7zh0wo45JSaiVBFwKR7s8="
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -6450,6 +6798,11 @@
         "find-up": "^3.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -6990,6 +7343,16 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@@ -7156,6 +7519,78 @@
         }
       }
     },
+    "react-event-listener": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
+      "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      }
+    },
+    "react-is": {
+      "version": "16.8.6",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+      "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
+    },
+    "react-router": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz",
+      "integrity": "sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.3.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.1.tgz",
+      "integrity": "sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.0.1",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
+    "react-transition-group": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.2.1.tgz",
+      "integrity": "sha512-IXrPr93VzCPupwm2O6n6C2kJIofJ/Rp5Ltihhm9UfE8lkuVX2ng/SUUl/oWjblybK9Fq2Io7LGa6maVqPB762Q==",
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -7249,6 +7684,11 @@
         "regenerate": "^1.4.0"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.13.2",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+      "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+    },
     "regenerator-transform": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.0.tgz",
@@ -7458,6 +7898,11 @@
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
       "dev": true
     },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -8644,6 +9089,16 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-invariant": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz",
+      "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g=="
+    },
+    "tiny-warning": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
+      "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
@@ -9072,6 +9527,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -9101,6 +9561,14 @@
       "integrity": "sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==",
       "dev": true
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

typescript/lunargame/client/package.json

@@ -16,6 +16,7 @@
     "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
+    "@types/react-router-dom": "^4.3.4",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.0.0",
     "html-webpack-inline-source-plugin": "0.0.10",
@@ -31,5 +32,11 @@
     "webpack-dev-server": "^3.7.2",
     "webpack-merge": "^4.2.1"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@eix/utils": "git+https://github.com/eix-js/utils.git",
+    "@material-ui/core": "^4.1.3",
+    "@material-ui/icons": "^4.2.1",
+    "@material-ui/styles": "^4.2.0",
+    "react-router-dom": "^5.0.1"
+  }
 }

typescript/lunargame/client/src/common/account/components/Login.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const Login = () => {
+    return <h1>This is the login component</h1>
+}

typescript/lunargame/client/src/common/account/components/Signup.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const Signup = () => {
+    return <h1>This is the signup component</h1>
+}

typescript/lunargame/client/src/common/account/components/TopbarAccount.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useObservable } from 'rxjs-hooks'
+import { BaseServer } from '../../network/classes/BaseServer'
+import Avatar from '@material-ui/core/Avatar'
+import Button from '@material-ui/core/Button'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import { Link } from 'react-router-dom'
+
+const { account } = new BaseServer()
+
+const useStyles = makeStyles((theme: Theme) => ({
+    loginButton: {
+        marginLeft: theme.spacing(2)
+    }
+}))
+
+export const TopbarAccount = (props: unknown) => {
+    const accountSnapshot = useObservable(() => account, null)
+
+    const classes = useStyles(props)
+
+    const signup = (
+        <>
+            <Button>
+                <Link to="/signup">Sign up</Link>
+            </Button>
+
+            <Button variant="contained" className={classes.loginButton}>
+                <Link to="/login"> Login</Link>
+            </Button>
+        </>
+    )
+
+    return accountSnapshot ? (
+        <Avatar src={accountSnapshot.avatar} alt={accountSnapshot.name} />
+    ) : (
+        signup
+    )
+}

typescript/lunargame/client/src/common/core/components/App.tsx

@@ -1,17 +1,22 @@
+import '../styles/reset.scss'
+
 import React from 'react'
-import { useObservable } from 'rxjs-hooks'
+import CssBaseline from '@material-ui/core/CssBaseline'
-import { interval } from 'rxjs'
+
-import { map } from 'rxjs/operators'
+import { BrowserRouter as Router } from 'react-router-dom'
+import { theme as MuiTheme } from '../data/Theme'
+import { ThemeProvider as Theme } from '@material-ui/styles'
+import { AppBar } from './AppBar'
+import { Body } from './Body'
 
 export const App = () => {
-    const somenum = useObservable<number>($input => {
-        return interval(1000).pipe(map(val => val + 1))
-    }, 200)
-
     return (
-        <>
+        <Theme theme={MuiTheme}>
-            <h1>This is the app component!</h1>
+            <CssBaseline />
-            <span>some random rxjs counter => {somenum}</span>
+            <Router>
-        </>
+                <AppBar />
+                <Body />
+            </Router>
+        </Theme>
     )
 }

typescript/lunargame/client/src/common/core/components/AppBar.tsx

@@ -0,0 +1,76 @@
+import React, { useState, KeyboardEvent } from 'react'
+import MuiAppBar from '@material-ui/core/AppBar'
+import Toolbar from '@material-ui/core/Toolbar'
+import Typography from '@material-ui/core/Typography'
+import IconButton from '@material-ui/core/IconButton'
+import MenuIcon from '@material-ui/icons/Menu'
+import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
+import { Sidebar } from './Sidebar'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+import { TopbarAccount } from '../../account/components/TopbarAccount'
+
+const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+        flexGrow: 1
+    },
+    title: {
+        flexGrow: 1
+    },
+    list: {
+        width: 250
+    }
+}))
+
+export const AppBar = (props: unknown) => {
+    const [sidebar, setSidebar] = useState(false)
+    const classes = useStyles(props)
+
+    const closeSidebar = () => setSidebar(false)
+    const openSidebar = () => setSidebar(true)
+
+    const handleKeydown = (open: boolean) => (
+        event: KeyboardEvent<HTMLDivElement>
+    ) => {
+        if (event.key === 'Tab' || event.key === 'Shift') {
+            return
+        }
+
+        setSidebar(open)
+    }
+
+    return (
+        <>
+            <div className={classes.root}>
+                <MuiAppBar position="static">
+                    <Toolbar>
+                        <IconButton
+                            edge="start"
+                            color="inherit"
+                            aria-label="Menu"
+                            onClick={() => setSidebar(true)}
+                        >
+                            <MenuIcon />
+                        </IconButton>
+                        <Typography variant="h6" className={classes.title} />
+
+                        <TopbarAccount />
+                    </Toolbar>
+                </MuiAppBar>
+            </div>
+            <SwipeableDrawer
+                open={sidebar}
+                onClose={closeSidebar}
+                onOpen={openSidebar}
+            >
+                <div
+                    role="presentation"
+                    onClick={closeSidebar}
+                    onKeyDown={handleKeydown(false)}
+                    className={classes.list}
+                >
+                    <Sidebar />
+                </div>
+            </SwipeableDrawer>
+        </>
+    )
+}

typescript/lunargame/client/src/common/core/components/Body.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { SiddebarRoutes } from './SidebarRouteList'
+import { makeStyles } from '@material-ui/styles'
+import { Route } from 'react-router-dom'
+import { Signup } from '../../account/components/Signup'
+import { Login } from '../../account/components/Login'
+
+const useStyles = makeStyles({
+    root: {
+        padding: '5%'
+    }
+})
+
+export const Body = (props: unknown) => {
+    const classes = useStyles(props)
+
+    return (
+        <div className={classes.root}>
+            <SiddebarRoutes />
+
+            <Route component={Signup} path="/signup" />
+            <Route component={Login} path="/login" />
+        </div>
+    )
+}

typescript/lunargame/client/src/common/core/components/Home.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import Typography from '@material-ui/core/Typography'
+import Divider from '@material-ui/core/Divider'
+import { makeStyles, Theme } from '@material-ui/core/styles'
+
+const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+        flexGrow: 1
+    },
+    divider: {
+        marginBottom: theme.spacing(2),
+        marginTop: theme.spacing(2)
+    }
+}))
+
+export const Home = (props: unknown) => {
+    const classes = useStyles(props)
+
+    return (
+        <>
+            <Typography variant="h4">This is Lunarbox</Typography>
+
+            <Divider className={classes.divider} />
+
+            <Typography variant="h6" color="textSecondary">
+                Lunarbox is a game streaming website for games made with the eix
+                game engine. The project is open source, and right now it's
+                unusable.
+            </Typography>
+        </>
+    )
+}

typescript/lunargame/client/src/common/core/components/Sidebar.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import { routes } from './SidebarRouteData'
+import { Link } from 'react-router-dom'
+
+export const Sidebar = () => {
+    return (
+        <>
+            <List>
+                {routes.map((route, index) => {
+                    return (
+                        <Link className="routeLink" to={route.url} key={index}>
+                            <ListItem button>
+                                <ListItemIcon>{route.icon}</ListItemIcon>
+                                <ListItemText primary={route.name} />
+                            </ListItem>
+                        </Link>
+                    )
+                })}
+            </List>
+        </>
+    )
+}

typescript/lunargame/client/src/common/core/components/SidebarRouteData.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import HomeIcon from '@material-ui/icons/Home'
+import { Route } from '../types/Route'
+import { Home } from './Home'
+
+export const routes: Route[] = [
+    {
+        name: 'home',
+        url: '/',
+        content: Home,
+        icon: <HomeIcon />
+    },
+    {
+        name: 'about',
+        url: '/about',
+        content: () => (
+            <>
+                <h1>This is the about component</h1>
+            </>
+        ),
+        icon: <HomeIcon />
+    }
+]

typescript/lunargame/client/src/common/core/components/SidebarRouteList.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { routes } from './SidebarRouteData'
+import { Route } from 'react-router-dom'
+
+export const SiddebarRoutes = () => {
+    return (
+        <>
+            {routes.map((route, index) => (
+                <Route
+                    key={index}
+                    path={route.url}
+                    component={route.content}
+                    exact={route.url === '/'}
+                />
+            ))}
+        </>
+    )
+}

typescript/lunargame/client/src/common/core/data/Theme.ts

@@ -0,0 +1,10 @@
+import { createMuiTheme } from '@material-ui/core/styles'
+import * as Colors from '@material-ui/core/colors'
+
+export const theme = createMuiTheme({
+    palette: {
+        type: 'dark',
+        primary: Colors.deepPurple,
+        secondary: Colors.red
+    }
+})

typescript/lunargame/client/src/common/core/styles/reset.scss

@@ -0,0 +1,451 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0-modified | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* make sure to set some focus styles for accessibility */
+:focus {
+    outline: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}
+
+input[type='search'] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+    resize: vertical;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    max-width: 100%;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/**
+ * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/**
+ * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improve image quality when scaled in IE 7.
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/**
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+    margin: 0;
+}
+
+/**
+ * Correct margin displayed oddly in IE 6/7.
+ */
+
+form {
+    margin: 0;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct color not being inherited in IE 6/7/8/9.
+ * 2. Correct text not wrapping in Firefox 3.
+ * 3. Correct alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/**
+ * 1. Correct font size not being inherited in all browsers.
+ * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improve appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/**
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+    *overflow: visible; /* 4 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to content-box in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ * 3. Remove excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+
+input[type='checkbox'],
+input[type='radio'] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type='search'] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+html,
+button,
+input,
+select,
+textarea {
+    color: #222;
+}
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+img {
+    vertical-align: middle;
+}
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+.chromeframe {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}

typescript/lunargame/client/src/common/core/types/Route.ts

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+
+export type acceptedContent = React.ComponentElement<unknown, Component>
+
+export interface Route {
+    name: string
+    url: string
+    content: () => acceptedContent
+    icon: acceptedContent
+}

typescript/lunargame/client/src/common/network/classes/BaseServer.ts

@@ -0,0 +1,21 @@
+import { Account } from '../types/Account'
+import { BehaviorSubject } from 'rxjs'
+import { Singleton } from '@eix/utils'
+import { defaultAvatar } from '../constants'
+
+@Singleton
+export class BaseServer {
+    public account = new BehaviorSubject<Account | null>(null)
+
+    constructor() {
+        // mock account for now
+        // this.account.next({
+        //     name: 'Mock',
+        //     email: 'mock@somethng.io',
+        //     avatar: defaultAvatar,
+        //     description: 'Just a random mock account',
+        //     uid: '1234',
+        //     verified: true
+        // })
+    }
+}

typescript/lunargame/client/src/common/network/constants.ts

@@ -0,0 +1,2 @@
+export const defaultAvatar =
+    'https://cdn-images-1.medium.com/max/1200/1*MccriYX-ciBniUzRKAUsAw.png'

typescript/lunargame/client/src/common/network/types/Account.ts

@@ -0,0 +1,8 @@
+export interface Account {
+    name: string
+    email: string
+    avatar: string
+    description: string
+    uid: string
+    verified: boolean
+}

typescript/lunargame/client/src/index.html

@@ -1,14 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+    <head>
-    <meta name="theme-color" content="#091F35" />
+        <meta name="theme-color" content="#091F35" />
-    <meta name="viewport" content="initial-scale=1.0" />
+        <meta
-    <meta charset="utf-8" />
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+        />
+        <meta charset="utf-8" />
 
-    <title>LunarBox</title>
+        <link
-  </head>
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+        />
 
-  <body>
+        <title>LunarBox</title>
-    <div id="app"></div>
+    </head>
-  </body>
+
+    <body>
+        <div id="app"></div>
+    </body>
 </html>

typescript/lunargame/client/tsconfig.json

@@ -2,7 +2,9 @@
     "compilerOptions": {
         "moduleResolution": "node",
         "esModuleInterop": true,
-        "jsx": "preserve"
+        "jsx": "preserve",
+        "noImplicitAny": true,
+        "experimentalDecorators": true
     },
     "exclude": ["node_modules"],
     "include": ["src"]