Move troop counters
This commit is contained in:
parent
2232362d42
commit
c5b4c97923
169
index.html
169
index.html
@ -1,52 +1,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<style>
|
<title>Infantry Combat</title>
|
||||||
svg {
|
<link rel="stylesheet" href="style.css">
|
||||||
background-color: darkgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
circle {
|
|
||||||
fill: red;
|
|
||||||
opacity: 0.33;
|
|
||||||
}
|
|
||||||
|
|
||||||
rect#map {
|
|
||||||
fill: gainsboro;
|
|
||||||
opacity: 0.33;
|
|
||||||
}
|
|
||||||
|
|
||||||
image#img1 {
|
|
||||||
transform: scale(3.41) rotate(-0.15deg);
|
|
||||||
/* opacity: 0.33; */
|
|
||||||
}
|
|
||||||
|
|
||||||
image#img2 {
|
|
||||||
transform: scale(1.39, 1.407) rotate(0.07deg);
|
|
||||||
/* opacity: 0.33; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.wall {
|
|
||||||
fill: none;
|
|
||||||
stroke: red;
|
|
||||||
stroke-width: 7px;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hex {
|
|
||||||
opacity: 0.2;
|
|
||||||
/* stroke: black;
|
|
||||||
stroke-opacity: 0.2; */
|
|
||||||
transform: scale(0.26) translate(-2in, -2in);
|
|
||||||
}
|
|
||||||
|
|
||||||
#asterisk {
|
|
||||||
font-size: 30;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<svg viewbox="-100 -100 3450 2400" xmlns="http://www.w3.org/2000/svg" stroke-width="20">
|
<svg viewbox="-100 -100 3450 2400" xmlns="http://www.w3.org/2000/svg" stroke-width="20">
|
||||||
@ -63,77 +18,73 @@
|
|||||||
<stop offset="95%" stop-color="red" />
|
<stop offset="95%" stop-color="red" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
|
|
||||||
<circle id="point" cx="0" cy="0" r="0.07in" />
|
<!-- <circle id="point" cx="0" cy="0" r="0.07in" /> -->
|
||||||
|
<circle id="point" cx="0" cy="0" r="0.5in" />
|
||||||
<polygon id="hex" fill="url('#gradient')" points="0,121.32 184.152,15.544 368.312,121.32 368.312,332.864 184.152,438.64 0,332.864 "/>
|
<polygon id="hex" fill="url('#gradient')" points="0,121.32 184.152,15.544 368.312,121.32 368.312,332.864 184.152,438.64 0,332.864 "/>
|
||||||
<text id="asterisk" x="-0.06in" y="0.22in">*</text>
|
<text id="asterisk" x="-0.06in" y="0.22in">*</text>
|
||||||
|
|
||||||
|
<g id="counter">
|
||||||
|
<circle cx="0" cy="0" r="0.25in" />
|
||||||
|
<text x="0" y="0.25in" text-anchor="middle">1</text>
|
||||||
|
</g>
|
||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
|
<line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
|
||||||
<line x1="-0.25in" y1="0" x2="-0.25in" y2="22in" stroke="url(#vert)" />
|
<line x1="-0.25in" y1="0" x2="-0.25in" y2="23in" stroke="url(#vert)" />
|
||||||
<!-- <image id="img1" href="map1.png" height="6.428in" width="9.971in" /> -->
|
<!-- <image id="img1" href="map1.png" height="6.428in" width="9.971in" /> -->
|
||||||
<image id="img2" href="scans/map1.jpg" width="2284" height="1518" />
|
<image id="img2" href="scans/map1.jpg" width="2284" height="1518" />
|
||||||
<rect id="map" x="0" y="0" width="34in" height="22in" />
|
<rect id="map" x="0" y="0" width="34in" height="23in" />
|
||||||
|
|
||||||
<rect class="wall" x="4.04in" y="1.65in" width="4.09in" height="7.16in" />
|
|
||||||
<!-- <line class="wall" x1="5.93in" y1="1.49in" x2="5.93in" y2="4.41in" />
|
|
||||||
<line class="wall" x1="5.93in" y1="5.36in" x2="5.93in" y2="8.82in" />
|
|
||||||
<line class="wall" x1="6.98in" y1="3.59in" x2="6.98in" y2="5.36in" />
|
|
||||||
|
|
||||||
<line class="wall" x1="5.93in" y1="3.59in" x2="8.07in" y2="3.59in" />
|
|
||||||
<line class="wall" x1="5.93in" y1="5.36in" x2="8.07in" y2="5.36in" />
|
|
||||||
<line class="wall" x1="5.93in" y1="7.51in" x2="8.07in" y2="7.51in" />
|
|
||||||
<line class="wall" x1="3.77in" y1="4.41in" x2="5.93in" y2="4.41in" />
|
|
||||||
<line class="wall" x1="3.77in" y1="7.51in" x2="5.09in" y2="7.51in" /> -->
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<script>
|
<div id="record-sheet">
|
||||||
var rect = document.querySelector('rect#map');
|
<div>
|
||||||
var toFixed = n => Number.parseFloat(n).toFixed(2);
|
<img class="logo" src="logo-davion.png" />
|
||||||
|
<p>
|
||||||
|
Davion<br>
|
||||||
|
1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
|
||||||
|
17th Kestral Mechanized Infantry
|
||||||
|
</p>
|
||||||
|
<div class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
|
||||||
|
Troop Number: 1<br>
|
||||||
|
Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75<br>
|
||||||
|
HG: 4
|
||||||
|
</div>
|
||||||
|
<div class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
|
||||||
|
Troop Number: 2<br>
|
||||||
|
Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25<br>
|
||||||
|
HG: 4
|
||||||
|
</div>
|
||||||
|
<div class="soldier-record" data-troop-number="3" data-troop-allegiance="davion">
|
||||||
|
Troop Number: 3<br>
|
||||||
|
Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105<br>
|
||||||
|
HG: 4
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="logo" src="logo-liao.png" />
|
||||||
|
<p>
|
||||||
|
Liao<br>
|
||||||
|
2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
|
||||||
|
Aldebaran Home Guard
|
||||||
|
</p>
|
||||||
|
<div class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
|
||||||
|
Troop Number: 1<br>
|
||||||
|
Primary Weapon Type: Rifle, Damage: 4L, Short: 1-27, Long: 28-75<br>
|
||||||
|
HG: 4
|
||||||
|
</div>
|
||||||
|
<div class="soldier-record" data-troop-number="2" data-troop-allegiance="liao">
|
||||||
|
Troop Number: 2<br>
|
||||||
|
Primary Weapon Type: SMG, Damage: 3L, Short: 1-15, Long: 16-25<br>
|
||||||
|
HG: 4
|
||||||
|
</div>
|
||||||
|
<div class="soldier-record" data-troop-number="3" data-troop-allegiance="liao">
|
||||||
|
Troop Number: 3<br>
|
||||||
|
Primary Weapon Type: Blazer, Damage: 4L, Short: 1-17, Long: 18-105<br>
|
||||||
|
HG: 4
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
rect.addEventListener('mousemove', e => {
|
<script src="index.js"></script>
|
||||||
var rect = e.target.getBoundingClientRect();
|
|
||||||
// console.log(rect)
|
|
||||||
var x = e.clientX - rect.left; // x position within the element
|
|
||||||
var y = e.clientY - rect.top; // y position within the element
|
|
||||||
// console.log("Left? : " + x + " ; Top? : " + y + ".");
|
|
||||||
// console.log(x/rect.width, y/rect.height);
|
|
||||||
console.log(
|
|
||||||
'x: ' + toFixed(x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits) + '"',
|
|
||||||
'y: ' + toFixed(y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits) + '"'
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
var svgns = "http://www.w3.org/2000/svg",
|
|
||||||
svg = document.querySelector('svg');
|
|
||||||
|
|
||||||
var columnCount = 33,
|
|
||||||
rowCount = 25,
|
|
||||||
pointDistanceInInches = 1.005;
|
|
||||||
|
|
||||||
var isEven = n => n % 2 === 0;
|
|
||||||
|
|
||||||
var columns = [...Array(columnCount).keys()],
|
|
||||||
rows = [...Array(rowCount).keys()],
|
|
||||||
columnCoords = columns.map(x => x * pointDistanceInInches),
|
|
||||||
rowCoords = rows.map(y => y * pointDistanceInInches),
|
|
||||||
pointCoords = rowCoords.map(y => columnCoords.map(x => [x, y]));
|
|
||||||
|
|
||||||
var xOffset = 0.25,
|
|
||||||
yOffset = 0.45;
|
|
||||||
calcY = Math.sqrt(3) * pointDistanceInInches / 2,
|
|
||||||
alternatingOffset = pointDistanceInInches / 2;
|
|
||||||
|
|
||||||
pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
|
|
||||||
var cx = x + xOffset + (isEven(index) ? alternatingOffset : 0),
|
|
||||||
cy = calcY * y + yOffset,
|
|
||||||
point = document.createElementNS(svgns, 'use');
|
|
||||||
|
|
||||||
point.setAttributeNS(null, 'href', `#point`);
|
|
||||||
point.setAttributeNS(null, 'x', `${cx}in`);
|
|
||||||
point.setAttributeNS(null, 'y', `${cy}in`);
|
|
||||||
|
|
||||||
svg.appendChild(point);
|
|
||||||
}));
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
91
index.js
Normal file
91
index.js
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
var rect = document.querySelector('rect#map');
|
||||||
|
var toFixed = n => Number.parseFloat(n).toFixed(2);
|
||||||
|
|
||||||
|
rect.addEventListener('mousemove', e => {
|
||||||
|
var rect = e.target.getBoundingClientRect();
|
||||||
|
var x = e.clientX - rect.left; // x position within the element
|
||||||
|
var y = e.clientY - rect.top; // y position within the element
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
'x: ' + toFixed(x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits) + '"',
|
||||||
|
'y: ' + toFixed(y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits) + '"'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.soldier-record').forEach(el =>
|
||||||
|
el.addEventListener('click', e => {
|
||||||
|
// console.log(e.target.dataset.troopNumber);
|
||||||
|
|
||||||
|
if (e.target.classList.contains('selected')) {
|
||||||
|
e.target.classList.remove('selected');
|
||||||
|
} else {
|
||||||
|
document.querySelectorAll('.soldier-record.selected').forEach(el =>
|
||||||
|
el.classList.remove('selected')
|
||||||
|
);
|
||||||
|
e.target.classList.add('selected');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
var svgns = "http://www.w3.org/2000/svg",
|
||||||
|
svg = document.querySelector('svg');
|
||||||
|
|
||||||
|
var columnCount = 33,
|
||||||
|
rowCount = 25,
|
||||||
|
pointDistanceInInches = 1.005;
|
||||||
|
|
||||||
|
var isEven = n => n % 2 === 0;
|
||||||
|
|
||||||
|
var columns = [...Array(columnCount).keys()],
|
||||||
|
rows = [...Array(rowCount).keys()],
|
||||||
|
columnCoords = columns.map(x => x * pointDistanceInInches),
|
||||||
|
rowCoords = rows.map(y => y * pointDistanceInInches),
|
||||||
|
pointCoords = rowCoords.map(y => columnCoords.map(x => [x, y]));
|
||||||
|
|
||||||
|
var xOffset = 0.25,
|
||||||
|
yOffset = 0.45;
|
||||||
|
calcY = Math.sqrt(3) * pointDistanceInInches / 2,
|
||||||
|
alternatingOffset = pointDistanceInInches / 2;
|
||||||
|
|
||||||
|
pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
|
||||||
|
var cx = x + xOffset + (isEven(index) ? alternatingOffset : 0),
|
||||||
|
cy = calcY * y + yOffset,
|
||||||
|
point = document.createElementNS(svgns, 'use');
|
||||||
|
|
||||||
|
point.setAttributeNS(null, 'href', `#point`);
|
||||||
|
point.setAttributeNS(null, 'x', `${cx}in`);
|
||||||
|
point.setAttributeNS(null, 'y', `${cy}in`);
|
||||||
|
|
||||||
|
point.addEventListener('click', e => {
|
||||||
|
let selectedSoldier = document.querySelector('.soldier-record.selected');
|
||||||
|
|
||||||
|
if (selectedSoldier) {
|
||||||
|
let counter = document.createElementNS(svgns, 'circle');
|
||||||
|
let text = document.createElementNS(svgns, 'text');
|
||||||
|
|
||||||
|
counter.setAttributeNS(null, 'cx', `${cx}in`);
|
||||||
|
counter.setAttributeNS(null, 'cy', `${cy}in`);
|
||||||
|
counter.setAttributeNS(null, 'r', '0.25in');
|
||||||
|
counter.dataset.troopNumber = selectedSoldier.dataset.troopNumber;
|
||||||
|
counter.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance;
|
||||||
|
counter.classList.add('counter');
|
||||||
|
|
||||||
|
text.setAttributeNS(null, 'text-anchor', 'middle');
|
||||||
|
text.setAttributeNS(null, 'x', `${cx}in`);
|
||||||
|
text.setAttributeNS(null, 'y', `${cy + 0.25}in`);
|
||||||
|
text.dataset.troopNumber = selectedSoldier.dataset.troopNumber;
|
||||||
|
text.dataset.troopAllegiance = selectedSoldier.dataset.troopAllegiance;
|
||||||
|
text.textContent = `${selectedSoldier.dataset.troopNumber}`;
|
||||||
|
text.classList.add('counter');
|
||||||
|
|
||||||
|
document.querySelectorAll(
|
||||||
|
`.counter[data-troop-number="${selectedSoldier.dataset.troopNumber}"][data-troop-allegiance="${selectedSoldier.dataset.troopAllegiance}"]`
|
||||||
|
).forEach(el => el.remove());
|
||||||
|
|
||||||
|
svg.appendChild(counter);
|
||||||
|
svg.appendChild(text);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
svg.appendChild(point);
|
||||||
|
}));
|
||||||
BIN
logo-davion.png
Normal file
BIN
logo-davion.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
logo-liao.png
Normal file
BIN
logo-liao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
88
style.css
Normal file
88
style.css
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
svg {
|
||||||
|
background-color: darkgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
circle#point {
|
||||||
|
fill: black;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
circle.counter[data-troop-allegiance="liao"] {
|
||||||
|
fill: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
circle.counter[data-troop-allegiance="davion"] {
|
||||||
|
fill: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
text.counter {
|
||||||
|
font-size: 80;
|
||||||
|
font-weight: bold;
|
||||||
|
stroke: black;
|
||||||
|
fill: white;
|
||||||
|
stroke-width: 2px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
rect#map {
|
||||||
|
fill: none;
|
||||||
|
opacity: 0.33;
|
||||||
|
}
|
||||||
|
|
||||||
|
image#img1 {
|
||||||
|
transform: scale(3.41) rotate(-0.15deg);
|
||||||
|
/* opacity: 0.33; */
|
||||||
|
}
|
||||||
|
|
||||||
|
image#img2 {
|
||||||
|
transform: scale(1.39, 1.407) rotate(0.07deg);
|
||||||
|
/* opacity: 0.33; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.wall {
|
||||||
|
fill: none;
|
||||||
|
stroke: red;
|
||||||
|
stroke-width: 7px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hex {
|
||||||
|
opacity: 0.2;
|
||||||
|
/* stroke: black;
|
||||||
|
stroke-opacity: 0.2; */
|
||||||
|
transform: scale(0.26) translate(-2in, -2in);
|
||||||
|
}
|
||||||
|
|
||||||
|
#asterisk {
|
||||||
|
font-size: 30;
|
||||||
|
}
|
||||||
|
|
||||||
|
#record-sheet {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
#record-sheet > div {
|
||||||
|
flex-basis: 100%;
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#record-sheet > div div {
|
||||||
|
border: 1px solid black;
|
||||||
|
margin: 2px 0;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.logo {
|
||||||
|
width: 100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.soldier-record.selected {
|
||||||
|
background-color: goldenrod;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user