sanitizing, colors

1 files changed, 41 insertions, 23 deletions

diff --git a/page.html b/page.html
index 0508794..8656495 100644
--- a/page.html
+++ b/page.html
@@ -54,7 +54,7 @@
     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="#ffffff"></input>
+   <input id="clr-in" type="color" value="#33c033"></input>
    <button onclick=register()>Join</button>`;
     window.board_elem = document.getElementById("board");
     window.bwidth = NaN;
@@ -85,7 +85,7 @@
           if (typeof d == "object") {
             d.arrayBuffer().then(acceptBoard);
             info_elem.onclick = undefined;
-            info_elem.innerHTML = "Running";
+            info_elem.innerHTML = `Running, ${mine_ratio} tiles are mines`;
           } else if (typeof e.data == "string") {
             let fields = d.split(" ");
             switch (fields[0]) {
@@ -98,10 +98,11 @@
                 if (!cursors.has(oid)) {
                   createCursor(oid, name, clr);
                 }
-                let celem = window.cursors.get(oid).elem;
+                let celem = cursors.get(oid).elem;
                 celem.style.left = x + 'px';
                 celem.style.top = y + 'px';
-                } break;
+                movSelWin(cursors.get(oid).selwin, x, y);
+              } break;
               case "regack": {
                 name = fields[1];
                 id = Number(fields[2]);
@@ -114,18 +115,18 @@
               case "win": {
                 info_elem.innerHTML = "<p>You win! Click here to play again.</p>";
                 info_elem.onclick = e => { s.send("reset") };
-                } break;
+              } 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;
+              } break;
               case "logoff": {
                 let oid = Number(fields[1]);
                 cursors.get(oid).elem.remove();
                 cursors.get(oid).selwin.remove();
                 cursors.delete(oid);
-                } break;
+              } break;
             }
           }
       }
@@ -145,14 +146,25 @@
             let gamechars = /^[CFO# 1-8]+$/;
             if ((cur != last && gamechars.test(cur)) || cur == undefined) {
               let txt = board.substr(last_idx, i-last_idx);
-              if (txt[0] == 'O') {
-                txt = `<span style="color:red;">${txt}</span>`;
-              } else if (txt[0] == 'C') {
-                    txt = `<span style="color:green;">${txt}</span>`;
-              } else if (txt[0] == 'F') {
-                    txt = `<span style="color:yellow;">${txt}</span>`;
-              } else {
-                    txt = `<span style="color:white;">${txt}</span>`;
+              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;
@@ -170,7 +182,7 @@
           nametag.innerHTML = name;
           nametag.classList.add('cursor-name');
           let selection_window = document.createElement("div");
-          selection_window.style.backgroundColor = "#00c000a0";
+          selection_window.style.backgroundColor = clr + "a0";
           selection_window.style.position = "absolute";
           selection_window.classList.add('cursor');
           cursor.appendChild(nametag);
@@ -182,21 +194,27 @@
             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);
-              board_elem.addEventListener('mousemove', e => {
-                let tpos = tilepos(e.clientX, e.clientY);
-                selection_window.style.left = ((tpos.x + 0.5) * tile_w) + 'px';
-                selection_window.style.top = ((tpos.y + 0.5) * tile_h) + 'px';
-                selection_window.style.width = tile_w + 'px';
-                selection_window.style.height = tile_h + 'px';
-              }, 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;