Implement hand diagram component

For showing compactly on the result screen

5 files changed, 64 insertions, 12 deletions

diff --git a/webapp/src/components.rs b/webapp/src/components.rs
index d4b03ee..833ecdc 100644
--- a/webapp/src/components.rs
+++ b/webapp/src/components.rs
@@ -1,5 +1,7 @@
+use yew::prelude::*;
 use protocol::card::Suit;
 
+mod hand_diagram;
 mod app_context_provider;
 mod bidding;
 mod bidding_box;
@@ -23,6 +25,14 @@ pub use self::show_bid::*;
 pub use self::table::*;
 pub use self::trick_in_play::*;
 pub use self::tricks_played::*;
+pub use self::hand_diagram::*;
+
+#[derive(Clone, Default, PartialEq, Properties)]
+pub struct HandProps {
+    #[prop_or_default]
+    pub cards: Vec<protocol::card::Card>,
+    pub on_card_clicked: Callback<protocol::card::Card>,
+}
 
 pub fn suit_css_class(suit: Suit) -> &'static str {
     match suit {
diff --git a/webapp/src/components/hand.rs b/webapp/src/components/hand.rs
index abf9cb8..d70adfc 100644
--- a/webapp/src/components/hand.rs
+++ b/webapp/src/components/hand.rs
@@ -2,6 +2,8 @@ use crate::components::card::Card;
 use protocol::{card::{self, sort_cards, RankOrder}, bridge_engine::SUIT_DISPLAY_ORDER};
 use yew::prelude::*;
 
+use crate::components::HandProps;
+
 #[function_component(Hand)]
 pub fn hand(props: &HandProps) -> Html {
     let mut cards = props.cards.clone();
@@ -16,10 +18,3 @@ pub fn hand(props: &HandProps) -> Html {
         { for cards }
     }
 }
-
-#[derive(Clone, Default, PartialEq, Properties)]
-pub struct HandProps {
-    #[prop_or_default]
-    pub cards: Vec<card::Card>,
-    pub on_card_clicked: Callback<card::Card>,
-}
diff --git a/webapp/src/components/hand_diagram.rs b/webapp/src/components/hand_diagram.rs
new file mode 100644
index 0000000..d201851
--- /dev/null
+++ b/webapp/src/components/hand_diagram.rs
@@ -0,0 +1,36 @@
+use protocol::card::{Suit, sort_cards, RankOrder};
+use yew::prelude::*;
+
+use crate::components::HandProps;
+
+pub const SUIT_ORDER: [Suit; 4] =
+    [Suit::Spade, Suit::Heart, Suit::Diamond, Suit::Club];
+
+#[function_component(HandDiagram)]
+pub fn hand_diagram(props: &HandProps) -> Html {
+    let mut cards = props.cards.clone();
+    sort_cards(&SUIT_ORDER, RankOrder::Descending, &mut cards);
+    let content: Html = SUIT_ORDER
+        .iter()
+        .map(|suit| {
+            let cards: Html =
+                cards
+                .iter()
+                .filter(|c| c.suit() == *suit)
+                .map(|c| html! {<li>{format!("{}", c.rank())}</li>})
+                .collect();
+
+            html! {
+                <ul>
+                  <li>{format!("{suit}")}</li>
+                  {cards}
+                </ul>
+            }
+        })
+        .collect();
+    html! {
+        <div class="hand-diagram">
+          { content }
+        </div>
+    }
+}
diff --git a/webapp/src/components/table.rs b/webapp/src/components/table.rs
index a751bc1..c8bdf6b 100644
--- a/webapp/src/components/table.rs
+++ b/webapp/src/components/table.rs
@@ -1,5 +1,5 @@
 use crate::components::AppContext;
-use crate::components::{BiddingBox, BiddingTable, Hand, TrickInPlay};
+use crate::components::{BiddingBox, BiddingTable, Hand, TrickInPlay, HandDiagram};
 use crate::{services, use_app_context};
 use futures::FutureExt;
 use log::info;
@@ -94,16 +94,16 @@ impl OnlineTableInner {
                 <div class="center">
                </div>
                 <div class="hand north">
-                  <Hand cards={result.deal().north.clone()} on_card_clicked={Callback::from(|_| ())} />
+                  <HandDiagram cards={result.deal().north.clone()} on_card_clicked={Callback::from(|_| ())} />
                 </div>
                 <div class="hand east">
-                  <Hand cards={result.deal().east.clone()} on_card_clicked={Callback::from(|_| ())} />
+                  <HandDiagram cards={result.deal().east.clone()} on_card_clicked={Callback::from(|_| ())} />
                 </div>
                 <div class="hand south">
-                  <Hand cards={result.deal().south.clone()} on_card_clicked={Callback::from(|_| ())} />
+                  <HandDiagram cards={result.deal().south.clone()} on_card_clicked={Callback::from(|_| ())} />
                 </div>
                 <div class="hand west">
-                  <Hand cards={result.deal().west.clone()} on_card_clicked={Callback::from(|_| ())} />
+                  <HandDiagram cards={result.deal().west.clone()} on_card_clicked={Callback::from(|_| ())} />
                 </div>
             </>
         };
diff --git a/webapp/src/default.css b/webapp/src/default.css
index aedfe14..ce23ea2 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -152,6 +152,17 @@ button:hover, a:hover {
     height: 5vh;
 }
 
+.hand-diagram {
+    display: flex;
+    flex-direction: column;
+    font-size: 150%;
+}
+
+.hand-diagram li {
+    display: inline;
+    padding-right: 0.1em;
+}
+
 .hand {
     display: flex;
     justify-content: center;