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

Remove calling the gme module with 'new'

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:29 -07:00
parent ff2aaab4da
commit 48f239470f
2 changed files with 295 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.js
View File

@ -41,7 +41,7 @@ document.querySelector('object').addEventListener('load', function () {
window.addEventListener('load', () => { window.addEventListener('load', () => {
const svg = document.querySelector('object').contentDocument.querySelector('svg'), const svg = document.querySelector('object').contentDocument.querySelector('svg'),
game = new Game(svg); game = Game(svg);
window.game = game; window.game = game;

382
src/modules/game.js
View File

@ -4,138 +4,42 @@ import Counter from './game/counter.js';
const svgns = "http://www.w3.org/2000/svg"; const svgns = "http://www.w3.org/2000/svg";
export default class Game { function getCellContents(cell) {
info;
placing = [];
constructor(svg) {
this.svg = svg;
const board = this.getBoard();
this.firingArc = FiringArc(svg, board);
this.sightLine = SightLine(board);
this.counter = Counter(svg, board);
this.setUpCells();
// debug
const counter = this.counter.getCounter({ dataset: { allegiance: 'davion', number: '1' }});
this.counter.place(counter, this.getCell(17, 25));
this.select(counter);
}
getCells() {
return this.svg.querySelectorAll('g[data-y] > g[data-x]');
}
getCell(x, y) {
return this.svg.querySelector(`g[data-y="${y}"] > g[data-x="${x}"]`);
}
getCellOccupant(cell) {
return cell.querySelector('.counter');
}
getCellContents(cell) {
return cell.querySelectorAll('*:not(use[href="#hex"])'); return cell.querySelectorAll('*:not(use[href="#hex"])');
} }
getHex(cell) { function getGridIndex({ parentElement: { dataset: { x }, parentElement: { dataset: { y }}}}) {
return cell.querySelector('use[href="#hex"]');
}
getSelected() {
return this.svg.querySelector(`.counter.selected[data-allegiance][data-number]`);
}
getSightLine() {
return this.svg.querySelector('line.sight-line');
}
getActiveSightLine() {
return this.svg.querySelector('line.sight-line.active');
}
getLockedSightLine() {
return this.svg.querySelector('line.sight-line:not(.active)');
}
getGridIndex({ parentElement: { dataset: { x }, parentElement: { dataset: { y }}}}) {
return { x: +x, y: +y }; return { x: +x, y: +y };
} }
getCounterAtGridIndex(x, y) { function getCounterAtGridIndex(x, y) {
return this.getCell(x, y).querySelector('.counter'); return getCell(x, y).querySelector('.counter');
} }
getBoard() { function getHex(cell) {
return this.svg.querySelector('.board'); return cell.querySelector('use[href="#hex"]');
} }
getCellPosition(cell) { function getCellOccupant(cell) {
let pt = new DOMPoint(0, 0), return cell.querySelector('.counter');
transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),
mtx = new DOMMatrix(transform);
pt = pt.matrixTransform(mtx);
transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);
mtx = new DOMMatrix(transform);
pt = pt.matrixTransform(mtx);
return pt;
} }
endMove() { function getCells(svg) {
const selected = this.getSelected(); return svg.querySelectorAll('g[data-y] > g[data-x]');
if (selected) {
this.counter.endMove(selected);
this.unSelect();
}
} }
select(selected) { function getLockedSightLine(svg) {
const counter = this.counter.getCounter(selected); return svg.querySelector('line.sight-line:not(.active)');
if (counter) {
this.unSelect();
this.placing.push(counter);
counter.classList.add(this.counter.selectedClass);
this.firingArc.get(counter).forEach(el => el.removeAttribute('clip-path'));
this.selectCallback && this.selectCallback({ prone: this.counter.hasProne(counter), ...counter.dataset });
}
} }
unSelect() { function getSightLine(svg) {
const selected = this.getSelected(); return svg.querySelector('line.sight-line');
if (selected) {
this.placing = [];
this.getSelected().classList.remove(this.counter.selectedClass);
this.clearSightLine();
this.firingArc.clipAll();
}
} }
endTurn(allegiance) { function getActiveSightLine(svg) {
this.firingArc.clear(allegiance); return svg.querySelector('line.sight-line.active');
} }
toggleProne() {
const selected = this.getSelected(),
isOnBoard = selected && selected.parentElement.hasAttribute('data-x');
if (selected && isOnBoard) {
this.counter.toggleProne(selected);
}
}
toggleFiringArcVisibility(allegiance) {
this.firingArc.toggleVisibility(allegiance);
}
setUpCells() {
function isGrenade(el) { function isGrenade(el) {
return el && el.getAttribute('href') === '#counter-grenade'; return el && el.getAttribute('href') === '#counter-grenade';
} }
@ -151,37 +55,59 @@ export default class Game {
}; };
} }
this.getCells().forEach(cell => { function getCellPosition(cell) {
let pt = new DOMPoint(0, 0),
transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),
mtx = new DOMMatrix(transform);
pt = pt.matrixTransform(mtx);
transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);
mtx = new DOMMatrix(transform);
pt = pt.matrixTransform(mtx);
return pt;
}
export default function (svg) {
let distanceCallback, proneFlagCallback, selectCallback,
placing = [];
const board = svg.querySelector('.board'),
firingArc = FiringArc(svg, board),
sightLine = SightLine(board),
counterMod = Counter(svg, board);
getCells(svg).forEach(cell => {
cell.addEventListener('click', e => { cell.addEventListener('click', e => {
const state = { const state = {
placing: this.placing, placing: placing,
hex: this.getHex(cell), hex: getHex(cell),
occupant: this.getCellOccupant(cell), occupant: getCellOccupant(cell),
contents: this.getCellContents(cell) contents: getCellContents(cell)
}; };
let toPlace = this.placing.pop(); let toPlace = placing.pop();
if (isGrenade(toPlace)) { if (isGrenade(toPlace)) {
state.hex.after(toPlace); state.hex.after(toPlace);
} else if (toPlace && !state.occupant) { } else if (toPlace && !state.occupant) {
this.counter.place(toPlace, cell); counterMod.place(toPlace, cell);
this.placing.push(toPlace); placing.push(toPlace);
const lockedSl = this.getLockedSightLine(); const lockedSl = getLockedSightLine(svg);
if (!lockedSl) { if (!lockedSl) {
this.clearSightLine(); clearSightLine();
} else { } else {
this.updateSightLine(cell); updateSightLine(cell);
} }
} else if (toPlace && state.occupant) { } else if (toPlace && state.occupant) {
if (toPlace === state.occupant) { if (toPlace === state.occupant) {
if ('previous' in toPlace.dataset) { if ('previous' in toPlace.dataset) {
const trace = this.counter.getTrace(toPlace); const trace = counterMod.getTrace(toPlace);
toPlace.remove(); toPlace.remove();
toPlace = this.getCounterAtGridIndex(...toPlace.dataset.previous.split(',')); toPlace = getCounterAtGridIndex(...toPlace.dataset.previous.split(','));
toPlace.classList.remove('clone'); toPlace.classList.remove('clone');
toPlace.classList.add(this.counter.selectedClass); toPlace.classList.add(counterMod.selectedClass);
if (!('previous' in toPlace.dataset)) { if (!('previous' in toPlace.dataset)) {
trace.remove(); trace.remove();
} else { } else {
@ -189,39 +115,39 @@ export default class Game {
points.pop(); points.pop();
trace.setAttributeNS(null, 'points', points.join(' ')); trace.setAttributeNS(null, 'points', points.join(' '));
} }
this.placing.push(toPlace); placing.push(toPlace);
const lockedSl = this.getLockedSightLine(); const lockedSl = getLockedSightLine(svg);
if (!lockedSl) { if (!lockedSl) {
this.clearSightLine(); clearSightLine();
} else { } else {
this.updateSightLine(toPlace.parentElement); updateSightLine(toPlace.parentElement);
} }
} else { } else {
this.unSelect(); unSelect();
} }
} else if (!state.occupant.classList.contains('clone')) { } else if (!state.occupant.classList.contains('clone')) {
this.select(state.occupant); select(state.occupant);
} else { } else {
if (isClone(state.occupant).of(toPlace)) { if (isClone(state.occupant).of(toPlace)) {
if (!('previous' in state.occupant.dataset)) { if (!('previous' in state.occupant.dataset)) {
state.occupant.classList.remove('clone'); state.occupant.classList.remove('clone');
state.occupant.classList.add(this.counter.selectedClass); state.occupant.classList.add(counterMod.selectedClass);
toPlace.remove(); toPlace.remove();
toPlace = state.occupant; toPlace = state.occupant;
this.counter.removeClones(toPlace); counterMod.removeClones(toPlace);
this.counter.getTrace(toPlace).remove(); counterMod.getTrace(toPlace).remove();
const lockedSl = this.getLockedSightLine(); const lockedSl = getLockedSightLine(svg);
if (!lockedSl) { if (!lockedSl) {
this.clearSightLine(); clearSightLine();
} else { } else {
this.updateSightLine(cell); updateSightLine(cell);
} }
} else { } else {
const index = this.getGridIndex(state.occupant), const index = getGridIndex(state.occupant),
trace = this.counter.getTrace(toPlace), trace = counterMod.getTrace(toPlace),
pos = this.getCellPosition(cell), pos = getCellPosition(cell),
points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');; points = trace.getAttribute('points').split(' ').filter(p => p != `${pos.x},${pos.y}`).join(' ');;
let current = toPlace; let current = toPlace;
@ -229,17 +155,17 @@ export default class Game {
trace.setAttributeNS(null, 'points', points); trace.setAttributeNS(null, 'points', points);
while (current.dataset.previous != `${index.x},${index.y}`) { while (current.dataset.previous != `${index.x},${index.y}`) {
current = this.getCounterAtGridIndex(...current.dataset.previous.split(',')); current = getCounterAtGridIndex(...current.dataset.previous.split(','));
} }
current.dataset.previous = state.occupant.dataset.previous; current.dataset.previous = state.occupant.dataset.previous;
state.occupant.remove(); state.occupant.remove();
} }
} }
this.placing.push(toPlace); placing.push(toPlace);
} }
} else if (!toPlace && state.occupant) { } else if (!toPlace && state.occupant) {
this.select(state.occupant); select(state.occupant);
} else { } else {
console.log('removing cell contents'); console.log('removing cell contents');
state.contents.forEach(el => el.remove()); state.contents.forEach(el => el.remove());
@ -247,107 +173,191 @@ export default class Game {
}); });
cell.addEventListener('dblclick', e => { cell.addEventListener('dblclick', e => {
const toPlace = this.placing.pop(), const toPlace = placing.pop(),
occupant = this.getCellOccupant(cell); occupant = getCellOccupant(cell);
if (toPlace && occupant && toPlace == occupant) { if (toPlace && occupant && toPlace == occupant) {
const { number, allegiance } = toPlace.dataset, const { number, allegiance } = toPlace.dataset,
selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`; selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`;
this.svg.querySelectorAll(selector).forEach(el => el.remove()); svg.querySelectorAll(selector).forEach(el => el.remove());
} }
}); });
cell.addEventListener('contextmenu', e => { cell.addEventListener('contextmenu', e => {
e.preventDefault(); e.preventDefault();
this.sightLine.toggleLock(cell); sightLine.toggleLock(cell);
cell.dispatchEvent(new MouseEvent('pointerover')); cell.dispatchEvent(new MouseEvent('pointerover'));
}); });
cell.addEventListener('pointerover', e => { cell.addEventListener('pointerover', e => {
let selected = this.getSelected(); let selected = getSelected();
if (selected) { if (selected) {
let sl = this.getSightLine(), let sl = getSightLine(svg),
isOnBoard = selected.parentElement.hasAttribute('data-x'), isOnBoard = selected.parentElement.hasAttribute('data-x'),
sourceCell = selected.parentElement; sourceCell = selected.parentElement;
if (isOnBoard && (!sl || sl.classList.contains('active')) && sourceCell != cell) { if (isOnBoard && (!sl || sl.classList.contains('active')) && sourceCell != cell) {
this.drawSightLine(sourceCell, cell); drawSightLine(sourceCell, cell);
} }
} }
let occupant = this.getCellOccupant(cell); let occupant = getCellOccupant(cell);
if (occupant) { if (occupant) {
this.firingArc.toggleCounterVisibility(occupant, true); firingArc.toggleCounterVisibility(occupant, true);
} }
}); });
cell.addEventListener('pointerout', e => { cell.addEventListener('pointerout', e => {
let sl = this.getActiveSightLine(); let sl = getActiveSightLine(svg);
if (sl) { if (sl) {
this.clearSightLine(); clearSightLine();
} }
let occupant = this.getCellOccupant(cell); let occupant = getCellOccupant(cell);
if (occupant) { if (occupant) {
this.firingArc.toggleCounterVisibility(occupant, false); firingArc.toggleCounterVisibility(occupant, false);
} }
}); });
}); });
// debug
const c = counterMod.getCounter({ dataset: { allegiance: 'davion', number: '1' }});
counterMod.place(c, getCell(17, 25));
select(c);
function getCell(x, y) {
return svg.querySelector(`g[data-y="${y}"] > g[data-x="${x}"]`);
} }
setFiringArc(size) { function getSelected() {
const counter = this.getSelected(), return svg.querySelector(`.counter.selected[data-allegiance][data-number]`);
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
if (isOnBoard(counter)) {
this.firingArc.set(size, counter, this.getCellPosition(counter.parentElement));
}
} }
setGrenade() { function clearSightLine() {
let counter = document.createElementNS(svgns, 'use'); sightLine.hexes = [];
counter.setAttributeNS(null, 'href', '#counter-grenade'); sightLine.clear();
distanceCallback && distanceCallback();
this.placing.push(counter);
} }
updateSightLine(cell) { function updateSightLine(cell) {
const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = cell, const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = cell,
{ dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = this.sightLine.lockTarget; { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = sightLine.lockTarget;
const selector = this.sightLine.calcIndexes(+sX, +sY, +tX, +tY) const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY)
.map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`) .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
.join(', '); .join(', ');
const hexes = this.svg.querySelectorAll(selector); const hexes = svg.querySelectorAll(selector);
this.sightLine.hexes = hexes; sightLine.hexes = hexes;
this.sightLine.update(this.getCellPosition(cell)); sightLine.update(getCellPosition(cell));
this.distanceCallback && this.distanceCallback(hexes.length - 1); distanceCallback && distanceCallback(hexes.length - 1);
} }
drawSightLine(sourceCell, targetCell) { function drawSightLine(sourceCell, targetCell) {
const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell, const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell,
{ dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell; { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell;
const selector = this.sightLine.calcIndexes(+sX, +sY, +tX, +tY) const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY)
.map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`) .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
.join(', '); .join(', ');
const hexes = this.svg.querySelectorAll(selector); const hexes = svg.querySelectorAll(selector);
this.sightLine.hexes = hexes; sightLine.hexes = hexes;
this.sightLine.drawLine(this.getCellPosition(sourceCell), this.getCellPosition(targetCell)); sightLine.drawLine(getCellPosition(sourceCell), getCellPosition(targetCell));
this.distanceCallback && this.distanceCallback(hexes.length - 1); distanceCallback && distanceCallback(hexes.length - 1);
} }
clearSightLine() { function select(selected) {
this.sightLine.hexes = []; const counter = counterMod.getCounter(selected);
this.sightLine.clear();
this.distanceCallback && this.distanceCallback(); if (counter) {
unSelect();
placing.push(counter);
counter.classList.add(counterMod.selectedClass);
firingArc.get(counter).forEach(el => el.removeAttribute('clip-path'));
selectCallback && selectCallback({ prone: counterMod.hasProne(counter), ...counter.dataset });
} }
} }
function unSelect() {
const selected = getSelected();
if (selected) {
placing = [];
getSelected().classList.remove(counterMod.selectedClass);
clearSightLine();
firingArc.clipAll();
}
}
function endMove() {
const selected = getSelected();
if (selected) {
counterMod.endMove(selected);
unSelect();
}
}
function endTurn(allegiance) {
firingArc.clear(allegiance);
}
function toggleProne() {
const selected = getSelected(),
isOnBoard = selected && selected.parentElement.hasAttribute('data-x');
if (selected && isOnBoard) {
counterMod.toggleProne(selected);
}
}
function toggleFiringArcVisibility(allegiance) {
firingArc.toggleVisibility(allegiance);
}
function setFiringArc(size) {
const counter = getSelected(),
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
if (isOnBoard(counter)) {
firingArc.set(size, counter, getCellPosition(counter.parentElement));
}
}
function setGrenade() {
let counter = document.createElementNS(svgns, 'use');
counter.setAttributeNS(null, 'href', '#counter-grenade');
placing.push(counter);
}
return {
set distanceCallback(callback) {
distanceCallback = callback;
},
set proneFlagCallback(callback) {
proneFlagCallback = callback;
},
set selectCallback(callback) {
selectCallback = callback;
},
select,
unSelect,
endMove,
endTurn,
setFiringArc,
setGrenade,
toggleFiringArcVisibility,
toggleProne
};
}