Web Dev Solutions

Catalin Mititiuc

From 25a79c4be5b50546147d61184e60bc63292a074c Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Sat, 27 Apr 2024 11:47:25 -0700 Subject: Remove 'reveal pattern' from game, as it's not necessary --- src/modules/game.js | 236 ++++++++++++++++++++++++------------------------- src/modules/panzoom.js | 2 +- 2 files changed, 115 insertions(+), 123 deletions(-) (limited to 'src/modules') diff --git a/src/modules/game.js b/src/modules/game.js index 485362b..6b59659 100644 --- a/src/modules/game.js +++ b/src/modules/game.js @@ -64,14 +64,75 @@ function getCellPosition(cell) { return pt; } -export default function (svg) { - let distanceCallback, proneFlagCallback, selectCallback, - placing = []; +function getCell(x, y) { + return svg.querySelector(`g[data-y="${y}"] > g[data-x="${x}"]`); +} + +function getCounterAtGridIndex(x, y) { + return getCell(x, y).querySelector('.counter'); +} + +function getSelected() { + return svg.querySelector(`.counter.selected[data-allegiance][data-number]`); +} + +function clearSightLine() { + sightLine.hexes = []; + sightLine.clear(); + distanceCallback && distanceCallback(); +} + +function updateSightLine(cell) { + const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = cell, + { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = sightLine.lockTarget; + + const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY) + .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`) + .join(', '); + + const hexes = svg.querySelectorAll(selector); + sightLine.hexes = hexes; + sightLine.update(getCellPosition(cell)); + distanceCallback && distanceCallback(hexes.length - 1); +} + +function drawSightLine(sourceCell, targetCell) { + const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell, + { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell; + + const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY) + .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`) + .join(', '); + + const hexes = svg.querySelectorAll(selector); + sightLine.hexes = hexes; + sightLine.drawLine(getCellPosition(sourceCell), getCellPosition(targetCell)); + distanceCallback && distanceCallback(hexes.length - 1); +} - const board = svg.querySelector('.board'), - firingArc = FiringArc(svg, board), - sightLine = SightLine(board), - counterMod = Counter(svg, board); +let svg, distanceCallback, proneFlagCallback, selectCallback; + +let board, firingArc, sightLine, counterMod, + placing = []; + +export function setDistanceCallback(callback) { + distanceCallback = callback; +} + +export function setProneFlagCallback(callback) { + proneFlagCallback = callback; +} + +export function setSelectCallback(callback) { + selectCallback = callback; +} + +export function start(el) { + svg = el; + board = svg.querySelector('.board'); + firingArc = FiringArc(svg, board); + sightLine = SightLine(board); + counterMod = Counter(svg, board); getCells(svg).forEach(cell => { cell.addEventListener('click', e => { @@ -226,138 +287,69 @@ export default function (svg) { 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}"]`); - } - - function getCounterAtGridIndex(x, y) { - return getCell(x, y).querySelector('.counter'); - } - - function getSelected() { - return svg.querySelector(`.counter.selected[data-allegiance][data-number]`); - } - - function clearSightLine() { - sightLine.hexes = []; - sightLine.clear(); - distanceCallback && distanceCallback(); - } - - function updateSightLine(cell) { - const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = cell, - { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = sightLine.lockTarget; - - const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY) - .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`) - .join(', '); - - const hexes = svg.querySelectorAll(selector); - sightLine.hexes = hexes; - sightLine.update(getCellPosition(cell)); - distanceCallback && distanceCallback(hexes.length - 1); - } - - function drawSightLine(sourceCell, targetCell) { - const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell, - { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell; - - const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY) - .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`) - .join(', '); +export function select(selected) { + const counter = counterMod.getCounter(selected); - const hexes = svg.querySelectorAll(selector); - sightLine.hexes = hexes; - sightLine.drawLine(getCellPosition(sourceCell), getCellPosition(targetCell)); - distanceCallback && distanceCallback(hexes.length - 1); + 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 select(selected) { - const counter = counterMod.getCounter(selected); +export function unSelect() { + const selected = getSelected(); - 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 }); - } + if (selected) { + placing = []; + getSelected().classList.remove(counterMod.selectedClass); + clearSightLine(); + firingArc.clipAll(); } +} - function unSelect() { - const selected = getSelected(); +export function endMove() { + 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(); - } + if (selected) { + counterMod.endMove(selected); + unSelect(); } +} - function endTurn(allegiance) { - firingArc.clear(allegiance); - } +export function endTurn(allegiance) { + firingArc.clear(allegiance); +} - function toggleProne() { - const selected = getSelected(), - isOnBoard = selected && selected.parentElement.hasAttribute('data-x'); +export function toggleProne() { + const selected = getSelected(), + isOnBoard = selected && selected.parentElement.hasAttribute('data-x'); - if (selected && isOnBoard) { - counterMod.toggleProne(selected); - } + if (selected && isOnBoard) { + counterMod.toggleProne(selected); } +} - function toggleFiringArcVisibility(allegiance) { - firingArc.toggleVisibility(allegiance); - } +export function toggleFiringArcVisibility(allegiance) { + firingArc.toggleVisibility(allegiance); +} - function setFiringArc(size) { - const counter = getSelected(), - isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x'); +export function setFiringArc(size) { + const counter = getSelected(), + isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x'); - if (isOnBoard(counter)) { - firingArc.set(size, counter, getCellPosition(counter.parentElement)); - } + if (isOnBoard(counter)) { + firingArc.set(size, counter, getCellPosition(counter.parentElement)); } +} - function setGrenade() { - let counter = document.createElementNS(svgns, 'use'); - counter.setAttributeNS(null, 'href', '#counter-grenade'); +export 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 - }; + placing.push(counter); } diff --git a/src/modules/panzoom.js b/src/modules/panzoom.js index dcc6b34..86f6727 100644 --- a/src/modules/panzoom.js +++ b/src/modules/panzoom.js @@ -26,7 +26,7 @@ function observePanZoomChanges(svg) { observer.observe(svg, { attributeFilter: ['style'] }); } -export default function (svg) { +export function start(svg) { restorePanZoomVal(svg); addEventListeners(svg); observePanZoomChanges(svg); -- cgit v1.2.3