From 6711c88125600135588394c4bc0660dab39f2a41 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Mon, 1 Apr 2024 12:58:22 -0700 Subject: End turn --- index.html | 4 +- index.js | 151 +++++++++++++++++++++++-------------------------------------- 2 files changed, 59 insertions(+), 96 deletions(-) diff --git a/index.html b/index.html index 986da99..20100ea 100644 --- a/index.html +++ b/index.html @@ -218,7 +218,7 @@ End Movement - + End Turn
@@ -282,7 +282,7 @@ End Movement - + End Turn
diff --git a/index.js b/index.js index f9e4ba8..6332ee5 100644 --- a/index.js +++ b/index.js @@ -61,7 +61,6 @@ let getPointCoords = (x, y) => { const svgns = "http://www.w3.org/2000/svg", svg = document.querySelector('svg'), - map = document.querySelector('rect#map'), hex = document.getElementById('point'), ptGrp = document.getElementById('points'), cntrGrp = document.getElementById('counters'), @@ -361,67 +360,6 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => { // ptGrp.appendChild(text); })); -(function debug() { - function drawLine(x1, y1, x2, y2) { - let start = ptGrp.querySelector(`[data-x="${x1}"][data-y="${y1}"]`); - let end = ptGrp.querySelector(`[data-x="${x2}"][data-y="${y2}"]`); - let [startX, startY] = [start.x.baseVal.value, start.y.baseVal.value]; - let [endX, endY] = [end.x.baseVal.value, end.y.baseVal.value]; - - let startP = new DOMPoint(startX, startY); - let endP = new DOMPoint(endX, endY); - - let tStart = startP.matrixTransform(mtx); - let tEnd = endP.matrixTransform(mtx); - - let line = document.createElementNS(svgns, 'line'); - line.setAttributeNS(null, 'x1', tStart.x); - line.setAttributeNS(null, 'y1', tStart.y); - line.setAttributeNS(null, 'x2', tEnd.x); - line.setAttributeNS(null, 'y2', tEnd.y); - line.classList.add('debug'); - - line.setAttributeNS(null, 'stroke', 'gold'); - line.setAttributeNS(null, 'stroke-width', 2); - svg.appendChild(line); - - return line; - } - - let transProp = getComputedStyle(ptGrp).transform.match(/-?\d+\.?\d*/g), - mtx = new DOMMatrix(transProp || ''), - circR = (new DOMPoint(0, 3 * CIRCUMRADIUS / 2)).matrixTransform(mtx).y * 2 / 3; - - // let l1 = drawLine(1, 1, 1, 2); - - // drawLine(0, 0, 5, 4); - // let coords = [0, 0, 14, 9]; - - // drawLine(...coords); - // linedraw(0, 0, 14, 9).forEach(([x, y]) => { - // document.querySelector(`[data-x="${x}"][data-y="${y}"]`).style.opacity = 1; - // }); - - // linedraw(0, 4, 14, 13).forEach(([x, y]) => { - // linedraw(14, 13, 0, 4).forEach(([x, y]) => { - // document.querySelector(`[data-x="${x}"][data-y="${y}"]`).style.opacity = 1; - // }); - - // linedraw(14, 9, 0, 0).forEach(([x, y]) => { - // document.querySelector(`[data-x="${x}"][data-y="${y}"]`).style.opacity = 1; - // }); - - // let pt = l1.getPointAtLength(circR); - - // let c = document.createElementNS(svgns, 'circle'); - // c.setAttributeNS(null, 'cx', pt.x); - // c.setAttributeNS(null, 'cy', pt.y); - // c.setAttributeNS(null, 'r', 20); - // c.setAttributeNS(null, 'fill', 'red'); - // c.setAttributeNS(null, 'opacity', '0.2'); - // svg.appendChild(c); -})(); - function evenr_to_axial(x, y) { return {q: x - (y + (y & 1)) / 2, r: y}; } @@ -687,14 +625,6 @@ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener(' } })); -document.querySelectorAll('.clear-firing-arcs').forEach(el => - el.addEventListener('click', ({target: {dataset: {allegiance}}}) => - document - .querySelectorAll(`.firing-arc[data-troop-allegiance="${allegiance}"]`) - .forEach(el => el.remove()) - ) -); - svg.addEventListener('wheel', e => { e.preventDefault(); @@ -718,28 +648,6 @@ svg.addEventListener('wheel', e => { newY = parseInt(e.deltaY < 0 ? y + yChange : y - yChange), newHeight = parseInt(e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange); - // console.log('VIEWBOX_X', 'VIEWBOX_Y', VIEWBOX_X, VIEWBOX_Y); - // console.log('VIEWBOX_WIDTH', 'VIEWBOX_HEIGHT', VIEWBOX_WIDTH, VIEWBOX_HEIGHT); - - // if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X && newX < VIEWBOX_X) { - // newWidth = VIEWBOX_WIDTH; - // newX = VIEWBOX_X; - // } else if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X) { - // let diff = newWidth + newX - VIEWBOX_WIDTH - VIEWBOX_X; - // newX = newX - diff; - // } - - // if (newHeight + newY > VIEWBOX_HEIGHT + VIEWBOX_Y && newY < VIEWBOX_Y) { - // newHeight = VIEWBOX_HEIGHT; - // newY = VIEWBOX_Y; - // } else if (newHeight + newY > VIEWBOX_HEIGHT + VIEWBOX_Y) { - // let diff = newHeight + newY - VIEWBOX_HEIGHT - VIEWBOX_Y; - // newY = newY - diff; - // } - - // newX = newX < VIEWBOX_X ? VIEWBOX_X : newX; - // newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY; - let vb = `${newX} ${newY} ${newWidth} ${newHeight}` localStorage.setItem('viewBox', vb); @@ -821,11 +729,66 @@ recordSheetVisibility.addEventListener('input', e => { localStorage.setItem('recordsVisibility', recordSheetVisibility.checked); }); -document.querySelector('.end-move').addEventListener('click', e => { +document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => { let selectedSoldier = document.querySelector('.soldier-record.selected'); if (selectedSoldier) { selectedSoldier.classList.toggle('selected'); selectedSoldier.classList.toggle('movement-ended'); } -}); \ No newline at end of file +})); + +let endTurnButtons = document.querySelectorAll('.end-turn'); +let [al1, al2] = Array.from(endTurnButtons).map(el => el.dataset.allegiance); + +endTurnButtons.forEach(el => + el.addEventListener('click', ({target: {dataset: {allegiance}}}) => { + let al = allegiance == al1 ? al2 : al1; + + qA(`.firing-arc[data-troop-allegiance="${al}"]`).forEach(el => el.remove()); + + qA(`.soldier-record[data-troop-allegiance="${al}"]`).forEach(el => + el.classList.remove('movement-ended') + ); + + let selected = q(`.soldier-record.selected`); + + if (selected) { + selected.classList.remove('selected'); + } + + q(`.soldier-record[data-troop-allegiance="${al}"]`).classList.add('selected'); + }) +); + +(function debug() { + function drawLine(x1, y1, x2, y2) { + let start = ptGrp.querySelector(`[data-x="${x1}"][data-y="${y1}"]`); + let end = ptGrp.querySelector(`[data-x="${x2}"][data-y="${y2}"]`); + let [startX, startY] = [start.x.baseVal.value, start.y.baseVal.value]; + let [endX, endY] = [end.x.baseVal.value, end.y.baseVal.value]; + + let startP = new DOMPoint(startX, startY); + let endP = new DOMPoint(endX, endY); + + let tStart = startP.matrixTransform(mtx); + let tEnd = endP.matrixTransform(mtx); + + let line = document.createElementNS(svgns, 'line'); + line.setAttributeNS(null, 'x1', tStart.x); + line.setAttributeNS(null, 'y1', tStart.y); + line.setAttributeNS(null, 'x2', tEnd.x); + line.setAttributeNS(null, 'y2', tEnd.y); + line.classList.add('debug'); + + line.setAttributeNS(null, 'stroke', 'gold'); + line.setAttributeNS(null, 'stroke-width', 2); + svg.appendChild(line); + + return line; + } + + let transProp = getComputedStyle(ptGrp).transform.match(/-?\d+\.?\d*/g), + mtx = new DOMMatrix(transProp || ''), + circR = (new DOMPoint(0, 3 * CIRCUMRADIUS / 2)).matrixTransform(mtx).y * 2 / 3; +})(); \ No newline at end of file -- cgit v1.2.3