index : btroops | |
Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
aboutsummaryrefslogtreecommitdiff |
path: root/index.html
diff options
Diffstat (limited to 'index.html')
-rw-r--r-- | index.html | 22 |
1 files changed, 16 insertions, 6 deletions
@@ -5,13 +5,22 @@ background-color: darkgray; } + body { + margin: 0; + } + circle { fill: red; } + + image { + transform: scale(3.41); + opacity: 0.33; + } </style> </head> <body> - <svg viewbox="-50 -50 3450 2450" 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"> <defs> <pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="1in" height="2in" fill="black" /> @@ -21,18 +30,19 @@ <pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" /> </defs> - <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)" /> + <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)" /> <rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" /> + <image href="map1.png" height="6.428in" width="9.971in" /> </svg> <script> var svgns = "http://www.w3.org/2000/svg", svg = document.querySelector('svg'); - var columnCount = 34, + var columnCount = 33, rowCount = 25, - pointDistanceInInches = 1.015; + pointDistanceInInches = 1.05; var isOdd = n => n % 2 === 1; @@ -46,7 +56,7 @@ pointCoords.forEach((row, index) => row.forEach(([x, y]) => { var circle = document.createElementNS(svgns, 'circle'), - calcY = Math.sqrt(3) * pointDistanceInInches / 2; + calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.93; if (isOdd(index)) { var alternatingOffset = pointDistanceInInches / 2; |