click-drag editing, some bugfixes

diff --git a/README b/README
index c69f5babef3358a1ade33f15d13c0bceadea3c40..ecbd6b6979fe1fa8725963409f331205bc5d7012 100644 (file)
--- a/README
+++ b/README
@@ -1,7 +1,7 @@
 
 This is a simple javascript library for hexagonal grids.
 
-This was initially created for cellular automata, but it's reasonably adaptable for many things you might want a hexagonal grid for.
+This was initially created for cellular automata, but it's reasonably adaptable for many things you might want a hexagonal grid for, such as board games and other games.
 The library itself is minimal, but the other included code provides mostly simple and handy editing utilities.
 
 TO USE

diff --git a/grid.js b/grid.js
index a0e8ea2ec7c0ab6f787337c1677c2e64d00459d1..592e663a9bf04b3fdafeca5e52547baf4a49eb35 100644 (file)
--- a/grid.js
+++ b/grid.js
@@ -165,6 +165,28 @@ class Grid {
                                                this.change(cp.state, cp.q+q, cp.r+r);
                                }
                }
+
+
+               // still experimental, not a clear way to properly utilise yet
+               getLine(idx, dir) {
+                               // idx is the index, i.e. 6 in r=6
+                               // dir is in {q,r,s}
+                               var theline = [];
+                               for(let i of this.cells) {
+                                               if(i[dir] == idx) theline.push(i);
+                               }
+                               return theline;
+               }
+               pasteLine(q,r,dir,buf) {
+                               let idx = (new Hex(q,r))[dir];
+                               for(let i of this.cells) {
+                                               if(i[dir] == idx) i.state = this.defaultstate;
+                               }
+                               for(let i in buf) {
+                                               let cp = i.clone();
+                                               this.change(cp.state,cp.q,cp.r);
+                               }
+               }
 }
 
 
@@ -178,6 +200,7 @@ function drawGrid(g, ctx, xc, yc, scl) {
 
 
 function gonclick(g,c,ctx,grid,xc,yc,scl,evt) {
+               //console.log(evt);
                let rqcoord = getClickCoords(c, scl, xc, yc, evt);
                let currst8 = g.stateAt(rqcoord.q, rqcoord.r);
                let nextst8 = nextKey(currst8);
@@ -185,6 +208,7 @@ function gonclick(g,c,ctx,grid,xc,yc,scl,evt) {
                drawGrid(g, ctx, xc, yc, scl);
 }
 function gonrclick(g,c,ctx,grid,xc,yc,scl,evt) {
+               //console.log(evt);
                let rqcoord = getClickCoords(c, scl, xc, yc, evt);
                let currst8 = g.stateAt(rqcoord.q, rqcoord.r);
                let nextst8 = nextKey(currst8,false);

diff --git a/play.js b/play.js
index bc85e875c16f17d84484e4823218e9e68deaae40..9e8879024f91682f3cdc1a9e0ba4c2b2c9745ab4 100644 (file)
--- a/play.js
+++ b/play.js
@@ -27,8 +27,9 @@ function play() {
 function lc() {
                c = document.getElementById('c');
                ctx = c.getContext('2d');
-               c.onclick = e=>gonclick(g,c,ctx,g,xcenter,ycenter,scale,e)
-               c.oncontextmenu = (e) => {e.preventDefault(); gonrclick(g,c,ctx,g,xcenter,ycenter,scale,e)};
+               c.onmousedown = e=>mousedownshell(g,c,ctx,xcenter,ycenter,scale,e);
+               c.onmouseup = e=>mouseup(c);
+               c.oncontextmenu = (e)=>e.preventDefault();
                drawGrid(g, ctx, xcenter,ycenter,scale);
                document.addEventListener('keydown', e=>{
                                if(e.key == "p") pptoggle(e);
@@ -40,7 +41,6 @@ function lc() {
                playbtn = document.getElementById('playpause');
                playbtn.addEventListener('click',pptoggle);
                range = document.getElementById("tempo");
-               //range.addEventListener('click', function(e) {timeout=range.value});
                range.onclick = (e) => rangeManage(e);
                clr = document.getElementById("clear");
                clr.onclick = () => {g.cells = [];
@@ -141,7 +141,7 @@ reflectThingy = function(evt) {
                let rad = parseInt(document.getElementById('rad').value);
                g.reflHex(coords.q,coords.r,rad);
                drawGrid(g, ctx, xcenter,ycenter,scale);
-               c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e);
+               c.onclick = null;
 }
 flipButtonHandler = function(e) {
                c.onclick =  e=>flipThingy(e);
@@ -153,7 +153,7 @@ flipThingy = function(evt) {
                let rad = parseInt(document.getElementById('rad').value);
                g.flipHex(coords.q,coords.r,rad);
                drawGrid(g, ctx, xcenter,ycenter,scale);
-               c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e);
+               c.onclick = null;
 }
 rotateButtonHandler = function(e) {
                c.onclick =  e=>rotateThingy(e);
@@ -165,7 +165,7 @@ rotateThingy = function(evt) {
                let rad = parseInt(document.getElementById('rad').value);
                g.rotateHex(coords.q,coords.r,rad);
                drawGrid(g, ctx, xcenter,ycenter,scale);
-               c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e);
+               c.onclick = null;
 }
 
 copyHandler = function(e) {
@@ -178,7 +178,7 @@ copyhex = function(evt) {
                let rad = parseInt(document.getElementById('rad').value);
                copybuf = g.copyHex(coords.q, coords.r, rad)
                drawGrid(g, ctx, xcenter,ycenter,scale);
-               c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e);
+               c.onclick = null;
 }
 pasteHandler = function(e) {
                c.onclick = e=>pastehex(e);
@@ -194,7 +194,7 @@ pastehex = function(evt) {
                let rad = parseInt(document.getElementById('rad').value);
                g.pasteHex(coords.q,coords.r,copybuf);
                drawGrid(g, ctx, xcenter,ycenter,scale);
-               c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e);
+               c.onclick = null;
 }
 
 exportState = function() {
@@ -233,3 +233,36 @@ function getClickCoords(c, scale, xoff, yoff, event) {
                q = Math.round(preq);
                return {r: r, q: q};
 }
+
+
+var mmLatestSpot = null;
+function mouseMover(g,c,ctx,xc,yc,scl,isLClick,evt) {
+               return function(evt) {
+                               let rqcoord = getClickCoords(c,scl,xc,yc,evt);
+                               if(rqcoord.q == mmLatestSpot.q && rqcoord.r == mmLatestSpot.r) {
+                                               return;
+                               }
+                               mmLatestSpot = rqcoord;
+                               let currst8 = g.stateAt(rqcoord.q, rqcoord.r);
+                               let nextst8 = nextKey(currst8,isLClick);
+                               g.change(nextst8, rqcoord.q, rqcoord.r);
+                               drawGrid(g, ctx, xc, yc, scl);
+               }
+}
+
+var currmovefn = null;
+function mousedownshell(g,c,ctx,xc,yc,scl,evt) {
+               evt.preventDefault();
+               let islclick = evt.button == 0;
+               currmovefn = mouseMover(g,c,ctx,xc,yc,scl,islclick,evt);
+               c.addEventListener('mousemove', currmovefn);
+               let rqcoord = getClickCoords(c,scl,xc,yc,evt);
+               mmLatestSpot = rqcoord;
+               let currst8 = g.stateAt(rqcoord.q, rqcoord.r);
+               let nextst8 = nextKey(currst8,islclick);
+               g.change(nextst8, rqcoord.q, rqcoord.r);
+               drawGrid(g, ctx, xc, yc, scl);
+}
+function mouseup(c) {
+               c.removeEventListener('mousemove',currmovefn);
+}