From d0761c05a44c293a4f91e8a53bd2023563f45f09 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sat, 21 Oct 2023 00:29:14 +0200
Subject: Use raster image for map instead of SVG.

Chrome is too slow with the SVG map for a good experience.
---
 map150.jpg | Bin 0 -> 626894 bytes
 map150.png | Bin 0 -> 2826207 bytes
 map75.jpg  | Bin 0 -> 506690 bytes
 map75.png  | Bin 0 -> 1068375 bytes
 play.css   |   9 ++++++++-
 play.html  |  66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 play.js    |  25 ++---------------------
 7 files changed, 71 insertions(+), 29 deletions(-)
 create mode 100644 map150.jpg
 create mode 100644 map150.png
 create mode 100644 map75.jpg
 create mode 100644 map75.png

diff --git a/map150.jpg b/map150.jpg
new file mode 100644
index 0000000..b6e3958
Binary files /dev/null and b/map150.jpg differ
diff --git a/map150.png b/map150.png
new file mode 100644
index 0000000..1e996a4
Binary files /dev/null and b/map150.png differ
diff --git a/map75.jpg b/map75.jpg
new file mode 100644
index 0000000..8a219d9
Binary files /dev/null and b/map75.jpg differ
diff --git a/map75.png b/map75.png
new file mode 100644
index 0000000..03e5907
Binary files /dev/null and b/map75.png differ
diff --git a/play.css b/play.css
index 8967dd2..c8b8fd7 100644
--- a/play.css
+++ b/play.css
@@ -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;
diff --git a/play.html b/play.html
index e7ed795..2fd0b18 100644
--- a/play.html
+++ b/play.html
@@ -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 -->
 
diff --git a/play.js b/play.js
index dfa7f6a..db11411 100644
--- a/play.js
+++ b/play.js
@@ -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)
-	})
-- 
cgit v1.2.3