From fdcc323ca1ccbdc5f332101dcab48d8c62c6d12c Mon Sep 17 00:00:00 2001
From: Ian Jackson <ijackson@chiark.greenend.org.uk>
Date: Sun, 5 Jul 2020 14:12:39 +0100
Subject: [PATCH] can grab again

---
 templates/script.js | 96 ++++++++++++++++++++++++++++-----------------
 1 file changed, 61 insertions(+), 35 deletions(-)

diff --git a/templates/script.js b/templates/script.js
index 8a8350ca..98277ce7 100644
--- a/templates/script.js
+++ b/templates/script.js
@@ -2,6 +2,35 @@
 
 // xxx deployment note: need a whole bunch of domains for SSE conn limit
 
+
+// elemnts for a piece
+//
+// In svg toplevel
+//
+//   uelem
+//      <use href="#piece{}" x= y= >
+//         .piece   piece id (static)
+//         .gplayer  grabbed user (player id string, or "")
+//      container to allow quick movement and hang stuff off
+//
+// In defs
+//
+//   pelem
+//   #piece{}
+//      <g id="piece{}" >
+//         .cseq     client sequence (see PROTOCOL.md)
+//      currently-displayed version of the piece
+//      to allow addition/removal of selected indication
+//      contains 1 or 2 subelements:
+//      first is straight from server and not modified
+//      second is possible <use href="#select{}" >
+//
+//   #select{}
+//      generated by server, referenced by JS in pelem for selection
+//
+//   #def.{}.stuff
+//      generated by server
+
 general_timeout = 10000;
 messages = Object();
 var our_dnd_type = "text/puvnex-game-server-dummy";
@@ -63,11 +92,6 @@ function api_posted() {
 
 // ----- clicking/dragging pieces -----
 
-// dataset
-//   delt.pice     piece id (static)
-//   delt.gplayer grabbed user (player id string, or "")
-//   delt.cseq     client sequence (see PROTOCOL.md)
-
 const DRAGGING = { // bitmask
   NO           : 0,
   MAYBE_GRAB   : 1,
@@ -75,7 +99,7 @@ const DRAGGING = { // bitmask
   YES          : 4,
 };
 
-var delt;
+var drag_uelem;
 var dragging = DRAGGING.NO;
 
 function drag_mousedown(e) {
@@ -83,22 +107,21 @@ function drag_mousedown(e) {
   var piece = e.target.dataset.piece;
   if (!piece) { return; }
   drag_cancel();
-  delt = e.target;
-  var gplayer = delt.dataset.gplayer;
+  drag_uelem = e.target;
+  var gplayer = drag_uelem.dataset.gplayer;
   if (gplayer != "" && gplayer != us) { return; }
   dcx = e.clientX;
   dcy = e.clientY;
-  dox = parseFloat(delt.getAttributeNS(null,"x"));
-  doy = parseFloat(delt.getAttributeNS(null,"y"));
+  dox = parseFloat(drag_uelem.getAttributeNS(null,"x"));
+  doy = parseFloat(drag_uelem.getAttributeNS(null,"y"));
 
   if (gplayer == us) {
     dragging = DRAGGING.MAYBE_UNGRAB;
   } else {
     cseq += 1;
-    delt.dataset.cseq = cseq;
-
     dragging = DRAGGING.MAYBE_GRAB;
-    set_grab(delt, piece, us);
+    pelem = set_grab(drag_uelem, piece, us);
+    pelem.dataset.cseq = cseq;
     api('grab', {
       ctoken : ctoken,
       piece : piece,
@@ -111,25 +134,25 @@ function drag_mousedown(e) {
   window.addEventListener('mouseup',   drag_mouseup,   true);
 }
 
-function set_grab(elem, piece, owner) {
-  elem.dataset.gplayer = owner;
+function set_grab(uelem, piece, owner) {
+  uelem.dataset.gplayer = owner;
 //  var [p, piece] = 
-  piece_cleanup_grab(elem);
+  pelem = piece_cleanup_grab(piece);
   var nelem = document.createElementNS(svg_ns,'use');
   nelem.setAttributeNS(null,'href','#select'+piece);
-  elem.appendChild(nelem);
+  pelem.appendChild(nelem);
+  return pelem;
 }
-function set_ungrab(elem) {
-  elem.dataset.gplayer = "";
-  piece_cleanup_grab(elem);
+function set_ungrab(uelem, piece) {
+  uelem.dataset.gplayer = "";
+  piece_cleanup_grab(piece);
 }
-function piece_cleanup_grab(elem) {
-//  var piece = elem.dataset.piece;
-//  var elem = document.getElementById('piece'+piece);
-  while (elem.children.length > 1) {
-    elem.lastElementChild.remove();
+function piece_cleanup_grab(piece) {
+  var pelem = document.getElementById('piece'+piece);
+  while (pelem.children.length > 1) {
+    pelem.lastElementChild.remove();
   }
-//  return [p, elem];
+  return pelem;
 }
 
 function drag_mousemove(e) {
@@ -146,12 +169,12 @@ function drag_mousemove(e) {
   if (dragging & DRAGGING.YES) {
     var x = Math.round(dox + ddx);
     var y = Math.round(doy + ddy);
-    delt.setAttributeNS(null, "x", x);
-    delt.setAttributeNS(null, "y", y);
-    //console.log(delt);
+    drag_uelem.setAttributeNS(null, "x", x);
+    drag_uelem.setAttributeNS(null, "y", y);
+    //console.log(drag_uelem);
     api_delay('m',{
       t : token,
-      p : delt.dataset.piece,
+      p : drag_uelem.dataset.piece,
       l : [x, y],
     });
   }
@@ -163,10 +186,11 @@ function drag_mouseup(e) {
   //console.log('mouseup ...', dragging);
   if (dragging == DRAGGING.MAYBE_UNGRAB ||
       dragging == (DRAGGING.MAYBE_GRAB | DRAGGING.YES)) {
-    set_ungrab(delt);
+    piece = drag_uelem.dataset.piece;
+    set_ungrab(drag_uelem, piece);
     api('ungrab', {
       ctoken : token,
-      piece : delt.dataset.piece,
+      piece : drag_uelem.dataset.piece,
     });
   }
   drag_cancel(e);
@@ -176,7 +200,7 @@ function drag_cancel() {
   window.removeEventListener('mousemove', drag_mousemove, true);
   window.removeEventListener('mouseup',   drag_mouseup,   true);
   dragging = DRAGGING.NO;
-  delt = null;
+  drag_uelem = null;
 }
 
 // ----- test counter, startup -----
@@ -209,8 +233,10 @@ function startup() {
   });
   es.addEventListener('recorded', function(event) {
     var j = JSON.parse(event.data);
-    var elem = document.getElementById('piece'+j.piece);
-    if (j.cseq >= elem.dataset.cseq) { elem.dataset.cseq = 0 }
+    var pelem = document.getElementById('piece'+j.piece);
+    if (j.cseq >= pelem.dataset.cseq) {
+      delete pelem.dataset.cseq;
+    }
     gen = j.gen;
   });
   es.onerror = function(e) {
-- 
2.30.2