From a0bcafdf179911391202b4051c247da9410232d2 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sat, 1 Jun 2024 11:09:43 +0200
Subject: test zooming in fate cards by clicking on them

---
 play.css | 37 +++++++++++++++++++++++++++++--------
 play.js  |  5 +++++
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/play.css b/play.css
index b69cd62..c08cf30 100644
--- a/play.css
+++ b/play.css
@@ -418,14 +418,6 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 	border-color: white;
 }
 
-/*
-.card.diamonds.action { box-shadow: 0 0 0 2px var(--color-diamonds); border-color: var(--color-diamonds); }
-.card.hearts.action { box-shadow: 0 0 0 2px var(--color-hearts); border-color: var(--color-hearts); }
-.card.clubs.action { box-shadow: 0 0 0 2px var(--color-clubs); border-color: var(--color-clubs); }
-.card.spades.action { box-shadow: 0 0 0 2px var(--color-spades); border-color: var(--color-spades); }
-.card.reserve.action { box-shadow: 0 0 0 2px var(--color-reserve); border-color: var(--color-reserve); }
-*/
-
 @media (hover: hover) {
 	.card.action:hover {
 		margin-top: -10px;
@@ -433,6 +425,15 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 	}
 }
 
+.card.zoom {
+	width: 330px;
+	height: 514px;
+	border-radius: 16px;
+}
+
+.card.fate { cursor: zoom-in }
+.card.fate.zoom { cursor: zoom-out }
+
 .draw-break { margin-left: 145px; }
 .card.tc { margin-right: -145px; }
 .panel_body { padding-right: calc(18px + 145px); }
@@ -514,6 +515,26 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 .card.fate.c18 { background-image: url(cards/Friedrich.Fatecard.18.075.jpg) }
 .card.fate.reverse { background-image: url(cards/Friedrich.Fatecard.reverse.075.jpg) }
 
+.card.fate.zoom.c1 { background-image: url(cards/Friedrich.Fatecard.01.150.jpg) }
+.card.fate.zoom.c2 { background-image: url(cards/Friedrich.Fatecard.02.150.jpg) }
+.card.fate.zoom.c3 { background-image: url(cards/Friedrich.Fatecard.03.150.jpg) }
+.card.fate.zoom.c4 { background-image: url(cards/Friedrich.Fatecard.04.150.jpg) }
+.card.fate.zoom.c5 { background-image: url(cards/Friedrich.Fatecard.05.150.jpg) }
+.card.fate.zoom.c6 { background-image: url(cards/Friedrich.Fatecard.06.150.jpg) }
+.card.fate.zoom.c7 { background-image: url(cards/Friedrich.Fatecard.10.150.jpg) }
+.card.fate.zoom.c8 { background-image: url(cards/Friedrich.Fatecard.11.150.jpg) }
+.card.fate.zoom.c9 { background-image: url(cards/Friedrich.Fatecard.12.150.jpg) }
+.card.fate.zoom.c10 { background-image: url(cards/Friedrich.Fatecard.13.150.jpg) }
+.card.fate.zoom.c11 { background-image: url(cards/Friedrich.Fatecard.14.150.jpg) }
+.card.fate.zoom.c12 { background-image: url(cards/Friedrich.Fatecard.15.150.jpg) }
+.card.fate.zoom.c13 { background-image: url(cards/Friedrich.Fatecard.07.150.jpg) }
+.card.fate.zoom.c14 { background-image: url(cards/Friedrich.Fatecard.08.150.jpg) }
+.card.fate.zoom.c15 { background-image: url(cards/Friedrich.Fatecard.09.150.jpg) }
+.card.fate.zoom.c16 { background-image: url(cards/Friedrich.Fatecard.16.150.jpg) }
+.card.fate.zoom.c17 { background-image: url(cards/Friedrich.Fatecard.17.150.jpg) }
+.card.fate.zoom.c18 { background-image: url(cards/Friedrich.Fatecard.18.150.jpg) }
+.card.fate.zoom.reverse { background-image: url(cards/Friedrich.Fatecard.reverse.150.jpg) }
+
 @media (min-resolution: 97dpi) {
 	#map { background-image: url(Fried.Gameboard.150.jpg);
 
diff --git a/play.js b/play.js
index 7896724..6948f1d 100644
--- a/play.js
+++ b/play.js
@@ -494,6 +494,7 @@ function make_fate_card(fc) {
 		e.className = "card fate reverse"
 	else
 		e.className = "card fate c" + fc
+	e.onclick = on_click_fate_card
 	return e
 }
 
@@ -701,6 +702,10 @@ function on_blur_piece() {
 	ui.status.textContent = ""
 }
 
+function on_click_fate_card(evt) {
+	evt.target.classList.toggle("zoom")
+}
+
 /* UPDATE UI */
 
 function layout_general_offset(g, s) {
-- 
cgit v1.2.3