make card icons large so they are more easily clickable

diff --git a/site/modules/cribbage.js b/site/modules/cribbage.js
index 0b873195cda9f207205b5f5e8ada0a5c43ca8e93..f21ba6c985136b353e2c4efff0f0844955b6f0f6 100644 (file)
--- 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 8969fd9144b1da95028a4df57f9d16707d74d635..f324b7156693b41b91a4519d590ff613e805615a 100644 (file)
--- 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;