make cards

client/public/styles.css

@@ -20,6 +20,7 @@ body {
   font-style: normal;
   font-stretch: condensed;
 }
+
 button {
   @apply bg-neutral-600
     border-b-4

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">

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>
     }
 }