diff options
Diffstat (limited to 'webapp/src/components/card.rs')
| -rw-r--r-- | webapp/src/components/card.rs | 25 |
1 files changed, 18 insertions, 7 deletions
diff --git a/webapp/src/components/card.rs b/webapp/src/components/card.rs index 82d4fcb..cf42923 100644 --- a/webapp/src/components/card.rs +++ b/webapp/src/components/card.rs @@ -1,4 +1,3 @@ -use crate::components::suit_css_class; use protocol::card; use yew::prelude::*; @@ -12,13 +11,25 @@ pub fn ccard(props: &CardProps) -> Html { Callback::from(move |_| onclick.emit(card)) }; + // SVG rendering looks better with the filled versions of the symbols. + let (color, symbol) = match suit { + card::Suit::Club => ("#000", "♣"), + card::Suit::Diamond => ("#d00", "♦"), + card::Suit::Heart => ("#d00", "♥"), + card::Suit::Spade => ("#000", "♠"), + }; + html! { - <div class="card" {onclick}> - <div class={ suit_css_class(suit) }> - { rank } - </div> - </div> - } + <> + <div class="svg-container card"> + <svg class="svg-element" {onclick} viewBox={"0 0 50 100"}> + <rect x={"1"} y={"1"} rx={"3"} width={"50"} height={"96"} fill={"white"} stroke={"black"} stroke-width={"2"}/> + <text x={"22"} y={"35"} fill={color} text-anchor={"middle"} font-weight={"bold"} font-size={"40"}>{format!("{}", rank)}</text> + <text x={"25"} y={"75"} fill={color} text-anchor={"middle"} font-weight={"bold"} font-size={"40"}>{symbol}</text> + </svg> + </div> + </> + } } #[derive(PartialEq, Properties, Clone)] |