From 7b7f6cab6ad40a45c3bcb3632ebb3b05b8507d08 Mon Sep 17 00:00:00 2001
From: MeowcaTheoRange <me@abtmtr.link>
Date: Tue, 19 Mar 2024 21:49:13 -0500
Subject: [PATCH] Improve bracket styling

---
 .../item/fediverse-madness/scripts/game.js    | 21 +++++++++++--------
 .../projects/item/fediverse-madness/style.css | 19 +++++++++++++----
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/views/projects/item/fediverse-madness/scripts/game.js b/views/projects/item/fediverse-madness/scripts/game.js
index 0d00f88..19d7b5a 100644
--- a/views/projects/item/fediverse-madness/scripts/game.js
+++ b/views/projects/item/fediverse-madness/scripts/game.js
@@ -656,17 +656,20 @@ function endGame() {
     // el_id_winnerUserFields.innerHTML = winningPlayer.fields.reduce((pv, fields) => pv + `<tr><td>${escapeHtml(fields.name)}</td><td>${escapeHtml(fields.value)}</td></tr>`, "");
 
     el_id_winnermessage.innerHTML = `Congratulations, ${renderNameHTML(escapeHtml(winningPlayer.display_name), winningPlayer)}! You won the bracket!`;
-    el_id_winnerusers.innerHTML = `<div>${state.reduce((pv, cs) => {
+    el_id_winnerusers.innerHTML = state.reduce((pv, cs) => {
         return pv + `<div class="flexUser">${cs.reduce((pvus, cus) => {
-            return pvus + cus.reduce((pvu, cu) => {
-                return pvu + `<div class="flexUserUser">
-                    <img src="${cu.avatar}" width="64" height="64" />
-                    <h3><a href="${cu.url}" target="_blank">${renderNameHTML(escapeHtml(cu.display_name), cu)}</a></h3>
-                    <p>@${cu.fqn}</p>
-                </div>`
-            }, "")
+            console.log(cus);
+            return pvus + `<div class="flexUserGroup"><div class="flexUserUser">
+                <img src="${cus[0].avatar}" width="64" height="64" />
+                <h3><a href="${cus[0].url}" target="_blank">${renderNameHTML(escapeHtml(cus[0].display_name), cus[0])}</a></h3>
+                <p>@${cus[0].fqn}</p>
+            </div>${cus[1] ? `<div class="flexUserUser">
+                <img src="${cus[1].avatar}" width="64" height="64" />
+                <h3><a href="${cus[1].url}" target="_blank">${renderNameHTML(escapeHtml(cus[1].display_name), cus[1])}</a></h3>
+                <p>@${cus[1].fqn}</p>
+            </div>` : ""}</div>`
         }, "")}</div>`
-    }, "")}</div>`
+    }, "");
 }
 
 el_id_winnerPlayAgain.addEventListener("click", (x) => {
diff --git a/views/projects/item/fediverse-madness/style.css b/views/projects/item/fediverse-madness/style.css
index f791c1b..30f3811 100644
--- a/views/projects/item/fediverse-madness/style.css
+++ b/views/projects/item/fediverse-madness/style.css
@@ -53,17 +53,17 @@
 
 .flexUsersVert {
     display: flex;
-	flex-direction: column;
-	align-items: safe center;
+	flex-direction: row;
+	align-items: stretch;
     overflow: auto;
     gap: 0.5em;
 }
 
 .flexUser {
     display: flex;
+    flex-direction: column;
 	flex-wrap: nowrap;
-	justify-content: space-evenly;
-    width: 100%;
+	justify-content: space-around;
     gap: 0.5em;
 }
 
@@ -71,10 +71,21 @@
     text-align: center;
     width: 256px;
     min-width: 256px;
+    height: 150px;
+    min-height: 150px;
+    box-sizing: content-box;
     overflow: hidden;
     word-wrap: break-word;
 }
 
+.flexUserGroup {
+    display: flex;
+    flex-direction: column;
+	flex-wrap: nowrap;
+	justify-content: space-around;
+    gap: 0.5em;
+}
+
 .flexUserUser * {
     word-wrap: break-word;
 }
\ No newline at end of file