1 files changed, 36 insertions, 32 deletions

diff --git a/play.js b/play.js
index 94806fa..b0d4ccb 100644
--- a/play.js
+++ b/play.js
@@ -80,16 +80,16 @@ const LAYOUT = {
 	"Mountain Passes BK": [236, 110],
 	"Mountain Passes VE": [318, 105],
 	"Mountain Passes mongols": [404, 127],
-	"Punjab DS": [515, 164],
+	"Punjab DS": [380, 238],
 	"Punjab BK": [279, 262],
 	"Punjab VE": [477, 266],
-	"Punjab mongols": [370, 233],
-	"BK_DI_2" : [160 + 30, 1186 + 40],
-	"BK_DI_4" : [302 + 30, 1186 + 40],
-	"VE_DI_1" : [ 89 + 30, 1292 + 40],
-	"VE_DI_2" : [160 + 30, 1292 + 40],
-	"VE_DI_3" : [231 + 30, 1292 + 40],
-	"VE_DI_4" : [302 + 30, 1292 + 40],
+	"Punjab mongols": [515, 184],
+	"BK_DI_2" : [160 + 20, 1186 + 43],
+	"BK_DI_4" : [302 + 20, 1186 + 43],
+	"VE_DI_1" : [ 89 + 20, 1292 + 43],
+	"VE_DI_2" : [160 + 20, 1292 + 43],
+	"VE_DI_3" : [231 + 20, 1292 + 43],
+	"VE_DI_4" : [302 + 20, 1292 + 43],
 }
 
 /* COMMON */
@@ -477,6 +477,13 @@ let ui = {
 	deck_size: document.getElementById("deck_size"),
 	of_gods_and_kings: document.getElementById("of_gods_and_kings"),
 	dynasty_card: document.getElementById("dynasty_card"),
+	discard_pile: document.getElementById("discard_pile"),
+	discard: [
+		document.getElementById("stack1"),
+		document.getElementById("stack2"),
+		document.getElementById("stack3"),
+		document.getElementById("stack4"),
+	],
 	tokens: {
 		token_ds_vp: document.getElementById("token_ds_vp"),
 		token_bk_vp: document.getElementById("token_bk_vp"),
@@ -953,33 +960,27 @@ function show_dice_box(box) {
 	box.style.left = x + "px"
 }
 
-function dragElement(elmnt) {
-	var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-	ui.attack_header.onmousedown = dragMouseDown;
-
-	function dragMouseDown(e) {
-		e.preventDefault();
-		pos3 = e.clientX;
-		pos4 = e.clientY;
-		document.onmouseup = closeDragElement;
-		document.onmousemove = elementDrag;
-	}
+function is_stacked() {
+	let card_panel = document.getElementById('card_panel').children;
+	let e1 = card_panel[0].getBoundingClientRect();
+	let e2 = card_panel[1].getBoundingClientRect();
+	return Math.abs(e1.left - e2.left) < 1;
+}
 
-	function elementDrag(e) {
-		e.preventDefault();
-		pos1 = pos3 - e.clientX;
-		pos2 = pos4 - e.clientY;
-		pos3 = e.clientX;
-		pos4 = e.clientY;
-		elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
-		elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
-	}
-  
-	function closeDragElement() {
-		document.onmouseup = null;
-		document.onmousemove = null;
+function update_discard() {
+	let stacked = is_stacked()
+	ui.discard_pile.style.flexDirection = (stacked ? "column" : "row")
+	for (let i = 0; i < 4; ++i) {
+		console.log(view.discard, view.discard.length)
+		if (i < view.discard.length) {
+			ui.discard[i].className = "card card_" + view.discard[i] + " " + (stacked ? "stack" : "side")
+		} else {
+			ui.discard[i].className = ""
+		}
 	}
 }
+window.addEventListener("resize", update_discard)
+
 
 let once = true
 function on_update() {
@@ -1049,6 +1050,9 @@ function on_update() {
 	else
 		ui.dynasty_card.className = "card card_dynasty_khalji"
 
+	// Discard stack
+	update_discard()
+
 	ui.this_card.classList.toggle("action", !!(view.actions && view.actions.event === 1))
 	ui.dynasty_card.classList.toggle("action", !!(view.actions && view.actions.dynasty_card === 1))
 	ui.shaded_event.classList.toggle("action", !!(view.actions && view.actions.shaded === 1))