From ddd32d47c5210eeda6209c6caa36a426a668cc21 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Thu, 2 May 2024 16:58:00 -0700
Subject: Generate weapon data dynamically from counters
---
public/assets/css/map.css | 43 ++++++++++++++++++++++++++++++++++++++-----
public/assets/images/map1.svg | 30 +++++++++++++++---------------
src/modules/game/soldier.js | 2 +-
src/modules/record_sheet.js | 36 ++++++++++++++++++++++++++++++------
4 files changed, 84 insertions(+), 27 deletions(-)
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 0c2fed9..99648fc 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -173,11 +173,38 @@ polygon.firing-arc[data-allegiance="attacker"] {
stroke-opacity: inherit;
}
-g.counter use, use[href*="#t-"] {
+g.counter use {
r: 5px;
}
-g.selected use {
+g.counter text.troop-number, g.counter text.squad-number {
+ fill: black;
+ font-size: 6px;
+ font-family: monospace;
+ font-weight: bold;
+ cursor: default;
+ text-anchor: middle;
+ pointer-events: none;
+ user-select: none;
+}
+
+g.counter use.troop-number, g.counter use.squad-number {
+ --scale: 0.4;
+}
+
+g.counter .troop-number {
+ --translateX: -4px;
+}
+
+g.counter .squad-number {
+ --translateX: 4px;
+}
+
+g.counter .troop-number, g.counter .squad-number {
+ transform: translate(var(--translateX), 0) scale(var(--scale));
+}
+
+g.selected use[href="#counter-base"] {
animation: 1s selected 0.25s linear infinite;
stroke-width: 2px;
stroke: yellow;
@@ -186,7 +213,6 @@ g.selected use {
@keyframes selected {
50% {
- /* stroke: yellow; */
stroke-width: 0px;
r: 5px;
}
@@ -227,16 +253,23 @@ g[data-y]:nth-child(odd) {
}
[data-x]:hover use[href="#hex"] {
- /* --scale: 0.95; */
opacity: 1;
fill: orange;
stroke: black;
}
-[data-x]:hover use[href*="#t-"] {
+[data-x]:hover g.counter {
transform: scale(1.5);
}
+[data-x]:hover g.counter .troop-number {
+ --translateX: -6px;
+}
+
+[data-x]:hover g.counter .squad-number {
+ --translateX: 6px;
+}
+
[data-x] {
--scale: 1;
transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));
diff --git a/public/assets/images/map1.svg b/public/assets/images/map1.svg
index fe64a5e..bdb6a53 100644
--- a/public/assets/images/map1.svg
+++ b/public/assets/images/map1.svg
@@ -65,7 +65,7 @@
-
+
@@ -81,48 +81,48 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/src/modules/game/soldier.js b/src/modules/game/soldier.js
index 1555c19..c5b2323 100644
--- a/src/modules/game/soldier.js
+++ b/src/modules/game/soldier.js
@@ -43,7 +43,7 @@ function updatePlacement(cell, selected, clone) {
selected.dataset.previous = prevCoords;
cell.appendChild(selected);
- selected.childNodes.forEach(n => {
+ Array.from(selected.children).forEach(n => {
if (n.classList.contains('removed')) {
n.remove();
} else if ('preexisting' in n.dataset) {
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 6909249..4d8aada 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -1,3 +1,24 @@
+const weapons = {
+ rifle: {
+ name: 'Rifle',
+ damage: '4L',
+ shortRange: '1-27',
+ longRange: '28-75'
+ },
+ smg: {
+ name: 'SMG',
+ damage: '3L',
+ shortRange: '1-15',
+ longRange: '16-25'
+ },
+ blazer: {
+ name: 'Blazer',
+ damage: '4L',
+ shortRange: '1-17',
+ longRange: '18-105'
+ }
+}
+
function createIcon(number) {
const svgns = 'http://www.w3.org/2000/svg';
const [icon, circle, text] = ['svg', 'circle', 'text'].map(t => document.createElementNS(svgns, t));
@@ -17,8 +38,11 @@ function createIcon(number) {
return icon;
}
-function createRecord({ dataset: { allegiance, number }}) {
- const div = document.createElement('div', { is: 'soldier-record-block' }),
+function createRecord(unit) {
+ const { dataset: { allegiance, number }} = unit,
+ primaryWeapon = unit.querySelector('.primary-weapon'),
+ pw = primaryWeapon.getAttribute('href').replace('#', ''),
+ div = document.createElement('div', { is: 'soldier-record-block' }),
spans = Array(5).fill('span').map(t => document.createElement(t)),
[tn, pwt, pwd, pwrs, pwrl] = spans;
@@ -30,16 +54,16 @@ function createRecord({ dataset: { allegiance, number }}) {
tn.appendChild(createIcon(number));
pwt.setAttribute('slot', 'primary-weapon-type');
- pwt.textContent = 'Rifle';
+ pwt.textContent = weapons[pw].name;
pwd.setAttribute('slot', 'primary-weapon-damage');
- pwd.textContent = '4L';
+ pwd.textContent = weapons[pw].damage;
pwrs.setAttribute('slot', 'primary-weapon-range-short');
- pwrs.textContent = '1-27';
+ pwrs.textContent = weapons[pw].shortRange;
pwrl.setAttribute('slot', 'primary-weapon-range-long');
- pwrl.textContent = '28-75';
+ pwrl.textContent = weapons[pw].longRange;
spans.forEach(el => div.appendChild(el));
--
cgit v1.2.3