hww

From 854bed4bef10006fcede732f2563b9a217707369 Mon Sep 17 00:00:00 2001 From: Elijah Cohen Date: Fri, 1 Apr 2022 14:15:07 -0500 Subject: [PATCH] save/load, rotation, copy/paste --- grid.js | 15 +++++++ index.html | 15 ++++++- play.js | 102 ++++++++++++++++++++++++++++++++++++++--------- wireworld.js | 109 +++++++++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 213 insertions(+), 28 deletions(-) diff --git a/grid.js b/grid.js index 69c88a3..14e1940 100644 --- a/grid.js +++ b/grid.js @@ -53,6 +53,21 @@ class Hex { return {x: xi+xorig, y: yi+yorig} } + + + rotate(q,r, ccw=true) { + // rotates (ccw default) about the q,r points given + var retitem = this.clone(); + var trq = q-this.q; + var trr = r-this.r; + var trs = -trq-trr; + var rq = ccw ? -trs : -trr; + var rr = ccw ? -trq : -trs; + retitem.q = q+rq; + retitem.r = r+rr; + return retitem; + } + } diff --git a/index.html b/index.html index 944f861..b7cf1c6 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,15 @@ + hww @@ -22,6 +28,13 @@ + + + + + + +

diff --git a/play.js b/play.js index 7ff4297..6a86af5 100644 --- a/play.js +++ b/play.js @@ -2,30 +2,21 @@ g = new WWGrid(); +copybuf = []; //params xcenter = 200 ycenter = 200 scale = 10 -g.change(WWState.OFF, 0,0); -g.change(WWState.OFF, 0,1); g.change(WWState.OFF, 1,1); -g.change(WWState.HEAD, -1,0); -g.change(WWState.OFF, 1,-1); +g.change(WWState.OFF, 1,4); +g.change(WWState.TAIL, 4,1); +g.change(WWState.EMPTY, 4,-2); +g.change(WWState.HEAD, -2,4); +g.change(WWState.HEAD, 1,-2); +g.change(WWState.HEAD, -2,1); -/* -for(var i=-5; i<5; i++) { - for(var j=-5; j<5; j++) { - g.change(WWState.EMPTY, i, j); - } -}*/ - -g.change(WWState.EMPTY, 0,0); -g.change(WWState.HEAD, 1,0); -g.change(WWState.HEAD, 2,0); -g.change(WWState.TAIL, 0,1); -g.change(WWState.TAIL, 0,2); var ctx = null; var c = null; @@ -43,7 +34,7 @@ function lc() { c = document.getElementById('c'); ctx = c.getContext('2d'); //c.addEventListener('click', e=>getClickCoords(c, 20, 200, 200, e)); - c.addEventListener('click', e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e)); + c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e) c.oncontextmenu = (e) => {e.preventDefault(); wwonrtclick(c,ctx,g,xcenter,ycenter,scale,e)}; drawGrid(g, ctx, xcenter,ycenter,scale); document.addEventListener('keydown', e=>{ @@ -66,22 +57,95 @@ function lc() { es.onclick = exportState; is = document.getElementById("is"); is.onclick = importState; + rb = document.getElementById("rot"); + rb.onclick = rotateButtonHandler; + cp = document.getElementById("copy"); + cp.onclick = copyHandler; + ps = document.getElementById("paste"); + ps.onclick = pasteHandler; + sv = document.getElementById("save"); + sv.onclick = saveState; + ld = document.getElementById("load"); + ld.onclick = loadState; +} + +saveState = function(e) { + let slot = document.getElementById("slot").value; + let val = g.exportState(); + localStorage.setItem(slot, val); +} +loadState = function(e) { + let slot = document.getElementById("slot").value; + let res = localStorage.getItem(slot); + if(res == null) { + g.loadState("[]"); + drawGrid(g, ctx, xcenter,ycenter,scale); + } + g.loadState(res); + drawGrid(g, ctx, xcenter,ycenter,scale); } + pptoggle = function(e) { if(intervalID == null) { g.clean(); rstgrid = g.clone(); intervalID = setInterval(play, timeout); - playbtn.value = "pause" + playbtn.value = "pause"; } else { clearInterval(intervalID); intervalID = null; - playbtn.value = "play" + playbtn.value = "play"; } }; +rotateButtonHandler = function(e) { + c.onclick = e=>rotateThingy(e); + // tf are those arguments globals are there for a reason + ctx.save(); + ctx.fillStyle="rgba(0.4,0.4,0.4,0.1)" + ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height); + ctx.restore(); +} +rotateThingy = function(evt) { + let coords = getClickCoords(c,scale,xcenter,ycenter,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); +} + +copyHandler = function(e) { + c.onclick = e=>copyhex(e); + ctx.save(); + ctx.fillStyle="rgba(0.4,0.4,0.4,0.1)" + ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height); + ctx.restore(); +} + +copyhex = function(evt) { + let coords = getClickCoords(c,scale,xcenter,ycenter,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); +} +pasteHandler = function(e) { + c.onclick = e=>pastehex(e); + ctx.save(); + ctx.fillStyle="rgba(0.4,0.4,0.4,0.1)" + ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height); + ctx.restore(); +} +pastehex = function(evt) { + let coords = getClickCoords(c,scale,xcenter,ycenter,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); +} + exportState = function() { let s = g.exportState(); deets = document.getElementById("outzone"); diff --git a/wireworld.js b/wireworld.js index 15ef28c..bd8ceb9 100644 --- a/wireworld.js +++ b/wireworld.js @@ -44,7 +44,6 @@ class WWGrid { } exportState() { this.clean(); - //console.log(JSON.stringify(this.cells)); return JSON.stringify(this.cells); } loadState(str) { @@ -65,11 +64,16 @@ class WWGrid { cells[0].state = state; } } - - stateAt(q,r) { + cellAt(q,r) { let cells = this.cells.filter(c => c.q==q && c.r==r); - if(cells.length == 0) return WWState.EMPTY; - return cells[0].state; + if(cells.length == 0) return new WWCell(WWState.EMPTY,q,r); + return cells[0]; + } + stateAt(q,r) { + return this.cellAt(q,r).state; + //let cells = this.cells.filter(c => c.q==q && c.r==r); + //if(cells.length == 0) return WWState.EMPTY; + //return cells[0].state; } step() { @@ -113,9 +117,98 @@ class WWGrid { // setup for an eventual implementation // that said js is probs the worst language for that } - - - + rotateGrid(q,r,ccw=true) { + let cells2 = this.cells.map((c)=>c.rotate(q,r,ccw)); + this.cells = cells2; + } + rotateHex(q,r,radius,ccw=true) { + var rcells = [this.cellAt(q,r)]; + for(let i=1; ix.rotate(q,r)); + //this.cells = newcells; + for(let i of newcells) { + this.change(i.state, i.q, i.r); + } + this.clean(); + } + + copyHex(q,r,radius) { + var first = this.cellAt(q,r).clone(); + first.q = 0; + first.r = 0; + var rcells = []; + rcells.push(first); + for(let i=1; i