ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add troop number and squad number when creating counters

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-07-02 17:18:45 -07:00
parent 3c0e59f68e
commit 5f17d5d786
5 changed files with 58 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/assets/css/map.css
View File

@ -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] {

21
src/index.js
View File

@ -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() {

18
src/modules/game/soldier.js
View File

@ -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;
}

8
src/modules/gameboard.js
View File

@ -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);

10
src/modules/record_sheet.js
View File

@ -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');