summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2024-05-15 00:35:49 +0200
committerTor Andersson <tor@ccxvii.net>2024-08-21 00:28:20 +0200
commit07282a5d7f355351337ea984662793c55ed5dfee (patch)
tree38fbf0ddb48fbe75b6a3e54738328d45486b5e1f
parent2c1158e165ba52d14ca6dabbb2b938c5d4ca867f (diff)
downloadwashingtons-war-07282a5d7f355351337ea984662793c55ed5dfee.tar.gz
card tooltips
-rw-r--r--play.css31
-rw-r--r--play.html2
-rw-r--r--play.js21
3 files changed, 53 insertions, 1 deletions
diff --git a/play.css b/play.css
index 925a777..64c66b0 100644
--- a/play.css
+++ b/play.css
@@ -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;
diff --git a/play.html b/play.html
index 4767218..2e8a385 100644
--- a/play.html
+++ b/play.html
@@ -17,6 +17,8 @@
</head>
<body>
+<div id="tooltip"></div>
+
<menu id="popup">
<li class="title">CARD
<li class="separator">
diff --git a/play.js b/play.js
index e7a684d..5b75f51 100644
--- a/play.js
+++ b/play.js
@@ -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, "&amp;")
text = text.replace(/</g, "&lt;")
text = text.replace(/>/g, "&gt;")
- 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"