From 23da94dd6a9fcb4e45f3fdd965ecd2f6663ae1f4 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Wed, 5 Jun 2024 01:00:26 +0200 Subject: improve move path highlighting --- play.css | 18 ++++++++++++++--- play.js | 68 ++++++++++++++++++++++++++++++++++++++-------------------------- rules.js | 3 +-- 3 files changed, 56 insertions(+), 33 deletions(-) diff --git a/play.css b/play.css index d5128be..81bf912 100644 --- a/play.css +++ b/play.css @@ -120,8 +120,8 @@ body { min-height: 6px; } -.city_tip .piece_tip, .path_tip { cursor: pointer; } -.city_tip:hover, .piece_tip:hover, .path_tip:hover { text-decoration: underline; } +.city_tip .piece_tip, .move_tip { cursor: pointer; } +.city_tip:hover, .piece_tip:hover, .move_tip:hover { text-decoration: underline; } #log .h { background-color: tan; @@ -149,6 +149,11 @@ body { #log .i { padding-left: 20px } #log .ii { padding-left: 32px } +#log .move_tip { + padding-left: 20px; + text-indent: -12px; +} + #log span.suit { font-size: 11px; } span.value { padding: 0 1px } @@ -431,11 +436,18 @@ span.suit.reserve { font-weight: bold; font-family: "Source Serif SmText"; } /* ROADS */ +.space.move { + background-color: #fff8; +} + +.space.move_end { + background-color: #0f08; +} + svg .road { stroke: white; stroke-width: 6; stroke-linecap: round; - stroke-dashpattern: 6 6; } svg .main_road { diff --git a/play.js b/play.js index 22982d6..f860ac5 100644 --- a/play.js +++ b/play.js @@ -372,6 +372,7 @@ const the_austrian_theater_text = `

Prussia receives 5 TC per round. Every sub const svgNS = "http://www.w3.org/2000/svg" +var _show_path_pcs = [] var _show_path = [] function make_road(a, b, type) { @@ -404,24 +405,29 @@ function make_road(a, b, type) { ui.roads[b][a] = e } -function on_focus_path_tip(list) { - on_focus_city_tip(list[list.length-1]) +function on_focus_path_tip(ps, ss) { + _show_path_pcs = ps + for (let p of _show_path_pcs) + on_focus_piece_tip(p) hide_move_path() - _show_path = list - show_move_path() - ui.status.textContent = list.map(s => data.cities.name[s]).join(" - ") + _show_path = ss + show_move_path(view.pos[ps[0]] !== ss[ss.length-1]) + ui.status.textContent = ss.map(s => data.cities.name[s]).join(" - ") } function on_blur_path_tip() { - if (_show_path.length > 0) { - on_blur_city_tip(_show_path[_show_path.length-1]) - hide_move_path() - } + for (let p of _show_path_pcs) + on_blur_piece_tip(p) + hide_move_path() ui.status.textContent = "" } -function show_move_path() { - if (_show_path) { +function show_move_path(tip_end) { + if (_show_path && _show_path.length > 0) { + for (let i = 0; i < _show_path.length; ++i) + ui.cities[_show_path[i]].classList.add("move") + if (tip_end) + ui.cities[_show_path[_show_path.length-1]].classList.add("tip") for (let i = 1; i < _show_path.length; ++i) { let x = _show_path[i-1] let y = _show_path[i] @@ -431,7 +437,10 @@ function show_move_path() { } function hide_move_path() { - if (_show_path) { + if (_show_path && _show_path.length > 0) { + for (let i = 0; i < _show_path.length; ++i) + ui.cities[_show_path[i]].classList.remove("move") + ui.cities[_show_path[_show_path.length-1]].classList.remove("tip") for (let i = 1; i < _show_path.length; ++i) { let x = _show_path[i-1] let y = _show_path[i] @@ -1239,7 +1248,7 @@ function on_update() { /* LOG */ -const piece_log_name = [ +const piece_name = [ "Friedrich", "Winterfeldt", "Heinrich", "Schwerin", "Keith", "Seydlitz", "Dohna", "Lehwaldt", "Ferdinand", "Cumberland", "Saltikov", "Fermor", "Apraxin", "Tottleben", @@ -1247,13 +1256,13 @@ const piece_log_name = [ "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", + "Prussian ST", "Prussian ST", + "Hanoverian ST", + "Russian ST", "Russian ST", + "Swedish ST", + "Austrian ST", "Austrian ST", + "Imperial Army ST", + "French ST", "French ST", ] const piece_power = [ @@ -1361,7 +1370,7 @@ const piece_tooltip_name = [ function sub_piece(_match, p1) { let x = p1 | 0 - let n = piece_log_name[x] + let n = piece_name[x] let p = power_class[piece_power[x]] return `${n}` } @@ -1372,10 +1381,13 @@ function sub_space(_match, p1) { return `${n}` } -function sub_path(list) { - let x = list[list.length-1] - let name = data.cities.name[x] - return `to ${name}` +function sub_path(pieces_and_spaces) { + let ps = pieces_and_spaces[0].split(",") + let ss = pieces_and_spaces[1].split(",") + let x = ss[ss.length-1] + let ps_name = ps.map(p => piece_name[p]).join(" and ") + let ss_name = data.cities.name[x] + return `${ps_name} to ${ss_name}.` } const suit_icon = [ @@ -1421,9 +1433,9 @@ function on_log(text) { text = text.replace(/P(\d+)/g, sub_piece) text = text.replace(/C(\d+)/g, sub_tc) - if (text.startsWith("%")) { - p.className = "i" - text = sub_path(text.substring(1).split(",")) + if (text.startsWith("@")) { + p.className = "move_tip" + text = sub_path(text.substring(1).split(";")) } else if (text.match(/^\$(\d+)/)) { let fx = parseInt(text.substring(1)) diff --git a/rules.js b/rules.js index 299b353..472670d 100644 --- a/rules.js +++ b/rules.js @@ -373,8 +373,7 @@ function log_selected_move_path() { if (is_important_move(game.move_path[i]) || i === game.move_path.length-1) log(">to S" + game.move_path[i]) } else { - log_selected() - log("%" + game.move_path.join(",")) + log("@" + game.selected.join(",") + ";" + game.move_path.join(",")) } } -- cgit v1.2.3