redid the live cursor position system

1 files changed, 75 insertions, 40 deletions

diff --git a/assets/client.js b/assets/client.js
index 33ad796..174628f 100644
--- a/assets/client.js
+++ b/assets/client.js
@@ -1,4 +1,12 @@
 window.player = { uid: NaN };
+window.info_elem = document.getElementById("miscinfo");
+window.identform = document.getElementById("identform");
+window.statusline = document.getElementsByClassName("statusline")[0];
+window.bcont_elem = document.getElementById("board-container");
+window.board_elem = document.getElementById("board");
+window.cursor_frame = document.getElementById("cursor-frame");
+window.queued_pos = undefined;
+
 window.room = {
   name: undefined,
   bconf: { w: NaN, h: NaN, tile_w: NaN, tile_h: NaN, mine_ratio: undefined },
@@ -9,12 +17,7 @@ window.room = {
   identity: JSON.parse(localStorage.getItem("identity")),
   cursors: new Map(),
 };
-window.info_elem = document.getElementById("miscinfo");
-window.identform = document.getElementById("identform");
-window.statusline = document.getElementsByClassName("statusline")[0];
-window.bcont_elem = document.getElementById("board-container");
-window.board_elem = document.getElementById("board");
-window.cursor_frame = document.getElementById("cursor-frame");
+
 
 if (room.identity == null) {
   statusline.style.display = "none";
@@ -56,18 +59,31 @@ function connect() {
       let fields = d.split(" ");
       switch (fields[0]) {
         case "pos": {
-          let oid = Number(fields[1]);
-          let name = fields[2];
-          let clr = fields[3];
-          let x = fields[4];
-          let y = fields[5];
-          if (!room.cursors.has(oid)) {
-            createCursor(oid, name, clr);
-          }
-          let celem = room.cursors.get(oid).elem;
-          celem.style.left = x + 'px';
-          celem.style.top = y + 'px';
-          movSelWin(room.cursors.get(oid).selwin, x, y);
+          let posdata = JSON.parse(fields[1]);
+          posdata.forEach(pdat => {
+            let oid = Number(pdat[0]);
+            let x = pdat[1][0];
+            let y = pdat[1][1];
+            let curs = room.cursors.get(oid);
+            if (curs != undefined) {
+              movCursor(curs, x, y);
+            } else {
+              console.log("livepos sys incoherent");
+            }
+          });
+        } break;
+        case "players": {
+          let pdata = JSON.parse(fields[1]);
+          console.log(pdata);
+          pdata.forEach(p => {
+            let oid = Number(p[0]);
+            let name = p[1];
+            let clr = p[2];
+            console.log(oid, name, clr);
+            if (!room.cursors.has(oid)) {
+              createCursor(oid, name, clr);
+            }
+          });
         } break;
         case "regack": {
           room.name = fields[1];
@@ -148,6 +164,7 @@ function acceptBoard(data) {
     last = room.board[i];
   }
   board_elem.innerHTML = split_board.join("");
+  room.cbounds = getBoardBounds();
 }
 
 function createCursor(id, name, clr) {
@@ -166,20 +183,31 @@ function createCursor(id, name, clr) {
   cursor.style.color = clr;
   document.getElementById('cursor-frame').append(cursor);
   document.getElementById('cursor-frame').append(selection_window);
+  let c = { name: name, elem: cursor, selwin: selection_window };
   if (id == window.player.uid) {
     document.addEventListener('mousemove', e => {
-      cursor.style.left = e.pageX + 'px';
-      cursor.style.top = e.pageY + 'px';
-      movSelWin(selection_window, e.pageX, e.pageY);
-      room.socket.send(`pos ${e.pageX} ${e.pageY}`);
+      let bcoords = pageToBoardPx(e.pageX, e.pageY);
+      movCursor(c, bcoords[0], bcoords[1]);
+      window.queued_pos = bcoords;
     },
       false);
   }
   room.cursors.set(id, {name: name, elem: cursor, selwin: selection_window});
   return cursor;
 }
-function movSelWin(win, x, y) {
-  let tpos = tilepos(x,y);
+
+function pageToBoardPx(x,y) {
+  return [Math.floor(x - room.cbounds.ox), Math.floor(y - room.cbounds.oy)];
+}
+
+function movCursor(c, bx, by) {
+  c.elem.style.left = (room.cbounds.ox + bx) + 'px';
+  c.elem.style.top = (room.cbounds.oy + by) + 'px';
+  movSelWin(c.selwin, bx, by);
+}
+function movSelWin(win, bx, by) {
+  let tpos = tilepos(bx,by);
+  console.log(tpos);
   if (tpos.x > (room.bconf.w - 1) || tpos.x < 0 || tpos.y > (room.bconf.h - 1) || tpos.y < 0) {
     win.style.display = "none";
   } else {
@@ -202,31 +230,38 @@ function getBoardBounds() {
     h: a.height
   };
 }
+window.onresize = () => {
+  room.cbounds = getBoardBounds();
+}
 
 bcont_elem.onclick = function(e) {
-  let tpos = tilepos(e.pageX, e.pageY);
+  let bcoords = pageToBoardPx(e.pageX, e.pageY);
+  let tpos = tilepos(bcoords[0], bcoords[1]);
   let cmd = `reveal ${tpos.x} ${tpos.y}`;
-  //console.log(cmd);
   room.socket.send(cmd);
 }
 bcont_elem.oncontextmenu = function(e) {
-  let tpos = tilepos(e.pageX, e.pageY);
+  let bcoords = pageToBoardPx(e.pageX, e.pageY);
+  let tpos = tilepos(bcoords[0], bcoords[1]);
   let cmd = `flag ${tpos.x} ${tpos.y}`;
-  //console.log(cmd);
   room.socket.send(cmd);
   return false;
 }
-function tilepos(x,y) {
-  let b = getBoardBounds();
-  room.cbounds = b;
-  let cx = x - b.ox;
-  let cy = y - b.oy;
-  //let cx = x;
-  //let cy = y;
-  let tilex = Math.floor(room.bconf.w * cx/b.w);
-  let tiley = Math.floor(room.bconf.h * cy/b.h);
+// these are board-px coords
+function tilepos(bx,by) {
+  let b = room.cbounds; // we can assume it is already computed by earlier aux calls
+  let tilex = Math.floor(room.bconf.w * bx/b.w);
+  let tiley = Math.floor(room.bconf.h * by/b.h);
   return { x: tilex, y: tiley };
 }
-function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
+
+(function sendPos() {
+  let qp = window.queued_pos;
+  if (qp) {
+    room.socket.send(`pos ${qp[0]} ${qp[1]}`);
+    window.queued_pos = undefined;
+  }
+  setTimeout(function() {
+    sendPos();
+  }, 16);
+})();