From f3c064aa5198ec3374d098ed3737012c0a5136b8 Mon Sep 17 00:00:00 2001
From: Geoffrey Allott <geoffrey@allott.email>
Date: Sun, 28 Mar 2021 22:16:56 +0100
Subject: [PATCH] add graphics for holdem and whist

---
 site/img/chatroom.svg   |  7 +++++--
 site/img/holdem.svg     | 26 +++++++++++++++++++-------
 site/img/whist.svg      | 10 +++-------
 site/style/mainmenu.css |  2 ++
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/site/img/chatroom.svg b/site/img/chatroom.svg
index 60bc366..3691308 100644
--- a/site/img/chatroom.svg
+++ b/site/img/chatroom.svg
@@ -1,3 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25">
-    <path d="M 2 2 A 1 1 0 0 0 2 5 H 3 A 1 1 0 0 0 3 2 Z M 2 11 A 1 1 0 0 0 2 14 H 3 A 1 1 0 0 0 3 11 Z M 2 20 A 1 1 0 0 0 2 23 H 3 A 1 1 0 0 0 3 20 Z M 8 2 A 1 1 0 0 0 8 5 H 23 A 1 1 0 0 0 23 2 Z M 8 11 A 1 1 0 0 0 8 14 H 23 A 1 1 0 0 0 23 11 Z M 8 20 A 1 1 0 0 0 8 23 H 23 A 1 1 0 0 0 23 20 Z" fill="black" />
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250">
+    <path d="M 20 20 A 10 10 90 0 0 20 50 H 30 A 10 10 90 0 0 30 20 Z" fill="green" stroke="black" stroke-width="4" />
+    <path d="M 20 110 A 10 10 90 0 0 20 140 H 30 A 10 10 90 0 0 30 110 Z" fill="grey" stroke="black" stroke-width="4" />
+    <path d="M 20 200 A 10 10 90 0 0 20 230 H 30 A 10 10 90 0 0 30 200 Z" fill="red" stroke="black" stroke-width="4" />
+    <path d="M 80 20 A 10 10 90 0 0 80 50 H 230 A 10 10 90 0 0 230 20 Z M 80 110 A 10 10 90 0 0 80 140 H 230 A 10 10 90 0 0 230 110 Z M 80 200 A 10 10 90 0 0 80 230 H 230 A 10 10 90 0 0 230 200 Z" fill="white" stroke="black" stroke-width="4" />
 </svg>
diff --git a/site/img/holdem.svg b/site/img/holdem.svg
index e5ab9af..43ab09a 100644
--- a/site/img/holdem.svg
+++ b/site/img/holdem.svg
@@ -1,8 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">A</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♠</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
+<svg xmlns="http://www.w3.org/2000/svg" width="210" height="300">
+    <defs>
+        <pattern id="red-stripe" x="0" y="0" width="60" height="40" patternUnits="userSpaceOnUse">
+            <rect x="0" y="0" width="40" height="40" fill="white" />
+            <rect x="40" y="0" width="20" height="40" fill="red" />
+        </pattern>
+    </defs>
+    <path d="M 16 120 A 24 8 0 0 0 208 120 L 208 104 A 24 8 0 0 1 16 104 Z" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 16 136 A 24 8 0 0 0 208 136 L 208 120 A 24 8 0 0 1 16 120 Z" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 16 152 A 24 8 0 0 0 208 152 L 208 136 A 24 8 0 0 1 16 136 Z" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 16 168 A 24 8 0 0 0 208 168 L 208 152 A 24 8 0 0 1 16 152 Z" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 16 184 A 24 8 0 0 0 208 184 L 208 168 A 24 8 0 0 1 16 168 Z" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 16 200 A 24 8 0 0 0 208 200 L 208 184 A 24 8 0 0 1 16 184 Z" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 16 216 A 24 8 0 0 0 208 216 L 208 200 A 24 8 0 0 1 16 200 Z" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 16 232 A 24 8 0 0 0 208 232 L 208 216 A 24 8 0 0 1 16 216 Z" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 16 248 A 24 8 0 0 0 208 248 L 208 232 A 24 8 0 0 1 16 232 Z" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 16 264 A 24 8 0 0 0 208 264 L 208 248 A 24 8 0 0 1 16 248 Z" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 16 104 A 3 1 0 0 0 208 104 A 3 1 0 0 0 16 104" fill="url(#red-stripe)" stroke="black" stroke-width="4" />
+    <path d="M 40 104 A 28 8 0 0 0 184 104 A 28 8 0 0 0 40 104" fill="red" stroke="black" stroke-width="4" />
 </svg>
diff --git a/site/img/whist.svg b/site/img/whist.svg
index 8f8178d..a024e2d 100644
--- a/site/img/whist.svg
+++ b/site/img/whist.svg
@@ -1,8 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="225" height="350">
-    <rect x="5" y="5" width="215" height="340" fill="#fffff8" stroke="black" stroke-width="5" rx="25" />
-    <g id="text">
-        <text x="165" y="60" style="font: bold 50px serif;">A</text>
-        <text x="150" y="120" style="font: bold 75px serif;">♣</text>
-    </g>
-    <use href="#text" transform="rotate(180 112.5 175)" />
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180">
+    <path d="M 20 20 C 30 70 20 110 30 160 L 60 150 C 60 130 50 110 50 90 C 70 100 90 120 110 140 L 130 130 C 110 110 90 90 70 60 C 80 40 90 30 100 20 L 80 10 C 70 20 60 30 50 50 C 50 40 40 20 40 10 Z" fill="#202020" stroke="black" stroke-width="4" />
+    <path d="M 130 20 C 100 10 80 40 80 80 C 80 120 80 140 110 150 C 140 160 160 130 160 90 C 160 50 160 30 130 20 Z M 120 50 C 150 50 150 120 120 120 C 90 120 90 50 120 50" fill="red" stroke="black" stroke-width="4" />
 </svg>
diff --git a/site/style/mainmenu.css b/site/style/mainmenu.css
index 68a5a71..c444299 100644
--- a/site/style/mainmenu.css
+++ b/site/style/mainmenu.css
@@ -21,6 +21,7 @@
 }
 
 .game-format-icon > img {
+    object-fit: contain;
     width: 200px;
     height: 160px;
     cursor-events: none;
@@ -30,5 +31,6 @@
     text-align: center;
     font-family: sans;
     font-size: 20px;
+    margin-top: 0px;
     cursor-events: none;
 }
-- 
2.34.1