Data model.

.editorconfig

@@ -0,0 +1,14 @@
+# top-most EditorConfig file
+root = true
+
+[*]
+# Unix-style newlines with a newline ending every file
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+indent_size = 2
+indent_style = space
+
+[*.{css,scss}]
+indent_size = 2

.gitignore

@@ -0,0 +1,16 @@
+.idea/
+.vscode/
+.DS_Store
+build/
+node_modules/
+config-schema.json
+npm-debug.log
+lib/
+_book
+.cache/
+dist/
+lerna-debug.log
+*.sqlite3
+
+projects/server/assets
+projects/server/bin

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org

lerna.json

@@ -0,0 +1,6 @@
+{
+  "lerna": "2.5.1",
+  "version": "1.0.0",
+  "npmClient": "yarn",
+  "useWorkspaces": true
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "turbo-hearts-scores",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "lerna run build",
+    "lint": "lerna run lint"
+  },
+  "devDependencies": {
+    "@types/body-parser": "^1.16.8",
+    "lerna": "^2.1.2",
+    "nodemon": "^1.17.1",
+    "parcel-bundler": "^1.3.1",
+    "prettier": "^1.9.2",
+    "tslint": "^5.8.0",
+    "tslint-config-prettier": "^1.6.0",
+    "tslint-plugin-prettier": "^1.3.0",
+    "tslint-react": "^3.2.0",
+    "typescript": "^2.6.2"
+  },
+  "workspaces": [
+    "projects/*"
+  ]
+}

projects/app/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react"]
+}

projects/app/.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org

projects/app/.postcssrc

@@ -0,0 +1,30 @@
+{
+  "plugins": {
+    "postcss-import": true,
+    "postcss-cssnext": {
+      "features": {
+        "customProperties": {
+          "variables": {
+            "base00": "#f7f9fb",
+            "base01": "#e5ebf1",
+            "base02": "#cbd6e2",
+            "base03": "#aabcce",
+            "base04": "#627e99",
+            "base05": "#405c79",
+            "base06": "#223b54",
+            "base07": "#0b1c2c",
+            "base08": "#bf8b56",
+            "base09": "#bfbf56",
+            "base0A": "#8bbf56",
+            "base0B": "#56bf8b",
+            "base0C": "#568bbf",
+            "base0D": "#8b56bf",
+            "base0E": "#bf568b",
+            "base0F": "#bf5656"
+          }
+        }
+      },
+      "warnForDuplicates": false
+    }
+  }
+}

projects/app/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@turbo-hearts-scores/app",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "parcel src/index.html",
+    "build": "parcel build src/index.html -d ../server/assets --public-url ./",
+    "lint": "tslint --fix 'src/**/*.ts*'"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^2.1.0",
+    "@types/qs": "^6.5.1",
+    "@types/react": "^16.0.31",
+    "@types/react-dom": "^16.0.3",
+    "@types/ws": "^3.2.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "parcel-bundler": "^1.3.1",
+    "postcss-cli": "^4.1.1",
+    "postcss-cssnext": "^3.0.2",
+    "postcss-import": "^11.0.0",
+    "tslint": "^5.8.0"
+  },
+  "dependencies": {
+    "@turbo-hearts-scores/shared": "*",
+    "js-cookie": "^2.2.0",
+    "qs": "^6.5.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "ws": "^3.3.3"
+  }
+}

projects/app/src/App.tsx

@@ -0,0 +1,64 @@
+import { GameList, getGameIdFromPathname, getUrlForGameId } from "@turbo-hearts-scores/shared";
+import * as Cookies from "js-cookie";
+import * as qs from "qs";
+import * as React from "react";
+import { GamePage } from "./pages/GamePage";
+import { JoinGamePage } from "./pages/JoinGamePage";
+import { SetUserPage } from "./pages/SetUserPage";
+
+export interface AppState {
+  user: string | undefined;
+  gameId: number | undefined;
+  activeGames: GameList | undefined;
+}
+
+export class App extends React.Component<{}, AppState> {
+  public state: AppState = {
+    user: Cookies.get("user"),
+    gameId: getGameIdFromPathname(window.location.pathname),
+    activeGames: undefined,
+  };
+
+  public async componentWillMount() {
+    if (!this.state.gameId) {
+      const fetchResponse = await fetch(window.location.origin + "/api/games");
+      const activeGames: GameList = await fetchResponse.json();
+      this.setState({ activeGames });
+    }
+  }
+
+  public render() {
+    const query = qs.parse(window.location.search.slice(1));
+    const user = query.user || this.state.user;
+
+    if (!user) {
+      return <SetUserPage setUser={this.handleSetUser} />;
+    }
+
+    if (this.state.gameId === undefined) {
+      if (this.state.activeGames !== undefined) {
+        return <JoinGamePage activeGames={this.state.activeGames} />;
+      }
+      return <div className="">Loading games</div>;
+    }
+
+    if (query.test) {
+      const url = getUrlForGameId(this.state.gameId);
+      return (
+        <div>
+          <iframe className="test-frame" src={url + "?user=TS"} />
+          <iframe className="test-frame" src={url + "?user=DC"} />
+          <iframe className="test-frame" src={url + "?user=TW"} />
+          <iframe className="test-frame" src={url + "?user=JC"} />
+        </div>
+      );
+    }
+
+    return <GamePage gameId={this.state.gameId} player={user} />;
+  }
+
+  private handleSetUser = (user: string) => {
+    Cookies.set("user", user, { expires: 365 });
+    this.setState({ user });
+  };
+}

projects/app/src/index.css

@@ -0,0 +1,101 @@
+/*
+https://github.com/parcel-bundler/parcel/issues/329
+Theme currently duplicated in .postcssrc.
+*/
+
+@import "./themes/base16-harmonic16-light.css";
+
+@import "./reset.css";
+@import "./pages/components/Chat.css";
+@import "./pages/components/PreGame.css";
+@import "./pages/components/Hand.css";
+@import "./pages/components/PlayerHand.css";
+@import "./pages/components/Tricks.css";
+
+body {
+    background: var(--base00);
+    color: var(--base06);
+    font-family: monospace;
+}
+
+.bg {
+    white-space: pre;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    max-width: 50%;
+    opacity: 0.15;
+    user-select: none;
+    margin: 20px;
+    z-index: -1;
+    font-size: 8px;
+}
+
+.turbo {
+    display: flex;
+    flex-direction: row;
+    min-height: 200px;
+}
+
+.pre-game,
+.game,
+.chat {
+    min-width: 100px;
+    padding: 10px;
+    overflow: auto;
+}
+
+.test-frame {
+    height: 200px;
+    width: 600px;
+    margin: 10px 10px 0;
+    border: 1px solid var(--base04);
+}
+
+a {
+  color: var(--base0C);
+}
+
+.set-user-page {
+  margin: 10px;
+}
+
+.join-game {
+  margin: 10px;
+  display: flex;
+
+  & .site-header {
+    width: 150px;
+    font-weight: 600;
+  }
+
+  & .site-header,
+  & .game-table {
+    margin: 10px;
+  }
+
+  & .table-header {
+    margin-bottom: 10px;
+  }
+
+  & td {
+    padding: 3px 8px;
+    border: 1px solid var(--base03);
+  }
+}
+
+._clubs {
+    color: var(--base0B);
+}
+
+._diamonds {
+    color: var(--base0C);
+}
+
+._hearts {
+    color: var(--base0F);
+}
+
+._spades {
+    color: var(--base07);
+}

projects/app/src/index.html

@@ -0,0 +1,30 @@
+<html>
+<head>
+  <base href="/">
+  <link rel="stylesheet" type="text/css" href="index.css">
+</head>
+<body>
+<div id="app"></div>
+<script src="index.tsx"></script>
+</div>
+<pre class="bg">
+
+                                            tttt            iiii
+                                         ttt:::t           i::::i
+                                         t:::::t            iiii
+                                         t:::::t
+  aaaaaaaaaaaaa  nnnn  nnnnnnnn    ttttttt:::::ttttttt    iiiiiii        rrrrr   rrrrrrrrr   uuuuuu    uuuuuunnnn  nnnnnnnn
+  a::::::::::::a n:::nn::::::::nn  t:::::::::::::::::t    i:::::i        r::::rrr:::::::::r  u::::u    u::::un:::nn::::::::nn
+  aaaaaaaaa:::::an::::::::::::::nn t:::::::::::::::::t     i::::i        r:::::::::::::::::r u::::u    u::::un::::::::::::::nn
+           a::::ann:::::::::::::::ntttttt:::::::tttttt     i::::i        rr::::::rrrrr::::::ru::::u    u::::unn:::::::::::::::n
+    aaaaaaa:::::a  n:::::nnnn:::::n      t:::::t           i::::i         r:::::r     r:::::ru::::u    u::::u  n:::::nnnn:::::n
+  aa::::::::::::a  n::::n    n::::n      t:::::t           i::::i         r:::::r     rrrrrrru::::u    u::::u  n::::n    n::::n
+ a::::aaaa::::::a  n::::n    n::::n      t:::::t           i::::i         r:::::r            u::::u    u::::u  n::::n    n::::n
+a::::a    a:::::a  n::::n    n::::n      t:::::t    tttttt i::::i         r:::::r            u:::::uuuu:::::u  n::::n    n::::n
+a::::a    a:::::a  n::::n    n::::n      t::::::tttt:::::ti::::::i  tsts  r:::::r            u:::::::::::::::uun::::n    n::::n
+a:::::aaaa::::::a  n::::n    n::::n      tt::::::::::::::ti::::::i ts::ts r:::::r             u:::::::::::::::un::::n    n::::n
+ a::::::::::aa:::a n::::n    n::::n        tt:::::::::::tti::::::i ts::ts r:::::r              uu::::::::uu:::un::::n    n::::n
+  aaaaaaaaaa  aaaa nnnnnn    nnnnnn          ttttttttttt  iiiiiiii tjsts  rrrrrrr                uuuuuuuu  uuuunnnnnn    nnnnnn
+</pre>
+</body>
+</html>

projects/app/src/index.tsx

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as ReactDom from "react-dom";
+import { App } from "./App";
+
+ReactDom.render(<App />, document.getElementById("app"));