1 files changed, 73 insertions, 13 deletions

diff --git a/page.html b/page.html
index 75bb7fd..2b7590d 100644
--- a/page.html
+++ b/page.html
@@ -19,7 +19,6 @@
       background-color: black;
       color: white;
     }
-
     .unsel {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -28,9 +27,11 @@
     -ms-user-select: none;
     user-select: none;
     }
-
-    .cursor * {
+    .cursor {
       font-size: 16pt;
+      pointer-events: none;
+    }
+    .cursor * {
       margin: 0 0;
     }
   </style>
@@ -42,26 +43,37 @@
       <p id="miscinfo">Loading...</p>
     </div>
   </body>
-  <script src="https://p.masba.net:8443/ansispan.js"></script>
+  <script src="https://masba.net/ansispan.js"></script>
   <script>
-    let id = NaN;
+    window.id = NaN;
     let s = new WebSocket("ws://127.0.0.1:31236");
     let info_elem = document.getElementById("miscinfo");
     let board_elem = document.getElementById("board");
+    let name = "deadbeef";
     let last_packet = {};
     let cursors = new Map();
     let board = {};
-    s.onopen = function(e) { info_elem.innerHTML = "Connected"; }
+    let board_bounds = {}; // init when we actually have the board loaded
+    function register() {
+          let name_in = document.getElementById("name-in");
+          name = name_in.value;
+          s.send(`register ${name}`);
+          info_elem.innerHTML = "Running";
+        }
+    s.onopen = function(e) {
+          info_elem.innerHTML =
+            `<input id="name-in" type="text">
+   <button onclick=register()>Join</button>`;
+        }
     s.onmessage = function(e) {
-          console.log(`got msg ${e.data}`);
           last_packet = e;
           let d = e.data;
           if (typeof d == "object") {
-            d.arrayBuffer().then(acceptPacket);
+            d.arrayBuffer().then(acceptBoard);
           } else if (typeof e.data == "string") {
             let fields = d.split(" ");
             if (d.startsWith("pos")) {
-              let oid = fields[1];
+              let oid = Number(fields[1]);
               let name = fields[2];
               let x = fields[3];
               let y = fields[4];
@@ -73,21 +85,31 @@
               celem.style.top = y + 'px';
             }
             else if (d.startsWith("id")) {
-              id = fields[1];
-              createCursor(id, "You");
+              window.id = Number(fields[1]);
+              createCursor(id, name);
+            }
+            else if (d.startsWith("win")) {
+              info_elem.innerHTML = "<p>You win! Reset?</p>";
+              info_elem.onclick = e => { s.send("reset"); info_elem.onclick = undefined;
+                    info_elem.innerHTML = "Running"; };
+            }
+            else if (d.startsWith("lose")) {
+              info_elem.innerHTML = "<p>You lose... Reset?</p>";
+              info_elem.onclick = e => { s.send("reset"); info_elem.onclick = undefined;
+                    info_elem.innerHTML = "Running"; };
             }
           }
       }
     s.onerror = function(e) { info_elem.innerHTML += `<br>error ${e}`; }
     s.onclose = function(e) { info_elem.innerHTML = "Closed"; }
 
-    function acceptPacket(data) {
+    function acceptBoard(data) {
           let vals = new Uint8Array(data);
           if (vals[0] == 27) {
                 // starts with escape char, is a board dump
                 board = Array.from(vals.subarray(1,vals.length).values()).reduce((s,c) => s +
                       String.fromCodePoint(c), "");
-                board_elem.innerHTML = ansispan(board);
+                board_elem.innerHTML = "<span>" + ansispan(board) + "</span>";
               }
           else if (vals[0] == 'p'.charCodeAt(0)) {
                 // starts with a p, is a cursor position update
@@ -110,14 +132,52 @@
           let dx = tip.width/2 - cb.width/2;
           let dy = -(tip.height/2 - cb.height/2);
           document.getElementById('board-container').append(cursor);
+          if (id == window.id) {
           document.addEventListener('mousemove', e => {
                 cursor.style.left = (e.pageX + dx) + 'px';
                 cursor.style.top = (e.pageY + dy) + 'px';
                 s.send(`pos ${e.pageX} ${e.pageY}`);
               },
                 false);
+          }
           cursors.set(id, {name: name, elem: cursor});
           return cursor;
         }
+    function getBoardBounds() {
+          let boardb = board_elem.getBoundingClientRect();
+          let textb = board_elem.firstChild.getBoundingClientRect();
+          return {
+                ox: boardb.x,
+                oy: boardb.y,
+                w: textb.width,
+                h: boardb.height
+              };
+        }
+
+    board_elem.onclick = function(e) {
+          let tpos = tilepos(e.clientX, e.clientY);
+          let cmd = `reveal ${tpos.x} ${tpos.y}`;
+          console.log(cmd);
+          s.send(cmd);
+        }
+    board_elem.oncontextmenu = function(e) {
+          let tpos = tilepos(e.clientX, e.clientY);
+          let cmd = `flag ${tpos.x} ${tpos.y}`;
+          console.log(cmd);
+          s.send(cmd);
+          return false;
+        }
+    function tilepos(x,y) {
+           board_bounds = getBoardBounds();
+          let b = board_bounds;
+          let relx = (x - b.ox);
+          let rely = (y - b.oy);
+          let tilex = Math.floor(75 * relx/b.w);
+          let tiley = Math.floor(35 * rely/b.h);
+          return { x: tilex, y: tiley };
+        }
+    function sleep(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    }
   </script>
 </html>