From: Geoffrey Allott <geoffrey@allott.email>
Date: Fri, 16 Jun 2023 17:19:35 +0000 (+0100)
Subject: make card icons large so they are more easily clickable
X-Git-Url: https://git.pointlesshacks.com/?a=commitdiff_plain;h=cf7c14e5113d516752fdc17dadcf461ab5d19eff;p=pokerwave.git

make card icons large so they are more easily clickable
---

diff --git a/site/modules/cribbage.js b/site/modules/cribbage.js
index 0b87319..f21ba6c 100644
--- a/site/modules/cribbage.js
+++ b/site/modules/cribbage.js
@@ -102,14 +102,19 @@ export class Cribbage extends GameWithChat {
         for (const [username, cards] of this.hands) {
             const seat = this.seats.get(username);
             const angle = this.player_angle(seat);
-            const offset = cards.length * 10;
+            const sep = username === this.username ? 60 : 20;
+            const offset = (cards.length - 3/2) * sep / 2;
             let x = 227.5 + offset - 180 * Math.sin(angle);
-            const y = 210 + 120 * Math.cos(angle);
+            const y = username === this.username ? 450 : 210 + 120 * Math.cos(angle);
+            const width = username === this.username ? 90 : 45;
+            const height = username === this.username ? 140 : 70;
             for (const {card, image} of cards) {
                 image.classList.toggle("my-card", username === this.username);
                 image.setAttribute("x", x);
                 image.setAttribute("y", y);
-                x -= 20;
+                image.setAttribute("width", width);
+                image.setAttribute("height", height);
+                x -= sep;
             }
         }
         for (const [username, cards] of this.played) {
diff --git a/site/modules/whist.js b/site/modules/whist.js
index 8969fd9..f324b71 100644
--- a/site/modules/whist.js
+++ b/site/modules/whist.js
@@ -87,14 +87,19 @@ export class KnockOutWhist extends GameWithChat {
         for (const [username, cards] of this.hands) {
             const seat = this.seats.get(username);
             const angle = this.player_angle(seat);
-            const offset = cards.length * 10;
+            const sep = username === this.username ? 60 : 20;
+            const offset = (cards.length - 3/2) * sep / 2;
             let x = 227.5 + offset - 180 * Math.sin(angle);
-            const y = 210 + 120 * Math.cos(angle);
+            const y = username === this.username ? 450 : 210 + 120 * Math.cos(angle);
+            const width = username === this.username ? 90 : 45;
+            const height = username === this.username ? 140 : 70;
             for (const {card, image} of cards) {
                 image.classList.toggle("my-card", username === this.username);
                 image.setAttribute("x", x);
                 image.setAttribute("y", y);
-                x -= 20;
+                image.setAttribute("width", width);
+                image.setAttribute("height", height);
+                x -= sep;
             }
         }
         let x = 257.5;