Use raster image for map instead of SVG.

Chrome is too slow with the SVG map for a good experience.

1 files changed, 2 insertions, 23 deletions

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)
-	})