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

Remove 'reveal pattern' from game, as it's not necessary

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-04-27 11:47:25 -07:00
parent bbd58ed2a0
commit 25a79c4be5
3 changed files with 143 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/index.js
View File

@ -1,5 +1,5 @@
import PanZoom from './modules/panzoom.js';
import Game from './modules/game.js';
import * as panzoom from './modules/panzoom.js';
import * as game from './modules/game.js';
const RecordSheet = {
unSelect: function () {
@ -40,19 +40,18 @@ document.querySelector('object').addEventListener('load', function () {
});
window.addEventListener('load', () => {
const svg = document.querySelector('object').contentDocument.querySelector('svg'),
game = Game(svg);
const svg = document.querySelector('object').contentDocument.querySelector('svg');
window.game = game;
game.start(svg);
panzoom.start(svg);
const svgns = "http://www.w3.org/2000/svg",
recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
PanZoom(svg);
const distanceOutput = document.getElementById('status');
game.distanceCallback = count => {
game.setDistanceCallback(count => {
const output = {
count: '-',
display: 'none'
@ -65,12 +64,12 @@ window.addEventListener('load', () => {
distanceOutput.querySelector('#hex-count').textContent = output.count;
distanceOutput.style.display = output.display;
};
});
const proneToggle = document.getElementById('toggle-prone-counter');
game.proneFlagCallback = checked => proneToggle.checked = checked;
game.selectCallback = data => RecordSheet.select(data);
game.setProneFlagCallback(checked => proneToggle.checked = checked);
game.setSelectCallback(data => RecordSheet.select(data));
// Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
// const identityMtx = [1, 0, 0, 1, 0, 0];

274
src/modules/game.js
View File

@ -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}"]`);
}
const board = svg.querySelector('.board'),
firingArc = FiringArc(svg, board),
sightLine = SightLine(board),
counterMod = Counter(svg, board);
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);
}
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(', ');
const hexes = svg.querySelectorAll(selector);
sightLine.hexes = hexes;
sightLine.drawLine(getCellPosition(sourceCell), getCellPosition(targetCell));
distanceCallback && distanceCallback(hexes.length - 1);
}
function select(selected) {
const counter = counterMod.getCounter(selected);
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
};
}
export function select(selected) {
const counter = counterMod.getCounter(selected);
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 });
}
}
export function unSelect() {
const selected = getSelected();
if (selected) {
placing = [];
getSelected().classList.remove(counterMod.selectedClass);
clearSightLine();
firingArc.clipAll();
}
}
export function endMove() {
const selected = getSelected();
if (selected) {
counterMod.endMove(selected);
unSelect();
}
}
export function endTurn(allegiance) {
firingArc.clear(allegiance);
}
export function toggleProne() {
const selected = getSelected(),
isOnBoard = selected && selected.parentElement.hasAttribute('data-x');
if (selected && isOnBoard) {
counterMod.toggleProne(selected);
}
}
export function toggleFiringArcVisibility(allegiance) {
firingArc.toggleVisibility(allegiance);
}
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));
}
}
export function setGrenade() {
let counter = document.createElementNS(svgns, 'use');
counter.setAttributeNS(null, 'href', '#counter-grenade');
placing.push(counter);
}

2
src/modules/panzoom.js
View File

@ -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);