organizing

author: stale <redkugelblitzin@gmail.com> 2022-05-18 09:36:43 -0300
committer: stale <redkugelblitzin@gmail.com> 2022-05-18 09:36:43 -0300
commit: d89b9ea43ac65af549279f6e86c68c66243dcdf3 (patch)
tree: 39173297e076c4425149c78f6244a2b762786ac8 /page.html
parent: 127a1059fec4fecb4099cb95ddb7ef3c7cf45077 (diff)
1 files changed, 0 insertions, 256 deletions
diff --git a/page.html b/page.html
deleted file mode 100644
index 8656495..0000000
--- a/page.html
+++ /dev/null
@@ -1,256 +0,0 @@
-<!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-size: 36px;
-      line-height: 22px;
-    }
-    body {
-      font-family: vt323, monospace;
-      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;
-      pointer-events: none;
-    }
-    .cursor * {
-      margin: 0 0;
-    }
-    .cursor-name {
-      background-color: #000000c0;
-      padding: 0.1em 0.1em;
-    }
-  </style>
-  <body>
-    <div class="">
-      <div id="board-container">
-      <span id="board"></span>
-      </div>
-      <p id="miscinfo">Loading...</p>
-    </div>
-  </body>
-  <script>
-    window.id = NaN;
-    window.name = "anon";
-    window.clr = "#f03333";
-    window.info_elem = document.getElementById("miscinfo");
-    window.info_elem.innerHTML =`
-   <input id="name-in" type="text" value="anon">
-   <input id="clr-in" type="color" value="#33c033"></input>
-   <button onclick=register()>Join</button>`;
-    window.board_elem = document.getElementById("board");
-    window.bwidth = NaN;
-    window.bheight = NaN;
-    window.tile_w = NaN;
-    window.tile_h = NaN;
-    window.mine_ratio = "unk";
-    window.socket = {};
-    window.last_packet = {};
-    window.cursors = new Map();
-    window.board = {};
-    window.board_bounds = {}; // init when we actually have the board loaded
-    function register() {
-          window.name = document.getElementById("name-in").value;
-          window.clr = document.getElementById("clr-in").value;
-          window.socket = connect();
-        }
-
-    function connect() {
-        let wsproto = (window.location.protocol == "https:")? "wss:": "ws:";
-        let s = new WebSocket(`${wsproto}//${window.location.hostname}:${window.location.port}${window.location.pathname}ws`);
-        s.onopen = function() {
-          s.send(`register ${window.name} ${window.clr}`);
-        }
-        s.onmessage = function(e) {
-          last_packet = e;
-          let d = e.data;
-          if (typeof d == "object") {
-            d.arrayBuffer().then(acceptBoard);
-            info_elem.onclick = undefined;
-            info_elem.innerHTML = `Running, ${mine_ratio} tiles are mines`;
-          } else if (typeof e.data == "string") {
-            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 (!cursors.has(oid)) {
-                  createCursor(oid, name, clr);
-                }
-                let celem = cursors.get(oid).elem;
-                celem.style.left = x + 'px';
-                celem.style.top = y + 'px';
-                movSelWin(cursors.get(oid).selwin, x, y);
-              } break;
-              case "regack": {
-                name = fields[1];
-                id = Number(fields[2]);
-                let dims = fields[3].split("x");
-                bwidth = Number(dims[0]);
-                bheight = Number(dims[1]);
-                mine_ratio = fields[4];
-                createCursor(id, name, clr);
-                } break;
-              case "win": {
-                info_elem.innerHTML = "<p>You win! Click here to play again.</p>";
-                info_elem.onclick = e => { s.send("reset") };
-              } break;
-              case "lose": {
-                let badone = fields[1];
-                info_elem.innerHTML = `<p>You lost, ${badone} was blown up. Click here to retry.</p>`;
-                info_elem.onclick = e => { s.send("reset") };
-              } break;
-              case "logoff": {
-                let oid = Number(fields[1]);
-                cursors.get(oid).elem.remove();
-                cursors.get(oid).selwin.remove();
-                cursors.delete(oid);
-              } break;
-            }
-          }
-      }
-      s.onerror = function(e) { info_elem.innerHTML += `<br>Error ${e}`; }
-      s.onclose = function(e) { info_elem.innerHTML = "Closed"; }
-      return s;
-    }
-
-    function acceptBoard(data) {
-          let vals = new Uint8Array(data);
-          board = Array.from(vals).reduce((s,c) => s + String.fromCodePoint(c), "");
-          let last = board[0];
-          let last_idx = 0;
-          let split_board = [];
-          for (let i = 1; i < board.length+1; i++) {
-            let cur = board[i];
-            let gamechars = /^[CFO# 1-8]+$/;
-            if ((cur != last && gamechars.test(cur)) || cur == undefined) {
-              let txt = board.substr(last_idx, i-last_idx);
-              switch(txt[0]) {
-		            case 'O':
-                  txt = `<span style="color:red;">${txt}</span>`;
-                break;
-                case 'C':
-                  txt = `<span style="color:green;">${txt}</span>`;
-		            break;
-                case 'F':
-                  txt = `<span style="color:yellow;">${txt}</span>`;
-		            break;
-
-                case '1': txt = `<span style="color:#0100FB;">${txt}</span>`; break;
-                case '2': txt = `<span style="color:#027F01;">${txt}</span>`; break;
-                case '3': txt = `<span style="color:#FD0100;">${txt}</span>`; break;
-                case '4': txt = `<span style="color:#01017B;">${txt}</span>`; break;
-                case '5': txt = `<span style="color:#7D0302;">${txt}</span>`; break;
-                case '6': txt = `<span style="color:#00807F;">${txt}</span>`; break;
-
-                default: txt = `<span style="color:white;">${txt}</span>`; break;
-              }
-              split_board.push(txt);
-              last_idx = i;
-            }
-            last = board[i];
-          }
-          board_elem.innerHTML = split_board.join("");
-    }
-
-    function createCursor(id, name, clr) {
-          // shit doesn't line up
-          let cursor = document.createElement("div");
-          cursor.style.position = "absolute";
-          let nametag = document.createElement("p");
-          nametag.innerHTML = name;
-          nametag.classList.add('cursor-name');
-          let selection_window = document.createElement("div");
-          selection_window.style.backgroundColor = clr + "a0";
-          selection_window.style.position = "absolute";
-          selection_window.classList.add('cursor');
-          cursor.appendChild(nametag);
-          cursor.classList.add('cursor');
-          cursor.style.color = clr;
-          document.getElementById('board-container').append(cursor);
-          document.getElementById('board-container').append(selection_window);
-          if (id == window.id) {
-            document.addEventListener('mousemove', e => {
-                cursor.style.left = (e.pageX + 15) + 'px';
-                cursor.style.top = (e.pageY + 15) + 'px';
-                movSelWin(selection_window, e.clientX, e.clientY);
-                let tpos = tilepos(e.clientX, e.clientY);
-                socket.send(`pos ${e.pageX} ${e.pageY}`);
-              },
-                false);
-          }
-          cursors.set(id, {name: name, elem: cursor, selwin: selection_window});
-          return cursor;
-        }
-    function movSelWin(win, x, y) {
-        let tpos = tilepos(x, y);
-        if (tpos.x > (bwidth - 1) || tpos.x < 0 || tpos.y > (bheight - 1) || tpos.y < 0) {
-          win.style.display = "none";
-        } else {
-          win.style.display = "";
-        }
-        win.style.left = ((tpos.x + 0.5) * tile_w) + 'px';
-        win.style.top = ((tpos.y + 0.5) * tile_h) + 'px';
-        win.style.width = tile_w + 'px';
-        win.style.height = tile_h + 'px';
-      }
-    function getBoardBounds() {
-          let boardb = board_elem.getBoundingClientRect();
-          tile_w = boardb.width / bwidth;
-          tile_h = 22;
-          return {
-                ox: boardb.x,
-                oy: boardb.y,
-                w: boardb.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);
-          socket.send(cmd);
-        }
-    board_elem.oncontextmenu = function(e) {
-          let tpos = tilepos(e.clientX, e.clientY);
-          let cmd = `flag ${tpos.x} ${tpos.y}`;
-          console.log(cmd);
-          socket.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(bwidth * relx/b.w);
-          let tiley = Math.floor(bheight * rely/b.h);
-          return { x: tilex, y: tiley };
-        }
-    function sleep(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
-    }
-  </script>
-</html>
author	stale <redkugelblitzin@gmail.com>	2022-05-18 09:36:43 -0300
committer	stale <redkugelblitzin@gmail.com>	2022-05-18 09:36:43 -0300
commit	d89b9ea43ac65af549279f6e86c68c66243dcdf3 (patch)
tree	39173297e076c4425149c78f6244a2b762786ac8 /page.html
parent	127a1059fec4fecb4099cb95ddb7ef3c7cf45077 (diff)