1 files changed, 123 insertions, 0 deletions
diff --git a/page.html b/page.html
new file mode 100644
index 0000000..75bb7fd
--- /dev/null
+++ b/page.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+  <meta charset="UTF-8">
+  <title>websweeper</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  </head>
+  <style>
+@font-face {
+    font-family: vt323;
+    src: url("font.ttf");
+}
+    #board-container {
+      font-family: vt323, monospace;
+      font-size: 28pt;
+      line-height: 0.6em;
+    }
+    body {
+      background-color: black;
+      color: white;
+    }
+
+    .unsel {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    }
+
+    .cursor * {
+      font-size: 16pt;
+      margin: 0 0;
+    }
+  </style>
+  <body>
+    <div class="">
+      <div id="board-container">
+      <div id="board"></div>
+      </div>
+      <p id="miscinfo">Loading...</p>
+    </div>
+  </body>
+  <script src="https://p.masba.net:8443/ansispan.js"></script>
+  <script>
+    let 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 last_packet = {};
+    let cursors = new Map();
+    let board = {};
+    s.onopen = function(e) { info_elem.innerHTML = "Connected"; }
+    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);
+          } else if (typeof e.data == "string") {
+            let fields = d.split(" ");
+            if (d.startsWith("pos")) {
+              let oid = fields[1];
+              let name = fields[2];
+              let x = fields[3];
+              let y = fields[4];
+              if (!cursors.has(oid)) {
+                createCursor(oid, name);
+              }
+              let celem = cursors.get(oid).elem;
+              celem.style.left = x + 'px';
+              celem.style.top = y + 'px';
+            }
+            else if (d.startsWith("id")) {
+              id = fields[1];
+              createCursor(id, "You");
+            }
+          }
+      }
+    s.onerror = function(e) { info_elem.innerHTML += `<br>error ${e}`; }
+    s.onclose = function(e) { info_elem.innerHTML = "Closed"; }
+
+    function acceptPacket(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);
+              }
+          else if (vals[0] == 'p'.charCodeAt(0)) {
+                // starts with a p, is a cursor position update
+                // unimplemented!
+              }
+
+        }
+
+    function createCursor(id, name) {
+          // shit doesn't line up
+          let cursor = document.createElement("div");
+          cursor.innerHTML = "<p>x</p>";
+          cursor.style.position = "absolute";
+          let nametag = document.createElement("p");
+          nametag.innerHTML = name;
+          cursor.appendChild(nametag);
+          cursor.classList.add('cursor');
+          let cb = cursor.getBoundingClientRect();
+          let tip = cursor.firstChild.getBoundingClientRect();
+          let dx = tip.width/2 - cb.width/2;
+          let dy = -(tip.height/2 - cb.height/2);
+          document.getElementById('board-container').append(cursor);
+          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;
+        }
+  </script>
+</html>