Panels? Panels!

3 files changed, 155 insertions, 151 deletions

diff --git a/play.html b/play.html
index a6c2d94..bc6e6ac 100644
--- a/play.html
+++ b/play.html
@@ -43,83 +43,56 @@ header.your_turn { background-color: orange; }
 	font-variant-numeric: tabular-nums;
 }
 
-main { display: grid; grid-template-columns: 1fr; }
-
-#center { grid-row: 1; }
-#court1 { grid-row: 2; }
-#court2 { grid-row: 3; }
-
-body.Russians #court1 { grid-row: 3; }
-body.Russians #court2 { grid-row: 2; }
-
 /* PANELS */
 
 .panel {
 	max-width: 1275px;
 	margin: 36px auto;
 	//box-shadow: 0px 0px 4px #0008;
+	background-color: #555;
 }
 
 .panel_header {
+	background-color: #444;
+	color: white;
 	user-select: none;
 	font-weight: bold;
 	text-align: center;
 	padding: 3px 1em;
 }
 
-/* ARTS OF WAR */
-
-#arts_of_war {
-	background-color: #555;
+.panel_body {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	padding: 18px;
+	gap: 18px;
 }
 
-#arts_of_war_header {
-	background-color: #444;
-	color: white;
+.court {
+	gap: 24px;
 }
 
+/* ARTS OF WAR */
+
 #arts_of_war_list {
 	min-height: 260px;
-	display: flex;
-	justify-content: center;
-	flex-wrap: wrap;
-	padding: 18px;
-	gap: 12px;
 }
 
 /* PLAN */
 
 #plan {
-	background-color: #555;
-}
-
-#plan_header {
-	background-color: #444;
-	color: white;
-}
-
-#plan_list {
 	min-height: 260px;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	gap: 12px 6px;
-	padding: 18px 0;
 }
 
 #plan_actions {
 	background-color: #444;
 	min-height: 130px;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	padding: 18px;
-	gap: 12px;
-	flex-wrap: wrap;
 }
 
-body.Russians #plan_actions .teutonic { display: none }
-body.Teutons #plan_actions .russian { display: none }
+#plan_actions.hide {
+	display: none
+}
 
 #plan_actions .card {
 	width: 93px;
@@ -127,16 +100,10 @@ body.Teutons #plan_actions .russian { display: none }
 	background-size: 93px 130px;
 }
 
-/* BATTLE GRID WITH LORD MATS */
-
-#battle_panel {
-	background-color: #555;
-}
+body.Russians #plan_actions .teutonic { display: none }
+body.Teutons #plan_actions .russian { display: none }
 
-#battle_header {
-	background-color: #444;
-	color: white;
-}
+/* BATTLE GRID WITH LORD MATS */
 
 #battle_grid {
 	display: grid;
@@ -313,15 +280,6 @@ body.Teutons #plan_actions .russian { display: none }
 
 /* MATS */
 
-.court {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	margin: 36px auto;
-	padding: 18px 0;
-	gap: 12px;
-}
-
 .mat {
 	position: relative;
 	width: 376px;
@@ -505,21 +463,6 @@ body.shift .mustered_vassals {
 	justify-content: end;
 }
 
-/* EVENTS: THIS LEVY / THIS CAMPAIGN */
-
-#events {
-	display: flex;
-	max-width: 1275px;
-	margin: 0 auto;
-	flex-wrap: wrap;
-	gap: 12px;
-	justify-content: center;
-}
-
-#events:empty {
-	display: none;
-}
-
 /* ASSETS */
 
 .asset {
@@ -1287,8 +1230,6 @@ body.shift .mustered_vassals {
 
 <main>
 
-<div id="center">
-
 <div id="mapwrap">
 <div id="map">
 
@@ -1319,17 +1260,21 @@ body.shift .mustered_vassals {
 <div id="capabilities2"></div>
 </div>
 
-<div id="events"></div>
+<div id="arts_of_war_panel" class="panel hide">
+<div id="arts_of_war_header" class="panel_header">Arts of War</div>
+<div id="arts_of_war" class="panel_body"></div>
+</div>
 
-<div id="arts_of_war" class="panel hide">
-<div id="arts_of_war_header" class="panel_header">~ Arts of War ~</div>
-<div id="arts_of_war_list"></div>
+<div id="events_panel" class="panel hide">
+<div id="events_header" class="panel_header">Events</div>
+<div id="events" class="panel_body"></div>
+</div>
 </div>
 
-<div id="plan" class="panel hide">
-<div id="plan_header" class="panel_header">~ Plan ~</div>
-<div id="plan_list"></div>
-<div id="plan_actions"></div>
+<div id="hand_panel" class="panel hide">
+<div id="hand_header" class="panel_header">Hand</div>
+<div id="hand" class="panel_body"></div>
+</div>
 </div>
 
 <div id="battle_panel" class="panel hide">
@@ -1370,12 +1315,21 @@ body.shift .mustered_vassals {
 </div>
 </div>
 
-<div id="hand" class="hand"></div>
+<div class="panel">
+<div id="court1_header" class="panel_header">Lords</div>
+<div id="court1" class="panel_body court"></div>
+</div>
 
-</div> <!-- center -->
+<div id="plan_panel" class="panel hide">
+<div id="plan_header" class="panel_header">Plan</div>
+<div id="plan" class="panel_body"></div>
+<div id="plan_actions" class="panel_body"></div>
+</div>
 
-<div id="court1" class="court"></div>
-<div id="court2" class="court"></div>
+<div class="panel">
+<div id="court2_header" class="panel_header">Lords</div>
+<div id="court2" class="panel_body court"></div>
+</div>
 
 </main>
 
diff --git a/play.js b/play.js
index f1fbfef..48913b8 100644
--- a/play.js
+++ b/play.js
@@ -482,21 +482,30 @@ const ui = {
 	smerdi: document.getElementById("smerdi"),
 	legate: document.getElementById("legate"),
 	veche: document.getElementById("veche"),
-	plan_dialog: document.getElementById("plan"),
-	plan_list: document.getElementById("plan_list"),
+
+	plan_panel: document.getElementById("plan_panel"),
+	plan: document.getElementById("plan"),
 	plan_actions: document.getElementById("plan_actions"),
-	plan_list_cards: [],
+	plan_cards: [],
 	plan_action_cards: [],
-	arts_of_war_dialog: document.getElementById("arts_of_war"),
-	arts_of_war_list: document.getElementById("arts_of_war_list"),
+
+	arts_of_war_panel: document.getElementById("arts_of_war_panel"),
+	arts_of_war: document.getElementById("arts_of_war"),
+
+	events_panel: document.getElementById("events_panel"),
 	events: document.getElementById("events"),
+
+	hand_panel: document.getElementById("hand_panel"),
+	hand: document.getElementById("hand"),
+
 	capabilities1: document.getElementById("capabilities1"),
 	capabilities2: document.getElementById("capabilities2"),
-	hand: document.getElementById("hand"),
 	command: document.getElementById("command"),
 	turn: document.getElementById("turn"),
 	vp1: document.getElementById("vp1"),
 	vp2: document.getElementById("vp2"),
+	court1_header: document.getElementById("court1_header"),
+	court2_header: document.getElementById("court2_header"),
 	court1: document.getElementById("court1"),
 	court2: document.getElementById("court2"),
 	battle_attacker_reserves: document.getElementById("mat_attacker_reserves"),
@@ -1218,52 +1227,60 @@ function update_locale(loc) {
 
 function update_plan() {
 	if (view.plan) {
-		ui.plan_dialog.classList.remove("hide")
+		let is_planning = view.actions && view.actions.plan
+
+		ui.plan_panel.classList.remove("hide")
 		for (let i = 0; i < 6; ++i) {
 			if (i < view.plan.length) {
 				let lord = view.plan[i]
 				if (lord < 0) {
 					if (player === "Teutons")
-						ui.plan_list_cards[i].className = "card teutonic cc_pass"
+						ui.plan_cards[i].className = "card teutonic cc_pass"
 					else
-						ui.plan_list_cards[i].className = "card russian cc_pass"
+						ui.plan_cards[i].className = "card russian cc_pass"
 				} else {
 					if (lord < 6)
-						ui.plan_list_cards[i].className = "card teutonic cc_lord_" + lord
+						ui.plan_cards[i].className = "card teutonic cc_lord_" + lord
 					else
-						ui.plan_list_cards[i].className = "card russian cc_lord_" + lord
+						ui.plan_cards[i].className = "card russian cc_lord_" + lord
 				}
-			} else if (i < max_plan_length()) {
+			} else if (is_planning && i < max_plan_length()) {
 				if (player === "Teutons")
-					ui.plan_list_cards[i].className = "card teutonic cc_back"
+					ui.plan_cards[i].className = "card teutonic cc_back"
 				else
-					ui.plan_list_cards[i].className = "card russian cc_back"
+					ui.plan_cards[i].className = "card russian cc_back"
 			} else {
-				ui.plan_list_cards[i].className = "hide"
+				ui.plan_cards[i].className = "hide"
 			}
 		}
-		for (let lord = 0; lord < 12; ++lord) {
-			if (is_plan_action(lord)) {
-				ui.plan_action_cards[lord].classList.add("action")
-				ui.plan_action_cards[lord].classList.remove("disabled")
+
+		if (is_planning) {
+			ui.plan_actions.classList.remove("hide")
+			for (let lord = 0; lord < 12; ++lord) {
+				if (is_plan_action(lord)) {
+					ui.plan_action_cards[lord].classList.add("action")
+					ui.plan_action_cards[lord].classList.remove("disabled")
+				} else {
+					ui.plan_action_cards[lord].classList.remove("action")
+					ui.plan_action_cards[lord].classList.add("disabled")
+				}
+			}
+			if (is_plan_action(-1)) {
+				ui.plan_action_pass_p1.classList.add("action")
+				ui.plan_action_pass_p1.classList.remove("disabled")
+				ui.plan_action_pass_p2.classList.add("action")
+				ui.plan_action_pass_p2.classList.remove("disabled")
 			} else {
-				ui.plan_action_cards[lord].classList.remove("action")
-				ui.plan_action_cards[lord].classList.add("disabled")
+				ui.plan_action_pass_p1.classList.remove("action")
+				ui.plan_action_pass_p1.classList.add("disabled")
+				ui.plan_action_pass_p2.classList.remove("action")
+				ui.plan_action_pass_p2.classList.add("disabled")
 			}
-		}
-		if (is_plan_action(-1)) {
-			ui.plan_action_pass_p1.classList.add("action")
-			ui.plan_action_pass_p1.classList.remove("disabled")
-			ui.plan_action_pass_p2.classList.add("action")
-			ui.plan_action_pass_p2.classList.remove("disabled")
 		} else {
-			ui.plan_action_pass_p1.classList.remove("action")
-			ui.plan_action_pass_p1.classList.add("disabled")
-			ui.plan_action_pass_p2.classList.remove("action")
-			ui.plan_action_pass_p2.classList.add("disabled")
+			ui.plan_actions.classList.add("hide")
 		}
 	} else {
-		ui.plan_dialog.classList.add("hide")
+		ui.plan_panel.classList.add("hide")
 	}
 }
 
@@ -1274,20 +1291,37 @@ function update_cards() {
 		elt.classList.toggle("action", is_card_action(c))
 	}
 
-	if (view.show_arts_of_war) {
-		ui.arts_of_war_dialog.classList.remove("hide")
-		ui.arts_of_war_list.replaceChildren()
-		for (let c of view.show_arts_of_war) {
+	if (view.arts_of_war) {
+		ui.arts_of_war_panel.classList.remove("hide")
+		ui.arts_of_war.replaceChildren()
+		for (let c of view.arts_of_war) {
 			let elt = ui.cards[c]
-			ui.arts_of_war_list.appendChild(ui.cards[c])
+			console.log("showin'", c, ui.cards[c])
+			ui.arts_of_war.appendChild(ui.cards[c])
 		}
 	} else {
-		ui.arts_of_war_dialog.classList.add("hide")
+		ui.arts_of_war_panel.classList.add("hide")
+	}
+
+	if (view.events.length > 0) {
+		ui.events_panel.classList.remove("hide")
+		ui.events.replaceChildren()
+		for (let c of view.events)
+			ui.events.appendChild(ui.cards[c])
+	} else {
+		ui.events_panel.classList.add("hide")
 	}
 
-	ui.events.replaceChildren()
-	for (let c of view.events)
-		ui.events.appendChild(ui.cards[c])
+	if (view.hand.length > 0) {
+		ui.hand_panel.classList.remove("hide")
+		ui.hand.replaceChildren()
+		if (view.hand) {
+			for (let c of view.hand)
+				ui.hand.appendChild(ui.cards[c])
+		}
+	} else {
+		ui.hand_panel.classList.add("hide")
+	}
 
 	ui.capabilities1.replaceChildren()
 	for_each_teutonic_card(c => {
@@ -1301,12 +1335,6 @@ function update_cards() {
 			ui.capabilities2.appendChild(ui.cards[c])
 	})
 
-	ui.hand.replaceChildren()
-	if (view.hand) {
-		for (let c of view.hand)
-			ui.hand.appendChild(ui.cards[c])
-	}
-
 	for (let ix = 0; ix < data.lords.length; ++ix) {
 		let side = ix < 6 ? "teutonic" : "russian"
 		ui.lord_capabilities[ix].replaceChildren()
@@ -1373,15 +1401,20 @@ function is_lord_in_grid(lord) {
 }
 
 function update_court() {
-console.log("update court!")
-	ui.court1.replaceChildren()
-	ui.court2.replaceChildren()
+	let tcourt_hdr = (player === "Teutons") ? ui.court1_header : ui.court2_header
+	let rcourt_hdr = (player === "Teutons") ? ui.court2_header : ui.court1_header
+	tcourt_hdr.textContent = "Teutonic Lords"
+	rcourt_hdr.textContent = "Russian Lords"
+	let tcourt = (player === "Teutons") ? ui.court1 : ui.court2
+	let rcourt = (player === "Teutons") ? ui.court2 : ui.court1
+	tcourt.replaceChildren()
+	rcourt.replaceChildren()
 	for (let lord = 0; lord < 6; ++lord)
 		if (!is_lord_in_grid(lord) && is_lord_on_map(lord))
-			ui.court1.appendChild(ui.lord_mat[lord])
+			tcourt.appendChild(ui.lord_mat[lord])
 	for (let lord = 6; lord < 12; ++lord)
 		if (!is_lord_in_grid(lord) && is_lord_on_map(lord))
-			ui.court2.appendChild(ui.lord_mat[lord])
+			rcourt.appendChild(ui.lord_mat[lord])
 }
 
 function on_update() {
@@ -1581,8 +1614,8 @@ function build_plan() {
 	for (let i = 0; i < 6; ++i) {
 		elt = document.createElement("div")
 		elt.className = "hide"
-		ui.plan_list_cards.push(elt)
-		ui.plan_list.appendChild(elt)
+		ui.plan_cards.push(elt)
+		ui.plan.appendChild(elt)
 	}
 	for (let lord = 0; lord < 12; ++lord) {
 		let side = lord < 6 ? "teutonic" : "russian"
diff --git a/rules.js b/rules.js
index c964daf..8aaf2ed 100644
--- a/rules.js
+++ b/rules.js
@@ -1459,6 +1459,7 @@ function draw_card(deck) {
 	let i = random(deck.length)
 	let c = deck[i]
 	set_delete(deck, c)
+	console.log("deck", c, deck)
 	return c
 }
 
@@ -1544,6 +1545,8 @@ exports.setup = function (seed, scenario, options) {
 
 	log_h1(scenario)
 
+	setup_decks()
+
 	switch (scenario) {
 		default:
 		case "Pleskau":
@@ -1573,8 +1576,6 @@ exports.setup = function (seed, scenario, options) {
 			break
 	}
 
-	setup_decks()
-
 	return game
 }
 
@@ -1751,23 +1752,31 @@ function setup_pleskau_quickstart() {
 	add_lord_assets(LORD_KNUD_ABEL, BOAT, 1)
 
 	muster_vassal(LORD_HERMANN, data.lords[LORD_HERMANN].vassals[0])
+	set_delete(game.deck1, T4)
 	set_lord_capability(LORD_HERMANN, 0, T4)
+	set_delete(game.deck1, T14)
 	set_lord_capability(LORD_HERMANN, 1, T14)
 
+	set_delete(game.deck1, T3)
 	set_lord_capability(LORD_YAROSLAV, 0, T3)
 
+	set_delete(game.deck1, T13)
 	set_add(game.capabilities, T13)
 	game.pieces.legate = LOC_DORPAT
 
+	set_delete(game.deck2, R8)
 	set_add(game.capabilities, R8)
 	muster_lord(LORD_DOMASH, LOC_NOVGOROD)
 	add_lord_assets(LORD_DOMASH, BOAT, 2)
 	add_lord_assets(LORD_DOMASH, CART, 2)
 
 	muster_vassal(LORD_GAVRILO, data.lords[LORD_GAVRILO].vassals[0])
+	set_delete(game.deck2, R2)
 	set_lord_capability(LORD_GAVRILO, 0, R2)
+	set_delete(game.deck2, R6)
 	set_lord_capability(LORD_GAVRILO, 1, R6)
 
+
 	game.pieces.veche_coin += 1
 
 	goto_campaign_plan()
@@ -2092,7 +2101,7 @@ function resume_levy_arts_of_war_first() {
 states.levy_arts_of_war_first = {
 	prompt() {
 		let c = game.what[0]
-		view.show_arts_of_war = game.what
+		view.arts_of_war = game.what
 		view.what = c
 		if (data.cards[c].this_lord) {
 			view.prompt = `Arts of War: Assign ${data.cards[c].capability} to a Lord.`
@@ -2163,7 +2172,7 @@ function resume_levy_arts_of_war() {
 states.levy_arts_of_war = {
 	prompt() {
 		let c = game.what[0]
-		view.show_arts_of_war = [ c ]
+		view.arts_of_war = [ c ]
 		view.what = c
 		switch (data.cards[c].when) {
 			case "this_levy":
@@ -2526,7 +2535,7 @@ states.muster_capability = {
 	prompt() {
 		let deck = current_deck()
 		view.prompt = `Muster: Select a new capability for ${lord_name[game.who]}.`
-		view.show_arts_of_war = deck
+		view.arts_of_war = deck
 		for (let c of deck) {
 			if (is_no_event_card(c))
 				continue
@@ -3060,6 +3069,7 @@ states.campaign_plan = {
 		view.prompt = "Plan: Designate Lieutenants and build a Plan."
 		view.plan = plan
 		view.who = upper
+		view.actions.plan = []
 
 		if (plan.length < max_plan_length()) {
 			view.actions.end_plan = 0
@@ -7716,12 +7726,19 @@ exports.view = function (state, current) {
 
 		command: game.command,
 		hand: null,
+		plan: null,
 	}
 
-	if (current === P1)
+	if (current === P1) {
 		view.hand = game.hand1
-	if (current === P2)
+		view.plan = game.plan1
+		// view.arts_of_war = game.deck1
+	}
+	if (current === P2) {
 		view.hand = game.hand2
+		view.plan = game.plan2
+		// view.arts_of_war = game.deck2
+	}
 
 	if (game.state === "game_over") {
 		view.prompt = game.victory