Added the client build to the game server and served it with express

.gitignore

@@ -4,10 +4,11 @@
 node_modules
 
 # testing
-/coverage
+coverage
 
 # production
-/build
+build
+dist
 
 # misc
 .DS_Store
@@ -20,6 +21,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.DS_Store
-
-dist
+.DS_Store

package.json

@@ -4,6 +4,7 @@
   "workspaces": ["packages/*"],
   "scripts": {
     "run-client": "cd ./packages/web && yarn start",
-    "run-server": "cd ./packages/game-server && yarn start"
+    "run-server": "cd ./packages/game-server && yarn start",
+    "start": "yarn run run-server"
   }
 }

packages/game-server/client/asset-manifest.json

@@ -0,0 +1,22 @@
+{
+  "main.css": "static/css/main.99fb8bac.css",
+  "main.css.map": "static/css/main.99fb8bac.css.map",
+  "main.js": "static/js/main.b5c1919f.js",
+  "main.js.map": "static/js/main.b5c1919f.js.map",
+  "static/media/brand-icons.eot": "static/media/brand-icons.13db00b7.eot",
+  "static/media/brand-icons.svg": "static/media/brand-icons.a1a749e8.svg",
+  "static/media/brand-icons.ttf": "static/media/brand-icons.c5ebe0b3.ttf",
+  "static/media/brand-icons.woff": "static/media/brand-icons.a046592b.woff",
+  "static/media/brand-icons.woff2": "static/media/brand-icons.e8c322de.woff2",
+  "static/media/flags.png": "static/media/flags.9c74e172.png",
+  "static/media/icons.eot": "static/media/icons.8e3c7f55.eot",
+  "static/media/icons.svg": "static/media/icons.962a1bf3.svg",
+  "static/media/icons.ttf": "static/media/icons.b87b9ba5.ttf",
+  "static/media/icons.woff": "static/media/icons.faff9214.woff",
+  "static/media/icons.woff2": "static/media/icons.0ab54153.woff2",
+  "static/media/outline-icons.eot": "static/media/outline-icons.701ae6ab.eot",
+  "static/media/outline-icons.svg": "static/media/outline-icons.82f60bd0.svg",
+  "static/media/outline-icons.ttf": "static/media/outline-icons.ad97afd3.ttf",
+  "static/media/outline-icons.woff": "static/media/outline-icons.ef60a4f6.woff",
+  "static/media/outline-icons.woff2": "static/media/outline-icons.cd6c777f.woff2"
+}

packages/game-server/client/css/card.css

@@ -0,0 +1,215 @@
+/******************************************************************************
+* Do not remove this notice.
+*
+* Copyright 2001 by Mike Hall.
+* See http://www.brainjar.com for terms of use.                                                  
+******************************************************************************/
+.card-container {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.card {
+  border: 1px solid #6536c842;
+}
+
+.card,
+.card-clickable {
+  font-size: 20pt;
+  position: relative;
+  width: 3.75em;
+  height: 5em;
+  float: left;
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
+  box-shadow: 0 1px 2px 0 rgba(2, 15, 27, 0.13);
+}
+
+.card-clickable {
+  cursor: pointer;
+  border: 1px solid #6536c842;
+}
+
+.card-clickable:hover {
+  border-width: 2px;
+}
+
+.front {
+  background-color: #ffffff;
+  color: #000000;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.red {
+  color: #ff0000;
+  border-color: red;
+}
+
+.index {
+  font-size: 50%;
+  font-weight: bold;
+  text-align: center;
+  position: absolute;
+  left: 0.25em;
+}
+
+.ace {
+  font-size: 300%;
+  position: absolute;
+  left: 0.325em;
+  top: 0.5em;
+}
+
+.face {
+  border: 1px solid #000000;
+  position: absolute;
+  left: 0.5em;
+  top: 0.45em;
+  width: 2.6em;
+  height: 4em;
+}
+
+.spotA1 {
+  position: absolute;
+  left: 0.6em;
+  top: 0.5em;
+}
+
+.spotA2 {
+  position: absolute;
+  left: 0.6em;
+  top: 1.5em;
+}
+
+.spotA3 {
+  position: absolute;
+  left: 0.6em;
+  top: 2em;
+}
+
+.spotA4 {
+  position: absolute;
+  left: 0.6em;
+  top: 2.5em;
+}
+
+.spotA5 {
+  position: absolute;
+  left: 0.6em;
+  top: 3.5em;
+}
+
+.spotB1 {
+  position: absolute;
+  left: 1.55em;
+  top: 0.5em;
+}
+
+.spotB2 {
+  position: absolute;
+  left: 1.55em;
+  top: 1em;
+}
+
+.spotB3 {
+  position: absolute;
+  left: 1.55em;
+  top: 2em;
+}
+
+.spotB4 {
+  position: absolute;
+  left: 1.55em;
+  top: 3em;
+}
+
+.spotB5 {
+  position: absolute;
+  left: 1.55em;
+  top: 3.5em;
+}
+
+.spotC1 {
+  position: absolute;
+  left: 2.5em;
+  top: 0.5em;
+}
+
+.spotC2 {
+  position: absolute;
+  left: 2.5em;
+  top: 1.5em;
+}
+
+.spotC3 {
+  position: absolute;
+  left: 2.5em;
+  top: 2em;
+}
+
+.spotC4 {
+  position: absolute;
+  left: 2.5em;
+  top: 2.5em;
+}
+
+.spotC5 {
+  position: absolute;
+  left: 2.5em;
+  top: 3.5em;
+}
+
+/* NEEDS TO MOVE */
+@media only screen and (max-width: 1300px) and (min-width: 767px) {
+  .ui.stackable.grid {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  #message {
+    width: calc(100vw - 30px);
+  }
+}
+
+.board {
+  height: calc(100vh - 205px);
+  overflow-y: auto;
+}
+
+.login {
+  padding-top: 50px;
+  width: 500px;
+}
+
+.scroll-1::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #f5f5f5;
+}
+
+.scroll-1::-webkit-scrollbar {
+  width: 3px;
+  background-color: #f5f5f5;
+}
+
+.scroll-1::-webkit-scrollbar-thumb {
+  background-color: #6536c8;
+}
+
+.ui .menu {
+  border-radius: 0px;
+}
+
+.ui.small.table {
+  border: 0.08em solid rgb(101, 54, 200);
+}
+
+.ui.small.table>thead>tr>th {
+  background: rgb(101, 54, 200);
+  color: white;
+}

packages/game-server/client/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><link href="/css/card.css" rel="stylesheet"/><script src="/js/card.js"></script><title>React Card Game</title><link href="/static/css/main.99fb8bac.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.b5c1919f.js"></script></body></html>

packages/game-server/client/js/card.js

@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+//*****************************************************************************
+// Do not remove this notice.
+//
+// Copyright 2001 by Mike Hall.
+// See http://www.brainjar.com for terms of use.                                                                        *
+//*****************************************************************************
+
+var minSize = 8;
+
+function resizeCards(d) {
+  var n;
+
+  // Change the font size on the "card" style class.
+
+  // DOM-compliant browsers.
+
+  if (document.styleSheets[1].cssRules) {
+    n = parseInt(document.styleSheets[1].cssRules[0].style.fontSize, 10);
+    document.styleSheets[1].cssRules[0].style.fontSize =
+      Math.max(n + d, minSize) + "pt";
+
+    // For NS 6.1, insert a dummy rule to force styles to be reapplied.
+
+    if (navigator.userAgent.indexOf("Netscape6/6.1") >= 0) {
+      document.styleSheets[1].insertRule(
+        null,
+        document.styleSheets[1].cssRules.length
+      );
+    }
+  } else if (document.styleSheets[1].rules[0]) {
+    // IE browsers.
+
+    n = parseInt(document.styleSheets[1].rules[0].style.fontSize, 10);
+    document.styleSheets[1].rules[0].style.fontSize =
+      Math.max(n + d, minSize) + "pt";
+  }
+
+  return false;
+}

packages/game-server/client/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}