1 files changed, 36 insertions, 0 deletions
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>
+    }
+}