From 761e2b5c0526987b8a56c52b2b11e2ed99e37396 Mon Sep 17 00:00:00 2001
From: Kjetil Orbekk <kj@orbekk.com>
Date: Wed, 7 Sep 2022 21:38:55 -0400
Subject: Start working on game layout

---
 webapp/src/components/game.rs | 37 +++++++++++++++++++++----------------
 webapp/src/components/hand.rs |  9 +++------
 2 files changed, 24 insertions(+), 22 deletions(-)

(limited to 'webapp/src/components')

diff --git a/webapp/src/components/game.rs b/webapp/src/components/game.rs
index d31433d..33fb5b7 100644
--- a/webapp/src/components/game.rs
+++ b/webapp/src/components/game.rs
@@ -47,22 +47,27 @@ pub fn game() -> Html {
 
     html! {
         <>
-            <p>{ format!("Dealer: {:?}", *dealer) }</p>
-            if let Some((contract, bidding)) = &*contract {
-                { format!("Got contract {:?}. Bidding was {:?}", contract, bidding) }
-            } else {
-                <Bidding {on_contract} dealer={ *dealer } />
-            }
-            <p>{ "North" }</p>
-            <Hand ..(*north).clone() />
-            <p>{ "West" }</p>
-            <Hand ..(*west).clone() />
-            <p>{ "South" }</p>
-            <Hand ..(*south).clone() />
-            <p>{ "East" }</p>
-            <Hand ..(*east).clone() />
-            <p>{ "Controls" }</p>
-            <button onclick={shuffle}>{ "Shuffle" }</button>
+            <div class="center">
+                <p>{ format!("Dealer: {:?}", *dealer) }</p>
+                if let Some((contract, bidding)) = &*contract {
+                    { format!("Got contract {:?}. Bidding was {:?}", contract, bidding) }
+                } else {
+                    <Bidding {on_contract} dealer={ *dealer } />
+                }
+                <button onclick={shuffle}>{ "Shuffle" }</button>
+            </div>
+            <div class="hand west">
+                <Hand ..(*west).clone() />
+            </div>
+            <div class="hand north">
+                <Hand ..(*north).clone() />
+            </div>
+            <div class="hand east">
+                <Hand ..(*east).clone() />
+            </div>
+            <div class="hand south">
+                <Hand ..(*south).clone() />
+            </div>
         </>
     }
 }
diff --git a/webapp/src/components/hand.rs b/webapp/src/components/hand.rs
index 1a2727c..85b4dd2 100644
--- a/webapp/src/components/hand.rs
+++ b/webapp/src/components/hand.rs
@@ -3,20 +3,17 @@ use crate::components::card::{Card, CardProps};
 
 #[function_component(Hand)]
 pub fn hand(props: &HandProps) -> Html {
-    let cards: Html = props
+    let cards = props
         .cards
         .iter()
         .map(|c| {
             html! {
                 <Card ..c.clone() />
             }
-        })
-        .collect();
+        });
 
     html! {
-        <div class="hand">
-            { cards }
-        </div>
+        { for cards }
     }
 }
 
-- 
cgit v1.2.3