ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add scanned map in SVG; test hexes

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:27 -07:00
parent 56261eb321
commit b07722faed
1 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
index.html
View File

@ -16,20 +16,36 @@
rect#map { rect#map {
fill: gainsboro; fill: gainsboro;
opacity: 0; opacity: 0.33;
} }
image { image#img1 {
transform: scale(3.41) rotate(-0.15deg); transform: scale(3.41) rotate(-0.15deg);
/* opacity: 0.33; */ /* opacity: 0.33; */
} }
image#img2 {
transform: scale(1.39) rotate(0.07deg);
/* opacity: 0.33; */
}
.wall { .wall {
fill: none; fill: none;
stroke: red; stroke: red;
stroke-width: 7px; stroke-width: 7px;
opacity: 0.7; 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> </style>
</head> </head>
<body> <body>
@ -41,15 +57,25 @@
</pattern> </pattern>
<pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" /> <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> </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="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 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" /> <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="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="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="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="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="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="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> </svg>
<script> <script>
@ -82,32 +108,31 @@
var columnCount = 33, var columnCount = 33,
rowCount = 25, 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()], var columns = [...Array(columnCount).keys()],
rows = [...Array(rowCount).keys()], rows = [...Array(rowCount).keys()],
columnCoords = columns.map(x => x * pointDistanceInInches), columnCoords = columns.map(x => x * pointDistanceInInches),
rowCoords = rows.map(y => y * pointDistanceInInches), rowCoords = rows.map(y => y * pointDistanceInInches),
pointCoords = rowCoords.map((y, index) => pointCoords = rowCoords.map(y => columnCoords.map(x => [x, y]));
(isOdd(index) ? columnCoords.slice(0, -1) : columnCoords).map(x => [x, y])
);
var xOffset = 0.4, var xOffset = 0.25,
yOffset = 0.2; yOffset = 0.4;
calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.945, calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.99,
alternatingOffset = pointDistanceInInches / 2; alternatingOffset = pointDistanceInInches / 2;
pointCoords.forEach((row, index) => row.forEach(([x, y]) => { pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
var circle = document.createElementNS(svgns, 'circle'), var cx = x + xOffset + (isEven(index) ? alternatingOffset : 0),
cx = x + xOffset + (isOdd(index) ? alternatingOffset : 0), cy = calcY * y + yOffset,
cy = calcY * y + yOffset; point = document.createElementNS(svgns, 'use');
circle.setAttributeNS(null, 'cx', `${cx}in`); point.setAttributeNS(null, 'href', `#point`);
circle.setAttributeNS(null, 'cy', `${cy}in`); point.setAttributeNS(null, 'x', `${cx}in`);
circle.setAttributeNS(null, 'r', '0.07in'); point.setAttributeNS(null, 'y', `${cy}in`);
svg.appendChild(circle);
svg.appendChild(point);
})); }));
</script> </script>
</body> </body>