1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
use protocol::card;
use yew::prelude::*;
#[function_component(Card)]
pub fn ccard(props: &CardProps) -> Html {
let card::Card(suit, rank) = props.card;
let onclick = {
let card = props.card;
let onclick = props.onclick.clone();
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="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)]
pub struct CardProps {
pub card: card::Card,
#[prop_or_default]
pub onclick: Callback<card::Card>,
}
|
