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

Clean up some counters code

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:33 -07:00
parent edb5af99c7
commit f1084b826b
2 changed files with 31 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/index.js
View File

@ -85,10 +85,10 @@ async function buildScenario(req) {
// recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
recordSheet.start(null, scenarioUnits);
const [trooper] = gameboard.getUnits();
Observable.notify('select', trooper);
gameboard.setCounter('prone');
gameboard.setCounter('1st-floor');
//const [trooper] = gameboard.getUnits();
//Observable.notify('select', trooper);
//gameboard.setCounter('prone');
//gameboard.setCounter('1st-floor');
}
function updateTurnCounter() {

76
src/modules/gameboard.js
View File

@ -288,7 +288,7 @@ export function start(el) {
top.collection.set(cell, { parent: cell.parentElement });
top.container.append(cell);
}
console.log(top.container.children[0].children);
const selected = getSelected();
if (placing[0]?.getAttributeNS(null, 'class') == 'mech-template') {
@ -320,21 +320,21 @@ export function start(el) {
// debug //
// Add a trooper counter
const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
//const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
// const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
const cell = getCell(0, 0, 0, 0);
const trooper = soldier.createCounter(attacker, 'blazer');
soldier.place(svg, trooper, cell);
//const cell = getCell(0, 0, 0, 0);
//const trooper = soldier.createCounter(attacker, 'blazer');
//soldier.place(svg, trooper, cell);
// Add some counters in an unoccupied cell
const countersCell = getCell(-1, 1, 0, 0);
setCounter('grenade');
setCounter('prone');
setCounter('1st-floor');
const e = new PointerEvent('click');
countersCell.dispatchEvent(e);
countersCell.dispatchEvent(e);
countersCell.dispatchEvent(e);
//const countersCell = getCell(-1, 1, 0, 0);
//setCounter('grenade');
//setCounter('prone');
//setCounter('1st-floor');
//const e = new PointerEvent('click');
//countersCell.dispatchEvent(e);
//countersCell.dispatchEvent(e);
//countersCell.dispatchEvent(e);
///////////
Observable.subscribe('select', select);
@ -376,44 +376,28 @@ export function setFiringArc() {
export function setCounter(name) {
const selected = getSelected();
const counter = document.createElementNS(svgns, 'use');
counter.addEventListener('click', e => {
e.stopPropagation()
const container = counter.parentElement;
counter.remove()
arrangeCounters(container);
});
//counter.setAttributeNS(null, 'href', '#counter-grenade');
counter.setAttributeNS(null, 'href', `#counter-${name}`);
counter.classList.add(`counter-${name}`);
if (selected) {
const icons = [...selected.querySelectorAll('use[class^="counter-"]'), counter];
const length = 12;
const gravity = 1;
const lateralForce = gravity;
const rads = Math.atan(lateralForce / gravity);
const mult = icons.length % 2 ? index => Math.ceil(index / 2) : index => Math.floor(index / 2) + 0.5;
const iconBestFitCount = 8;
const divider = icons.length > iconBestFitCount ? iconBestFitCount / icons.length : 1;
icons
.map((icon, index) => [icon, (index % 2 ? -1 : 1) * mult(index)])
.sort(([_ic1, i1], [_ic2, i2]) => i1 < i2)
.forEach(([icon, index]) => {
const theta = rads * index * divider;
const x = length * Math.sin(theta);
const y = length * Math.cos(theta);
icon.setAttributeNS(null, 'style', `--x: ${x}px; --y: ${y}px`);
//selected.appendChild(icon);
if (!selected.contains(icon)) selected.append(icon);
});
selected.append(counter);
arrangeCounters(selected);
}
else
placing.push(counter);
}
function arrangeCounters(cell) {
const counters = cell.querySelectorAll('[class^="counter-"]');
function arrangeCounters(container) {
const counters = container.querySelectorAll('[class^="counter-"]');
const length = 12;
const gravity = 1;
const lateralForce = gravity;
@ -422,18 +406,12 @@ function arrangeCounters(cell) {
const deflection = counters.length > bestFitCount ? 2 * Math.PI / counters.length : Math.atan(lateralForce / gravity);
counters.forEach((counter, index, arr) => {
const mult = index - arr.length / 2 + 0.5;
const theta = deflection * mult;
const x = length * Math.sin(theta);
const y = length * Math.cos(theta);
//counter.setAttributeNS(null, 'x', 0);
//counter.setAttributeNS(null, 'y', 10);
//counter.setAttributeNS(null, 'transform', `rotate(${theta * 180 / Math.PI})`);
//counter.setAttributeNS(null, 'style', `y: 10px; transform-origin: 5px 0; transform: translateX(-5px) rotate(${theta * 180 / Math.PI}deg)`);
counter.setAttributeNS(null, 'style', `--x: ${-x}px; --y: ${y}px`);
//counter.setAttributeNS(null, 'style', `x: 0; y: 10px;`);
});
console.log(counters);
const mult = index - arr.length / 2 + 0.5;
const theta = deflection * mult;
const x = length * Math.sin(theta);
const y = length * Math.cos(theta);
counter.setAttributeNS(null, 'style', `--x: ${-x}px; --y: ${y}px`);
});
}
function handleMechTemplateRotation(event) {