Display current and previous trick

2 files changed, 34 insertions, 11 deletions

diff --git a/webapp/src/components/table.rs b/webapp/src/components/table.rs
index bf66897..6ccb9d1 100644
--- a/webapp/src/components/table.rs
+++ b/webapp/src/components/table.rs
@@ -181,7 +181,15 @@ pub fn playing_view(
     html! {
         <>
             <div class="center">
-              <TrickInPlay  in_progress={playing.current_trick.clone()}/>
+              <div class="playing-center-layout">
+                <div class="current-trick">
+                  <TrickInPlay  trick={playing.current_trick.trick.clone()}/>
+                </div>
+                <div class="previous-trick">
+                  <p>{"Last trick"}</p>
+                  <TrickInPlay trick={playing.previous_trick.clone()}/>
+                </div>
+              </div>
             </div>
             <div class="hand north">
               { dummy }
diff --git a/webapp/src/components/trick_in_play.rs b/webapp/src/components/trick_in_play.rs
index 5400b49..509b06c 100644
--- a/webapp/src/components/trick_in_play.rs
+++ b/webapp/src/components/trick_in_play.rs
@@ -1,24 +1,39 @@
-use protocol::bridge_engine::TurnInPlay;
 use crate::components::Card;
+use protocol::bridge_engine::{Player, Trick};
 use yew::prelude::*;
 
 #[function_component(TrickInPlay)]
 pub fn trick_in_play(props: &TrickInPlayProps) -> Html {
-    let cards = props.in_progress.cards_played().iter().map(|card| {
-        html! {
-            <Card card={ card.clone() } />
-        }
-    });
+    let leader = props.trick.leader;
+    let cards = props
+        .trick
+        .cards_played
+        .iter()
+        .enumerate()
+        .map(|(i, card)| {
+            // TODO: Support other player positions.
+            let class = match leader.many_next(i) {
+                Player::West => classes!("left"),
+                Player::North => classes!("top"),
+                Player::East => classes!("right"),
+                Player::South => classes!("bottom"),
+            };
+            html! {
+                <div class={class}>
+                  <Card card={ card.clone() } />
+                </div>
+            }
+        });
     html! {
         <>
-            <p>{ format!("Leader: {:?}", props.in_progress.leader()) }</p>
-            <p>{ format!("It is {:?} to play", props.in_progress.current_player()) }</p>
-            { for cards }
+            <div class="trick-layout">
+              { for cards }
+            </div>
         </>
     }
 }
 
 #[derive(PartialEq, Properties, Clone)]
 pub struct TrickInPlayProps {
-    pub in_progress: TurnInPlay,
+    pub trick: Trick,
 }