Add playing card representation

1 files changed, 68 insertions, 7 deletions

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";}
+