3 files changed, 47 insertions, 24 deletions
diff --git a/assets/client.js b/assets/client.js
index f215a9c..f5558a7 100644
--- a/assets/client.js
+++ b/assets/client.js
@@ -6,7 +6,8 @@ window.elem = {
   bcont: document.getElementById("board-container"),
   board: document.getElementById("board"),
   cursor_frame: document.getElementById("cursor-frame"),
-  volslider: document.getElementById("volslider")
+  volslider: document.getElementById("volslider"),
+  chat_div: document.getElementById("chat-div")
 };
 const U32MAX = Math.pow(2,32) - 1;
 
@@ -124,6 +125,7 @@ function connect() {
           room.bconf.h = Number(dims[1]);
           room.bconf.mine_ratio = fields[5];
           createCursor(player.uid, name, room.identity.clr);
+          setup_chat(name, room.name);
         } break;
         case "win": {
           elem.info.innerHTML = "You win! Click here to play again.";
@@ -236,8 +238,8 @@ function pageToBoard(x,y) {
 
 function boardToPage(b) {
   return [
-    b[0] * (room.cbounds.w / U32MAX) + room.cbounds.ox,
-    b[1] * (room.cbounds.h / U32MAX) + room.cbounds.ox
+    b[0] * (room.cbounds.w / U32MAX),
+    b[1] * (room.cbounds.h / U32MAX)
   ];
 }
 
@@ -324,3 +326,11 @@ volChanged();
     heartbeat();
   }, 30000);
 })();
+
+function setup_chat(name, room_name) {
+  let chat_iframe = document.createElement("iframe");
+  // FIXME the url should come from the server
+  chat_iframe.setAttribute("src", "/gamja?channels=" + encodeURIComponent(`#mines-${room_name}`) + "&nick=" + encodeURIComponent(name));
+  elem.chat_div.appendChild(chat_iframe);
+}
+
diff --git a/assets/room.html b/assets/room.html
index e526c8b..f8a3f1b 100644
--- a/assets/room.html
+++ b/assets/room.html
@@ -7,25 +7,29 @@
     <link rel="stylesheet" type="text/css" href="../style.css">
   </head>
   <body>
-    <div>
-      <div id="board-container">
-      <span id="board"></span>
-      <div id="cursor-frame"></div>
-      </div>
-      <form id="identform" style="display: none" action="javascript:;" onsubmit="join()">
-        <input id="name-in" type="text" value="anon">
-        <input id="clr-in" type="color" value="#33c033"></input>
-        <button>Join</button>
-      </form>
-      <div class="statusline">
-        <p id="miscinfo"></p>
-        <div>
-          <span id="volbutton" style="margin-right: 0">🔈</span>
-          <input id="volslider" type="range" min="0" max="1" step="0.01"></div>
-        <a href="javascript:navigator.clipboard.writeText(window.location.href);alert('copied link to clipboard');">🔗share</p>
-        <a href="javascript:clear_ident();">new identity</p>
-        <a href="..">back to lobby</a>
+    <form id="identform" style="display: none" action="javascript:;" onsubmit="join()">
+      <input id="name-in" type="text" value="anon">
+      <input id="clr-in" type="color" value="#33c033"></input>
+      <button>Join</button>
+    </form>
+    <div id="splitscreen">
+      <div>
+        <div id="board-container">
+          <span id="board"></span>
+  <div id="cursor-frame"></div>
+        </div>
+        <div class="statusline">
+          <p id="miscinfo"></p>
+          <div>
+            <span id="volbutton" style="margin-right: 0">🔈</span>
+            <input id="volslider" type="range" min="0" max="1" step="0.01">
+          </div>
+          <a href="javascript:navigator.clipboard.writeText(window.location.href);alert('copied link to clipboard');">🔗share</p>
+          <a href="javascript:clear_ident();">new identity</p>
+          <a href="..">back to lobby</a>
+        </div>
       </div>
+      <div id="chat-div"></div>
     </div>
   </body>
   <script src="https://unpkg.com/fflate"></script>
diff --git a/assets/style.css b/assets/style.css
index 4d12602..a5cf01c 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -15,10 +15,19 @@
   top: 0px;
   left: 0px;
 }
+#splitscreen {
+  display: flex;
+  justify-content: flex-end;
+}
+#chat-div iframe {
+  border: none;
+  width: 20vw;
+  height: 100vh;
+}
 
 body {
   font-family: vt323, monospace;
-  font-size: 20pt;
+  font-size: 14pt;
   background-color: black;
   color: white;
   margin: 0;
@@ -32,7 +41,7 @@ body {
   user-select: none;
 }
 .cursor {
-  font-size: 20pt;
+  font-size: 18pt;
   padding: 0;
   pointer-events: none;
   z-index: 1;
@@ -59,7 +68,7 @@ a {
   display: flex;
   position: sticky;
   background-color: black;
-  width: 96vw;
+  width: 72vw;
   padding: 0 2vw;
   bottom: 0px;
   left: 0px;