From dc7b3efd4f0197362f812b4981803370052ef193 Mon Sep 17 00:00:00 2001
From: Adam <24621027+adoyle0@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:36:26 -0400
Subject: [PATCH] make cards

---
 client/public/styles.css         |  1 +
 client/src/components/browser.rs |  2 +-
 client/src/components/game.rs    | 31 +++++++++++++++++++++++++------
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/client/public/styles.css b/client/public/styles.css
index e82593c..496593c 100644
--- a/client/public/styles.css
+++ b/client/public/styles.css
@@ -20,6 +20,7 @@ body {
   font-style: normal;
   font-stretch: condensed;
 }
+
 button {
   @apply bg-neutral-600
     border-b-4
diff --git a/client/src/components/browser.rs b/client/src/components/browser.rs
index 1d00e3b..05d31eb 100644
--- a/client/src/components/browser.rs
+++ b/client/src/components/browser.rs
@@ -93,7 +93,7 @@ pub fn Browser() -> impl IntoView {
                     <button type="button" class="bg-neutral-600" on:click=show_packs_button>
                         <label>Custom</label>
                     </button>
-                    finish this
+                    TODO: finish this
                 </div>
                 <Show when=move || show_packs()>
                     <span class="flex">
diff --git a/client/src/components/game.rs b/client/src/components/game.rs
index 158b416..7076b8d 100644
--- a/client/src/components/game.rs
+++ b/client/src/components/game.rs
@@ -28,12 +28,31 @@ pub fn Game() -> impl IntoView {
     view! {
         <div class="p-1">
             <h2 class="text-2xl">Game</h2>
-            <p>Name: {move || game_name()}</p>
-            <p>Host: {move || game_host()}</p>
-            <p>Players: {move || game_players()}</p>
-            <p>Czar: {move || game_czar()}</p>
-            <p>Black Card: {move || game_black().0} Pick: {move || game_black().1}</p>
-            <p>Your Cards: {move || game_white()}</p>
+            <span class="flex">
+                <p class="p-3">Name: {move || game_name()}</p>
+                <p class="p-3">Host: {move || game_host()}</p>
+                <p class="p-3">Czar: {move || game_czar()}</p>
+                <p class="p-3">Players: {move || game_players()}</p>
+            </span>
+            <div class="relative w-40 h-60 text-white bg-black rounded-lg">
+                <p class="p-4">{move || game_black().0}</p>
+                <p class="absolute right-4 bottom-4">Pick: {move || game_black().1}</p>
+            </div>
+            <div class="inline-flex flex-wrap">
+                {move || {
+                    game_white()
+                        .iter()
+                        .map(|card| {
+                            view! {
+                                <div class="relative m-2 w-40 h-60 text-black bg-white rounded-lg">
+                                    <p class="p-4">{card}</p>
+                                </div>
+                            }
+                        })
+                        .collect_view()
+                }}
+
+            </div>
         </div>
     }
 }