From 364aa9fcd3556fb45a76e05ed0b8f20f421510cb Mon Sep 17 00:00:00 2001
From: Korey Hinton <2801399+koreyhinton@users.noreply.github.com>
Date: Sat, 23 Nov 2024 11:38:43 -0500
Subject: [PATCH 1/2] Started multiplayer ui

---
 components/sd-game-menu.js | 38 ++++++++++++++++++++++++++++++++++++++
 services/game-menu.js      |  4 ++++
 2 files changed, 42 insertions(+)

diff --git a/components/sd-game-menu.js b/components/sd-game-menu.js
index f411e19..8ce3ede 100644
--- a/components/sd-game-menu.js
+++ b/components/sd-game-menu.js
@@ -83,6 +83,23 @@
             place-self: end;
           }
 
+          .menu-field a, .menu-field input {
+            font-size: 16px;
+            text-transform: uppercase;
+            font-family: "Iceland", sans-serif;
+            place-self: end;
+            padding-right: 4px;
+          }
+
+          .menu-field a {
+            color: rgba(238, 153, 18, 0.5);
+          }
+
+          .menu-field input {
+            background-color: rgba(10, 10, 10, 0.5);
+            color: white;
+          }
+
           #menuButton {
             outline: none;
             border: none;
@@ -167,6 +184,7 @@
           </div>
           <button class="menu-option">Start Game</button>
           <button class="menu-option">Options</button>
+          <button class="menu-option">Multiplayer</button>
           <button class="menu-option">Exit</button>
         </div>
         <div class="menu ${page !== "options" ? "hidden" : ""}">
@@ -177,6 +195,26 @@
           <input oninput=${(event) => { this.setGameSound(event.target.checked) }} ref=${this.checkbox} type="checkbox" />
           <button class="menu-option">Back</button>
         </div>
+        <div class="menu ${page !== "multiplayer" ? "hidden" : ""}">
+            <div class="menu-title">Multiplayer</div>
+            <span class="menu-version">Join a game</span>
+            <span class="menu-field">
+              <a>Game Name: </a>
+              <input name="multi-game-name" type="text" placeholder="CoolGamers_${Math.floor(Math.random() * 500)}" />
+            </span>
+            <span class="menu-field">
+              <a>Display Name: </a>
+              <input type="text" placeholder="BestPlayer${Math.floor(Math.random() * 500)}" />
+            </span>
+            <button class="menu-option">Join</button>
+            <button class="menu-option">Back</button>
+        </div>
+        <div class="menu ${page !== "join" ? "hidden" : ""}">
+            <div class="menu-title">Joining Game</div>
+            <span class="menu-version">Waiting for players</span>
+            <button class="menu-option" disabled>Start</button>
+            <button class="menu-option">Back</button>
+        </div>
       `;
     }
   }
diff --git a/services/game-menu.js b/services/game-menu.js
index 5ec7060..5d41a04 100644
--- a/services/game-menu.js
+++ b/services/game-menu.js
@@ -55,6 +55,10 @@ class GameMenu {
       this.menu.setAttribute("page", "options");
     } else if (option?.toLowerCase() === "back") {
       this.menu.setAttribute("page", "menu");
+    } else if (option?.toLowerCase() === "join") {
+      this.menu.setAttribute("page", "join");
+    } else if (option?.toLowerCase() === "multiplayer") {
+      this.menu.setAttribute("page", "multiplayer");
     } else if (option?.toLowerCase() === "exit") {
       this.closeMenu();
     }

From 96a16d749305ec24a984b338d4f0f2aa1b5593f9 Mon Sep 17 00:00:00 2001
From: Korey Hinton <2801399+koreyhinton@users.noreply.github.com>
Date: Sun, 24 Nov 2024 17:03:48 -0500
Subject: [PATCH 2/2] game scheduling service menu option

---
 assets/scripts/game-data.js |  1 +
 components/sd-game-menu.js  | 60 +++++++++++++++++++++++++++++++++----
 server/dummy.js             | 18 +++++++++++
 services/game-menu.js       | 24 +++++++++++++++
 4 files changed, 97 insertions(+), 6 deletions(-)
 create mode 100644 server/dummy.js

diff --git a/assets/scripts/game-data.js b/assets/scripts/game-data.js
index 1ddfe06..37cca70 100644
--- a/assets/scripts/game-data.js
+++ b/assets/scripts/game-data.js
@@ -15,6 +15,7 @@ GAME_DATA = {
   bulletCollisions: [],
   deathTicks: -1,
   maxDeathTicks: 48,
+  multiplayer: false,
   allScenes: [...ALL_SCENES],
   cs: LOADING_SCENE,
   gameOver: false,
diff --git a/components/sd-game-menu.js b/components/sd-game-menu.js
index 8ce3ede..36bd278 100644
--- a/components/sd-game-menu.js
+++ b/components/sd-game-menu.js
@@ -5,7 +5,7 @@
 
   class SDGameMenu extends Component {
     static tagName = "sd-game-menu";
-    static observedAttributes = ["page"];
+    static observedAttributes = ["page", "players"];
     input = createRef();
     checkbox = createRef();
 
@@ -27,7 +27,26 @@
       window.dispatchEvent(new CustomEvent("volume-changed"));
     }
 
-    render({ page }) {
+    setGame(val) {
+      localStorage.setItem("game", val);
+    }
+
+    setDisplayName(val) {
+      localStorage.setItem("displayName", val);
+    }
+
+    setScheduler(val) {
+      localStorage.setItem("scheduler", val);
+    }
+
+    render({ page, players }) {
+      var game = localStorage.getItem("game");
+      var displayName = localStorage.getItem("displayName");
+      var scheduler = localStorage.getItem("scheduler");
+      var player1 = players == null ? "Waiting..." : players.split(",")[0];
+      var player2 = players == null ? "Waiting..." : players.split(",")[1];
+      var player3 = players == null ? "Waiting..." : players.split(",")[2];
+
       return html`
         <style>
           [popover] {
@@ -91,13 +110,14 @@
             padding-right: 4px;
           }
 
-          .menu-field a {
+          .menu-field a, .menu-field ol {
             color: rgba(238, 153, 18, 0.5);
           }
 
           .menu-field input {
             background-color: rgba(10, 10, 10, 0.5);
             color: white;
+            width: 100%;
           }
 
           #menuButton {
@@ -200,11 +220,27 @@
             <span class="menu-version">Join a game</span>
             <span class="menu-field">
               <a>Game Name: </a>
-              <input name="multi-game-name" type="text" placeholder="CoolGamers_${Math.floor(Math.random() * 500)}" />
+              <input name="multi-game-name" type="text"
+                value=${game}
+                placeholder="CoolGamers_${Math.floor(Math.random() * 500)}"
+                oninput=${(event) => { this.setGame(event.target.value); }}
+              />
             </span>
             <span class="menu-field">
               <a>Display Name: </a>
-              <input type="text" placeholder="BestPlayer${Math.floor(Math.random() * 500)}" />
+              <input type="text"
+                value=${displayName}
+                placeholder="BestPlayer${Math.floor(Math.random() * 500)}"
+                oninput=${(event) => { this.setDisplayName(event.target.value); }}
+              />
+            </span>
+            <span class="menu-field">
+              <a>Game Scheduling Service Url: </a>
+              <input type="text"
+                value=${scheduler}
+                placeholder="https://localhost:8080"
+                oninput=${(event) => { this.setScheduler(event.target.value); }}
+              />
             </span>
             <button class="menu-option">Join</button>
             <button class="menu-option">Back</button>
@@ -212,7 +248,19 @@
         <div class="menu ${page !== "join" ? "hidden" : ""}">
             <div class="menu-title">Joining Game</div>
             <span class="menu-version">Waiting for players</span>
-            <button class="menu-option" disabled>Start</button>
+            <div class="menu-field">
+              <a>Game: ${game}</a><br/>
+              <a>Display Name: ${displayName}</a><br/>
+              <a>Scheduler Url: ${scheduler}</a>
+            </div>
+            <div class="menu-field">
+              <ol>
+                <li>${player1}</li>
+                <li>${player2}</li>
+                <li>${player3}</li>
+              </ol>
+            </div>
+            <button class="menu-option ${players == null ? "hidden" : ""}">Start</button>
             <button class="menu-option">Back</button>
         </div>
       `;
diff --git a/server/dummy.js b/server/dummy.js
new file mode 100644
index 0000000..1aa196f
--- /dev/null
+++ b/server/dummy.js
@@ -0,0 +1,18 @@
+const http = require('http');
+
+const hostname = 'localhost';
+const port = 8080;
+
+const server = http.createServer((req, res) => {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/json');
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
+  res.setHeader('Access-Control-Max-Age', 2592000);
+  res.setHeader('Access-Control-Allow-Headers', 'content-type');
+  res.end('{"players": "Bob,,"}');
+});
+
+server.listen(port, hostname, () => {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});
diff --git a/services/game-menu.js b/services/game-menu.js
index 5d41a04..b4fe6d1 100644
--- a/services/game-menu.js
+++ b/services/game-menu.js
@@ -48,6 +48,26 @@ class GameMenu {
     this.backdrop.style.display = "none";
   }
 
+  async schedule() {
+    try {
+      var url = localStorage.getItem("scheduler");
+      if (url.endsWith("/"))
+        url = url.substring(0, url.length-1);
+      const response = await fetch(url + "/schedule");
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const data = await response.json();
+      console.log(data);
+
+      setTimeout(() => {
+        this.menu.setAttribute("players", data.players);
+      }, 3000);
+    } catch (error) {
+      console.error('There was a problem with the fetch operation:', error);
+    }
+  }
+
   handleMenuOptionClick(event) {
     const option = event.target.textContent;
     console.log(`Selected option: ${option}`);
@@ -57,8 +77,12 @@ class GameMenu {
       this.menu.setAttribute("page", "menu");
     } else if (option?.toLowerCase() === "join") {
       this.menu.setAttribute("page", "join");
+      this.schedule();
     } else if (option?.toLowerCase() === "multiplayer") {
       this.menu.setAttribute("page", "multiplayer");
+    } else if (option?.toLowerCase() === "start") {
+      window.GAME_DATA.multiplayer = true;
+      this.closeMenu();
     } else if (option?.toLowerCase() === "exit") {
       this.closeMenu();
     }