Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-07-02 17:18:45 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-07-02 17:18:45 -0700
commit5f17d5d786af74bb7b6bd6f99bcd0ccfab4fc9d5 (patch)
treeb0bc7678fae2f79799f5aee4d99d872bb7f58673
parent3c0e59f68ee061abc98dafa07301bd54005e94dc (diff)
Add troop number and squad number when creating counters
Diffstat
-rw-r--r--public/assets/css/map.css21
-rw-r--r--src/index.js21
-rw-r--r--src/modules/game/soldier.js18
-rw-r--r--src/modules/gameboard.js8
-rw-r--r--src/modules/record_sheet.js10
5 files changed, 58 insertions, 20 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 4c3c9a2..7eb87f8 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -177,15 +177,15 @@ g.counter use {
}
g.counter use.troop-number, g.counter use.squad-number {
- --scale: 0.4;
+ --scale: 0.25;
}
g.counter .troop-number {
- --translateX: -4px;
+ --translateX: -3.5px;
}
g.counter .squad-number {
- --translateX: 4px;
+ --translateX: 3.5px;
}
g.counter .troop-number, g.counter .squad-number {
@@ -242,16 +242,21 @@ g[data-y]:nth-child(odd) {
stroke: black;
}
-[data-x]:hover g.counter {
+[data-x]:hover g.counter,
+[data-q][data-r][data-s][data-t]:hover g.counter {
transform: scale(1.5);
}
-[data-x]:hover g.counter .troop-number {
- --translateX: -6px;
+[data-x]:hover g.counter .troop-number,
+[data-q][data-r][data-s][data-t]:hover g.counter .troop-number {
+ --translateX: -5px;
+ --scale: 0.5;
}
-[data-x]:hover g.counter .squad-number {
- --translateX: 6px;
+[data-x]:hover g.counter .squad-number,
+[data-q][data-r][data-s][data-t]:hover g.counter .squad-number {
+ --translateX: 5px;
+ --scale: 0.5;
}
[data-x] {
diff --git a/src/index.js b/src/index.js
index f1bc918..24e017d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -66,7 +66,26 @@ async function buildScenario(req) {
panzoom.start(svg);
gameboard.start(svg);
- recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
+ // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
+ const units = [
+ { dataset: { allegiance: 'attacker', number: 1, squad: 1, weapon: 'blazer' }},
+ { dataset: { allegiance: 'attacker', number: 2, squad: 1, weapon: 'rifle' }},
+ { dataset: { allegiance: 'attacker', number: 3, squad: 1, weapon: 'rifle' }},
+ { dataset: { allegiance: 'attacker', number: 4, squad: 1, weapon: 'smg' }},
+ { dataset: { allegiance: 'attacker', number: 5, squad: 1, weapon: 'smg' }},
+ { dataset: { allegiance: 'attacker', number: 6, squad: 1, weapon: 'smg' }},
+ { dataset: { allegiance: 'attacker', number: 7, squad: 1, weapon: 'smg' }},
+
+ { dataset: { allegiance: 'defender', number: 1, squad: 1, weapon: 'blazer' }},
+ { dataset: { allegiance: 'defender', number: 2, squad: 1, weapon: 'rifle' }},
+ { dataset: { allegiance: 'defender', number: 3, squad: 1, weapon: 'rifle' }},
+ { dataset: { allegiance: 'defender', number: 4, squad: 1, weapon: 'smg' }},
+ { dataset: { allegiance: 'defender', number: 5, squad: 1, weapon: 'smg' }},
+ { dataset: { allegiance: 'defender', number: 6, squad: 1, weapon: 'smg' }},
+ { dataset: { allegiance: 'defender', number: 7, squad: 1, weapon: 'smg' }},
+ ]
+
+ recordSheet.start(null, units);
}
function updateTurnCounter() {
diff --git a/src/modules/game/soldier.js b/src/modules/game/soldier.js
index 7a3ffaa..3ac7b37 100644
--- a/src/modules/game/soldier.js
+++ b/src/modules/game/soldier.js
@@ -57,18 +57,28 @@ function createTrace(previous, current, selected) {
}
export function createCounter(selected, weapon = 'rifle') {
- const use = document.createElementNS(svgns, 'use');
const g = document.createElementNS(svgns, 'g');
+ const weaponCounter = document.createElementNS(svgns, 'use');
const assignedWeapon = isRecord(selected) ? extractWeaponFromRecord(selected) : weapon;
+ const troopNum = document.createElementNS(svgns, 'use');
+ const squadNum = document.createElementNS(svgns, 'use');
- use.setAttributeNS(null, 'href', `../../${counters}#${assignedWeapon}`);
- use.classList.add('primary-weapon');
+ weaponCounter.setAttributeNS(null, 'href', `../../${counters}#${assignedWeapon}`);
+ weaponCounter.classList.add('primary-weapon');
+
+ troopNum.setAttributeNS(null, 'href', `../../${counters}#number-${selected.dataset.number}`);
+ troopNum.classList.add('troop-number');
+
+ squadNum.setAttributeNS(null, 'href', `../../${counters}#number-${selected.dataset.squad}`);
+ squadNum.classList.add('squad-number');
g.classList.add('counter');
g.dataset.allegiance = selected.dataset.allegiance;
g.dataset.number = selected.dataset.number;
g.dataset.squad = selected.dataset.squad;
- g.appendChild(use);
+ g.appendChild(weaponCounter);
+ g.appendChild(troopNum);
+ g.appendChild(squadNum);
return g;
}
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index a716ca8..a6b3e22 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -290,11 +290,11 @@ export function start(el) {
});
// debug //
- const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
- const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
+ // const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
+ // const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
- soldier.place(svg, soldier.createCounter(attacker, 'blazer'), getCell(0, 0, 0, 0));
- soldier.place(svg, soldier.createCounter(defender, 'rifle'), getCell(-1, 0, 1, 0));
+ // soldier.place(svg, soldier.createCounter(attacker, 'blazer'), getCell(0, 0, 0, 0));
+ // soldier.place(svg, soldier.createCounter(defender, 'rifle'), getCell(-1, 0, 1, 0));
///////////
Observable.subscribe('select', select);
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 5f14852..0e26155 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -63,15 +63,19 @@ function createWeaponIcon(type) {
function createRecord(unit) {
const { dataset: { allegiance, number, squad }} = unit,
- primaryWeapon = unit.querySelector('.primary-weapon'),
- pw = primaryWeapon.getAttributeNS(null, 'href').split('#').pop() || 'rifle',
+
+ pw = unit.classList && unit.classList.contains('counter')
+ ? unit.querySelector('.primary-weapon').getAttributeNS(null, 'href').split('#').pop()
+ : unit.dataset.weapon || 'rifle',
+
div = document.createElement('soldier-record-block'),
spans = Array(6).fill('span').map(t => document.createElement(t)),
[tn, sn, pwt, pwd, pwrs, pwrl] = spans;
div.classList.add('soldier-record');
- if (unit.classList.contains('selected')) div.classList.add('selected');
+ if (unit.classList && unit.classList.contains('selected')) div.classList.add('selected');
div.dataset.number = number;
+ div.dataset.squad = squad;
div.dataset.allegiance = allegiance;
tn.setAttribute('slot', 'troop-number');