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

Add adjustment debug panel

Browse Source
This commit is contained in:
Catalin Mititiuc
2024-03-29 12:30:20 -07:00
parent c5bfc6cc17
commit 694f2dbb24
3 changed files with 153 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@@ -101,34 +101,60 @@
</p>
</template>
<svg viewbox="-100 -100 3400 4500" xmlns="http://www.w3.org/2000/svg">
<div id="panel">
<fieldset name="point">
<legend>hex</legend>
<div>
<label>translatex <input name="translateX" type="number" value="0" /></label>
<label>translatey <input name="translateY" type="number" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scale <input name="scale" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
<fieldset name="points">
<legend>grid</legend>
<div>
<label>translatex <input name="translateX" type="number" value="0" /></label>
<label>translatey <input name="translateY" type="number" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scale <input name="scale" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
<fieldset name="map2">
<legend>map2</legend>
<div>
<label>translatex <input name="translateX" type="number" value="0" /></label>
<label>translatey <input name="translateY" type="number" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scale <input name="scale" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
<fieldset name="map3">
<legend>map3</legend>
<div>
<label>translatex <input name="translateX" type="number" value="0" /></label>
<label>translatey <input name="translateY" type="number" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scale <input name="scale" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
</div>
<svg viewbox="-49 -40 2390 3163" xmlns="http://www.w3.org/2000/svg">
<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" />
<rect x="1in" y="0" width="1in" height="2in" fill="white" />
</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" /> -->
<circle id="point" cx="0" cy="0" r="0.5in" />
<polygon id="hex" 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>
<!-- <circle id="point" cx="0" cy="0" r="50" /> -->
<!-- <polygon id="point" points="0,100 86.6,50 86.6,-50 0,-100 -86.6,-50 -86.6,50" /> -->
<polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
<!-- <text id="asterisk" x="-0.06in" y="0.22in">*</text> -->
</defs>
<line class="ruler" x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
<line class="ruler" 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" /> -->
<image class="map-scans" href="scans/map2.jpg" width="2284" height="1518" />
<image class="map-scans" href="scans/map3.jpg" width="2284" height="1518" x="0" y="1550" />
<rect id="background" x="-1" y="-1" width="2287" height="3087" />
<image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518" x="2" y="2" />
<image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" x="4" y="1564" />
<g id="firing-arcs"></g>
<rect id="map" x="0" y="0" width="33in" height="45in" />
<g id="points"></g>
<!-- <rect id="debug-view-box" x="-100" y="-100" width="3400" height="4500" /> -->
</svg>