Add playing card representation

4 files changed, 236 insertions, 14 deletions

diff --git a/Cargo.lock b/Cargo.lock
index 526e714..4fbc561 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -401,6 +401,17 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6598dd0bd3c7d51095ff6531a5b23e02acdc81804e30d8f07afb77b7215a140a"
 
 [[package]]
+name = "wasm-logger"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "074649a66bb306c8f2068c9016395fa65d8e08d2affcbf95acf3c24c3ab19718"
+dependencies = [
+ "log",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
 name = "web-sys"
 version = "0.3.59"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -414,6 +425,9 @@ dependencies = [
 name = "webapp"
 version = "0.1.0"
 dependencies = [
+ "console_error_panic_hook",
+ "log",
+ "wasm-logger",
  "yew",
 ]
 
diff --git a/webapp/Cargo.toml b/webapp/Cargo.toml
index 7478aea..9abb154 100644
--- a/webapp/Cargo.toml
+++ b/webapp/Cargo.toml
@@ -5,3 +5,6 @@ edition = "2021"
 
 [dependencies]
 yew = "0.19"
+console_error_panic_hook = "0.1"
+wasm-logger = "0.2"
+log = "0.4"
diff --git a/webapp/src/default.css b/webapp/src/default.css
index 11d1193..f9cf32c 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -1,17 +1,78 @@
 @charset "utf-8";
 
-.card {
+body {
+    background-color: #ceb;
+}
+
+.hand {
+    display: flex;
+    flex-direction: row;
+}
+
+.hand .card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-    width: 5em;
-    height: 5em;
+}
+
+.card:hover {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
+}
+
+.card {
+    width: 80px;
+    height: 160px;
     border: 1px solid #000;
     transition: 0.1s;
+    font-family: Helvetica, sans-serif;
+    font-size: 30px;
+    padding: 10px;
+    background-color: #fcfcf0;
+    color: #000;
 }
 
-.card:after {
-    content: "8♦";
+.card div {
+    width: 30px;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
 }
 
-.card:hover {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
+.card .suit-spade {
+    color: #000;
+}
+.card .suit-heart {
+    color: #d00;
+}
+.card .suit-diamond {
+    color: #d00;
+}
+.card .suit-club {
+    color: #000;
+}
+
+.card .suit-spade:after {
+    content: "♠"
+}
+.card .suit-heart:after {
+    content: "♥"
+}
+.card .suit-diamond:after {
+    content: "♦"
 }
+.card .suit-club:after {
+    content: "♣"
+}
+
+.card .rank-2:after {content: "2";}
+.card .rank-3:after {content: "3";}
+.card .rank-4:after {content: "4";}
+.card .rank-5:after {content: "5";}
+.card .rank-6:after {content: "6";}
+.card .rank-7:after {content: "7";}
+.card .rank-8:after {content: "8";}
+.card .rank-9:after {content: "9";}
+.card .rank-10:after {content: "10";}
+.card .rank-J:after {content: "J";}
+.card .rank-Q:after {content: "Q";}
+.card .rank-K:after {content: "K";}
+.card .rank-A:after {content: "A";}
+
diff --git a/webapp/src/main.rs b/webapp/src/main.rs
index baeeff9..2d01713 100644
--- a/webapp/src/main.rs
+++ b/webapp/src/main.rs
@@ -1,22 +1,166 @@
+#[allow(unused_imports)]
+use log::{debug, error, info, warn};
+use std::fmt;
 use yew::prelude::*;
 
+fn main() {
+    std::panic::set_hook(Box::new(console_error_panic_hook::hook));
+    wasm_logger::init(wasm_logger::Config::default());
+    yew::start_app::<App>();
+}
+
 #[function_component(App)]
-fn app() -> Html {
+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 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 })
+        })
+    };
+
     html! {
         <>
-            <h1>{ "Hello, World" }</h1>
-            <Card/>
+            <Hand ..(*hand).clone() />
+            <button {onclick}>{ "Add card" }</button>
         </>
     }
 }
 
+#[function_component(Hand)]
+pub fn hand(props: &HandProps) -> Html {
+    let cards: Html = props
+        .cards
+        .iter()
+        .map(|c| {
+            html! {
+                <Card ..c.clone() />
+            }
+        })
+        .collect();
+
+    html! {
+        <div class="hand">
+            { cards }
+        </div>
+    }
+}
+
+#[derive(Clone, Default, PartialEq, Properties)]
+pub struct HandProps {
+    #[prop_or_default]
+    cards: Vec<CardProps>,
+}
+
 #[function_component(Card)]
-fn card() -> Html {
+pub fn card(props: &CardProps) -> Html {
     html! {
-        <div class="card" draggable="true" />
+        <div class="card">
+            <div class={ props.suit.css_class() }>
+                { props.rank }
+            </div>
+        </div>
     }
 }
 
-fn main() {
-    yew::start_app::<App>();
+#[derive(PartialEq, Properties, Clone)]
+pub struct CardProps {
+    suit: Suit,
+    rank: Rank,
+}
+
+#[derive(PartialOrd, Ord, PartialEq, Eq, Clone, Copy)]
+pub enum Suit {
+    Club,
+    Diamond,
+    Heart,
+    Spade,
+}
+
+#[derive(PartialOrd, Ord, PartialEq, Eq, Clone, Copy)]
+pub enum Rank {
+    Two = 2,
+    Three,
+    Four,
+    Five,
+    Six,
+    Seven,
+    Eight,
+    Nine,
+    Ten,
+    Jack,
+    Queen,
+    King,
+    Ace,
+}
+
+impl Suit {
+    pub fn css_class(&self) -> &'static str {
+        match self {
+            Suit::Club => "suit-club",
+            Suit::Diamond => "suit-diamond",
+            Suit::Heart => "suit-heart",
+            Suit::Spade => "suit-spade",
+        }
+    }
+}
+
+impl fmt::Display for Suit {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::result::Result<(), std::fmt::Error> {
+        f.write_str(match self {
+            Suit::Club => "♣",
+            Suit::Diamond => "♢",
+            Suit::Heart => "♡",
+            Suit::Spade => "♠",
+        })
+    }
+}
+
+impl fmt::Debug for Suit {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::result::Result<(), std::fmt::Error> {
+        write!(f, "{}", self)
+    }
+}
+
+impl fmt::Display for Rank {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::result::Result<(), std::fmt::Error> {
+        f.write_str(match self {
+            Rank::Ace => "A",
+            Rank::King => "K",
+            Rank::Queen => "Q",
+            Rank::Jack => "J",
+            Rank::Ten => "10",
+            Rank::Nine => "9",
+            Rank::Eight => "8",
+            Rank::Seven => "7",
+            Rank::Six => "6",
+            Rank::Five => "5",
+            Rank::Four => "4",
+            Rank::Three => "3",
+            Rank::Two => "2",
+        })
+    }
+}
+
+impl fmt::Debug for Rank {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::result::Result<(), std::fmt::Error> {
+        write!(f, "{}", self)
+    }
 }