improve remote ui

remote/.env

@@ -1,2 +1,2 @@
-lAPI_BASE_URL=http://192.168.0.107:8000/api
+API_BASE_URL=http://192.168.0.107:8000/api
 CORS=true

remote/package.json

@@ -21,6 +21,6 @@
     "webpack-dev-server": "^4.13.3"
   },
   "dependencies": {
-    "lit": "^2.7.4"
+    "lit": "^3.0.1"
   }
 }

remote/src/actions/game-configuration.ts

@@ -1,6 +1,7 @@
 import { sendStringToGame, sendToGame } from "../api/game";
 import { GamePhase, state } from "../state/state";
 import { Action } from "./actions";
+import { ConfigureGameChannel } from "./webrtc";
 
 export class UpdatePlayerName implements Action {
   playerName: string;
@@ -52,3 +53,15 @@ function generateRandomId(): string {
 
   return base64;
 }
+
+export class EnterGame implements Action {
+  roomId: string;
+
+  constructor(roomId: string) {
+    this.roomId = roomId;
+  }
+
+  execute(): void {
+    new ConfigureGameChannel(this.roomId).execute();
+  }
+}

remote/src/state/displayState.ts

@@ -3,13 +3,15 @@ import { DisplaySettings, GameState, State } from "./state";
 export interface DisplayState {
   route: string;
   gameState: GameState;
+  isInRoom: boolean;
   displaySettings: DisplaySettings;
 }
 
 export function computeDisplayState(state: State): DisplayState {
   return {
     route: state.route,
     gameState: state.game.state,
+    isInRoom: state.game.roomId != null,
     displaySettings: state.displaySettings,
   };
 }

remote/src/view/game-view.ts

@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators.js";
 import { GamePhase, State } from "../state/state";
 import "./navbar";
 import "./pages/homepage";
-import "./pages/remote";
+import "./pages/game-remote";
 import "./pages/game-configuration";
 import { DisplayState } from "../state/displayState";
 
@@ -16,13 +16,14 @@ export class View extends LitElement {
     switch (this.state.gameState.phase) {
       case GamePhase.BeforeNextGame:
         return html`
+          <nav-bar></nav-bar>
           <game-configuration
             .state=${this.state.gameState}
           ></game-configuration>
         `;
       case GamePhase.InGame:
         console.log("InGame phase updated");
-        return html` <remote-canvas .state=${this.state}></remote-canvas> `;
+        return html` <game-remote .state=${this.state}></game-remote> `;
       default:
         return html` <p>this is not normal</p> `;
     }

remote/src/view/navbar.ts

@@ -1,23 +1,39 @@
 import { html, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { trigger, Route } from "../actions/actions";
-import { DisplayState } from "../state/displayState";
+import { StyledElement } from "./style/styled-element";
 
 @customElement("nav-bar")
 export class Navbar extends LitElement {
-  static styles = css`
-    li {
-      color: blue;
-    }
-  `;
+  static styles = [
+    StyledElement.styles,
+    css`
+      ul {
+        list-style: none;
+        display: flex;
+        background-color: #000000;
+        justify-content: center;
+        align-items: center;
+      }
 
-  @property({ type: Object, reflect: true })
-  state!: DisplayState;
+      li {
+        margin: 0;
+        padding: 10px;
+      }
+
+      li img {
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+      }
+    `,
+  ];
 
   render() {
     return html`
       <ul>
-        <li><button @click=${() => trigger(new Route("/"))}>Home</button></li>
+        <li><img src="emoji-icon.png" @click=${() =>
+          trigger(new Route("/"))}></button></li>
 
         <li>
           <button @click=${() => trigger(new Route("/login"))}>Login</button>

remote/src/view/pages/remote.ts → remote/src/view/pages/game-remote.ts

@@ -3,8 +3,8 @@ import { customElement, property } from "lit/decorators.js";
 import { CanvasData, ControllerId } from "../../actions/remote";
 import { DisplayState } from "../../state/displayState";
 
-@customElement("remote-canvas")
-export class CanvasTouch extends LitElement {
+@customElement("game-remove")
+export class GameRemote extends LitElement {
   static get styles() {
     return css`
       #remote {

remote/src/view/pages/homepage.ts

@@ -1,16 +1,62 @@
 import { html, css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { Authentication } from "../../state/state";
+import { DisplayState } from "../../state/displayState";
+import { StyledElement } from "../style/styled-element";
+import { trigger } from "../../actions/actions";
+import { EnterGame } from "../../actions/game-configuration";
 
 @customElement("home-page")
 export class HomePage extends LitElement {
-  static styles = css`
-    li {
-      color: blue;
-    }
-  `;
+  static styles = [
+    StyledElement.styles,
+    css`
+      form,
+      div {
+        text-align: center;
+      }
+      input {
+        margin: 10px 0;
+      }
+    `,
+  ];
+
+  @property({ type: Object })
+  state!: DisplayState;
 
   render() {
-    return html` The is the homepage `;
+    return html`
+      <nav-bar .state=${this.state}></nav-bar>
+      ${this.renderPage(this.state.route)}
+    `;
+  }
+
+  renderPage(route: string) {
+    switch (route) {
+      case "/":
+        return html`
+          <form
+            @submit=${() =>
+              trigger(
+                new EnterGame(
+                  this.shadowRoot!.getElementById("inputField")!.innerHTML
+                )
+              )}
+          >
+            <input
+              type="text"
+              id="inputField"
+              placeholder="Enter game room ID"
+              required
+            />
+            <br />
+            <button type="submit">Join room</button>
+          </form>
+          <div>
+            <p>Or</p>
+            <button>Scan QR Code</button>
+          </div>
+        `;
+    }
   }
 }

remote/src/view/style/styled-element.ts

@@ -0,0 +1,26 @@
+import { LitElement, html, css, CSSResultGroup } from "lit";
+import { customElement } from "lit/decorators.js";
+
+export abstract class StyledElement extends LitElement {
+  static styles = css`
+    button {
+      color: black;
+      font-size: 30px;
+      background-color: #ffbe0a;
+      border-radius: 10px;
+    }
+
+    button:hover {
+      background-color: #ffdf9a;
+    }
+
+    input {
+      font-size: 20px;
+      border-radius: 10px;
+    }
+
+    p {
+      font-size: 20px;
+    }
+  `;
+}

remote/src/view/view.ts

@@ -23,20 +23,10 @@ export class View extends LitElement {
   }
 
   render() {
-    return html` <div>
-      <nav-bar .state=${this.state}></nav-bar>
-      ${this.renderPage(this.state.route)}
-    </div>`;
-  }
-
-  renderPage(route: string) {
-    console.log("rerendering page (root view)", this.state.gameState.isReady);
-    switch (route) {
-      case "/":
-        return html`
-          <home-page></home-page>
-          <game-view .state=${this.state}></game-view>
-        `;
+    if (this.state.isInRoom) {
+      return html`<game-view .state=${this.state}></game-view>`;
+    } else {
+      return html` <home-page .state=${this.state}></home-page> `;
     }
   }
 }