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

WIP: counters

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:32 -07:00
parent d02bd161b6
commit a17ff4c696
6 changed files with 36 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/css/radial.css
View File

@ -77,7 +77,7 @@ use[href="#hex"] {
} }
[data-view-elevation="-1"] #background { [data-view-elevation="-1"] #background {
fill: #333; fill: #999;
} }
[data-view-elevation="-1"] .building .elevation-basement { [data-view-elevation="-1"] .building .elevation-basement {

1
public/assets/css/style.css
View File

@ -174,6 +174,7 @@ polygon.firing-arc[data-allegiance="attacker"] {
.soldier-record svg.weapon-icon use { .soldier-record svg.weapon-icon use {
stroke: white; stroke: white;
stroke-width: 0.5px; stroke-width: 0.5px;
r: 6px;
} }
.weapon-symbol { .weapon-symbol {

27
public/assets/images/counters.svg
View File

@ -1,5 +1,6 @@
<?xml version="1.0" standalone="no"?> <?xml version="1.0" standalone="no"?>
<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="-6 -6 12 24"
xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<circle id="counter-base" style="r: inherit;" cx="0" cy="0" /> <circle id="counter-base" style="r: inherit;" cx="0" cy="0" />
@ -46,22 +47,28 @@
<g id="rifle" style="r: inherit;" class="weapon-symbol"> <g id="rifle" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<use href="#semi-auto"/> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="0" y1="-5" x2="0" y2="5"/> <use href="#semi-auto" />
<polyline style="fill: none;" points="-2,-3.5 0,-5 2,-3.5"/> <line x1="0" y1="-5" x2="0" y2="5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g> </g>
<g id="smg" style="r: inherit;" class="weapon-symbol"> <g id="smg" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<use href="#auto"/> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
<line x1="0" y1="-5" x2="0" y2="4.5"/> <use href="#auto"/>
<line x1="-2" y1="4.5" x2="2" y2="4.5"/> <line x1="0" y1="-5" x2="0" y2="4.5"/>
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
</g>
</g> </g>
<g id="blazer" style="r: inherit;" class="weapon-symbol"> <g id="blazer" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/> <use style="r: inherit;" href="#counter-base"/>
<use href="#auto"/> <g style="stroke: white; stroke-width: 0.5px; fill: none;">
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/> <use href="#auto"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/> <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

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

@ -1,3 +1,5 @@
import counters from './assets/images/counters.svg';
const selectedClass = 'selected'; const selectedClass = 'selected';
function dataSelector({ dataset: { allegiance, number }}) { function dataSelector({ dataset: { allegiance, number }}) {
@ -53,15 +55,15 @@ function createTrace(previous, current, selected) {
return trace; return trace;
} }
export function createCounter(selected) { export function createCounter(selected, weapon = 'rifle') {
const use = document.createElementNS(svgns, 'use'); const use = document.createElementNS(svgns, 'use');
const g = document.createElementNS(svgns, 'g'); const g = document.createElementNS(svgns, 'g');
// use.setAttributeNS(null, 'href', `#t-${selected.dataset.number}`); use.setAttributeNS(null, 'href', `../../${counters}#${weapon}`);
use.setAttributeNS(null, 'href', `counters.svg#rifle`);
use.classList.add('primary-weapon'); use.classList.add('primary-weapon');
g.classList.add('counter'); g.classList.add('counter');
g.dataset.allegiance = selected.dataset.allegiance; g.dataset.allegiance = selected.dataset.allegiance;
g.dataset.number = selected.dataset.number; g.dataset.number = selected.dataset.number;
g.dataset.squad = selected.dataset.squad;
g.appendChild(use); g.appendChild(use);
return g; return g;

34
src/modules/gameboard.js
View File

@ -3,7 +3,7 @@ import * as sightLine from './game/sight_line.js';
import * as soldier from './game/soldier.js'; import * as soldier from './game/soldier.js';
import { Observable } from "./observable"; import { Observable } from "./observable";
let svg, selected, let svg,
placing = []; placing = [];
function getCellContents(cell) { function getCellContents(cell) {
@ -100,16 +100,6 @@ function getSightLineHexes(source, target) {
} }
function updateSightLine(cell) { function updateSightLine(cell) {
// const CURRENT_ELEVATION_LEVEL = 0;
// const { q: sq, r: sr, s: ss } = cell.dataset;
// const { q: tq, r: tr, s: ts } = sightLine.getLockTarget().dataset;
// const sourceIndex = { q: +sq, r: +sr, s: +ss };
// const targetIndex = { q: +tq, r: +tr, s: +ts };
// const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
// .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
// .join(', ');
const hexes = getSightLineHexes(cell, sightLine.getLockTarget()); const hexes = getSightLineHexes(cell, sightLine.getLockTarget());
sightLine.setHexes(hexes); sightLine.setHexes(hexes);
sightLine.update(getCellPosition(cell)); sightLine.update(getCellPosition(cell));
@ -117,16 +107,6 @@ function updateSightLine(cell) {
} }
function drawSightLine(sourceCell, targetCell) { function drawSightLine(sourceCell, targetCell) {
// const CURRENT_ELEVATION_LEVEL = 0;
// const { q: sq, r: sr, s: ss } = sourceCell.dataset;
// const { q: tq, r: tr, s: ts } = targetCell.dataset;
// const sourceIndex = { q: +sq, r: +sr, s: +ss };
// const targetIndex = { q: +tq, r: +tr, s: +ts };
// const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
// .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
// .join(', ');
const hexes = getSightLineHexes(sourceCell, targetCell); const hexes = getSightLineHexes(sourceCell, targetCell);
sightLine.setHexes(hexes); sightLine.setHexes(hexes);
const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell)); const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell));
@ -136,10 +116,12 @@ function drawSightLine(sourceCell, targetCell) {
function moveBackOneStepInHistory(counter) { function moveBackOneStepInHistory(counter) {
const trace = soldier.getTrace(svg, counter); const trace = soldier.getTrace(svg, counter);
counter.remove(); counter.remove();
counter = getCounterAtGridIndex(...counter.dataset.previous.split(',')); counter = getCounterAtGridIndex(...counter.dataset.previous.split(','));
counter.classList.remove('clone'); counter.classList.remove('clone');
counter.classList.add(soldier.getSelectedClass()); counter.classList.add(soldier.getSelectedClass());
if (!('previous' in counter.dataset)) { if (!('previous' in counter.dataset)) {
trace.remove(); trace.remove();
} else { } else {
@ -299,7 +281,7 @@ export function start(el) {
cell.addEventListener('pointerout', () => { cell.addEventListener('pointerout', () => {
getActiveSightLine(svg) && clearSightLine(); getActiveSightLine(svg) && clearSightLine();
let occupant = getCellOccupant(cell); const occupant = getCellOccupant(cell);
if (occupant) { if (occupant) {
firingArc.toggleCounterVisibility(svg, occupant, false); firingArc.toggleCounterVisibility(svg, occupant, false);
@ -308,9 +290,11 @@ export function start(el) {
}); });
// debug // // debug //
const c = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }}); const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
soldier.place(svg, c, svg.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]')); const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
// soldier.place(svg, c, svg.querySelector('[data-q="-2"][data-r="-3"][data-s="5"][data-t="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); Observable.subscribe('select', select);

23
src/modules/record_sheet.js
View File

@ -1,17 +1,5 @@
import { Observable } from "./observable"; import { Observable } from "./observable";
// import counters from '../../public/assets/images/counters.svg'; import counters from './assets/images/counters.svg';
// console.log('counters', counters);
// import svg from '../../public/assets/images/counters.svg';
// const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
// const rifle = document.importNode(doc.querySelector('#rifle'), true);
// const smg = document.importNode(doc.querySelector('#smg'), true);
// console.log('svg', counters);
// console.log('doc', doc);
// console.log('imported svg', rifle);
// console.log('imported svg', smg);
const weapons = { const weapons = {
rifle: { rifle: {
@ -42,9 +30,7 @@ function createIcon(number) {
icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12'); icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
icon.setAttribute('xmlns', svgns); icon.setAttribute('xmlns', svgns);
// use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`); use.setAttributeNS(null, 'href', `./${counters}#counter-base`);
use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`);
// use.setAttributeNS(null, 'href', `${counters}#counter-base`);
text.textContent = number; text.textContent = number;
@ -68,12 +54,9 @@ function createWeaponIcon(type) {
icon.setAttribute('xmlns', svgns); icon.setAttribute('xmlns', svgns);
icon.classList.add('weapon-icon'); icon.classList.add('weapon-icon');
// use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#${type}`); use.setAttributeNS(null, 'href', `${counters}#${type}`);
// use.setAttributeNS(null, 'href', `${counters}#${type}`);
use.setAttributeNS(null, 'href', `assets/images/counters.svg#${type}`);
icon.appendChild(use); icon.appendChild(use);
// icon.appendChild(document.importNode(doc.querySelector(`#${type}`), true));
return icon; return icon;
} }