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(svg.querySelector('.start-locations'), gameboard.getUnits());
recordSheet.start(null, scenarioUnits); recordSheet.start(null, scenarioUnits);
const [trooper] = gameboard.getUnits(); //const [trooper] = gameboard.getUnits();
Observable.notify('select', trooper); //Observable.notify('select', trooper);
gameboard.setCounter('prone'); //gameboard.setCounter('prone');
gameboard.setCounter('1st-floor'); //gameboard.setCounter('1st-floor');
} }
function updateTurnCounter() { 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.collection.set(cell, { parent: cell.parentElement });
top.container.append(cell); top.container.append(cell);
} }
console.log(top.container.children[0].children);
const selected = getSelected(); const selected = getSelected();
if (placing[0]?.getAttributeNS(null, 'class') == 'mech-template') { if (placing[0]?.getAttributeNS(null, 'class') == 'mech-template') {
@ -320,21 +320,21 @@ export function start(el) {
// debug // // debug //
// Add a trooper counter // 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 defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
const cell = getCell(0, 0, 0, 0); //const cell = getCell(0, 0, 0, 0);
const trooper = soldier.createCounter(attacker, 'blazer'); //const trooper = soldier.createCounter(attacker, 'blazer');
soldier.place(svg, trooper, cell); //soldier.place(svg, trooper, cell);
// Add some counters in an unoccupied cell // Add some counters in an unoccupied cell
const countersCell = getCell(-1, 1, 0, 0); //const countersCell = getCell(-1, 1, 0, 0);
setCounter('grenade'); //setCounter('grenade');
setCounter('prone'); //setCounter('prone');
setCounter('1st-floor'); //setCounter('1st-floor');
const e = new PointerEvent('click'); //const e = new PointerEvent('click');
countersCell.dispatchEvent(e); //countersCell.dispatchEvent(e);
countersCell.dispatchEvent(e); //countersCell.dispatchEvent(e);
countersCell.dispatchEvent(e); //countersCell.dispatchEvent(e);
/////////// ///////////
Observable.subscribe('select', select); Observable.subscribe('select', select);
@ -376,44 +376,28 @@ export function setFiringArc() {
export function setCounter(name) { export function setCounter(name) {
const selected = getSelected(); const selected = getSelected();
const counter = document.createElementNS(svgns, 'use'); const counter = document.createElementNS(svgns, 'use');
counter.addEventListener('click', e => { counter.addEventListener('click', e => {
e.stopPropagation() e.stopPropagation()
const container = counter.parentElement;
counter.remove() counter.remove()
arrangeCounters(container);
}); });
//counter.setAttributeNS(null, 'href', '#counter-grenade');
counter.setAttributeNS(null, 'href', `#counter-${name}`); counter.setAttributeNS(null, 'href', `#counter-${name}`);
counter.classList.add(`counter-${name}`); counter.classList.add(`counter-${name}`);
if (selected) { if (selected) {
const icons = [...selected.querySelectorAll('use[class^="counter-"]'), counter]; selected.append(counter);
const length = 12; arrangeCounters(selected);
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);
});
} }
else else
placing.push(counter); placing.push(counter);
} }
function arrangeCounters(cell) { function arrangeCounters(container) {
const counters = cell.querySelectorAll('[class^="counter-"]'); const counters = container.querySelectorAll('[class^="counter-"]');
const length = 12; const length = 12;
const gravity = 1; const gravity = 1;
const lateralForce = gravity; const lateralForce = gravity;
@ -422,18 +406,12 @@ function arrangeCounters(cell) {
const deflection = counters.length > bestFitCount ? 2 * Math.PI / counters.length : Math.atan(lateralForce / gravity); const deflection = counters.length > bestFitCount ? 2 * Math.PI / counters.length : Math.atan(lateralForce / gravity);
counters.forEach((counter, index, arr) => { counters.forEach((counter, index, arr) => {
const mult = index - arr.length / 2 + 0.5; const mult = index - arr.length / 2 + 0.5;
const theta = deflection * mult; const theta = deflection * mult;
const x = length * Math.sin(theta); const x = length * Math.sin(theta);
const y = length * Math.cos(theta); const y = length * Math.cos(theta);
//counter.setAttributeNS(null, 'x', 0); counter.setAttributeNS(null, 'style', `--x: ${-x}px; --y: ${y}px`);
//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);
} }
function handleMechTemplateRotation(event) { function handleMechTemplateRotation(event) {