Battlefield decoration.

7 files changed, 19 insertions, 7 deletions

diff --git a/images/battlefield_buildings.png b/images/battlefield_buildings.png
new file mode 100644
index 0000000..237b0fe
--- /dev/null
+++ b/images/battlefield_buildings.png
diff --git a/images/battlefield_hill1.png b/images/battlefield_hill1.png
new file mode 100644
index 0000000..72e19e9
--- /dev/null
+++ b/images/battlefield_hill1.png
diff --git a/images/battlefield_hill2.png b/images/battlefield_hill2.png
new file mode 100644
index 0000000..8e03180
--- /dev/null
+++ b/images/battlefield_hill2.png
diff --git a/images/battlefield_trees1.png b/images/battlefield_trees1.png
new file mode 100644
index 0000000..86466d4
--- /dev/null
+++ b/images/battlefield_trees1.png
diff --git a/images/battlefield_trees2.png b/images/battlefield_trees2.png
new file mode 100644
index 0000000..772db04
--- /dev/null
+++ b/images/battlefield_trees2.png
diff --git a/images/battlefield_trees3.png b/images/battlefield_trees3.png
new file mode 100644
index 0000000..b838b20
--- /dev/null
+++ b/images/battlefield_trees3.png
diff --git a/play.html b/play.html
index 03ce019..389bb45 100644
--- a/play.html
+++ b/play.html
@@ -117,7 +117,6 @@ body.Teutons #plan_actions .russian { display: none }
 
 #battle_grid {
 	display: grid;
-	gap: 18px;
 	grid-template-columns: auto auto auto;
 	margin: 0 auto;
 	justify-content: center;
@@ -130,12 +129,6 @@ body.Teutons #plan_actions .russian { display: none }
 	padding: 12px;
 }
 
-#battle_grid .grid_array.action {
-	background-image: url("images/battle_array_action.svg");
-	background-repeat: no-repeat;
-	background-position: top center;
-}
-
 #battle_grid #grid_ga {
 	height: auto;
 	min-height: 80px;
@@ -149,6 +142,25 @@ body.Teutons #plan_actions .russian { display: none }
 	display: none;
 }
 
+.grid_array { background-repeat: no-repeat }
+
+.grid_array.action {
+	background-image: url(images/battle_array_action.svg);
+	background-position: top center;
+}
+
+#grid_a1 { background-position: 10% 60%; background-image: url(images/battlefield_hill1.png) }
+#grid_a1.action { background-position: top center, 10% 60%; background-image: url(images/battle_array_action.svg), url(images/battlefield_hill1.png) }
+#grid_a3 { background-position: 60% 90%, 20% 30%; background-image: url(images/battlefield_buildings.png), url(images/battlefield_trees1.png) }
+#grid_a3.action { background-position: top center, 60% 90%, 20% 30%; background-image: url(images/battle_array_action.svg), url(images/battlefield_buildings.png), url(images/battlefield_trees1.png) }
+
+#grid_d1 { background-position: 50% 70%; background-image: url(images/battlefield_trees2.png) }
+#grid_d1.action { background-position: top center, 50% 70%; background-image: url(images/battle_array_action.svg), url(images/battlefield_trees2.png) }
+#grid_d2 { background-position: 50% 95%; background-image: url(images/battlefield_trees3.png) }
+#grid_d2.action { background-position: top center, 50% 95%; background-image: url(images/battle_array_action.svg), url(images/battlefield_trees3.png) }
+#grid_d3 { background-position: 50% 60%; background-image: url(images/battlefield_hill2.png) }
+#grid_d3.action { background-position: top center, 50% 60%; background-image: url(images/battle_array_action.svg), url(images/battlefield_hill2.png) }
+
 #grid_rg1:empty:not(.action), #grid_rg2:empty:not(.action), #grid_rg3:empty:not(.action),
 #grid_sa1:empty:not(.action), #grid_sa2:empty:not(.action), #grid_sa3:empty:not(.action) {
 	display: none;