Display a full deck of shuffled cards

5 files changed, 60 insertions, 33 deletions

diff --git a/Cargo.lock b/Cargo.lock
index 0d60727..d8609d6 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -43,8 +43,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4eb1a864a501629691edf6c15a593b7a51eebaa1e8468e9ddc623de7c9b58ec6"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "wasi",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -306,9 +308,9 @@ checksum = "97477e48b4cf8603ad5f7aaf897467cf42ab4218a38ef76fb14c2d6773a6d6a8"
 
 [[package]]
 name = "ryu"
-version = "1.0.0"
+version = "1.0.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c92464b447c0ee8c4fb3824ecc8383b81717b9f1e74ba2e72540aef7b9f82997"
+checksum = "4501abdff3ae82a1c1b477a17252eb69cee9e66eb915c1abaa4f44d873df9f09"
 
 [[package]]
 name = "scoped-tls-hkt"
@@ -388,18 +390,18 @@ dependencies = [
 
 [[package]]
 name = "thiserror"
-version = "1.0.33"
+version = "1.0.34"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3d0a539a918745651435ac7db7a18761589a94cd7e94cd56999f828bf73c8a57"
+checksum = "8c1b05ca9d106ba7d2e31a9dab4a64e7be2cce415321966ea3132c49a656e252"
 dependencies = [
  "thiserror-impl",
 ]
 
 [[package]]
 name = "thiserror-impl"
-version = "1.0.33"
+version = "1.0.34"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c251e90f708e16c49a16f4917dc2131e75222b72edfa9cb7f7c58ae56aae0c09"
+checksum = "e8f2591983642de85c921015f3f070c665a197ed69e417af436115e3a1407487"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -516,6 +518,7 @@ name = "webapp"
 version = "0.1.0"
 dependencies = [
  "console_error_panic_hook",
+ "getrandom",
  "log",
  "rand",
  "strum",
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 }
+    }
+}