Better div boxes

2 files changed, 9 insertions, 6 deletions

diff --git a/play.css b/play.css
index d9ea536..20afdd6 100644
--- a/play.css
+++ b/play.css
@@ -235,7 +235,10 @@ path.campaign { stroke: black; stroke-dasharray: 4 4; }
 	border: 4px solid transparent;
 }
 
-.space.action { border-color: lightgreen; box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; }
+.space.box { border-radius:  0%; }
+
+.space.action { border-color: lightgreen; box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; background-color: rgb(144, 238, 144, 0.3); }
+.space.box.action { border-color: rgb(236, 121, 45); box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; background-color: rgb(236, 121, 45, 0.3); }
 .space.selected { border-color: yellow; box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; }
 .space.tip { border: 4px dotted white; }
 
diff --git a/play.js b/play.js
index a6dc30a..44a9afc 100644
--- a/play.js
+++ b/play.js
@@ -279,10 +279,10 @@ const layout = {
 	"rects": {
 		"available_boxes": {
 			"MI_available": {
-				"x": 24,
-				"y": 100,
-				"w": 177,
-				"h": 110
+				"x": 18,
+				"y": 94,
+				"w": 192,
+				"h": 126
 			},
 			"DS_available": {
 				"x": 796,
@@ -583,7 +583,7 @@ function init_ui() {
 		// boxes
 		if (s >= S_MONGOL_INVADERS && s <= S_VE_AVAILABLE) {
 			let { x, y, w, h } = layout.rects.available_boxes[space_name[s]]
-			ui.spaces[s] = e = create("div", { className: "space" })
+			ui.spaces[s] = e = create("div", { className: "space box" })
 			e.style.left = x + "px"
 			e.style.top = y + "px"
 			e.style.width = (w - 4) + "px"