Add QR code, UI toggle to interface

README.md

@@ -1,2 +1,7 @@
 # Ably Arcade
 A collection of games built with Ably at their core.
+
+## Requirements
+
+- [Azure Functions Core Tools](?tabs=v4%2Clinux%2Ccsharp%2Cportal%2Cbash)
+

app/ArcadeUI.ts

@@ -1,5 +1,5 @@
-import { GameRunner } from "./games/GameRunner";
-import { ArcadeContestHandler } from "./arcade-ui-helpers/ArcadeContestHandler";
+import {ArcadeContestHandler} from "./arcade-ui-helpers/ArcadeContestHandler";
+import {GameRunner} from "./games/GameRunner";
 
 export class ArcadeUI {
   public arcadeInstanceId: string;
@@ -25,23 +25,27 @@ export class ArcadeUI {
     this.gameRoot = document.getElementById("game-root") as HTMLElement;
 
     this.spectateButton = document.getElementById("spectate") as HTMLElement;
-    this.spectatorControls = document.getElementById("spectatorControls") as HTMLElement;
-    const spectatorStart = document.getElementById("spectatorControlsStartContest");
-
-    spectatorStart.addEventListener("click", () => {
-      this.startContest();
+    this.spectatorControls =
+        document.getElementById("spectatorControls") as HTMLElement;
+    const spectatorStart =
+        document.getElementById("spectatorControlsStartContest");
+    const qrContainer = document.querySelector(".qr-code-container");
+
+    spectatorStart.addEventListener("click", () => { this.startContest(); });
+
+    qrContainer.addEventListener("click", (e) => {
+        const parent = e.target.closest(".qr-code-container")
+      console.log(123, e.target, parent)
+      parent.classList.toggle("minimise");
     });
 
-    this.contestHandler = new ArcadeContestHandler(this.arcadeInstanceId, () => {
-      this.onEndContest();
-    });
+    this.contestHandler = new ArcadeContestHandler(
+        this.arcadeInstanceId, () => { this.onEndContest(); });
 
     this.eventListenerController = new AbortController();
   }
 
-  public setPlayerName(name: string) {
-    this.playerName = name;
-  }
+  public setPlayerName(name: string) { this.playerName = name; }
 
   public showGame(spectator: boolean = false) {
     this.spectator = spectator;
@@ -82,13 +86,12 @@ export class ArcadeUI {
       this.eventListenerController = new AbortController();
     }
 
-    const cancellationToken = { signal: this.eventListenerController.signal };
+    const cancellationToken = {signal : this.eventListenerController.signal};
 
     let captureMouse = false;
 
-    this.gameRoot.addEventListener("mousedown", (e) => {
-      captureMouse = true;
-    }, cancellationToken);
+    this.gameRoot.addEventListener("mousedown", (e) => { captureMouse = true; },
+                                   cancellationToken);
 
     this.gameRoot.addEventListener("mousemove", (e) => {
       if (captureMouse) {
@@ -111,10 +114,14 @@ export class ArcadeUI {
       runner.keyboard.removeTouch();
     }, cancellationToken);
 
-    this.gameRoot.addEventListener("touchmove", (e) => {
-      e.preventDefault();
-      runner.keyboard.touchLocation = touchEventsToCoords(e);
-    }, cancellationToken);  
+    this.gameRoot.addEventListener(
+      "touchmove",
+      (e) => {
+        e.preventDefault();
+        runner.keyboard.touchLocation = touchEventsToCoords(e);
+      },
+      cancellationToken
+    );
   }
 }
 

app/HubSpotUi.ts

@@ -1,22 +1,22 @@
 export class HubSpotUi {
-    public static createForm(onSubmit) {
-        const forms = window['hbspt'].forms;
+  public static createForm(onSubmit) {
+    const forms = window["hbspt"].forms;
 
-        forms.create({
-          region: "na1",
-          portalId: "6939709",
-          formId: "f8095b78-3876-4595-be1c-ec04d3789d5a",
-          target: "#signup-form"
-        });
+    fetch("/hubSpotConfig.json")
+      .then((r) => r.json())
+      .then(forms.create);
 
-        window.addEventListener('message', event => {
-            if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
-                onSubmit(event);
-            }
-        });
-    }
+    window.addEventListener("message", (event) => {
+      if (
+        event.data.type === "hsFormCallback" &&
+        event.data.eventName === "onFormSubmit"
+      ) {
+        onSubmit(event);
+      }
+    });
+  }
 
-    public static hideForm() {
-        document.getElementById("signup-form").style.display = "none";
-    }
+  public static hideForm() {
+    document.getElementById("signup-form").style.display = "none";
+  }
 }

app/hubSpotConfig.json

@@ -0,0 +1,7 @@
+{
+  "comment": "Qcon form attributes",
+  "region": "na1",
+  "portalId": "6939709",
+  "formId": "f8095b78-3876-4595-be1c-ec04d3789d5a",
+  "target": "#signup-form"
+}

app/index.html

@@ -1,79 +1,99 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Ably Arcade</title>
 
-<head>
-  <meta charset="utf-8" />
-  <title>Ably Arcade</title>
+    <script
+      charset="utf-8"
+      type="text/javascript"
+      src="//js.hsforms.net/forms/v2.js"
+    ></script>
+    <script src="./script.ts" type="module"></script>
 
-  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
-  <script src="./script.ts" type="module"></script>
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="icon" type="image/png" href="assets/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta property="og:title" content="Ably Arcade" />
+    <meta
+      property="og:description "
+      content="The real home of realtime games"
+    />
+    <meta property="og:url" content="https://arcade.ably.dev/" />
+    <meta property="og:image" content="https://arcade.ably.dev/og.png" />
 
-  <link rel="stylesheet" href="./style.css" />
-  <link rel="icon" type="image/png" href="assets/favicon.ico">
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta property="og:title" content="Ably Arcade" />
-  <meta property="og:description " content="The real home of realtime games" />
-  <meta property="og:url" content="https://arcade.ably.dev/" />
-  <meta property="og:image" content="https://arcade.ably.dev/og.png" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@ablyrealtime" />
+    <meta name="twitter:title" content="Ably Arcade" />
+    <meta
+      name="twitter:description"
+      content="The real home of realtime games"
+    />
+    <meta name="twitter:image" content="https://arcade.ably.dev/og.png" />
+  </head>
 
-</head>
-
-<body id="body">
-  <h1>Ably arcade</h1>
-  <div id="signup-form"></div>
-  <div id="arcade">
-    <div id="spectatorControls" class="spectator-controls">
-      <button class="start" id="spectatorControlsStartContest">Start Game</button>
-    </div>
+  <body id="body">
+    <h1>Ably arcade</h1>
+    <div id="signup-form"></div>
+    <div id="arcade">
+      <div id="spectatorControls" class="spectator-controls">
+        <button class="start" id="spectatorControlsStartContest">
+          Start Game
+        </button>
+      </div>
 
-    <div class="layout">
-      <div class="scoreboard-container" id="global-scoreboard-container">
+      <div class="layout">
+        <div class="scoreboard-container" id="global-scoreboard-container">
           <section class="scoreboard">
-          <h2>All High Scores</h2>
-          <table id="global-scoreboard">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th class="score-number">Score</th>
-              </tr>
-            </thead>
-            <tbody></tbody>
-          </table>
-        </section>
-      </div>
-      <div class="scoreboards">
-        <div class="timer" id="timer">
-          00:00
+            <h2>All High Scores</h2>
+            <table id="global-scoreboard">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th class="score-number">Score</th>
+                </tr>
+              </thead>
+              <tbody></tbody>
+            </table>
+            <div class="qr-code-container">
+              <div class="qr-code-banner">
+                <img src="assets/qr-url-code.png" alt="" />
+                <strong>https://arcade.ably.dev/</strong>
+              </div>
+              <div class="qr-code-icon">
+                <img src="assets/qr-icon.svg" alt="" />
+              </div>
+            </div>
+          </section>
         </div>
+        <div class="scoreboards">
+          <div class="timer" id="timer">00:00</div>
           <section class="scoreboard">
-          <h2>This Game Scores</h2>
-          <table id="scoreboard">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th class="score-number">Score</th>
-              </tr>
-            </thead>
-            <tbody></tbody>
-          </table>
-        </section>
+            <h2>This Game Scores</h2>
+            <table id="scoreboard">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th class="score-number">Score</th>
+                </tr>
+              </thead>
+              <tbody></tbody>
+            </table>
+          </section>
+        </div>
+        <div class="canvas-holder" id="game-root"></div>
       </div>
-       <div class="canvas-holder" id="game-root"></div>
-    </div>
-
-    <div class="player-messages" id="player-messages"></div>
-
-  </div>
 
-  <div id="spectate">Let me spectate</div>
-
-  <template id="scoreboard-row-template">
-    <tr>
-      <td data-name>Fred</td>
-      <td data-score class="score-number">100</td>
-    </tr>
-  </template>
+      <div class="player-messages" id="player-messages"></div>
+    </div>
 
-</body>
+    <div id="spectate">Let me spectate</div>
 
+    <template id="scoreboard-row-template">
+      <tr>
+        <td data-name>Fred</td>
+        <td data-score class="score-number">100</td>
+      </tr>
+    </template>
+  </body>
 </html>