3cb-data

commit ee2b2137733c2a28ea0273a2b2b82243a7d8880c
parent 7a4a6824dca8bf1bea7f1be28d63922b647174fd
Author: alex wennerberg <alex@alexwennerberg.com>
Date:   Sat, 10 Feb 2024 18:32:47 -0500

add hover

Diffstat:
M
templates/index.html
 | 
16
+++++++++++++---

1 file changed, 13 insertions(+), 3 deletions(-)
diff --git a/templates/index.html b/templates/index.html
@@ -6,6 +6,9 @@ td, th { border: 1px solid #ddd; padding: 8px; }
 tr:nth-child(even){background-color: #f2f2f2;}
 tr:hover {background-color: #ddd;}
 #th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #04AA6D; color: white; }
+.hover_img a { position:relative; }
+.hover_img a span { position:absolute; display:none; z-index:99; }
+.hover_img a:hover span { display:block; }
 </style>
 <title>3 card blind data analysis</title>
 <script src="sorttable.js"></script>
@@ -22,9 +25,16 @@ tr:hover {background-color: #ddd;}
 	<tr>
 		<td>{{deck.round}}</td>
 		<td>{{deck.player}}</td>
-		<td><a href="{{deck.card1|card_link}}">{{deck.card1}}</a></td>
-		<td><a href="{{deck.card2|card_link}}">{{deck.card2}}</a></td>
-		<td><a href="{{deck.card3|card_link}}">{{deck.card3}}</a></td>
+		{% set cards = [deck.card1, deck.card2, deck.card3] %}
+		{% for card in cards %}
+		<td>
+			<div class="hover_img">
+			<a href="https://scryfall.com/search?q={{card}}">{{card}}
+			<span>
+				<img src="https://api.scryfall.com/cards/named?exact={{card}}&format=image&version=small" /></span></a>
+			</div>
+		</td>
+		{% endfor %}
 		<td>{{deck.prelim_group}}</td>
 		<td>{{deck.prelim_score}}</td>
 		<td>{{deck.final_score or ""}}</td>