ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

End turn

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-04-01 12:58:22 -07:00
parent 5c1dfbca50
commit 6711c88125
2 changed files with 59 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -218,7 +218,7 @@
<button type="button" class="end-move" data-allegiance="davion"> <button type="button" class="end-move" data-allegiance="davion">
End Movement End Movement
</button> </button>
<button type="button" class="clear-firing-arcs" data-allegiance="davion"> <button type="button" class="end-turn" data-allegiance="davion">
End Turn End Turn
</button> </button>
<br> <br>
@ -282,7 +282,7 @@
<button type="button" class="end-move" data-allegiance="liao"> <button type="button" class="end-move" data-allegiance="liao">
End Movement End Movement
</button> </button>
<button type="button" class="clear-firing-arcs" data-allegiance="liao"> <button type="button" class="end-turn" data-allegiance="liao">
End Turn End Turn
</button> </button>
<br> <br>

151
index.js
View File

@ -61,7 +61,6 @@ let getPointCoords = (x, y) => {
const svgns = "http://www.w3.org/2000/svg", const svgns = "http://www.w3.org/2000/svg",
svg = document.querySelector('svg'), svg = document.querySelector('svg'),
map = document.querySelector('rect#map'),
hex = document.getElementById('point'), hex = document.getElementById('point'),
ptGrp = document.getElementById('points'), ptGrp = document.getElementById('points'),
cntrGrp = document.getElementById('counters'), cntrGrp = document.getElementById('counters'),
@ -361,67 +360,6 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
// ptGrp.appendChild(text); // 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) { function evenr_to_axial(x, y) {
return {q: x - (y + (y & 1)) / 2, r: 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 => { svg.addEventListener('wheel', e => {
e.preventDefault(); e.preventDefault();
@ -718,28 +648,6 @@ svg.addEventListener('wheel', e => {
newY = parseInt(e.deltaY < 0 ? y + yChange : y - yChange), newY = parseInt(e.deltaY < 0 ? y + yChange : y - yChange),
newHeight = parseInt(e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange); 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}` let vb = `${newX} ${newY} ${newWidth} ${newHeight}`
localStorage.setItem('viewBox', vb); localStorage.setItem('viewBox', vb);
@ -821,11 +729,66 @@ recordSheetVisibility.addEventListener('input', e => {
localStorage.setItem('recordsVisibility', recordSheetVisibility.checked); 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'); let selectedSoldier = document.querySelector('.soldier-record.selected');
if (selectedSoldier) { if (selectedSoldier) {
selectedSoldier.classList.toggle('selected'); selectedSoldier.classList.toggle('selected');
selectedSoldier.classList.toggle('movement-ended'); selectedSoldier.classList.toggle('movement-ended');
} }
}); }));
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;
})();