From 912741acb47baf10e0d028fbb17ab1031eb425c7 Mon Sep 17 00:00:00 2001
From: Adam <24621027+adoyle0@users.noreply.github.com>
Date: Wed, 4 Sep 2024 19:10:27 -0400
Subject: [PATCH] fix overlapping text and make game header take up less space

---
 client/src/components/game/header.rs | 90 ++++++++++++++--------------
 1 file changed, 44 insertions(+), 46 deletions(-)

diff --git a/client/src/components/game/header.rs b/client/src/components/game/header.rs
index 664d31b..1ecf98a 100644
--- a/client/src/components/game/header.rs
+++ b/client/src/components/game/header.rs
@@ -6,12 +6,12 @@ fn Meta() -> impl IntoView {
     let game_meta = expect_context::<ReadSignal<Option<GameMeta>>>();
 
     view! {
-        <span>
-            <p>Name: {move || game_meta().unwrap().name}</p>
-            <p>White Deck: {move || game_meta().unwrap().white_count}</p>
-            <p>White Discard: {move || game_meta().unwrap().white_discard_count}</p>
-            <p>Black Deck: {move || game_meta().unwrap().black_count}</p>
-        </span>
+        <div class="shrink-0">
+            <p>{move || game_meta().unwrap().name}</p>
+            <p>"⬜ " {move || game_meta().unwrap().white_count}</p>
+            <p>"⬛ " {move || game_meta().unwrap().black_count}</p>
+            <p>"♻  " {move || game_meta().unwrap().white_discard_count}</p>
+        </div>
     }
 }
 
@@ -21,45 +21,43 @@ fn Scoreboard() -> impl IntoView {
 
     view! {
         <Show when=move || { game_meta().is_some() }>
-            <span class="absolute top-0 right-0">
-                <table class="min-w-full table-auto">
-                    <thead>
-                        <tr>
-                            <th></th>
-                            <th></th>
-                            <th>"Score"</th>
-                        </tr>
-                    </thead>
-                    {game_meta()
-                        .unwrap()
-                        .players
-                        .into_iter()
-                        .map(|player| {
-                            view! {
-                                <tr>
-                                    <td>
-                                        {if game_meta().unwrap().czar == player.name {
-                                            "👑"
-                                        } else if player.submitted {
-                                            "🟢"
-                                        } else {
-                                            "⚫"
-                                        }}
-                                    </td>
-                                    <td>
-                                        {if game_meta().unwrap().host == player.name {
-                                            "⚜  "
-                                        } else {
-                                            ""
-                                        }} {player.name}
-                                    </td>
-                                    <td class="text-center">{player.score}</td>
-                                </tr>
-                            }
-                        })
-                        .collect_view()}
-                </table>
-            </span>
+            <table class="table-auto">
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th></th>
+                        <th>"Score"</th>
+                    </tr>
+                </thead>
+                {game_meta()
+                    .unwrap()
+                    .players
+                    .into_iter()
+                    .map(|player| {
+                        view! {
+                            <tr>
+                                <td>
+                                    {if game_meta().unwrap().czar == player.name {
+                                        "👑"
+                                    } else if player.submitted {
+                                        "🟢"
+                                    } else {
+                                        "⚫"
+                                    }}
+                                </td>
+                                <td>
+                                    {if game_meta().unwrap().host == player.name {
+                                        "⚜  "
+                                    } else {
+                                        ""
+                                    }} {player.name}
+                                </td>
+                                <td class="text-center">{player.score}</td>
+                            </tr>
+                        }
+                    })
+                    .collect_view()}
+            </table>
         </Show>
     }
 }
@@ -67,7 +65,7 @@ fn Scoreboard() -> impl IntoView {
 #[component]
 pub fn Header() -> impl IntoView {
     view! {
-        <div class="relative">
+        <div class="flex flex-wrap justify-between">
             <Meta />
             <Scoreboard />
         </div>