flip top row using css flex direction

2 files changed, 20 insertions, 20 deletions

diff --git a/play.html b/play.html
index d40bfd4..42d9e50 100644
--- a/play.html
+++ b/play.html
@@ -250,6 +250,15 @@ main {
 
 /* CARD SLOTS */
 
+.slot {
+	display: flex;
+	flex-direction: column;
+}
+
+.flip .slot {
+	flex-direction: column-reverse;
+}
+
 .slot_cubes {
 	height: 87px;
 	display: flex;
diff --git a/play.js b/play.js
index 5e7f081..3d5e30a 100644
--- a/play.js
+++ b/play.js
@@ -121,7 +121,7 @@ function append_div(parent, className, text) {
 	return e
 }
 
-function create_formation_slot(id, top) {
+function create_formation_slot(id) {
 	let card = data.cards[id]
 
 	let e = create_div("slot " + wing_name[card.wing])
@@ -129,13 +129,6 @@ function create_formation_slot(id, top) {
 
 	register_animation(e, 250)
 
-	if (top) {
-		ui.slot_dice[id] = append_div(e, "slot_dice")
-		if (card.infantry || card.cavalry)
-			ui.slot_shift[id] = append_div(e, "slot_shift")
-		e.appendChild(ui.cards[id])
-	}
-
 	if (card.name === "Retreat to Nivelles") {
 		ui.slot_cubes[id] = append_div(e, "slot_cubes")
 		ui.slot_sticks[id] = append_div(e, "slot_sticks")
@@ -146,12 +139,10 @@ function create_formation_slot(id, top) {
 			ui.slot_sticks[id] = append_div(e, "slot_sticks")
 	}
 
-	if (!top) {
-		e.appendChild(ui.cards[id])
-		if (card.infantry || card.cavalry)
-			ui.slot_shift[id] = append_div(e, "slot_shift")
-		ui.slot_dice[id] = append_div(e, "slot_dice")
-	}
+	e.appendChild(ui.cards[id])
+	if (card.infantry || card.cavalry)
+		ui.slot_shift[id] = append_div(e, "slot_shift")
+	ui.slot_dice[id] = append_div(e, "slot_dice")
 
 	return e
 }
@@ -281,7 +272,7 @@ function create_formation_card(id, tip=false) {
 	return e
 }
 
-function fill_card_row(top, parent, list) {
+function fill_card_row(parent, list) {
 	parent.replaceChildren()
 	for (let id of list) {
 		let n, x
@@ -289,7 +280,7 @@ function fill_card_row(top, parent, list) {
 		if (!ui.cards[id])
 			ui.cards[id] = create_formation_card(id)
 		if (!ui.slots[id])
-			ui.slots[id] = create_formation_slot(id, top)
+			ui.slots[id] = create_formation_slot(id)
 		parent.append(ui.slots[id])
 
 		ui.cards[id].classList.toggle("selected", view.selected === id)
@@ -413,10 +404,10 @@ function on_update() {
 	for (let i = 0; i < view.morale[1]; ++i)
 		add_mcube(ui.morale[p2])
 
-	fill_card_row(p2, ui.reserve[p1], view.reserve[0])
-	fill_card_row(p2, ui.front[p1], view.front[0])
-	fill_card_row(p1, ui.reserve[p2], view.reserve[1])
-	fill_card_row(p1, ui.front[p2], view.front[1])
+	fill_card_row(ui.reserve[p1], view.reserve[0])
+	fill_card_row(ui.front[p1], view.front[0])
+	fill_card_row(ui.reserve[p2], view.reserve[1])
+	fill_card_row(ui.front[p2], view.front[1])
 
 	function update_die(d, p) {
 		let v = view.dice[d * 2 + 0]