Start working on game layout

4 files changed, 68 insertions, 28 deletions

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 }
     }
 }
 
diff --git a/webapp/src/default.css b/webapp/src/default.css
index bfc6872..2bfc862 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -4,10 +4,48 @@ body {
     background-color: #eeb;
 }
 
+*{
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.app {
+    display: grid;
+    grid-template-areas: ".    north  ."
+                         "west center east"
+                         ".    south  .";
+    grid-template-rows: 80px 1fr 80px;
+    grid-template-columns: 80px 1fr 80px;
+    width: 100%;
+    height: 100%;
+}
+
+.west {
+    grid-area: west;
+    transform: rotate(90deg);
+}
+.north {
+    grid-area: north;
+    transform: rotate(180deg);
+}
+.east {
+    grid-area: east;
+    transform: rotate(270deg);
+}
+.south {
+    grid-area: south;
+}
+.center {
+    grid-area: center;
+    display: grid;
+    justify-content: center;
+}
+
 .hand {
-    display: flex;
-    flex-direction: row;
-    /* transform: rotate(90deg); */
+    display: grid;
+    justify-content: center;
+    grid-auto-flow: column;
 }
 
 .hand .card {
@@ -33,8 +71,6 @@ body {
 }
 
 .card div {
-    display: flex;
-    flex-direction: column;
     text-align: center;
 }
 
diff --git a/webapp/src/main.rs b/webapp/src/main.rs
index b6d75ee..cf5eb8e 100644
--- a/webapp/src/main.rs
+++ b/webapp/src/main.rs
@@ -22,7 +22,9 @@ fn main() {
 pub fn app() -> Html {
     html! {
         <>
-            <Game />
+            <div class="app">
+                <Game />
+            </div>
         </>
     }
 }