diff options
| author | Tor Andersson <tor@ccxvii.net> | 2024-05-15 00:35:49 +0200 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2024-08-21 00:28:20 +0200 |
| commit | 07282a5d7f355351337ea984662793c55ed5dfee (patch) | |
| tree | 38fbf0ddb48fbe75b6a3e54738328d45486b5e1f | |
| parent | 2c1158e165ba52d14ca6dabbb2b938c5d4ca867f (diff) | |
| download | washingtons-war-07282a5d7f355351337ea984662793c55ed5dfee.tar.gz | |
card tooltips
| -rw-r--r-- | play.css | 31 | ||||
| -rw-r--r-- | play.html | 2 | ||||
| -rw-r--r-- | play.js | 21 |
3 files changed, 53 insertions, 1 deletions
@@ -59,6 +59,29 @@ aside { gap: 15px; } +#tooltip { + display: none; + pointer-events: none; + position: fixed; + z-index: 600; + right: 240px; + top: 60px; +} + +#tooltip.show { + display: block; +} + +@media (max-width: 800px) { + #tooltip { + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + } +} + /* CARD ACTION POPUP MENU */ #popup { max-width: 250px; } @@ -258,6 +281,14 @@ aside { display: block; } +#tooltip.card { + background-position: center; + background-size: 377px 528px; + width: 372px; + height: 524px; + border-radius: 20px; +} + .shift .hand .card:hover, .shift .hand .card.selected { transform: scale(1.5) translate(0,-30px); z-index: 10; @@ -17,6 +17,8 @@ </head> <body> +<div id="tooltip"></div> + <menu id="popup"> <li class="title">CARD <li class="separator"> @@ -17,13 +17,32 @@ let ui = { cu: [], } +function on_focus_card_tip(card_number) { + document.getElementById("tooltip").className = "card show card_" + card_number +} + +function on_blur_card_tip() { + document.getElementById("tooltip").classList = "card" +} + +function on_focus_last_card() { + if (typeof view.last_card === 'number') { + document.getElementById("tooltip").className = "card show card_" + view.last_card + } +} + +function on_blur_last_card() { + document.getElementById("tooltip").classList = "card" +} + function on_log(text) { let p = document.createElement("div") text = text.replace(/&/g, "&") text = text.replace(/</g, "<") text = text.replace(/>/g, ">") - text = text.replace(/\[(\d+)([^\]]*)\]/, '<span class="card_tip" data-card="$1">$1$2</span>') + text = text.replace(/#(\d+)/g, + '<span class="tip" onmouseenter="on_focus_card_tip($1)" onmouseleave="on_blur_card_tip()">$&</span>') if (text.match(/^\.h1 /)) { p.className = "h1" |