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 2024-07-02 15:19:17 -07:00
parent 624991870d
commit 71724cc979
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 {
fill: #333;
fill: #999;
}
[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 {
stroke: white;
stroke-width: 0.5px;
r: 6px;
}
.weapon-symbol {

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

@ -1,5 +1,6 @@
<?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>
<circle id="counter-base" style="r: inherit;" cx="0" cy="0" />
@ -46,22 +47,28 @@
<g id="rifle" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<use href="#semi-auto"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
<polyline style="fill: none;" points="-2,-3.5 0,-5 2,-3.5"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#semi-auto" />
<line x1="0" y1="-5" x2="0" y2="5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</g>
<g id="smg" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<use href="#auto"/>
<line x1="0" y1="-5" x2="0" y2="4.5"/>
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
<g style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#auto"/>
<line x1="0" y1="-5" x2="0" y2="4.5"/>
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
</g>
</g>
<g id="blazer" style="r: inherit;" class="weapon-symbol">
<use style="r: inherit;" href="#counter-base"/>
<use href="#auto"/>
<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 style="stroke: white; stroke-width: 0.5px; fill: none;">
<use href="#auto"/>
<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>
</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';
function dataSelector({ dataset: { allegiance, number }}) {
@ -53,15 +55,15 @@ function createTrace(previous, current, selected) {
return trace;
}
export function createCounter(selected) {
export function createCounter(selected, weapon = 'rifle') {
const use = document.createElementNS(svgns, 'use');
const g = document.createElementNS(svgns, 'g');
// use.setAttributeNS(null, 'href', `#t-${selected.dataset.number}`);
use.setAttributeNS(null, 'href', `counters.svg#rifle`);
use.setAttributeNS(null, 'href', `../../${counters}#${weapon}`);
use.classList.add('primary-weapon');
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);
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 { Observable } from "./observable";
let svg, selected,
let svg,
placing = [];
function getCellContents(cell) {
@ -100,16 +100,6 @@ function getSightLineHexes(source, target) {
}
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());
sightLine.setHexes(hexes);
sightLine.update(getCellPosition(cell));
@ -117,16 +107,6 @@ function updateSightLine(cell) {
}
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);
sightLine.setHexes(hexes);
const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell));
@ -136,10 +116,12 @@ function drawSightLine(sourceCell, targetCell) {
function moveBackOneStepInHistory(counter) {
const trace = soldier.getTrace(svg, counter);
counter.remove();
counter = getCounterAtGridIndex(...counter.dataset.previous.split(','));
counter.classList.remove('clone');
counter.classList.add(soldier.getSelectedClass());
if (!('previous' in counter.dataset)) {
trace.remove();
} else {
@ -299,7 +281,7 @@ export function start(el) {
cell.addEventListener('pointerout', () => {
getActiveSightLine(svg) && clearSightLine();
let occupant = getCellOccupant(cell);
const occupant = getCellOccupant(cell);
if (occupant) {
firingArc.toggleCounterVisibility(svg, occupant, false);
@ -308,9 +290,11 @@ export function start(el) {
});
// debug //
const c = soldier.createCounter({ 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"]'));
// soldier.place(svg, c, svg.querySelector('[data-q="-2"][data-r="-3"][data-s="5"][data-t="0"]'));
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));
///////////
Observable.subscribe('select', select);

23
src/modules/record_sheet.js
View File

@ -1,17 +1,5 @@
import { Observable } from "./observable";
// import counters from '../../public/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);
import counters from './assets/images/counters.svg';
const weapons = {
rifle: {
@ -42,9 +30,7 @@ function createIcon(number) {
icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
icon.setAttribute('xmlns', svgns);
// use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`);
use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`);
// use.setAttributeNS(null, 'href', `${counters}#counter-base`);
use.setAttributeNS(null, 'href', `./${counters}#counter-base`);
text.textContent = number;
@ -68,12 +54,9 @@ function createWeaponIcon(type) {
icon.setAttribute('xmlns', svgns);
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', `assets/images/counters.svg#${type}`);
use.setAttributeNS(null, 'href', `${counters}#${type}`);
icon.appendChild(use);
// icon.appendChild(document.importNode(doc.querySelector(`#${type}`), true));
return icon;
}