Use embedded SVG for cards

4 files changed, 60 insertions, 88 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 }
diff --git a/webapp/src/default.css b/webapp/src/default.css
index 397d94a..aedfe14 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -27,9 +27,9 @@ body {
                          "north north north sidebar"
                          "west center east sidebar"
                          "south south south sidebar";
-    grid-template-rows: 5vw 10vw minmax(200px, 1fr) 10vw;
-    grid-template-columns: 10vw 1fr 10vw 20vw;
-    width: 100%;
+    grid-template-rows: 5vh auto auto auto;
+    grid-template-columns: 10vw minmax(0, 1fr) 10vw 20vw;
+    width: 100vw;
     height: 100vh;
 }
 
@@ -43,42 +43,36 @@ body {
     padding-right: 0.5em;
 }
 
-.playing-center-layout {
-    display: grid;
-    grid-template-areas: "current-trick";
-    grid-template-rows: 1fr;
-    grid-template-columns: 3fr 1fr;
-}
-
-.current-trick {
-    grid-area: current-trick;
-}
-
 .trick-layout {
     display: grid;
     grid-template-areas: ". top ."
-                         "left . right"
+                         "left top right"
+                         "left bottom right"
                          ". bottom .";
-    grid-template-rows: repeat(3, 1fr);
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: 1fr auto 1fr;
 }
 
 .trick-layout .top {
     grid-area: top;
+    place-self: center end;
 }
 .trick-layout .left {
     grid-area: left;
+    place-self: center end;
 }
 .trick-layout .right {
     grid-area: right;
+    place-self: center start;
 }
 .trick-layout .bottom {
     grid-area: bottom;
+    place-self: center start;
 }
 
 .main-page {
     margin: 0 auto;
-    max-width: 30em;
+    max-width: 50em;
     font-size: 150%;
     min-height: 80vh;
 }
@@ -97,7 +91,7 @@ body {
 }
 
 .footer {
-    max-width: 30em;
+    max-width: 50em;
     font-size: 150%;
     margin: 0 auto;
 }
@@ -144,67 +138,29 @@ button:hover, a:hover {
 }
 .center {
     grid-area: center;
-    display: grid;
-    justify-content: center;
-    align-content: center;
-}
-
-.hand {
     display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.hand .card {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
-}
-
-.card:hover {
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
+    flex-direction: column;
+    height: 75vh;
+    place-content: center center;
 }
 
-.card {
-    min-width: 30px;
-    min-height: 20px;
-    border-radius: 5px;
-    border: 2px solid #444;
-    transition: 0.1s;
-    font-family: Arial, sans-serif;
-    font-size: 2vw;
-    padding: 4px;
-    background-color: #fcfcf0;
-    color: #000;
-    line-height: 85%;
+.center .card {
+    height: 15vh;
 }
 
-.card div {
-    text-align: center;
+.sidebar .card {
+    height: 5vh;
 }
 
-.card .suit-spade {
-    color: #000;
-}
-.card .suit-heart {
-    color: #d00;
-}
-.card .suit-diamond {
-    color: #d00;
-}
-.card .suit-club {
-    color: #000;
+.hand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 10vh;
 }
 
-.card .suit-spade:after {
-    content: "♠"
-}
-.card .suit-heart:after {
-    content: "♥"
-}
-.card .suit-diamond:after {
-    content: "♦"
-}
-.card .suit-club:after {
-    content: "♣"
+.hand .card:hover {
+    box-shadow: 0.1em -0.1em 0.3em rgba(0,0,0,0.5);
 }
 
 .bidding-table {
@@ -314,3 +270,14 @@ button:hover, a:hover {
 .bidding-box .suit-notrump:after {
     content: "NT"
 }
+
+.svg-container {
+    min-width: 0;
+    min-height: 0;
+    height: inherit;
+}
+.svg-element {
+    width: 100%;
+    height: inherit;
+    overflow: hidden;
+}
diff --git a/webapp/src/main.rs b/webapp/src/main.rs
index de4ec42..c907183 100644
--- a/webapp/src/main.rs
+++ b/webapp/src/main.rs
@@ -66,9 +66,9 @@ fn home() -> Html {
         </ul>
         </div>
         <div class="footer">
-            <p>{"Copyright © 2022 Kjetil Ørbekk. "}
+          <p>{"Copyright © 2022 Kjetil Ørbekk. "}
             <a href={"https://git.orbekk.com/bridge.git/"}>{"Source code"}</a>
-            </p>
+          </p>
         </div>
         </>
     }