Use ID instead of class for grid divs.

2 files changed, 9 insertions, 9 deletions

diff --git a/play.html b/play.html
index abf8601..5442903 100644
--- a/play.html
+++ b/play.html
@@ -15,10 +15,10 @@
 <script defer src="ui.js"></script>
 <style>
 
-.grid_center { background-color: slategray; }
-.grid_role { background-color: silver; }
-.grid_top { background-color: silver; }
-.grid_top.your_turn { background-color: orange; }
+#grid_center { background-color: slategray; }
+#grid_role { background-color: silver; }
+#grid_top { background-color: silver; }
+#grid_top.your_turn { background-color: orange; }
 .one .role_name { background-color: salmon; }
 .two .role_name { background-color: skyblue; }
 .turn_info { background-color: gainsboro; }
@@ -305,9 +305,9 @@ div.block {
 <div id="herald+Steward" class="herald_noble" onclick="on_herald('Steward')">Steward</div>
 </div>
 
-<div class="grid_window">
+<div id="grid_window">
 
-	<div class="grid_top">
+	<div id="grid_top">
 		<div class="menu">
 			<div class="menu_title"><img src="/images/cog.svg"></div>
 			<div class="menu_popup">
@@ -382,7 +382,7 @@ div.block {
 		<div id="exit_button" class="image_button hide" onclick="send_exit()"><img src="/images/exit-door.svg"></div>
 	</div>
 
-	<div class="grid_role">
+	<div id="grid_role">
 
 		<div class="role one">
 			<div class="role_name">
@@ -411,7 +411,7 @@ div.block {
 
 	<div id="log"></div>
 
-	<div class="grid_center">
+	<div id="grid_center">
 
 <div id="mapwrap" class="mapwrap">
 <div id="map" class="map">
diff --git a/ui.js b/ui.js
index 598ad5a..0e8dbbc 100644
--- a/ui.js
+++ b/ui.js
@@ -783,7 +783,7 @@ function on_update() {
 
 drag_element_with_mouse(".battle", ".battle_header");
 drag_element_with_mouse(".herald", ".herald_header");
-scroll_with_middle_mouse(".grid_center", 2);
+scroll_with_middle_mouse("#grid_center", 2);
 init_map_zoom();
 init_shift_zoom();
 init_client([ "England", "Scotland" ]);