Add playing view showing declarer and dummy hands

1 files changed, 31 insertions, 3 deletions

diff --git a/webapp/src/components/table.rs b/webapp/src/components/table.rs
index 78a5f91..ab95e10 100644
--- a/webapp/src/components/table.rs
+++ b/webapp/src/components/table.rs
@@ -88,9 +88,8 @@ pub fn online_table(props: &OnlineTableProps) -> Html {
     let center = match &*table_state {
         Some(GameStatePlayerView::Bidding(bidding)) =>
             bidding_view(bidding, on_bid),
-        Some(GameStatePlayerView::Playing(playing)) => html! {
-            {"Need to implement this"}
-        },
+        Some(GameStatePlayerView::Playing(playing)) =>
+            playing_view(playing),
         None => html! { <p>{"Loading table"}</p> },
     };
 
@@ -100,7 +99,9 @@ pub fn online_table(props: &OnlineTableProps) -> Html {
         <button onclick={leave_table}>
             { "Leave table" }
         </button>
+        <div class="game-layout">
         { center }
+        </div>
     </>
     }
 }
@@ -129,3 +130,30 @@ pub fn bidding_view(
         </>
     }
 }
+
+pub fn playing_view(
+    playing: &PlayStatePlayerView)
+    -> Html {
+    let on_card_clicked = Callback::from(|card| {});
+    // Dummy is assumed to be north for now.
+    let dummy = match &playing.dummy {
+        Some(hand) => html! {
+            <Hand cards={hand.clone()} on_card_clicked={on_card_clicked.clone()}/>
+        },
+        None => html! {<p>{"Dummy is not visible yet"}</p>},
+    };
+    html! {
+        <>
+            <div class="center">
+            <p>{format!("It is {:?} to play", playing.current_player())}</p>
+            <p>{format!("Current trick: {:?}", playing.current_trick)}</p>
+            </div>
+            <div class="hand north">
+              { dummy }
+            </div>
+            <div class="hand south">
+              <Hand cards={playing.hand.clone()} on_card_clicked={on_card_clicked.clone()} />
+            </div>
+        </>
+    }
+}