Display a full deck of shuffled cards

4 files changed, 51 insertions, 27 deletions

diff --git a/webapp/Cargo.toml b/webapp/Cargo.toml
index c179533..78a5863 100644
--- a/webapp/Cargo.toml
+++ b/webapp/Cargo.toml
@@ -10,4 +10,5 @@ wasm-logger = "0.2"
 log = "0.4"
 strum = "0.24"
 strum_macros = "0.24"
-rand = "0.8"
+rand =  "0.8.4"
+getrandom = { version = "0.2.7", features = ["js"] }
diff --git a/webapp/src/card.rs b/webapp/src/card.rs
index 071f2d1..4fda0a7 100644
--- a/webapp/src/card.rs
+++ b/webapp/src/card.rs
@@ -73,7 +73,7 @@ impl fmt::Debug for Rank {
 }
 
 #[derive(PartialEq, Eq, Clone, Copy)]
-pub struct Card(Suit, Rank);
+pub struct Card(pub Suit, pub Rank);
 
 impl fmt::Display for Card {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::result::Result<(), std::fmt::Error> {
diff --git a/webapp/src/default.css b/webapp/src/default.css
index f9cf32c..d2b3a10 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -18,13 +18,13 @@ body {
 }
 
 .card {
-    width: 80px;
-    height: 160px;
+    min-width: 30px;
+    min-height: 100px;
     border: 1px solid #000;
     transition: 0.1s;
     font-family: Helvetica, sans-serif;
     font-size: 30px;
-    padding: 10px;
+    padding: 3px;
     background-color: #fcfcf0;
     color: #000;
 }
diff --git a/webapp/src/main.rs b/webapp/src/main.rs
index ed84935..a99ea94 100644
--- a/webapp/src/main.rs
+++ b/webapp/src/main.rs
@@ -12,35 +12,41 @@ fn main() {
 
 #[function_component(App)]
 pub fn app() -> Html {
-    let hand = use_state(|| HandProps {
-        cards: vec![
-            CardProps {
-                suit: Suit::Club,
-                rank: Rank::Two,
-            },
-            CardProps {
-                suit: Suit::Club,
-                rank: Rank::Ace,
-            },
-        ],
-    });
+    let mut rng = rand::thread_rng();
+    let (n, w, s, e) = card::shuffle_deck(&mut rng);
+
+    let north = use_state(|| HandProps::from_iter(n.into_iter()));
+    let west = use_state(|| HandProps::from_iter(w.into_iter()));
+    let south = use_state(|| HandProps::from_iter(s.into_iter()));
+    let east = use_state(|| HandProps::from_iter(e.into_iter()));
+
+    let shuffle = {
+        let north = north.clone();
+        let west = west.clone();
+        let south = south.clone();
+        let east = east.clone();
 
-    let onclick = {
-        let hand = hand.clone();
         Callback::from(move |_| {
-            let mut cards = hand.cards.clone();
-            cards.push(CardProps {
-                suit: Suit::Heart,
-                rank: Rank::Three,
-            });
-            hand.set(HandProps { cards })
+            let mut rng = rand::thread_rng();
+            let (n, w, s, e) = card::shuffle_deck(&mut rng);
+            north.set(n.into_iter().collect());
+            west.set(w.into_iter().collect());
+            south.set(s.into_iter().collect());
+            east.set(e.into_iter().collect());
         })
     };
 
     html! {
         <>
-            <Hand ..(*hand).clone() />
-            <button {onclick}>{ "Add card" }</button>
+            <p>{ "North" }</p>
+            <Hand ..(*north).clone() />
+            <p>{ "West" }</p>
+            <Hand ..(*west).clone() />
+            <p>{ "South" }</p>
+            <Hand ..(*south).clone() />
+            <p>{ "East" }</p>
+            <Hand ..(*east).clone() />
+            <button onclick={shuffle}>{ "Shuffle" }</button>
         </>
     }
 }
@@ -79,6 +85,17 @@ pub struct HandProps {
     cards: Vec<CardProps>,
 }
 
+impl<C: Into<CardProps>> FromIterator<C> for HandProps {
+    fn from_iter<Cards>(cards: Cards) -> Self
+    where
+        Cards: std::iter::IntoIterator<Item = C>,
+    {
+        HandProps {
+            cards: cards.into_iter().map(Into::into).collect(),
+        }
+    }
+}
+
 #[function_component(Card)]
 pub fn wcard(props: &CardProps) -> Html {
     html! {
@@ -95,3 +112,9 @@ pub struct CardProps {
     suit: Suit,
     rank: Rank,
 }
+
+impl From<card::Card> for CardProps {
+    fn from(card::Card(suit, rank): card::Card) -> Self {
+        CardProps { suit, rank }
+    }
+}