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

Clean up scenarios; move some styles into .css files

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:32 -07:00
parent 46a3a93a37
commit c81af0c995
7 changed files with 11 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,8 @@ polyline.move-trace {
}
#background {
/* fill: #bacae3; */
stroke: #304b75;
fill: #bacae3;
}
g.troop-counter, g.counter, g.troop-counter use {
@ -199,6 +200,11 @@ g.selected use.primary-weapon {
r: 6px;
}
pattern use {
stroke: black;
stroke-width: 0.3px;
}
@keyframes selected {
50% {
stroke-width: 0px;

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

@ -56,10 +56,6 @@ g#grid {
transform: translate(19px, 31px) scale(4);
}
#background {
fill: #bacae3;
}
#panel {
display: none;
position: absolute;

102
public/assets/images/map4.svg
View File

@ -1,102 +0,0 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css"/>
<style>
g[data-edge="north"] { --i: -2; }
g[data-edge="south"] { --i: 52; }
#background {
stroke: #304b75;
fill: #bacae3;
}
pattern use {
stroke: black;
stroke-width: 0.3px;
}
.cw-60-deg {
transform: rotate(60deg);
}
.ccw-60-deg {
transform: rotate(-60deg);
}
</style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
<circle id="counter-base" cx="0" cy="0" r="5"/>
<line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
<pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
<use y="-15" href="#ast-line"/>
<use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/>
<use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/>
<use y="15" href="#ast-line"/>
<use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/>
<use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/>
<use x="8.66" href="#ast-line"/>
<use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/>
<use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
<use x="-8.66" href="#ast-line"/>
<use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/>
<use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/>
</pattern>
<g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
<g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
<g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
<g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
<g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
<g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
<g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
<g id="semi-auto">
<line x1="-2" y1="1" x2="2" y2="1"/>
<line x1="-2" y1="2" x2="2" y2="2"/>
</g>
<g id="auto">
<line x1="-2" y1="0" x2="2" y2="0"/>
<line x1="-2" y1="1" x2="2" y2="1"/>
<line x1="-2" y1="2" x2="2" y2="2"/>
</g>
<g id="rifle" class="weapon-symbol">
<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 id="smg" class="weapon-symbol">
<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 id="blazer" class="weapon-symbol">
<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>
<image id="counter-prone" href="counter_prone.jpg" width="10"/>
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
</defs>
<rect id="background"/>
<g class="gameboard">
<rect id="dots" fill="url(#asterisk)"/>
<g id="firing-arcs">
<g id="shapes"/>
<g id="lines"/>
</g>
<g class="grid"/>
</g>
<script data-cols="10" data-rows="10"></script>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

1
public/assets/images/scenario-dragon_hunting.svg
View File

@ -1,6 +1,5 @@
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs></defs>
<g class="gameboard">
<g class="grid">
<use class="mapsheet2" href="mapsheets.svg#mapsheet2"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

3
public/assets/images/scenario-side_show.svg
View File

@ -1,8 +1,5 @@
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<defs>
</defs>
<g class="gameboard">
<g class="grid">
<use class="mapsheet2" href="mapsheets.svg#mapsheet2"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

26
public/assets/images/scenario_template.svg
View File

@ -1,27 +1,7 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-10 -10 200 300"
xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
<style>
#background {
stroke: #304b75;
fill: #bacae3;
}
pattern use {
stroke: black;
stroke-width: 0.3px;
}
.cw-60-deg {
transform: rotate(60deg);
}
.ccw-60-deg {
transform: rotate(-60deg);
}
</style>
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
@ -29,8 +9,8 @@
<pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse">
<use href="#ast-line"/>
<use class="cw-60-deg" href="#ast-line"/>
<use class="ccw-60-deg" href="#ast-line"/>
<use href="#ast-line" transform="rotate(60)"/>
<use href="#ast-line" transform="rotate(-60)"/>
<use x="-8.66" y="-15" href="#ast-line"/>
<use x="-8.66" y="-15" transform="rotate(60 -8.66 -15)" href="#ast-line"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

22
src/radial.js
View File

@ -1,5 +1,5 @@
const xmlns = 'http://www.w3.org/2000/svg';
const svg = document.querySelector('svg');
const grid = document.querySelector('svg .grid');
const hex = {
inradius: 8.66,
@ -219,9 +219,6 @@ const mapsheetHexCoords = generateRadialCoords(
'left'
);
const gameboard = svg.querySelector('.gameboard');
const grid = svg.querySelector('.grid');
const mapsheet1 = {
id: 'mapsheet1',
grid: new Map(mapsheetHexCoords),
@ -643,23 +640,6 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
})
});
const circle = document.createElementNS(xmlns, 'circle');
circle.setAttributeNS(null, 'r', 5);
circle.setAttributeNS(null, 'fill', 'green');
circle.setAttributeNS(null, 'stroke', 'gold');
circle.setAttributeNS(null, 'stroke-width', 1);
const circle1 = circle.cloneNode();
circle1.setAttributeNS(null, 'fill', 'blue');
const circle2 = circle.cloneNode();
circle2.setAttributeNS(null, 'fill', 'red');
// mapsheet2.get('0,0,0,0').appendChild(circle);
// mapsheet2.get('0,6,-6,1').appendChild(circle1);
// mapsheet2.get('0,9,-9,0').appendChild(circle2);
function addGroup(container, className) {
const g = document.createElementNS(xmlns, 'g');
g.classList.add(className);