From 187faec2dfb7959c536d6847a61be912cff9275e Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 29 May 2024 18:02:18 -0700
Subject: Try to simplify trooper counter
---
public/assets/css/map.css | 36 +++-----
public/assets/css/style.css | 15 +--
public/assets/images/counters.svg | 43 +++++++--
public/assets/images/scenario-side_show.svg | 136 ++++++++++++++++++++++------
public/index.html | 2 +-
src/import_external_resources.js | 15 +++
src/import_mapsheets.js | 8 --
src/modules/record_sheet.js | 5 +-
8 files changed, 185 insertions(+), 75 deletions(-)
create mode 100644 src/import_external_resources.js
delete mode 100644 src/import_mapsheets.js
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 8f45936..47e5bfe 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -47,10 +47,6 @@ polyline.move-trace {
/* fill: #bacae3; */
}
-#counter-base {
- r: inherit;
-}
-
g.troop-counter, g.counter, g.troop-counter use {
r: inherit;
}
@@ -59,7 +55,7 @@ g.troop-counter-template, g.troop-counter-template use {
r: inherit;
}
-g.weapon-symbol {
+g.weapon-symbol :not(use[href="#counter-base"]) {
stroke: white;
stroke-width: 0.5px;
}
@@ -107,18 +103,27 @@ g[data-allegiance="attacker"].clone {
fill: rgb(126, 126, 255);
}
-text.counter, #troop-counter text {
+.counter, #troop-counter text {
+ /* transform: translateY(4px); */
+}
+
+g.counter use.troop-number, g.counter use.squad-number {
font-size: 12px;
font-weight: bold;
- fill: white;
- font-family: sans-serif;
+ font-family: monospace;
cursor: default;
text-anchor: middle;
- transform: translateY(4px);
pointer-events: none;
user-select: none;
+ --text-fill: white;
+ --translateY: 4px;
}
+/* .primary-weapon {
+ stroke: white;
+ stroke-width: 0.5px;
+} */
+
polygon.firing-arc[data-allegiance="defender"] {
fill: red;
}
@@ -167,17 +172,6 @@ g.counter use {
r: 5px;
}
-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;
}
@@ -194,7 +188,7 @@ g.counter .troop-number, g.counter .squad-number {
transform: translate(var(--translateX), 0) scale(var(--scale));
}
-g.selected use[href="#counter-base"] {
+g.selected use.primary-weapon {
animation: 1s selected 0.25s linear infinite;
stroke-width: 2px;
stroke: yellow;
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index cde2c33..582e118 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -181,11 +181,18 @@ polygon.firing-arc[data-allegiance="attacker"] {
fill: blue;
}
-.weapon-icon {
+.soldier-record svg use {
+ r: 5px;
+ stroke: none;
+}
+
+
+.soldier-record svg.weapon-icon use {
stroke: white;
stroke-width: 0.5px;
}
+
.soldier-record svg {
width: 20px;
height: 20px;
@@ -210,12 +217,6 @@ polygon.firing-arc[data-allegiance="attacker"] {
font-family: monospace;
}
-.weapon-symbol :not(use[href="#counter-base"]) {
- stroke: white;
- stroke-width: 0.5;
- fill: none;
-}
-
.soldier-record.selected {
background-color: khaki;
}
diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg
index ec9cff6..85936d0 100644
--- a/public/assets/images/counters.svg
+++ b/public/assets/images/counters.svg
@@ -1,7 +1,36 @@
diff --git a/public/index.html b/public/index.html
index 4a5752d..7ab9f15 100644
--- a/public/index.html
+++ b/public/index.html
@@ -247,7 +247,7 @@
diff --git a/src/import_external_resources.js b/src/import_external_resources.js
new file mode 100644
index 0000000..aba29d2
--- /dev/null
+++ b/src/import_external_resources.js
@@ -0,0 +1,15 @@
+import mapsheets from './assets/images/mapsheets.svg';
+import counters from './assets/images/counters.svg';
+
+const files = {
+ 'mapsheets.svg': mapsheets,
+ 'counters.svg': counters
+}
+
+document.querySelectorAll('use[data-href*=".svg"').forEach(el => {
+ const [filename] = el.dataset.href.match(/.+\.svg/g)
+ , href = el.dataset.href.replace(filename, files[filename].split('/').pop())
+ ;
+
+ el.setAttributeNS(null, 'href', href);
+});
diff --git a/src/import_mapsheets.js b/src/import_mapsheets.js
deleted file mode 100644
index 2e1b0fc..0000000
--- a/src/import_mapsheets.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import mapsheets from './assets/images/mapsheets.svg';
-
-const useEls = document.querySelectorAll('svg use[data-href*="mapsheets.svg"');
-
-useEls.forEach(el => {
- const href = el.dataset.href.replace('mapsheets.svg', mapsheets.split('/').pop());
- el.setAttributeNS(null, 'href', href);
-});
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 2865309..33a21fe 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -81,12 +81,13 @@ function createWeaponIcon(type) {
function createRecord(unit) {
const { dataset: { allegiance, number, squad }} = unit,
primaryWeapon = unit.querySelector('.primary-weapon'),
- pw = primaryWeapon?.getAttribute('href').replace('#', '') || 'rifle',
+ pw = primaryWeapon.getAttributeNS(null, 'href').split('#').pop() || 'rifle',
div = document.createElement('div', { is: 'soldier-record-block' }),
spans = Array(6).fill('span').map(t => document.createElement(t)),
[tn, sn, pwt, pwd, pwrs, pwrl] = spans;
- div.setAttribute('class', 'soldier-record');
+ div.classList.add('soldier-record');
+ if (unit.classList.contains('selected')) div.classList.add('selected');
div.dataset.number = number;
div.dataset.allegiance = allegiance;
--
cgit v1.2.3