From 0fc8953a69b099d5b65801f264019e5c3db7ec8a Mon Sep 17 00:00:00 2001
From: videogame hacker <half-kh-hacker@hackery.site>
Date: Fri, 29 Apr 2022 23:41:33 +0100
Subject: [PATCH] Textual feedback for personal colour

---
 frontend/index.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index 371b4a9..8ff978d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -30,7 +30,9 @@
           required
         />
 
-        <label for="join-session-colour">Personal Colour:</label>
+        <label id="join-session-colour-label" for="join-session-colour">
+          Personal Colour:
+        </label>
         <input type="color" id="join-session-colour" value="#ffffff" required />
 
         <label for="join-session-id">Session ID:</label>
@@ -65,5 +67,18 @@
     </div>
 
     <script type="module" src="/main.mjs?v=bfdcf2"></script>
+    <script>
+      const updateColourLabel = () => {
+        const colour = document.querySelector("#join-session-colour").value;
+        document.querySelector(
+          "#join-session-colour-label"
+        ).textContent = `Personal Colour: ${colour}`;
+      };
+
+      document
+        .querySelector("#join-session-colour")
+        .addEventListener("input", updateColourLabel);
+      updateColourLabel();
+    </script>
   </body>
 </html>