Use ID instead of class for map and mapwrap.

2 files changed, 23 insertions, 28 deletions

diff --git a/play.html b/play.html
index 34c0bed..bf66876 100644
--- a/play.html
+++ b/play.html
@@ -63,28 +63,28 @@
 
 /* MAP */
 
-.mapwrap {
+#mapwrap {
 	position: relative;
 	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
 	width: 1688px;
 	height: 1950px;
 }
 
-.map {
+#map {
 	position: absolute;
 	width: 1688px;
 	height: 1950px;
 }
 
-.map svg {
+#map svg {
 	position: absolute;
 }
 
-.map svg image {
+#map svg image {
 	pointer-events: none;
 }
 
-.map svg path.area {
+#map svg path.area {
 	fill: green;
 	stroke: green;
 	stroke-width: 20px;
@@ -93,31 +93,26 @@
 	opacity: 0;
 }
 
-.map svg #area_France { fill: white; stroke: white; }
-.map svg #area_Calais { fill: dodgerblue; stroke: dodgerblue; }
-.map svg #area_English_Channel { fill: dodgerblue; stroke: dodgerblue; }
-.map svg #area_Irish_Sea { fill: dodgerblue; stroke: dodgerblue; }
-.map svg #area_North_Sea { fill: dodgerblue; stroke: dodgerblue; }
+#map svg #area_France { fill: white; stroke: white; }
+#map svg #area_Calais { fill: dodgerblue; stroke: dodgerblue; }
+#map svg #area_English_Channel { fill: dodgerblue; stroke: dodgerblue; }
+#map svg #area_Irish_Sea { fill: dodgerblue; stroke: dodgerblue; }
+#map svg #area_North_Sea { fill: dodgerblue; stroke: dodgerblue; }
 
-.map svg path.area.highlight {
+#map svg path.area.highlight {
 	cursor: pointer;
 	opacity: 1;
 }
-.map svg path.area.where {
+#map svg path.area.where {
 	opacity: 1;
 	fill: darkslategray;
 	stroke: darkslategray;
 }
-.map svg path.area.where.highlight {
+#map svg path.area.where.highlight {
 	stroke: white;
 }
 
-X.map svg path.area.highlight:hover {
-	stroke: white;
-	fill: white;
-}
-
-.map.hide_blocks div.blocks {
+#map.hide_blocks div.blocks {
 	visibility: hidden;
 }
 
@@ -133,7 +128,7 @@ body.shift .block.known:hover {
 	position: relative;
 }
 
-.map div.block {
+#map div.block {
 	position: absolute;
 }
 
@@ -400,8 +395,8 @@ div.block {
 
 	<div id="grid_center">
 
-<div class="mapwrap" id="mapwrap">
-<div class="map" id="map">
+<div id="mapwrap">
+<div id="map">
 
 <svg id="svgmap" viewBox="0 0 1688 1950">
 <image href="map.jpg" x="0" y="0" width="1688" height="1950" />
@@ -1563,8 +1558,8 @@ c20 -20 41 -80 41 -116 0 -27 -18 -45 -46 -45 -40 0 -54 25 -54 99 0 37 3 71
 </g>
 </svg>
 
-<div id="blocks" class="blocks"></div>
-<div id="offmap" class="offmap" style="visibility:hidden"></div>
+<div id="blocks"></div>
+<div id="offmap" style="visibility:hidden"></div>
 
 </div>
 </div>
diff --git a/ui.js b/ui.js
index 609c20d..0799191 100644
--- a/ui.js
+++ b/ui.js
@@ -664,13 +664,13 @@ function update_cards() {
 	}
 
 	if (!game.l_card)
-		document.querySelector("#lancaster_card").className = "small_card card_back";
+		document.getElementById("lancaster_card").className = "small_card card_back";
 	else
-		document.querySelector("#lancaster_card").className = "small_card " + CARDS[game.l_card].image;
+		document.getElementById("lancaster_card").className = "small_card " + CARDS[game.l_card].image;
 	if (!game.y_card)
-		document.querySelector("#york_card").className = "small_card card_back";
+		document.getElementById("york_card").className = "small_card card_back";
 	else
-		document.querySelector("#york_card").className = "small_card " + CARDS[game.y_card].image;
+		document.getElementById("york_card").className = "small_card " + CARDS[game.y_card].image;
 }
 
 function update_battle() {