global chat via socket.io

[browser-rts.git] / public / game.html

diff --git a/public/game.html b/public/game.html
index 054be5f4d59ef6721bafb729803d22bced34f6d1..b288922779efdf977b856fb89516840fddf0104b 100644 (file)
--- a/public/game.html
+++ b/public/game.html
@@ -11,6 +11,7 @@
     <script src="https://unpkg.com/htmx.org@1.7.0"
         integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous"
         defer></script>
+    <script src="/socket.io/socket.io.js"></script>
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/augmented-ui@2/augmented-ui.min.css">
     <link rel="stylesheet" href="/scifi.css">
     <link rel="stylesheet" href="/stylesheet.css">
@@ -59,10 +60,25 @@
             <div id="main" data-augmented-ui="tl-clip tr-clip br-clip-x bl-clip border">
 
             </div>
+            <div id="chat" data-augmented-ui="tl-2-clip-y tr-clip-x border">
+              <div id="chat-messages"></div>
+              <form id="chat-form" hx-post="/chat" class="row">
+                <input type="text" name="message" id="chat-input" class="col">
+                <button type="submit" class="col">Send</button>
+              </form>
+            </div>
         </div>
     </div>
     <footer>
         A project by <a href="https://xangelo.ca">xangelo</a>
     </footer>
+    <script>
+      const ws= io();
+      ws.on('/chat-message', msg => {
+              document.querySelector('#chat-form').reset();
+              const $el = document.querySelector('#chat-messages');
+              $el.innerHTML = msg + $el.innerHTML;
+            });
+    </script>
 </body>
 </html>