diff options
| -rw-r--r-- | map150.jpg | bin | 0 -> 626894 bytes | |||
| -rw-r--r-- | map150.png | bin | 0 -> 2826207 bytes | |||
| -rw-r--r-- | map75.jpg | bin | 0 -> 506690 bytes | |||
| -rw-r--r-- | map75.png | bin | 0 -> 1068375 bytes | |||
| -rw-r--r-- | play.css | 9 | ||||
| -rw-r--r-- | play.html | 66 | ||||
| -rw-r--r-- | play.js | 25 |
7 files changed, 71 insertions, 29 deletions
diff --git a/map150.jpg b/map150.jpg Binary files differnew file mode 100644 index 0000000..b6e3958 --- /dev/null +++ b/map150.jpg diff --git a/map150.png b/map150.png Binary files differnew file mode 100644 index 0000000..1e996a4 --- /dev/null +++ b/map150.png diff --git a/map75.jpg b/map75.jpg Binary files differnew file mode 100644 index 0000000..8a219d9 --- /dev/null +++ b/map75.jpg diff --git a/map75.png b/map75.png Binary files differnew file mode 100644 index 0000000..03e5907 --- /dev/null +++ b/map75.png @@ -208,13 +208,20 @@ td img { vertical-align: middle } /* MAP */ #map { - background-repeat: no-repeat; + background-image: url(map75.jpg); + background-size: 2672px 960px; width: 2672px; height: 960px; overflow: clip; box-shadow: 0px 1px 10px rgba(0,0,0,0.5); } +@media (min-resolution: 97dpi) { + #map { + background-image: url(map150.jpg); + } +} + #mapsvg { display: block; position: absolute; @@ -52,7 +52,7 @@ <div id="log"></div> </aside> -<main data-min-zoom="1" data-max-zoom="1"> +<main data-min-zoom="1" data-max-zoom="2"> <div id="battle" class="hide"> <div id="battle_header"></div> @@ -97,10 +97,66 @@ <!-- BEGIN INSERT MAP FILE --> <svg id="mapsvg" xmlns="http://www.w3.org/2000/svg" width="2672" height="984"> -<path fill="#5d8ec1" d="M0 0h2672v988H0z"/> -<path fill="#d6c4a9" d="M551 30c-35 15-67 40-107 45-34 12-59 39-92 52-44 24-82 58-121 89-25 18-49 40-64 67-12 27-33 52-33 81 6 51 16 98 41 144 15 24 15 53 26 78 0 43-32 72-61 99-45 26-90 70-144 63-25-14-15 15-17 31v238h2728V212c-28 3-48 16-78 13-18 27-45 12-60 31-17-3-47 24-71 30-32 19-72 24-106 3-29-18-64-8-95-18-30 5-61 11-93 19-24 4-39-34-64-5-32 19-67-16-77-22-27 15-56-7-79-9-33 4-67 11-100 17-35 0-70-3-104-8-36-12-75-8-109 6-24 9-49 13-73 23-27 5-101 22-96-19 7-34-30-38-30-68 3-27-28-32-48-30-31-18-47 0-76-1-21-3-56 4-81-6-24-6-39 20-65 10-21-3-51 6-68-5-13-7-7-18-36-13-9-1-24 3-31 0-23-9-51-12-74 0-28 3-55 22-81 4-35-13 2 44-24 7-18 2-26-25-43-26-14 11-30-7-27-25 11 14 11-15-2-19 4-22-6-33-30-29-27-4-49-16-72-18-30-11-70-19-93-18-26 16-46 2-70-6Zm330 118c-7 5 13 8 0 0z"/> -<path fill="#aeae7b" d="M557 40c-34 11-63 40-102 38-30 8-52 38-83 49-13 11 1 27-4 39 25 22 6 59-21 72 4 37-22 59-28 90-17 10-51 43-9 37 23-21 62 10 79-3 8-28 44 30 52-6 17-17 49-15 56-42 29-16 66-3 95 6 25 33 26-24 36-39 2-26 56-67 67-31 25 11 53 6 76-8 30-17 40-55 26-84-1-22-17-53-46-48-2-18-18-18-18-36-23 5-39-10-49 0-17-13-46-19-70-27-10 4-36 43-31 13 25-15-16-20-26-20Zm92 24c11 0 2 3-6-1z"/> -<path fill="#c4ab8b" d="M2429 528c-37 4-68 31-101 3-38-4-76 20-99 48-25 3-40 8-42 35-24 26-70 27-101 27-36 27-17 70-19 105-17 11-34 13-53 23-1 22-12 46-4 68-16 35-57 25-73 58-2 18 11 35 6 55 19 20 44 29 68 38h160c28-9 3-42 32-50-21-35 51-54 5-80-2-29-4-58 30-68 29-21-30-34-45-45-12-23-6-33 16-47 11-29 56-6 58-46 13-27 56-13 53-43 2-30 29-34 51-48 24 3 52 24 68 0 27-20 46 13 59 17 36-41-45-46-69-50z"/> + +<style> +.hex.axis_control { fill: url(#axis_control_16) } +.hex.allied_control { fill: url(#allied_control_16) } +</style> +<defs> + +<path id="land_path" d="M551 30c-4 1-10 0-12 5-5 0-9 3-13 6-4 5-9 9-15 11-5 3-10 7-16 7-8 1-13 6-20 9-5 2-11 2-17 3l-14 4-15 6c-4 1-8 4-11 7l-11 6c-5 2-8 5-11 9s-9 4-13 8-9 5-15 8c-5 3-12 3-16 8-5 4-12 6-17 9-7 3-10 10-17 12l-12 9c-5 4-10 9-16 12l-11 8c-12 6-20 17-29 25l-14 10c-2 4-7 4-10 7-4 2-8 3-11 8-2 4-8 6-10 11l-12 11c-2 4-7 6-10 10-6 4-7 12-11 17l-11 17-7 14c-4 5-1 11-5 16-6 10-16 18-17 30 0 8 4 14 7 20 3 10 0 21 0 32s0 25 8 34c4 5 10 9 9 16-2 6-1 13 1 18 5 11 13 20 17 32l14 33c2 8 4 16 4 25 1 6 3 13 7 17 5 8 1 17-1 25l-5 19c-2 7-7 14-11 20-4 4-10 5-13 10-4 6-8 12-14 16-7 7-13 14-21 20-6 4-13 8-18 13-10 8-23 10-34 17-7 3-13 7-18 13-8 7-21 6-30 11-5 3-10 7-16 7-6 2-11-1-16-2l-23-5v273h2728V212l-27 4c-1 8-10 4-15 7-10 2-19 0-29 1-4 0-10 1-13 5-4 7-9 16-19 16-5 1-8-2-9-6-5 1-5 8-10 8-4 1-10 0-11 3 3-1 4 3 1 3-3 1-11 6-8-1l-13 7c-4 3-9 4-13 6-3 5-9 4-14 7-5 4-11 7-18 9l-19 8c-6 2-13 6-18 10-9-2-17 4-26 5-18 0-35-6-51-14l-22-10c-5 0-10-3-16-2-5 1-9 1-13-1-5-3-11-4-16-2-6 2-11 1-16 0s-11 0-15-4c-5-4-13-4-18 1l-14 7c-5 3-11 6-17 3-5-5-12-3-18 0-6 2-12 4-19 4-4 3-9 6-15 6-5 1-11-1-13-7-4-3-6-8-9-11-5-3-10 0-14 2-5 2-11 0-14 5-3 4-9 4-14 5-5-1-10-2-14 1-5 2-11 5-16 2-4-3-7-6-12-5-6 1-11-2-14-7s-10-9-6-15c1-6-6-3-7 1-4 5-10 7-16 6-9 0-19 2-26-4-2-5-6-10-12-8l-22 3c0-5-5-8-10-7s-9 5-15 5c-5 1-11 3-17 2l-14 2c-5-2-11 0-15 3-6 4-12 3-18 4l-18 3c-11 1-22-1-33-2-8-1-16-4-24-1-10 1-19-4-29-4l-20-3-18-5c-8-3-17 0-25-1-8-2-15 3-22 2-11-1-20 7-30 9l-15 4c-4 4-10 5-16 6l-23 5c-4 2-9 3-13 6l-14 4c-7 2-15 4-22 4-6 0-12 2-17 3-9 2-18-1-27-1s-19 0-26-6c-3-2-2-6-6-6 7-2-2-9 2-13-2-3-2-7-3-11v-12c-3-2 2-5-1-8-1-7-9-9-15-11-4-1-9-5-9-10-3-5-2-10-2-16l-2-15c-3-3-5-8-9-10l-14-4c-5-3-10 1-15 0-6 2-10-3-15-4-7-1-14 1-19-3-4-3-7-6-12-6-6-1-5 10-12 7-3 1-4 8-6 3-3-2-6 1-8 1s-4 2-6 1c-4 2-9-5-11 1-1-4-4-6-8-4-3 2-7 0-10 0-4 5-7-1-11 2-9 2-17-2-25-1-6 2-10-2-14-5-5-3-11 4-14-3-4-1-9 0-13 3-4 0-5 6-10 7-3-1-4 1-4 4-4 0-8-5-11 0-3 1-6-3-6 1-3-2-10 1-15-2-5-1-11-2-17-1-4 2-9 1-14 2l-20-1-14-2c0-2-6 0-3-3h-2l-3-2c-4 3-12-6-4-6 3 2 5-3 1-4-3-2-6-2-9-2s-5 3-8 1c-4 2-7-2-11 0-2 2-3 1-4-1-3 0-3 4-6 1-2-3-3 2-6-1-1 3-3 1-5 2 0 1-3 2-3 0-1-3-6 4-4-1-1-3-2 0-3 0-4-4-8-2-12-3h-2c-2-4-7-3-11-4s-7-2-11-1-7-2-10 0l-12 2c-5 0-8 4-13 5-3 0-4 2-7 1h-1c-6 3-12 3-17 5-2 2-6 1-8 2-3 3-9-1-13 3-3 1-5-2-7 2-3 0-7 3-10 1-3 0-4-3-8-4-4-2-10-2-13-5l-11 1c-3 0-8-3-9 2l6 7c-3 4 9 11 1 12-6 0-8-7-9-11-1-7-8-4-11-3l-10-11-6-6c1-2-2-4-4-5-3 0-6-4-9-2-2 1-3 0-4-2 0-4-5 2-9 0-4-1-1 1-1 4-2 0-9-4-4-3 0-2-7-1-8-4-3-3-5-6-6-10s2-9-2-11c-1-3 6-3 4 1 0 1 3 4 5 3v-4c-4-3 4-1 2-4-3-2 1-7-2-9-2 0-4 0-2-2-4 1-4-5-7-6-3-3-1-8-4-13 2-2 5-3 3-7 2-2-1-6-3-6h-1c-1 2 0-2-3-1-4 1-8-4-11-2-3 0-3 3-6 0-3 1-7-1-10-1-5 0-9-2-13-3-4 0-7-2-11-3-3-3-7-5-11-2-4 0-7-3-11-4-3-1-8 1-7-4-3 2-4-3-6 0-6 2-10-2-14-5-5 2-12 1-15-4-6-1-11-5-18-6-4-1-7 2-11 0-6 2-11 3-17 2-3-1-9 0-10-5 2-6-5-8-9-6-4 4-9 7-15 8l-10 4-13 1c-4 0-10 0-13-3 0-5-5-7-9-6-5 2-9 1-12-3l-5-2zm330 118c-6 0 2 7 4 6-1-2 0-6-4-6z" /> + +<clipPath id="land_clip"> +<use href="#land_path"/> +</clipPath> + +<pattern id="axis_control_12" width="12" height="12" patternUnits="userSpaceOnUse"> +<path stroke="forestgreen" stroke-opacity="0.4" stroke-width="4" stroke-linecap="butt" + d="M-12,-12l24,24M0,-12l24,24M-12,0l24,24"/> +</pattern> + +<pattern id="allied_control_12" width="12" height="12" patternUnits="userSpaceOnUse"> +<path stroke="firebrick" stroke-opacity="0.4" stroke-width="4" stroke-linecap="butt" + d="M-12,24l24,-24M0,24l24,-24M-12,12l24,-24" + /> +</pattern> + +<pattern id="axis_control_16" width="16" height="16" patternUnits="userSpaceOnUse"> +<path stroke="forestgreen" stroke-opacity="0.4" stroke-width="5" stroke-linecap="butt" + d="M-16,-16l32,32M0,-16l32,32M-16,0l32,32"/> +</pattern> + +<pattern id="allied_control_16" width="16" height="16" patternUnits="userSpaceOnUse"> +<path stroke="firebrick" stroke-opacity="0.4" stroke-width="5" stroke-linecap="butt" + d="M-16,32l32,-32M0,32l32,-32M-16,16l32,-32" + /> +</pattern> + +</defs> + +<path id="grid" clip-path="url(#land_clip)" + stroke="#000" + stroke-width="2" + stroke-opacity="0.125" + x-stroke-dasharray="20 30 99" + /> + +<g id="fortresses" fill="#642" stroke="darkgoldenrod" stroke-width="3" stroke-linejoin="round"> +<path class="fortress" id="fortress_benghazi" d="M170 295l-8.974-15.543 8.974-15.544h17.95l8.973 15.544-8.973 15.543z" /> +<path class="fortress" id="fortress_tobruk" d="M1095 181l-8.974-15.543 8.974-15.544h17.95l8.973 15.544-8.973 15.543z" /> +<path class="fortress" id="fortress_bardia" d="M1458 223l-8.975-15.543 8.975-15.543h17.95l8.972 15.543-8.972 15.543z" /> +</g> + +<g font-family="Source Sans" font-weight="bold" fill="cornsilk"> +<text text-anchor="middle" font-size="20" x="179" y="286">2</text> +<text text-anchor="middle" font-size="20" x="1104" y="172">5</text> +<text text-anchor="middle" font-size="20" x="1467" y="214">2</text> +</g> + +<g id="hexes" fill="transparent" stroke="transparent"></g> +<g id="sides"></g> +<g id="lines"></g> + </svg> <!-- END INSERT MAP FILE --> @@ -336,11 +336,6 @@ document.getElementById("map").addEventListener("mousedown", function (evt) { } }) -function for_each_side_in_path(path, fn) { - for (let i = 1; i < path.length; ++i) - fn(to_side_id(path[i-1], path[i])) -} - function on_focus_hex(evt) { let hex = evt.target.hex let text = hex_name[hex] @@ -524,7 +519,6 @@ function build_hexes() { case 4: x1 = (x-w); y1 = (y-b); x2 = (x+0); y2 = (y-a); break; // NW case 5: x1 = (x+0); y1 = (y-a); x2 = (x+w); y2 = (y-b); break; // NE } - path.push("M", x1, y1, x2, y2) let side = ui.sides[side_id] = document.createElementNS(svgNS, "line") document.getElementById("mapsvg").getElementById("sides").appendChild(side) @@ -571,7 +565,6 @@ function build_hexes() { ].join(" ") } - let path = [] for (let y = 0; y < map_h+1; ++y) { for (let x = 0; x < map_w+1; ++x) { let hex_id = y * map_w + x @@ -626,8 +619,6 @@ function build_hexes() { ui.months[month] = document.getElementById("month" + month) } - document.getElementById("mapsvg").getElementById("grid").setAttribute("d", path.join(" ")) - ui.benghazi = document.getElementById("mapsvg").getElementById("fortress_benghazi") ui.bardia = document.getElementById("mapsvg").getElementById("fortress_bardia") ui.tobruk = document.getElementById("mapsvg").getElementById("fortress_tobruk") @@ -1173,20 +1164,8 @@ function on_log(text) { return p } +build_hexes() + drag_element_with_mouse("#battle", "#battle_header") drag_element_with_mouse("#pursuit", "#pursuit_header") scroll_with_middle_mouse("main") - -fetch("map.svg") - .then(r => { - if (!r.ok) - throw new Error("Could not fetch \"map.svg\": " + r.statusText) - return r.text() - }) - .then(text => { - document.getElementById("mapsvg").outerHTML = text - build_hexes() - }) - .catch(error => { - window.alert(error.message) - }) |
