campaigner positioning WIP

3 files changed, 87 insertions, 31 deletions

diff --git a/play.html b/play.html
index 4ec6594..d58b15e 100644
--- a/play.html
+++ b/play.html
@@ -934,13 +934,15 @@ 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 congress" style="left:500px;top:765px;"></div> -->
 		</div>
 
-		<div class="piece red1" style="left:350px;top:100px;"></div>
+		<div id="pieces"></div>
+
+		<!-- <div class="piece red1" style="left:350px;top:100px;"></div>
 		<div class="piece red2 action" style="left:450px;top:175px;"></div>
 		<div class="piece red3" style="left:550px;top:150px;"></div>
 		<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>
diff --git a/play.js b/play.js
index 56ddafe..b10d22a 100644
--- a/play.js
+++ b/play.js
@@ -37,6 +37,9 @@ let ui = {
 		document.getElementById("role_Suffragist"),
 		document.getElementById("role_Opposition"),
 	],
+	pieces: document.getElementById("pieces"),
+	support_campaigner: [],
+	opposition_campaigner: [],
     cards: [ null ],
 	us_states: [ null ],
 	regions: [ null ],
@@ -100,6 +103,9 @@ const LAYOUT = {
 	"WA": [158, 97],
 }
 
+const US_STATES_LAYOUT = [ null ]
+const REGIONS_LAYOUT = [ null ]
+
 // CARD MENU
 
 var card_action_menu = Array.from(document.getElementById("popup").querySelectorAll("li[data-action]")).map(e => e.dataset.action)
@@ -244,7 +250,6 @@ function on_click_card(evt) {
 
 function on_click_congress(evt) {
 	if (evt.button === 0) {
-		console.log("congress")
 		if (send_action('congress'))
 			evt.stopPropagation()
 	}
@@ -267,6 +272,14 @@ function on_click_us_state(evt) {
 	hide_popup_menu()
 }
 
+function on_click_campaigner(evt) {
+	if (evt.button === 0) {
+		if (send_action('campaigner', evt.target.my_campaigner))
+			evt.stopPropagation()
+	}
+	hide_popup_menu()
+}
+
 function on_click_space(evt) {
 	if (evt.button === 0) {
 		if (send_action('space', evt.target.my_space))
@@ -291,9 +304,24 @@ function create(t, p, ...c) {
 	return e
 }
 
+function create_campaigner(color, i) {
+	return create("div", {
+		className: `piece ${color}`,
+		my_campaigner: i,
+		onmousedown: on_click_campaigner
+	})
+}
+
 function build_user_interface() {
 	let elt
 
+	for(let s of US_STATES) {
+		if (s) US_STATES_LAYOUT.push(LAYOUT[s.code])
+	}
+	for(let r of REGION_NAMES) {
+		if (r) REGIONS_LAYOUT.push(LAYOUT[r])
+	}
+
 	ui.congress_box.onmousedown = on_click_congress
 	for (let c = 1; c <= 6; ++c) {
 		elt = ui.congress[c] = create("div", {
@@ -328,6 +356,17 @@ function build_user_interface() {
 		elt.addEventListener("mouseenter", on_focus_us_state)
 		elt.addEventListener("mouseleave", on_blur)
 	}
+
+	ui.support_campaigner = [
+		create_campaigner('purple1', 1),
+		create_campaigner('purple2', 2),
+		create_campaigner('yellow1', 3),
+		create_campaigner('yellow2', 4)
+	]
+	ui.opposition_campaigner = [
+		create_campaigner('red1', 1),
+		create_campaigner('red2', 2),
+	]
 }
 
 function on_focus_card_tip(card_number) { // eslint-disable-line no-unused-vars
@@ -461,14 +500,35 @@ function on_update() { // eslint-disable-line no-unused-vars
 		ui.cards[i].classList.toggle("selected", i === view.selected_card)
 	}
 
-	for (let i = 1; i <= region_count; ++i) {
+	for (let i = 1; i < ui.regions.length; ++i) {
 		ui.regions[i].classList.toggle("action", is_region_action(i))
 	}
 
-	for (let i = 1; i <= us_states_count; ++i) {
+	for (let i = 1; i < ui.us_states.length; ++i) {
 		ui.us_states[i].classList.toggle("action", is_us_state_action(i))
 	}
 
+
+	// ui.pieces.replaceChildren()
+
+	for (let i = 0; i < ui.support_campaigner.length; ++i) {
+		// TODO Cleanup
+		let campaigner_region = view.support_campaigner[i]
+		if (campaigner_region) {
+			ui.pieces.appendChild(ui.support_campaigner[i])
+			let [x, y] = REGIONS_LAYOUT[campaigner_region]
+			ui.support_campaigner[i].style.left = x - 30 + (15 * i) + "px"
+			ui.support_campaigner[i].style.top = y - 40 + "px"
+		} else {
+			ui.support_campaigner[i].remove()
+		}
+	}
+	for (let i = 0; i < ui.opposition_campaigner.length; ++i) {
+		// TODO
+		ui.opposition_campaigner[i].classList.toggle("hide", !view.opposition_campaigner[i])
+	}
+
+
 	action_button("commit_1_button", "+1 Button")
 	action_button("defer", "Defer")
 	action_button("match", "Match")
diff --git a/rules.js b/rules.js
index 363b014..d5f87d0 100644
--- a/rules.js
+++ b/rules.js
@@ -115,6 +115,14 @@ function opponent_buttons() {
 	}
 }
 
+function player_campaigners() {
+	if (game.active === SUF) {
+		return game.support_campaigner
+	} else {
+		return game.opposition_campaigner
+	}
+}
+
 function player_claimed() {
 	if (game.active === SUF) {
 		return game.support_claimed
@@ -168,25 +176,21 @@ function us_state_region(s) {
 	return US_STATES[s].region
 }
 
-function find_campaigners(campaigner) {
-	if (campaigner === PURPLE) {
-		return game.purple_campaigner
-	} else if (campaigner === YELLOW) {
-		return game.yellow_campaigner
-	} else {
-		return game.opposition_campaigner
-	}
+function free_campaigner(campaigners, color) {
+	const start = color === YELLOW ? 2 : 0
+	const index = campaigners.indexOf(0, start)
+	return color !== YELLOW && index > 1 ? -1 : index
 }
 
-function add_campaigner(campaigner, region) {
-	const campaigners = find_campaigners(campaigner)
-	const index = campaigners.indexOf(0)
+function add_campaigner(campaigner_color, region) {
+	const campaigners = player_campaigners()
+	const index = free_campaigner(campaigners, campaigner_color)
 	if (index !== -1) {
 		campaigners[index] = region
 	} else {
 		throw Error("No free campaigners")
 	}
-	log(`Placed ${COLOR_CODE[campaigner]}R in R${region}`)
+	log(`Placed ${COLOR_CODE[campaigner_color]}R in R${region}`)
 }
 
 function add_cube(cube, us_state) {
@@ -285,8 +289,7 @@ exports.setup = function (seed, _scenario, _options) {
 		support_discard: [],
 		support_hand: [],
 		support_claimed: [],
-		purple_campaigner: [0, 0],
-		yellow_campaigner: [0, 0],
+		support_campaigner: [0, 0, 0, 0], // purple, purple, yellow, yellow
 		support_buttons: 0,
 
 		opposition_deck: [],
@@ -382,8 +385,7 @@ exports.view = function(state, player) {
 		support_discard: game.support_discard, // top_discard?
 		support_hand: game.support_hand.length,
 		support_claimed: game.support_claimed,
-		purple_campaigner: game.purple_campaigner,
-		yellow_campaigner: game.yellow_campaigner,
+		support_campaigner: game.support_campaigner,
 		support_buttons: game.support_buttons,
 
 		opposition_deck: game.opposition_deck.length,
@@ -614,19 +616,11 @@ function can_play_event(c) {
 }
 
 function count_player_active_campaigners() {
-	if (game.active === SUF) {
-		return game.purple_campaigner.filter(value => value !== 0).length + game.yellow_campaigner.filter(value => value !== 0).length
-	} else {
-		return game.opposition_campaigner.filter(value => value !== 0).length
-	}
+	return player_campaigners().filter(value => value !== 0).length
 }
 
 function has_player_active_campaigners() {
-	if (game.active === SUF) {
-		return game.purple_campaigner.some(value => value !== 0) || game.yellow_campaigner.some(value => value !== 0)
-	} else {
-		return game.opposition_campaigner.some(value => value !== 0)
-	}
+	return player_campaigners().some(value => value !== 0)
 }
 
 function remove_claimed_card(c) {