Use embedded SVG for cards

2 files changed, 20 insertions, 15 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)]
diff --git a/webapp/src/components/table.rs b/webapp/src/components/table.rs
index c4a7398..d5bca4f 100644
--- a/webapp/src/components/table.rs
+++ b/webapp/src/components/table.rs
@@ -238,14 +238,8 @@ pub fn playing_view(
               }
             </div>
             <div class="center">
-              <div class="playing-center-layout">
-                <div class="current-trick">
-                  <TrickInPlay  trick={playing.current_trick.trick.clone()}/>
-                </div>
-              </div>
-              <div>
-                { format!("It is {:?} to play", playing.current_player()) }
-              </div>
+              <TrickInPlay  trick={playing.current_trick.trick.clone()}/>
+              <p>{ format!("It is {:?} to play", playing.current_player()) }</p>
            </div>
             <div class="hand north">
               { dummy }