| 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-18 15:00:05 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-18 15:53:40 -0700 |
| commit | ee37c59946304bd2a71402ba4dd52ce6d22f1851 (patch) | |
| tree | 88f0eb4de227ac6e3661dbe87ea7ee774b4cfe98 | |
| parent | 7a19fcfc1ea023c894837311bdd0ba00e991f54f (diff) | |
Add scanned map in SVG; test hexes
| -rw-r--r-- | index.html | 69 |
1 files changed, 47 insertions, 22 deletions
@@ -16,20 +16,36 @@ rect#map { fill: gainsboro; - opacity: 0; + opacity: 0.33; } - image { + image#img1 { transform: scale(3.41) rotate(-0.15deg); /* opacity: 0.33; */ } + image#img2 { + transform: scale(1.39) 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> <body> @@ -41,15 +57,25 @@ </pattern> <pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" /> + + <linearGradient id="gradient" gradientTransform="rotate(45)"> + <stop offset="50%" stop-color="gold" /> + <stop offset="95%" stop-color="red" /> + </linearGradient> + + <circle id="point" cx="0" cy="0" r="0.07in" /> + <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> </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)" /> - <image 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" /> <rect id="map" x="0" y="0" width="34in" height="22in" /> - <rect class="wall" x="3.77in" y="1.49in" width="4.3in" height="7.33in" /> - <line class="wall" x1="5.93in" y1="1.49in" x2="5.93in" y2="4.41in" /> + <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" /> @@ -57,7 +83,7 @@ <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" /> + <line class="wall" x1="3.77in" y1="7.51in" x2="5.09in" y2="7.51in" /> --> </svg> <script> @@ -82,32 +108,31 @@ var columnCount = 33, rowCount = 25, - pointDistanceInInches = 1.044; + pointDistanceInInches = 1.005; - var isOdd = n => n % 2 === 1; + 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, index) => - (isOdd(index) ? columnCoords.slice(0, -1) : columnCoords).map(x => [x, y]) - ); + pointCoords = rowCoords.map(y => columnCoords.map(x => [x, y])); - var xOffset = 0.4, - yOffset = 0.2; - calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.945, + var xOffset = 0.25, + yOffset = 0.4; + calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.99, alternatingOffset = pointDistanceInInches / 2; pointCoords.forEach((row, index) => row.forEach(([x, y]) => { - var circle = document.createElementNS(svgns, 'circle'), - cx = x + xOffset + (isOdd(index) ? alternatingOffset : 0), - cy = calcY * y + yOffset; - - circle.setAttributeNS(null, 'cx', `${cx}in`); - circle.setAttributeNS(null, 'cy', `${cy}in`); - circle.setAttributeNS(null, 'r', '0.07in'); - svg.appendChild(circle); + 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> |