From 3fea80ce0df6fcfcda473fc0d27c3f7bd887d5da Mon Sep 17 00:00:00 2001 From: Victor Ribeiro Date: Fri, 11 Oct 2024 23:33:55 -0300 Subject: [PATCH 1/2] [cleanup] fix identation --- js/main.js | 94 +++++++++++++++++++++++++++--------------------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/js/main.js b/js/main.js index c814e66..0df3981 100644 --- a/js/main.js +++ b/js/main.js @@ -12,16 +12,16 @@ texture.onload = _ => init() const init = () => { - tool = [0,0] + tool = [0, 0] map = [ - [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], - [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], - [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], - [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], - [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], - [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], - [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]] + [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], + [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], + [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], + [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], + [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], + [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]], + [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]] ] canvas = $("#bg") @@ -35,7 +35,7 @@ const init = () => { ntiles = 7 tileWidth = 128 tileHeight = 64 - bg.translate(w/2,tileHeight*2) + bg.translate(w / 2, tileHeight * 2) loadHashState(document.location.hash.substring(1)) @@ -45,7 +45,7 @@ const init = () => { fg.width = canvas.width fg.height = canvas.height cf = fg.getContext('2d') - cf.translate(w/2,tileHeight*2) + cf.translate(w / 2, tileHeight * 2) fg.addEventListener('mousemove', viz) fg.addEventListener('contextmenu', e => e.preventDefault()) fg.addEventListener('mouseup', unclick) @@ -56,21 +56,21 @@ const init = () => { tools = $('#tools') let toolCount = 0 - for(let i = 0; i < texHeight; i++){ - for(let j = 0; j < texWidth; j++){ + for (let i = 0; i < texHeight; i++) { + for (let j = 0; j < texWidth; j++) { const div = $c('div'); div.id = `tool_${toolCount++}` div.style.display = "block" /* width of 132 instead of 130 = 130 image + 2 border = 132 */ - div.style.backgroundPosition = `-${j*130+2}px -${i*230}px` + div.style.backgroundPosition = `-${j * 130 + 2}px -${i * 230}px` div.addEventListener('click', e => { - tool = [i,j] + tool = [i, j] if (activeTool) $(`#${activeTool}`).classList.remove('selected') activeTool = e.target.id $(`#${activeTool}`).classList.add('selected') }) - tools.appendChild( div ) + tools.appendChild(div) } } @@ -82,15 +82,15 @@ const ToBase64 = u8 => { } const FromBase64 = str => { - return atob(str).split('').map( c => c.charCodeAt(0) ) + return atob(str).split('').map(c => c.charCodeAt(0)) } const updateHashState = () => { let c = 0 - const u8 = new Uint8Array(ntiles*ntiles) - for(let i = 0; i < ntiles; i++){ - for(let j = 0; j < ntiles; j++){ - u8[c++] = map[i][j][0]*texWidth + map[i][j][1] + const u8 = new Uint8Array(ntiles * ntiles) + for (let i = 0; i < ntiles; i++) { + for (let j = 0; j < ntiles; j++) { + u8[c++] = map[i][j][0] * texWidth + map[i][j][1] } } const state = ToBase64(u8) @@ -100,12 +100,12 @@ const updateHashState = () => { const loadHashState = state => { const u8 = FromBase64(state) let c = 0 - for(let i = 0; i < ntiles; i++) { - for(let j = 0; j < ntiles; j++) { + for (let i = 0; i < ntiles; i++) { + for (let j = 0; j < ntiles; j++) { const t = u8[c++] || 0 const x = Math.trunc(t / texWidth) const y = Math.trunc(t % texWidth) - map[i][j] = [x,y] + map[i][j] = [x, y] } } } @@ -113,7 +113,7 @@ const loadHashState = state => { const click = e => { const pos = getPosition(e) if (pos.x >= 0 && pos.x < ntiles && pos.y >= 0 && pos.y < ntiles) { - + map[pos.x][pos.y][0] = (e.which === 3) ? 0 : tool[0] map[pos.x][pos.y][1] = (e.which === 3) ? 0 : tool[1] isPlacing = true @@ -129,51 +129,51 @@ const unclick = () => { isPlacing = false } -const drawMap = () =>{ - bg.clearRect(-w,-h,w*2,h*2) - for(let i = 0; i < ntiles; i++){ - for(let j = 0; j < ntiles; j++){ - drawImageTile(bg,i,j,map[i][j][0],map[i][j][1]) +const drawMap = () => { + bg.clearRect(-w, -h, w * 2, h * 2) + for (let i = 0; i < ntiles; i++) { + for (let j = 0; j < ntiles; j++) { + drawImageTile(bg, i, j, map[i][j][0], map[i][j][1]) } } } -const drawTile = (c,x,y,color) => { +const drawTile = (c, x, y, color) => { c.save() - c.translate((y-x) * tileWidth/2,(x+y)*tileHeight/2) + c.translate((y - x) * tileWidth / 2, (x + y) * tileHeight / 2) c.beginPath() - c.moveTo(0,0) - c.lineTo(tileWidth/2,tileHeight/2) - c.lineTo(0,tileHeight) - c.lineTo(-tileWidth/2,tileHeight/2) + c.moveTo(0, 0) + c.lineTo(tileWidth / 2, tileHeight / 2) + c.lineTo(0, tileHeight) + c.lineTo(-tileWidth / 2, tileHeight / 2) c.closePath() c.fillStyle = color c.fill() c.restore() } -const drawImageTile = (c,x,y,i,j) => { +const drawImageTile = (c, x, y, i, j) => { c.save() - c.translate((y-x) * tileWidth/2,(x+y)*tileHeight/2) + c.translate((y - x) * tileWidth / 2, (x + y) * tileHeight / 2) j *= 130 i *= 230 - c.drawImage(texture,j,i,130,230,-65,-130,130,230) + c.drawImage(texture, j, i, 130, 230, -65, -130, 130, 230) c.restore() } const getPosition = e => { - const _y = (e.offsetY - tileHeight * 2) / tileHeight, - _x = e.offsetX / tileWidth - ntiles / 2 - x = Math.floor(_y-_x) - y = Math.floor(_x+_y) - return {x,y} + const _y = (e.offsetY - tileHeight * 2) / tileHeight, + _x = e.offsetX / tileWidth - ntiles / 2 + x = Math.floor(_y - _x) + y = Math.floor(_x + _y) + return { x, y } } -const viz = (e) =>{ +const viz = (e) => { if (isPlacing) click(e) const pos = getPosition(e) - cf.clearRect(-w,-h,w*2,h*2) - if( pos.x >= 0 && pos.x < ntiles && pos.y >= 0 && pos.y < ntiles) - drawTile(cf,pos.x,pos.y,'rgba(0,0,0,0.2)') + cf.clearRect(-w, -h, w * 2, h * 2) + if (pos.x >= 0 && pos.x < ntiles && pos.y >= 0 && pos.y < ntiles) + drawTile(cf, pos.x, pos.y, 'rgba(0,0,0,0.2)') } From 678ad5312a92cc941ad3470f73dba6175aa1d63b Mon Sep 17 00:00:00 2001 From: Victor Ribeiro Date: Fri, 11 Oct 2024 23:37:49 -0300 Subject: [PATCH 2/2] [feat] use history navigation to undo and redo --- js/main.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/js/main.js b/js/main.js index 0df3981..1144f05 100644 --- a/js/main.js +++ b/js/main.js @@ -3,7 +3,8 @@ const $ = _ => document.querySelector(_) const $c = _ => document.createElement(_) -let canvas, bg, fg, cf, ntiles, tileWidth, tileHeight, map, tools, tool, activeTool, isPlacing +let canvas, bg, fg, cf, ntiles, tileWidth, tileHeight, texWidth, + texHeight, map, tools, tool, activeTool, isPlacing, previousState /* texture from https://opengameart.org/content/isometric-landscape */ const texture = new Image() @@ -38,7 +39,6 @@ const init = () => { bg.translate(w / 2, tileHeight * 2) loadHashState(document.location.hash.substring(1)) - drawMap() fg = $('#fg') @@ -94,9 +94,17 @@ const updateHashState = () => { } } const state = ToBase64(u8) - history.replaceState(undefined, undefined, `#${state}`) + if (!previousState || previousState != state) { + history.pushState(undefined, undefined, `#${state}`) + previousState = state + } } +window.addEventListener('popstate', function () { + loadHashState(document.location.hash.substring(1)) + drawMap() +}) + const loadHashState = state => { const u8 = FromBase64(state) let c = 0 @@ -113,11 +121,9 @@ const loadHashState = state => { const click = e => { const pos = getPosition(e) if (pos.x >= 0 && pos.x < ntiles && pos.y >= 0 && pos.y < ntiles) { - map[pos.x][pos.y][0] = (e.which === 3) ? 0 : tool[0] map[pos.x][pos.y][1] = (e.which === 3) ? 0 : tool[1] isPlacing = true - drawMap() cf.clearRect(-w, -h, w * 2, h * 2) } @@ -162,8 +168,8 @@ const drawImageTile = (c, x, y, i, j) => { } const getPosition = e => { - const _y = (e.offsetY - tileHeight * 2) / tileHeight, - _x = e.offsetX / tileWidth - ntiles / 2 + const _y = (e.offsetY - tileHeight * 2) / tileHeight + const _x = e.offsetX / tileWidth - ntiles / 2 x = Math.floor(_y - _x) y = Math.floor(_x + _y) return { x, y }