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

Add clear hex contents dialog

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-07-28 14:36:56 -07:00
parent d75fb0b37c
commit e746cfb216
4 changed files with 50 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/index.html
View File

@ -358,6 +358,16 @@
</form>
</dialog>
<dialog id="clear-hex">
<p>Clear hex contents?</p>
<div>
<form>
<button value="cancel" formmethod="dialog">Cancel</button>
<button value="confirm" formmethod="dialog">Confirm</button>
</form>
</div>
</dialog>
<input type="file" accept="image/svg+xml" />
<script src="index.js"></script>

8
src/index.js
View File

@ -84,10 +84,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() {

79
src/modules/gameboard.js
View File

@ -211,6 +211,16 @@ export function start(el) {
top.container = svg.querySelector('.grid-top > .container');
const topHex = svg.querySelector('.grid-top > use[href="#hex"]');
const clearHexDialog = document.querySelector('#clear-hex');
clearHexDialog.addEventListener('close', e => {
if (clearHexDialog.returnValue === 'confirm') {
[...top.container.children].forEach(child => {
top.collection.delete(child);
child.remove();
});
}
});
gridTop.addEventListener('pointerleave', e => {
// Work around webkit bug https://bugs.webkit.org/show_bug.cgi?id=233432
const elUnderCursor = svg.parentNode.elementFromPoint(e.clientX, e.clientY);
@ -227,6 +237,11 @@ export function start(el) {
topHex.addEventListener('click', clickHandler);
topHex.addEventListener('contextmenu', e => {
e.preventDefault();
getSelected() ? sightLine.toggleLock(top.cell) : clearHexDialog.showModal();
});
const startingLocations = svg.querySelector('.start-locations');
startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
@ -237,10 +252,8 @@ export function start(el) {
let toPlace = placing.pop();
if (isCounter(toPlace) || isMechTemplate(toPlace)) {
//getHex(this).after(toPlace);
top.collection.set(toPlace, { parent: top.cell });
top.container.append(toPlace);
//if (isCounter(toPlace)) arrangeCounters(this);
if (isCounter(toPlace)) arrangeCounters(top.container);
removeEventListener("keydown", handleMechTemplateRotation);
} else if (toPlace && !occupant) {
@ -249,7 +262,7 @@ export function start(el) {
top.container.prepend(toPlace);
//toPlace.removeEventListener('click', selectOffBoard);
placing.push(toPlace);
//getLockedSightLine(svg) ? updateSightLine(this) : clearSightLine();
getLockedSightLine(svg) ? updateSightLine(top.cell) : clearSightLine();
} else if (toPlace && occupant) {
if (toPlace === occupant) {
Observable.notify('select');
@ -316,25 +329,18 @@ export function start(el) {
const selected = getSelected();
});
cell.addEventListener('dblclick', e => {
const toPlace = placing.pop(),
occupant = getCellOccupant(cell);
if (toPlace && occupant && toPlace === occupant) {
const { number, allegiance } = toPlace.dataset,
selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`;
svg.querySelectorAll(selector).forEach(el => el.remove());
Observable.notify('select');
}
});
cell.addEventListener('contextmenu', e => {
e.preventDefault();
sightLine.toggleLock(cell);
cell.dispatchEvent(new MouseEvent('pointerover'));
});
//cell.addEventListener('dblclick', e => {
// const toPlace = placing.pop(),
// occupant = getCellOccupant(cell);
//
// if (toPlace && occupant && toPlace === occupant) {
// const { number, allegiance } = toPlace.dataset,
// selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`;
//
// svg.querySelectorAll(selector).forEach(el => el.remove());
// Observable.notify('select');
// }
//});
cell.addEventListener('pointerover', () => {
console.log(['pointerenter', cell]);
@ -371,27 +377,6 @@ export function start(el) {
firingArc.toggleCounterVisibility(svg, occupant, true);
}
});
//cell.addEventListener('pointerout', e => {
// console.log('pointerout');
// If pointerout was not triggered by hovering over an element on that
// game hex
//if (!e.relatedTarget || top.collection.get(e.relatedTarget)?.parent !== cell) {
// [...top.container.children].forEach(child => {
// top.collection.get(child).parent.append(child);
// top.collection.delete(child);
// });
//
// cell.classList.remove('hover');
// getActiveSightLine(svg) && clearSightLine();
//
// const occupant = getCellOccupant(cell);
//
// if (occupant) {
// firingArc.toggleCounterVisibility(svg, occupant, false);
// }
//}
//});
});
//const cell = document.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]');
@ -402,14 +387,14 @@ 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');
//const cell = getCell(0, 0, 0, 0);
//const trooper = soldier.createCounter(attacker, 'blazer');
//const trooperSack = document.createElementNS(svgns, 'g');
//trooperSack.classList.add('cell-contents');
//trooperSack.append(trooper);
soldier.place(svg, trooper, cell);
//soldier.place(svg, trooper, cell);
// Add some counters in an unoccupied cell
//const countersCell = getCell(-1, 1, 0, 0);

6
src/modules/pan-zoom.js
View File

@ -14,8 +14,10 @@ function restorePanZoomVal(el) {
function addEventListeners(svg, el) {
svg.addEventListener('wheel', e => zoom(el, e, zoomFactor), { passive: false });
svg.addEventListener('pointerdown', e => {
e.target.setPointerCapture(e.pointerId);
pan(svg, el, e), { passive: false };
if (e.button === 0) {
e.target.setPointerCapture(e.pointerId);
pan(svg, el, e), { passive: false };
}
});
}