display checks and xs

2 files changed, 103 insertions, 70 deletions

diff --git a/play.html b/play.html
index 338962b..15d761d 100644
--- a/play.html
+++ b/play.html
@@ -950,12 +950,10 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
 		<div class="piece purple1" style="left:250px;top:100px;"></div>
 		<div class="piece purple2" style="left:250px;top:200px;"></div>
 		<div class="piece yellow1" style="left:300px;top:100px;"></div>
-		<div class="piece yellow2" style="left:300px;top:200px;"></div> -->
-
+		<div class="piece yellow2" style="left:300px;top:200px;"></div>
 		<div class="piece yes" style="left:500px;top:400px;"></div>
 		<div class="piece no" style="left:350px;top:400px;"></div>
-
-		<!-- <div class="piece cube red" style="left:100px;top:150px;"></div>
+		<div class="piece cube red" style="left:100px;top:150px;"></div>
 		<div class="piece cube red" style="left:120px;top:150px;"></div>
 		<div class="piece cube red" style="left:140px;top:150px;"></div>
 		<div class="piece cube red" style="left:160px;top:150px;"></div>
diff --git a/play.js b/play.js
index 6ef864e..8bdef4c 100644
--- a/play.js
+++ b/play.js
@@ -27,6 +27,8 @@ const RED_X = 6
 const region_count = 6
 const us_states_count = region_count * 8
 const card_count = 128
+const green_check_count = 36
+const red_x_count = 13
 
 let ui = {
 	status: document.getElementById("status"),
@@ -41,6 +43,8 @@ let ui = {
 	support_campaigner: [],
 	opposition_campaigner: [],
 	cubes: [],
+	green_checks: [],
+	red_xs: [],
     cards: [ null ],
 	us_states: [ null ],
 	regions: [ null ],
@@ -149,16 +153,6 @@ function red_cubes(u) {
 
 var card_action_menu = Array.from(document.getElementById("popup").querySelectorAll("li[data-action]")).map(e => e.dataset.action)
 
-function is_popup_menu_action(menu_id, target_id) {
-	let menu = document.getElementById(menu_id)
-	for (let item of menu.querySelectorAll("li")) {
-		let action = item.dataset.action
-		if (action)
-			return true
-	}
-	return false
-}
-
 function show_popup_menu(evt, menu_id, target_id, title) {
 	let menu = document.getElementById(menu_id)
 
@@ -233,12 +227,6 @@ function is_card_action(action, card) {
 	return false
 }
 
-function is_piece_action(i) {
-	if (view.actions && view.actions.piece && view.actions.piece.includes(i))
-		return true
-	return false
-}
-
 function is_region_action(i) {
 	if (view.actions && view.actions.region && view.actions.region.includes(i))
 		return true
@@ -269,14 +257,20 @@ function is_red_cube_action(i) {
 	return false
 }
 
-function is_campaigner_action(i) {
-	if (view.actions && view.actions.campaigner && view.actions.campaigner.includes(i))
+function is_green_check_action(i) {
+	if (view.actions && view.actions.green_check && view.actions.green_check.includes(i))
 		return true
 	return false
 }
 
-function is_space_action(i) {
-	if (view.actions && view.actions.space && view.actions.space.includes(i))
+function is_red_x_action(i) {
+	if (view.actions && view.actions.red_x && view.actions.red_x.includes(i))
+		return true
+	return false
+}
+
+function is_campaigner_action(i) {
+	if (view.actions && view.actions.campaigner && view.actions.campaigner.includes(i))
 		return true
 	return false
 }
@@ -293,15 +287,6 @@ function on_focus_us_state(evt) {
 	document.getElementById("status").textContent = US_STATES[evt.target.my_us_state].name
 }
 
-function on_focus_space(evt) {
-	document.getElementById("status").textContent = evt.target.my_name
-}
-
-function on_focus_piece(evt) {
-	if (evt.target.my_name)
-		document.getElementById("status").textContent = evt.target.my_name
-}
-
 function on_click_card(evt) {
 	let card = evt.target.my_card
 	if (is_action('card', card)) {
@@ -343,22 +328,31 @@ function on_click_campaigner(evt) {
 	hide_popup_menu()
 }
 
-function on_click_space(evt) {
+function on_click_cube(evt) {
 	if (evt.button === 0) {
-		if (send_action('space', evt.target.my_space))
+		if (evt.target.my_cube === PURPLE && send_action('purple_cube', evt.target.my_us_state))
+			evt.stopPropagation()
+		if (evt.target.my_cube === YELLOW && send_action('yellow_cube', evt.target.my_us_state))
+			evt.stopPropagation()
+		if (evt.target.my_cube === RED && send_action('red_cube', evt.target.my_us_state))
 			evt.stopPropagation()
 	}
 	hide_popup_menu()
 }
 
-function on_click_cube(evt) {
+function on_click_green_check(evt) {
 	if (evt.button === 0) {
-		console.log("cube", evt.target.my_cube, evt.target.my_us_state)
-		if (evt.target.my_cube === PURPLE && send_action('purple_cube', evt.target.my_us_state))
+		console.log("green_check", evt.target.my_us_state)
+		if (send_action('green_check', evt.target.my_us_state))
 			evt.stopPropagation()
-		if (evt.target.my_cube === YELLOW && send_action('yellow_cube', evt.target.my_us_state))
-			evt.stopPropagation()
-		if (evt.target.my_cube === RED && send_action('red_cube', evt.target.my_us_state))
+	}
+	hide_popup_menu()
+}
+
+function on_click_red_x(evt) {
+	if (evt.button === 0) {
+		console.log("red_x", evt.target.my_us_state)
+		if (send_action('red_x', evt.target.my_us_state))
 			evt.stopPropagation()
 	}
 	hide_popup_menu()
@@ -447,6 +441,22 @@ function build_user_interface() {
 		})
 		document.getElementById("pieces").appendChild(elt)
 	}
+
+	for (let i = 0; i < green_check_count; ++i) {
+		elt = ui.green_checks[i] = create("div", {
+			className: `piece yes`,
+			onmousedown: on_click_green_check,
+		})
+		document.getElementById("pieces").appendChild(elt)
+	}
+
+	for (let i = 0; i < red_x_count; ++i) {
+		elt = ui.red_xs[i] = create("div", {
+			className: `piece no`,
+			onmousedown: on_click_red_x,
+		})
+		document.getElementById("pieces").appendChild(elt)
+	}
 }
 
 function on_focus_card_tip(card_number) { // eslint-disable-line no-unused-vars
@@ -639,53 +649,78 @@ function on_update() { // eslint-disable-line no-unused-vars
 		}
 	}
 
-	let ci = 0
+	let cube_idx = 0
+	let green_check_idx = 0
+	let red_x_idx = 0
+	let e = null
 	for (let i = 1; i < ui.us_states.length; ++i) {
 		// TODO Cleanup
 		if (view.us_states[i]) {
 			let state_cubes = []
-			let cube = null
 			// console.log("US_STATE", i, purple_cubes(i), yellow_cubes(i), red_cubes(i), is_green_check(i), is_red_x(i))
 			for (let c = 0; c < purple_cubes(i); ++c) {
-				cube = ui.cubes[ci++]
+				e = ui.cubes[cube_idx++]
 				// TODO track both state and color
-				cube.my_us_state = i
-				cube.my_cube = PURPLE
-				cube.classList.add("purple")
-				cube.classList.remove("yellow", "red")
-				cube.classList.toggle("action", is_purple_cube_action(i))
-				state_cubes.push(cube)
-				ui.pieces.appendChild(cube)
+				e.my_us_state = i
+				e.my_cube = PURPLE
+				e.classList.add("purple")
+				e.classList.remove("yellow", "red")
+				e.classList.toggle("action", is_purple_cube_action(i))
+				state_cubes.push(e)
+				ui.pieces.appendChild(e)
 			}
 			for (let c = 0; c < yellow_cubes(i); ++c) {
-				cube = ui.cubes[ci++]
-				cube.my_us_state = i
-				cube.my_cube = YELLOW
-				cube.classList.add("yellow")
-				cube.classList.remove("purple", "red")
-				cube.classList.toggle("action", is_yellow_cube_action(i))
-				state_cubes.push(cube)
-				ui.pieces.appendChild(cube)
+				e = ui.cubes[cube_idx++]
+				e.my_us_state = i
+				e.my_cube = YELLOW
+				e.classList.add("yellow")
+				e.classList.remove("purple", "red")
+				e.classList.toggle("action", is_yellow_cube_action(i))
+				state_cubes.push(e)
+				ui.pieces.appendChild(e)
 			}
 			for (let c = 0; c < red_cubes(i); ++c) {
-				cube = ui.cubes[ci++]
-				cube.my_us_state = i
-				cube.my_cube = RED
-				cube.classList.add("red")
-				cube.classList.remove("purple", "yellow")
-				cube.classList.toggle("action", is_red_cube_action(i))
-				state_cubes.push(cube)
-				ui.pieces.appendChild(cube)
+				e = ui.cubes[cube_idx++]
+				e.my_us_state = i
+				e.my_cube = RED
+				e.classList.add("red")
+				e.classList.remove("purple", "yellow")
+				e.classList.toggle("action", is_red_cube_action(i))
+				state_cubes.push(e)
+				ui.pieces.appendChild(e)
 			}
+
 			let [x, y] = US_STATES_LAYOUT[i]
-			layout_cubes(state_cubes, x, y)
+			if (state_cubes.length) {
+				layout_cubes(state_cubes, x, y)
+			} else if (is_green_check(i)) {
+				e = ui.green_checks[green_check_idx++]
+				e.my_us_state = i
+				e.classList.toggle("action", is_green_check_action(i))
+				e.style.left = x + "px"
+				e.style.top = y + "px"
+				ui.pieces.appendChild(e)
+			} else if (is_red_x(i)) {
+				e = ui.red_xs[red_x_idx++]
+				e.my_us_state = i
+				e.classList.toggle("action", is_red_x_action(i))
+				e.style.left = x + "px"
+				e.style.top = y + "px"
+				ui.pieces.appendChild(e)
+			}
 		}
 	}
 
-	// remove remaining unused cubes from DOM
-	for (let i = ci; i < ui.cubes.length; ++i) {
+	// remove remaining unused cubes & checks & xs from DOM
+	for (let i = cube_idx; i < ui.cubes.length; ++i) {
 		ui.cubes[i].remove()
 	}
+	for (let i = green_check_idx; i < ui.green_checks.length; ++i) {
+		ui.green_checks[i].remove()
+	}
+	for (let i = red_x_idx; i < ui.red_xs.length; ++i) {
+		ui.red_xs[i].remove()
+	}
 
 	action_button("commit_1_button", "+1 Button")
 	action_button("defer", "Defer")