From d89b9ea43ac65af549279f6e86c68c66243dcdf3 Mon Sep 17 00:00:00 2001
From: stale <redkugelblitzin@gmail.com>
Date: Wed, 18 May 2022 09:36:43 -0300
Subject: organizing
---
page.html | 256 --------------------------------------------------------------
1 file changed, 256 deletions(-)
delete mode 100644 page.html
(limited to 'page.html')
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>
--
cgit v1.2.3