From 89489b0cf0a6cf81dd29426fdf0eeb5aee9231de Mon Sep 17 00:00:00 2001
From: Kjetil Orbekk <kj@orbekk.com>
Date: Fri, 23 Dec 2022 12:32:34 -0500
Subject: Display current and previous trick

---
 protocol/src/bridge_engine.rs          |  2 +-
 webapp/src/components/table.rs         | 10 ++++++++-
 webapp/src/components/trick_in_play.rs | 35 +++++++++++++++++++++++---------
 webapp/src/default.css                 | 37 ++++++++++++++++++++++++++++++++++
 4 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/protocol/src/bridge_engine.rs b/protocol/src/bridge_engine.rs
index 4cdb286..b069e18 100644
--- a/protocol/src/bridge_engine.rs
+++ b/protocol/src/bridge_engine.rs
@@ -101,7 +101,7 @@ impl Trick {
 
 #[derive(PartialEq, Eq, Debug, Clone, Serialize, Deserialize)]
 pub struct TurnInPlay {
-    trick: Trick,
+    pub trick: Trick,
 }
 
 #[derive(PartialEq, Eq, Debug)]
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,
 }
diff --git a/webapp/src/default.css b/webapp/src/default.css
index 5a84e12..0345118 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -31,6 +31,43 @@ body {
     height: 100vh;
 }
 
+.playing-center-layout {
+    display: grid;
+    grid-template-areas: "current-trick previous-trick";
+    grid-template-rows: 1fr;
+    grid-template-columns: 3fr 1fr;
+}
+
+.current-trick {
+    grid-area: current-trick;
+}
+
+.previous-trick {
+    grid-area: previous-trick;
+}
+
+.trick-layout {
+    display: grid;
+    grid-template-areas: ". top ."
+                         "left . right"
+                         ". bottom .";
+    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+}
+
+.trick-layout .top {
+    grid-area: top;
+}
+.trick-layout .left {
+    grid-area: left;
+}
+.trick-layout .right {
+    grid-area: right;
+}
+.trick-layout .bottom {
+    grid-area: bottom;
+}
+
 button {
   background: none!important;
   border: none;
-- 
cgit v1.2.3