| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-19 11:07:47 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-19 11:26:43 -0700 |
| commit | 5742a6b8e98dd372c7ab137602780bac9aba6657 (patch) | |
| tree | a10edbf93f11863612d900bb55672be1d634c2a9 | |
| parent | 7a80e588b5702af0d652b6668108a2cc26f63367 (diff) | |
Move troop counters
| -rw-r--r-- | index.html | 171 | ||||
| -rw-r--r-- | index.js | 91 | ||||
| -rw-r--r-- | logo-davion.png | bin | 0 -> 32008 bytes | |||
| -rw-r--r-- | logo-liao.png | bin | 0 -> 17419 bytes | |||
| -rw-r--r-- | style.css | 88 |
5 files changed, 240 insertions, 110 deletions
@@ -1,52 +1,7 @@ <html> <head> - <style> - svg { - 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> + <title>Infantry Combat</title> + <link rel="stylesheet" href="style.css"> </head> <body> <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" /> </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 "/> <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> <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="img2" href="scans/map1.jpg" width="2284" height="1518" /> - <rect id="map" x="0" y="0" width="34in" height="22in" /> - - <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" /> --> + <rect id="map" x="0" y="0" width="34in" height="23in" /> </svg> - <script> - var rect = document.querySelector('rect#map'); - var toFixed = n => Number.parseFloat(n).toFixed(2); - - rect.addEventListener('mousemove', e => { - 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> + <div id="record-sheet"> + <div> + <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> + + <script src="index.js"></script> </body> </html>
\ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..4cab6bc --- /dev/null +++ b/index.js @@ -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); +}));
\ No newline at end of file diff --git a/logo-davion.png b/logo-davion.png Binary files differnew file mode 100644 index 0000000..c4f8b5f --- /dev/null +++ b/logo-davion.png diff --git a/logo-liao.png b/logo-liao.png Binary files differnew file mode 100644 index 0000000..e441313 --- /dev/null +++ b/logo-liao.png diff --git a/style.css b/style.css new file mode 100644 index 0000000..d9b9a62 --- /dev/null +++ b/style.css @@ -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; +}
\ No newline at end of file |
