The Battlefield Web UI

map.html 1.4KB

    <style> #map-container { position: relative; width: 600px; height: 400px; } #map-container * { position: absolute; } #map-container path, #map-container circle { fill: transparent; } #map-container path { stroke-width: 1.5px; stroke: #000; } button { border: none; background: #333; font-size: 16px; padding: 10px; margin-top: 10px; } .Grass { color: #00ff00 !important; } .Forest { color: #009900 !important; } .Rocky { color: #CCCCCC !important; } .Mountain { color: #990000 !important; } .Lake { color: #0000ff !important; } .active { border: 2px solid; text-decoration: underline; } </style> <div id="map-container"> <canvas width="600px" height="400px" id="map"></canvas> </div> <!-- excuse the poor HTML im just lazy --> <button data-color="00ff00" class="Grass">Grass</button> <button data-color="009900" class="Forest">Forest</button> <button data-color="CCCCCC" class="Rocky">Rocky</button> <button data-color="990000" class="Mountain">Mountain</button> <button data-color="0000ff" class="Lake">Lake</button> <script type="text/javascript" src="js/3rdparty/jquery.min.js"></script> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="js/map.js"></script>