From 4dc47d6f045c01479d1298b933fd3e129d3d8279 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Mon, 22 Apr 2024 14:28:29 -0700
Subject: Add grenade counter
---
public/counter_grenade.jpg | Bin 0 -> 6649 bytes
public/icon_grenade.png | Bin 0 -> 3252 bytes
public/index.html | 4 +++-
public/map.css | 4 ++++
public/map.svg | 5 +++--
src/index.js | 2 ++
src/modules/game.js | 21 ++++++++++++++++++++-
7 files changed, 32 insertions(+), 4 deletions(-)
create mode 100644 public/counter_grenade.jpg
create mode 100644 public/icon_grenade.png
diff --git a/public/counter_grenade.jpg b/public/counter_grenade.jpg
new file mode 100644
index 0000000..45d25f0
Binary files /dev/null and b/public/counter_grenade.jpg differ
diff --git a/public/icon_grenade.png b/public/icon_grenade.png
new file mode 100644
index 0000000..7642556
Binary files /dev/null and b/public/icon_grenade.png differ
diff --git a/public/index.html b/public/index.html
index a60db29..dbabace 100644
--- a/public/index.html
+++ b/public/index.html
@@ -167,8 +167,10 @@
-
Prone:
+
Turn:
0
diff --git a/public/map.css b/public/map.css
index 780b912..ad67ce3 100644
--- a/public/map.css
+++ b/public/map.css
@@ -86,6 +86,10 @@ g.troop-counter-template text {
transform: translate(-5px, 6px);
}
+[href="#counter-grenade"] {
+ transform: translate(-5px, -5px);
+}
+
g#points g use.counter {
r: 5px;
}
diff --git a/public/map.svg b/public/map.svg
index 1436aea..c5e80f5 100644
--- a/public/map.svg
+++ b/public/map.svg
@@ -21,7 +21,8 @@
6
7
-
+
+
@@ -72,7 +73,7 @@
-
+
diff --git a/src/index.js b/src/index.js
index 617e953..63925b1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -206,6 +206,8 @@ window.addEventListener('load', () => {
el.addEventListener('click', () => game.setFiringArc(el.dataset.size))
);
+ document.querySelector('.set-grenade').addEventListener('click', () => game.setGrenade());
+
recordSheetVisibility.addEventListener('input', e => {
let divs = document.querySelectorAll('#content div');
diff --git a/src/modules/game.js b/src/modules/game.js
index c94685e..a7bb05e 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -131,6 +131,7 @@ function linedraw(x1, y1, x2, y2) {
export default class Game {
info;
+ placing = [];
#firingArcVisibility = {
davion: false,
@@ -392,13 +393,20 @@ export default class Game {
point = this.getHex(cell);
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.parentElement.appendChild(toPlace);
+ return;
+ }
+
if (this.getSelected() && !existingOccupant) {
let sl = this.svg.querySelector('.sight-line');
-
+ this.placing.push(toPlace);
this.Counter.place(point);
if (sl) {
@@ -618,6 +626,7 @@ export default class Game {
let counter = container.getCounter(allegiance, number);
if (counter) {
+ container.placing.push(counter);
counter.classList.add(selectedClass);
let existingArcs = container.getExistingArcs(allegiance, number);
existingArcs.forEach(el => el.removeAttribute('clip-path'));
@@ -627,6 +636,7 @@ export default class Game {
this.unSelect = function () {
let selected = container.getSelected();
+ container.place = [];
if (selected) {
let { troopNumber, troopAllegiance } = selected.dataset;
@@ -965,4 +975,13 @@ export default class Game {
firingArc.addEventListener('contextmenu', cancelFiringArcPlacement);
}
}
+
+ setGrenade() {
+ const svgns = "http://www.w3.org/2000/svg";
+
+ 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