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

WIP: render radial coord hexes/maps

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2024-06-27 12:48:06 -07:00
parent 9c0645b481
commit c148f4a4f3
13 changed files with 113 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,7 @@ text {
}
use[href="#hex"] {
opacity: 0;
opacity: 0.5;
fill: transparent;
fill-opacity: 0.5;
stroke-width: 0.5px;
@@ -60,6 +60,10 @@ g.weapon-symbol :not(use[href="#counter-base"]) {
stroke-width: 0.5px;
}
/* g.weapon-symbol {
r: 5px;
} */
g.troop-counter-template text {
fill: white;
font-size: 12px;
@@ -425,7 +429,7 @@ g[data-y="76"] { --i: 76; }
.building .doors {
stroke: white;
stroke-width: 2.25
stroke-width: 2.25px
}
#test-arcs line, #test-arcs polyline {

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

@@ -21,7 +21,7 @@ text {
use[href="#hex"] {
stroke: #666;
/* fill: wheat; */
fill: navajowhite;
/* fill: navajowhite; */
/* fill: url(#asterisk); */
}
@@ -334,6 +334,3 @@ input:checked+label {
fill: lightgreen;
}
.furniture {
fill: violet;
}

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

@@ -173,6 +173,10 @@ polygon.firing-arc[data-allegiance="attacker"] {
fill: blue;
}
.weapon-symbol polyline {
fill: none;
}
.soldier-record[data-allegiance="defender"] svg {
fill: red;
}
@@ -191,6 +195,14 @@ polygon.firing-arc[data-allegiance="attacker"] {
stroke-width: 0.5px;
}
.weapon-symbol {
stroke: none;
}
[href="#counter-base"] {
stroke: none;
}
.soldier-record svg {
width: 20px;
height: 20px;
@@ -400,6 +412,30 @@ div#dice {
animation: roll-out 0.125s linear 1;
}
.select-elevation {
position: fixed;
right: 0;
top: 50%;
margin-right: 10px;
background-color: #FFFFFF99;
border: 1px solid gray;
padding: 2px;
font-family: sans-serif;
font-size: 10pt;
}
.select-elevation label {
display: block;
margin: 2px 0;
text-align: center;
border: 1px solid transparent;
user-select: none;
}
.select-elevation input {
display: none;
}
@keyframes roll-out {
0% {
transform: scaleX(1);

31
public/assets/images/counters-test.svg
View File

@@ -1,31 +0,0 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<circle id="counter-base" cx="0" cy="0" r="5"/>
<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>
</defs>
<g id="rifle" class="weapon-symbol">
</g>
<g id="smg" class="weapon-symbol">
</g>
<g id="blazer" class="weapon-symbol">
<use 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>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 778 B

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

@@ -1,7 +1,7 @@
<?xml version="1.0" standalone="no"?>
<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" r="5"/>
<circle id="counter-base" style="r: inherit;" cx="0" cy="0" />
<g style="r: inherit;" id="number-1">
<use style="r: inherit;" href="#counter-base"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

64
public/radial.html → public/assets/images/radial.svg
View File

@@ -1,29 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/radial.css">
</head>
<body>
<!-- <svg viewBox="-150 -130 300 260" xmlns="http://www.w3.org/2000/svg"> -->
<!-- <svg viewBox="-300 -250 600 500" xmlns="http://www.w3.org/2000/svg"> -->
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg">
<defs>
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
<line id="ast-line" stroke="#000000" stroke-width="0.3" x1="-1.2" y1="0" x2="1.2" y2="0" />
<pattern id="asterisk" viewBox="-15 -15 30 30" width="30" height="30" patternUnits="userSpaceOnUse">
<rect x="-15" y="-15" width="30" height="30" fill="wheat" />
<use y="-15" x="-15" href="#ast-line" />
<use y="-15" x="15" href="#ast-line" />
<use y="15" x="-15" href="#ast-line" />
<use y="15" x="15" href="#ast-line" />
<line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/>
<use y="-15" x="-15" transform="rotate(60, -15, -15)" href="#ast-line" />
<use y="15" x="15" transform="rotate(60, 15, 15)" href="#ast-line" />
<use y="-15" x="15" transform="rotate(-60, 15, -15)" href="#ast-line" />
<use y="15" x="-15" transform="rotate(-60, -15, 15)" href="#ast-line" />
</pattern>
<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 x="-8.66" y="-15" href="#ast-line"/>
<use x="-8.66" y="-15" transform="rotate(60 -8.66 -15)" href="#ast-line"/>
<use x="8.66" y="-15" href="#ast-line"/>
<use x="8.66" y="-15" transform="rotate(-60 8.66 -15)" href="#ast-line"/>
<use x="-8.66" y="15" href="#ast-line"/>
<use x="-8.66" y="15" transform="rotate(-60 -8.66 15)" href="#ast-line"/>
<use x="8.66" y="15" href="#ast-line"/>
<use x="8.66" y="15" transform="rotate(60 8.66 15)" href="#ast-line"/>
</pattern>
<g id="building8" class="building">
<path id="building8-floor" class="floor"
@@ -150,7 +147,7 @@
</g>
<g id="terrain" class="terrain">
<rect id="terrain-floor" class="floor" x="-52.75" y="-68" width="105.5" height="136" id="rect3415" />
<rect id="terrain-floor" class="floor" x="-52.75" y="-68" width="105.5" height="136" />
<g id="terrain-trees">
<use href="#tree" transform="translate(-27,-45.25)" />
<use href="#tree" transform="translate(-40.25,-38)" />
@@ -570,25 +567,4 @@
</g>
</g>
</defs>
<g class="gameboard" data-view-elevation="0"></g>
</svg>
<div class="select-elevation">
<button>🡅</button>
<input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
<label for="select-elevation-3">3</label>
<input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
<label for="select-elevation-2">2</label>
<input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
<label for="select-elevation-1">1</label>
<input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
<label for="select-elevation-0">0</label>
<input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
<label for="select-elevation-basement">-1</label>
<button>🡇</button>
</div>
<script src="radial.js"></script>
</body>
</html>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 41 KiB

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

@@ -1,6 +1,7 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" />
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/radial.css" type="text/css" />
<style>
#background {
stroke: #304b75;
@@ -45,7 +46,7 @@
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
</defs>
<g class="gameboard">
<g class="gameboard" data-view-elevation="0">
<rect id="background"/>
<rect id="dots" fill="url(#asterisk)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

19
public/index.html
View File

@@ -103,6 +103,21 @@
<input type="checkbox" data-allegiance="attacker"/>
</div>
<div class="select-elevation">
<button>🡅</button>
<input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
<label for="select-elevation-3">3</label>
<input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
<label for="select-elevation-2">2</label>
<input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
<label for="select-elevation-1">1</label>
<input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
<label for="select-elevation-0">0</label>
<input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
<label for="select-elevation-basement">-1</label>
<button>🡇</button>
</div>
<div id="dice">
<button type="button" id="roll-dice">Roll</button>
<div class="die">
@@ -227,10 +242,6 @@
<label>
Load scenario:
<select>
<option value="map4">Test</option>
<option value="contour-lines">Contour Lines</option>
<option value="pendle">Pendle</option>
<option value="10-simplex_t03">10-simplex family polytope graph, in A10 Coxeter plane</option>
</select>
</label>
</p>