From f60969ef8dc72d3b97c5abb9f637171d2a6f2921 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Tue, 23 Apr 2024 19:01:29 -0700
Subject: WIP: handle clicking on counters at the cell level
---
src/modules/game.js | 128 ++++++++++++++++++++++++++++++++++++++++------------
1 file changed, 99 insertions(+), 29 deletions(-)
(limited to 'src/modules/game.js')
diff --git a/src/modules/game.js b/src/modules/game.js
index b3f1797..ca911ed 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -4,14 +4,6 @@ import Counter from './counter.js';
const svgns = "http://www.w3.org/2000/svg";
-function isEven(n) {
- return n % 2 === 0;
-}
-
-function radToDeg(radians) {
- return radians * 180 / Math.PI;
-}
-
export default class Game {
info;
placing = [];
@@ -27,7 +19,6 @@ export default class Game {
this.sightLine = new SightLine(svg);
this.counter = new Counter(svg, this);
- // this.setUpCounter(this);
this.setUpCells();
}
@@ -59,8 +50,12 @@ export default class Game {
return this.svg.querySelectorAll('#firing-arcs polygon:not([clip-path])');
}
- getGridIndex({ parentElement }) {
- return { x: parentElement.dataset.x, y: parentElement.parentElement.dataset.y };
+ getGridIndex({ parentElement: { dataset: { x }, parentElement: { dataset: { y }}}}) {
+ return { x, y };
+ }
+
+ getCounterAtGridIndex(x, y) {
+ return this.getCell(x, y).querySelector('use[href*="#t-"');
}
getBoard() {
@@ -141,33 +136,109 @@ export default class Game {
let group = cell,
point = this.getHex(cell);
- point.addEventListener('click', e => {
- const toPlace = this.placing.pop();
+ function isGrenade(el) {
+ return el && el.getAttribute('href') === '#counter-grenade';
+ }
- // TODO
- let existingOccupant =
- this.svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);
+ function isClone(counter) {
+ const isClone = counter.classList.contains('clone'),
+ { allegiance: clAl, number: clNum } = counter.dataset;
- if (toPlace && toPlace.getAttribute('href') === '#counter-grenade') {
- point.parentElement.appendChild(toPlace);
- return;
- }
+ return {
+ of: function ({ dataset: { allegiance, number }}) {
+ return isClone && clAl == allegiance && clNum == number;
+ }
+ };
+ }
- if (this.getSelected() && !existingOccupant) {
- let sl = this.svg.querySelector('.sight-line');
- this.placing.push(toPlace);
- this.counter.place(point);
+ cell.addEventListener('click', e => {
+ const state = {
+ placing: this.placing,
+ hex: cell.querySelector('use[href="#hex"]'),
+ occupant: cell.querySelector('use[href*="#t-"'),
+ contents: cell.querySelectorAll('*:not(use[href="#hex"])')
+ };
- if (sl) {
- if (sl.classList.contains('active')) {
- this.sightLine.clear();
+ let toPlace = this.placing.pop();
+
+ if (isGrenade(toPlace)) {
+ state.hex.after(toPlace);
+ } else if (toPlace && !state.occupant) {
+ this.counter.place(point);
+ this.placing.push(toPlace);
+ } else if (toPlace && state.occupant) {
+ if (toPlace === state.occupant) {
+ if ('previous' in toPlace.dataset) {
+ toPlace.remove();
+ toPlace = this.getCounterAtGridIndex(...toPlace.dataset.previous.split(','));
+ toPlace.classList.remove('clone');
+ toPlace.classList.add('selected');
+ console.log(toPlace);
+ this.placing.push(toPlace);
} else {
- this.sightLine.update(point, this.getCellPosition(point.parentElement));
+ this.counter.unSelect();
+ }
+ } else if (!state.occupant.classList.contains('clone')) {
+ this.counter.select(state.occupant);
+ this.placing.push(state.occupant);
+ } else {
+ if (isClone(state.occupant).of(toPlace)) {
+ if (!('previous' in state.occupant.dataset)) {
+ state.occupant.classList.remove('clone');
+ state.occupant.classList.add('selected');
+ toPlace.remove();
+ toPlace = state.occupant;
+ this.counter.removeClones(toPlace);
+ } else {
+ const index = this.getGridIndex(state.occupant);
+ let current = toPlace;
+
+ while (current.dataset.previous != `${index.x},${index.y}`) {
+ current = this.getCounterAtGridIndex(...current.dataset.previous.split(','));
+ }
+
+ current.dataset.previous = state.occupant.dataset.previous;
+ state.occupant.remove();
+ }
}
+ this.placing.push(toPlace);
}
+ } else if (!toPlace && state.occupant) {
+ this.counter.select(state.occupant);
+ this.placing.push(state.occupant);
+ } else {
+ console.log('removing cell contents');
+ state.contents.forEach(el => el.remove());
}
});
+ // point.addEventListener('click', e => {
+ // const toPlace = this.placing.pop();
+
+ // // TODO
+ // let existingOccupant =
+ // this.svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);
+
+ // if (toPlace && toPlace.getAttribute('href') === '#counter-grenade') {
+ // point.after(toPlace);
+ // return;
+ // }
+
+ // if (this.getSelected() && !existingOccupant) {
+ // let sl = this.svg.querySelector('.sight-line');
+ // this.placing.push(toPlace);
+ // this.counter.place(point);
+
+ // if (sl) {
+ // if (sl.classList.contains('active')) {
+ // this.sightLine.clear();
+ // } else {
+ // this.sightLine.update(point, this.getCellPosition(point.parentElement));
+ // }
+ // }
+ // }
+ // });
+
// Logic for this event:
// If there's a locked sightline, unlock it. Otherwise, if there's an
// active sightline, lock it.
@@ -233,7 +304,6 @@ export default class Game {
setGrenade() {
let counter = document.createElementNS(svgns, 'use');
counter.setAttributeNS(null, 'href', '#counter-grenade');
- counter.addEventListener('click', () => counter.remove());
this.placing.push(counter);
}
--
cgit v1.2.3