diff options
| author | Tor Andersson <tor@ccxvii.net> | 2021-06-19 18:02:53 +0200 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2023-02-18 12:12:42 +0100 |
| commit | 9ca35fc98d77cd7c23dfbe25de8a67194b270b44 (patch) | |
| tree | 48af5f8e82ef428a9b2f1211086cbe057a4e8aa0 | |
| parent | bee5fc255cac42f6b35dca4c6fd40b0f47bf9401 (diff) | |
| download | shores-of-tripoli-9ca35fc98d77cd7c23dfbe25de8a67194b270b44.tar.gz | |
tripoli: Show active card as tooltip instead of zooming.
| -rw-r--r-- | play.html | 17 | ||||
| -rw-r--r-- | ui.js | 15 |
2 files changed, 27 insertions, 5 deletions
@@ -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 { <body> <div class="status" id="status"></div> +<div id="tooltip" class="card"></div> <div class="chat_window"> <div class="chat_header">Chat</div> @@ -313,7 +320,7 @@ svg circle, .piece { <div class="role_name">United States (<span class="role_user">$USER</span>)</div> <div class="role_info" id="us_info">0 cards in hand</div> </div> - <div class="role_info card_info"><div id="active_card" class="card show tr_card_back"></div></div> + <div class="role_info card_info"><div id="active_card" class="card show blank"></div></div> </div> <div class="grid_log"> @@ -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 = [ |