From 9ca35fc98d77cd7c23dfbe25de8a67194b270b44 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 19 Jun 2021 18:02:53 +0200 Subject: tripoli: Show active card as tooltip instead of zooming. --- play.html | 17 ++++++++++++----- ui.js | 15 +++++++++++++++ 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/play.html b/play.html index 638358e..ceea69b 100644 --- a/play.html +++ b/play.html @@ -65,15 +65,21 @@ border-radius: 5px; } -.card_info .card:hover { - transform: scale(2) translateY(-30px); -} - .role_info { padding: 5px 20px; white-space: pre-wrap; } +#tooltip.card { + position: fixed; + z-index: 100; + right: 240px; + top: 60px; +} +#tooltip.show { + display: block; +} + /* MAP */ .mapwrap.fit { @@ -263,6 +269,7 @@ svg circle, .piece {
+
Chat
@@ -313,7 +320,7 @@ svg circle, .piece {
United States ($USER)
0 cards in hand
-
+
diff --git a/ui.js b/ui.js index c3f48bc..1a3de4f 100644 --- a/ui.js +++ b/ui.js @@ -83,6 +83,19 @@ function on_next() { if (game.actions) { send_action('next', null); } } function on_click_space(evt) { send_action('space', evt.target.space); } function on_click_piece(evt) { send_action('piece', evt.target.piece); } +function on_focus_active_card(evt) { + if (typeof game.card == 'number') { + if (game.card < 27) + document.getElementById("tooltip").className = "card show us_card_" + game.card; + else + document.getElementById("tooltip").className = "card show tr_card_" + (game.card-27); + } +} + +function on_blur_active_card(evt) { + document.getElementById("tooltip").classList = "card"; +} + function build_map() { let map = document.getElementById("svgmap"); for (let i = 0; i < SPACES.length; ++i) { @@ -121,6 +134,8 @@ function build_map() { e.addEventListener("click", on_click_card); e.card = i; } + document.getElementById("active_card").addEventListener("mouseenter", on_focus_active_card); + document.getElementById("active_card").addEventListener("mouseleave", on_blur_active_card); } const CARD_ACTIONS = [ -- cgit v1.2.3