| 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-15 09:50:23 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-17 18:50:30 -0700 |
| commit | 50372d16a9db19bdabe08d5b6315e0dd52e926fd (patch) | |
| tree | e85d1df352b83c7d18c67aa57af162dc62024d4a | |
| parent | 28833cf2bce2562b01517165625bc94bb93304d4 (diff) | |
Add points
| -rw-r--r-- | index.html | 43 |
1 files changed, 42 insertions, 1 deletions
@@ -4,6 +4,10 @@ svg { background-color: darkgray; } + + circle { + fill: red; + } </style> </head> <body> @@ -17,9 +21,46 @@ <pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" /> </defs> - <rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" /> <line x1="0" y1="0" x2="34in" y2="0" stroke="url(#inch-mark)" /> <line x1="0" y1="0" x2="0" y2="22in" stroke="url(#vert)" /> + <rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" /> </svg> + + <script> + var svgns = "http://www.w3.org/2000/svg", + svg = document.querySelector('svg'); + + var columnCount = 34, + rowCount = 25, + pointDistanceInInches = 1.015; + + var isOdd = n => n % 2 === 1; + + 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, index) => isOdd(index) ? columnCoords.slice(0, -1).map(x => [x, y]) : columnCoords.map(x => [x, y])); + + var xOffset = yOffset = 0.25; + + pointCoords.forEach((row, index) => row.forEach(([x, y]) => { + var circle = document.createElementNS(svgns, 'circle'), + calcY = Math.sqrt(3) * pointDistanceInInches / 2; + + if (isOdd(index)) { + var alternatingOffset = pointDistanceInInches / 2; + + circle.setAttributeNS(null, 'cx', `${x + xOffset + alternatingOffset}in`); + circle.setAttributeNS(null, 'cy', `${calcY * y + yOffset}in`); + } else { + circle.setAttributeNS(null, 'cx', `${x + xOffset}in`); + circle.setAttributeNS(null, 'cy', `${calcY * y + yOffset}in`); + } + + circle.setAttributeNS(null, 'r', '0.1in'); + svg.appendChild(circle); + })); + </script> </body> </html>
\ No newline at end of file |