Implement hand diagram component

For showing compactly on the result screen

3 files changed, 43 insertions, 12 deletions

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>
             </>
         };