summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2024-05-27 16:09:41 +0200
committerTor Andersson <tor@ccxvii.net>2024-05-30 21:59:25 +0200
commit71fc03ac47fbc858737734e2777d06eed52aeacb (patch)
tree1b0dd1fd5003f301c550c2f60490e09c982c8815
parentaea4b029047b4304f5922a9ee67248e94c673cca (diff)
downloadfriedrich-71fc03ac47fbc858737734e2777d06eed52aeacb.tar.gz
log tooltips highlight on map
-rw-r--r--play.css15
-rw-r--r--play.js63
2 files changed, 73 insertions, 5 deletions
diff --git a/play.css b/play.css
index 1885867..9ec9ce5 100644
--- a/play.css
+++ b/play.css
@@ -63,14 +63,18 @@
#prompt {
font-family: "Suit Symbols", var(--font-widget);
+ font-variant-numeric: tabular-nums;
}
#log {
font-family: "Suit Symbols", var(--font-small);
+ font-variant-numeric: tabular-nums;
}
#log { background-color: #f3ebd4 }
+#log .city_tip:hover { cursor: pointer; text-decoration: underline; }
+
#log .h {
background-color: tan;
border-top: 1px solid black; border-bottom: 1px solid black;
@@ -89,6 +93,9 @@
#log .q { font-style: italic; margin: 8px 0; }
+#log .i { padding-left: 20px }
+#log .ii { padding-left: 32px }
+
header.your_turn.prussia { background-color: var(--color-light-prussia); }
header.your_turn.hanover { background-color: var(--color-light-hanover); }
header.your_turn.russia { background-color: var(--color-light-russia); }
@@ -279,6 +286,14 @@ TWOD.piece.cylinder {
border-radius: 50%;
}
+.space.country_austria.tip { border-color: gray; }
+.space.country_sweden.tip { border-color: forestgreen; }
+.space.country_poland.tip { border-color: indianred; }
+.space.country_prussia.tip { border-color: royalblue; }
+.space.country_hanover.tip { border-color: cornflowerblue; }
+.space.country_saxony.tip { border-color: chocolate; }
+.space.country_empire.tip { border-color: darkgoldenrod; }
+
.space.action {
border-color: white;
z-index: 2000;
diff --git a/play.js b/play.js
index 38b70d5..3d7e1bc 100644
--- a/play.js
+++ b/play.js
@@ -504,6 +504,14 @@ function on_init() {
y -= 18
}
+ if (set_has(data.country.Austria, a)) e.classList.add("country_austria")
+ if (set_has(data.country.Sweden, a)) e.classList.add("country_sweden")
+ if (set_has(data.country.Poland, a)) e.classList.add("country_poland")
+ if (set_has(data.country.Prussia, a)) e.classList.add("country_prussia")
+ if (set_has(data.country.Hanover, a)) e.classList.add("country_hanover")
+ if (set_has(data.country.Saxony, a)) e.classList.add("country_saxony")
+ if (set_has(data.country.Empire, a)) e.classList.add("country_empire")
+
register_action(e, "space", a)
e.onmouseenter = on_focus_city
@@ -526,6 +534,30 @@ on_init()
/* TOOLTIPS */
+function on_click_city_tip(loc) {
+ ui.cities[loc].scrollIntoView({ block: "center", inline: "center", behavior: "smooth" })
+}
+
+function on_focus_city_tip(s) {
+ ui.cities[s].classList.add("tip")
+}
+
+function on_blur_city_tip(s) {
+ ui.cities[s].classList.remove("tip")
+}
+
+function on_click_piece_tip(loc) {
+ ui.pieces[loc].scrollIntoView({ block: "center", inline: "center", behavior: "smooth" })
+}
+
+function on_focus_piece_tip(s) {
+ ui.pieces[s].classList.add("tip")
+}
+
+function on_blur_piece_tip(s) {
+ ui.pieces[s].classList.remove("tip")
+}
+
function on_focus_city(evt) {
}
@@ -806,6 +838,23 @@ function on_update() {
/* LOG */
+const piece_log_name = [
+ "Friedrich", "Winterfeldt", "Heinrich", "Schwerin", "Keith", "Seydlitz", "Dohna", "Lehwaldt",
+ "Ferdinand", "Cumberland",
+ "Saltikov", "Fermor", "Apraxin", "Tottleben",
+ "Ehrensvärd",
+ "Daun", "Browne", "Karl", "Laudon", "Lacy",
+ "Hildburghausen",
+ "Richelieu", "Soubise", "Chevert",
+ "Prussian supply train", "Prussian supply train",
+ "Hanoverian supply train",
+ "Russian supply train", "Russian supply train",
+ "Swedish supply train",
+ "Austrian supply train", "Austrian supply train",
+ "Imperial Army supply train",
+ "French supply train", "French supply train",
+]
+
const piece_name = [
"P1", "P2", "P3", "P4", "P5", "P6", "P7", "P8",
"H1", "H2",
@@ -819,16 +868,15 @@ const piece_name = [
function sub_piece(match, p1) {
let x = p1 | 0
- let n = piece_name[x]
- // TODO: tooltip to highlight piece
+ let n = piece_log_name[x]
+ return `<span class="piece_tip" onclick="on_click_piece_tip(${x})" onmouseenter="on_focus_piece_tip(${x})" onmouseleave="on_blur_piece_tip(${x})">${n}</span>`
return n
}
function sub_space(match, p1) {
let x = p1 | 0
let n = data.cities.name[x]
- // TODO: tooltip to highlight location
- return n
+ return `<span class="city_tip" onclick="on_click_city_tip(${x})" onmouseenter="on_focus_city_tip(${x})" onmouseleave="on_blur_city_tip(${x})">${n}</span>`
}
function sub_tc(match, p1) {
@@ -843,9 +891,14 @@ function sub_tc(match, p1) {
function on_log(text) {
let p = document.createElement("div")
+ if (text.match(/^>>/)) {
+ text = text.substring(2)
+ p.className = "ii"
+ }
+
if (text.match(/^>/)) {
text = text.substring(1)
- p.className = 'i'
+ p.className = "i"
}
text = text.replace(/&/g, "&amp;")