From 4b955e2222a58947693e689701601caeda2dbe5a Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Fri, 5 Jan 2024 21:57:54 +0100 Subject: Polish. --- play.html | 111 ++++++++++++++++++++++++++++++-------------------------------- play.js | 95 ++++++++++++++++++++++++++++------------------------- rules.js | 25 +++++++------- 3 files changed, 117 insertions(+), 114 deletions(-) diff --git a/play.html b/play.html index 4db62b2..d40bfd4 100644 --- a/play.html +++ b/play.html @@ -20,17 +20,18 @@ --pink: hsl(359, 81%, 78%); --blue: hsl(211, 78%, 52%); --dkblue: hsl(240, 69%, 57%); - --dkblue2: #04089f; - --fg-red: hsl(360, 77%, 31%); - --fg-pink: hsl(359, 81%, 58%); - --fg-blue: hsl(211, 78%, 32%); - --fg-dkblue: hsl(240, 69%, 37%); + --bg-red: hsl(360, 80%, 80%); + --bg-blue: hsl(211, 80%, 85%); + --fg-red: hsl(360, 100%, 35%); + --fg-dkblue: hsl(211, 100%, 25%); + --fg-pink: hsl(360, 75%, 60%); + --fg-blue: hsl(211, 75%, 50%); - --bg-red: hsl(360, 100%, 80%); - --bg-pink: hsl(360, 100%, 90%); - --bg-blue: hsl(210, 100%, 85%); - --bg-dkblue: hsl(220, 100%, 80%); + --xfg-red: hsl(360, 77%, 31%); + --xfg-pink: hsl(359, 81%, 58%); + --xfg-blue: hsl(211, 78%, 32%); + --xfg-dkblue: hsl(240, 69%, 37%); --hi-red: hsl(360, 77%, 61%); --hi-pink: hsl(359, 81%, 83%); @@ -54,6 +55,30 @@ .role.blue { background-color: #8bf } .role.red { background-color: #f88 } +#tooltip { + pointer-events: none; + position: fixed; + z-index: 600; + right: 240px; + top: 60px; + width: 242px; + height: 338px; +} + +#tooltip:empty { + display: none; +} + +@media (max-width: 800px) { + #tooltip { + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + } +} + /* LOG */ #log .h1 { @@ -80,18 +105,31 @@ padding: 2px 8px; } -#log .p1, #log .p2 { +#log .h3 { text-align: right; background-color: wheat; margin: 8px 0; } +#log .h3.red { + background-color: var(--bg-red); +} + +#log .h3.blue { + background-color: var(--bg-blue); +} + #log div { padding-left: 20px; text-indent: -12px; } #log div.i1 { padding-left: 32px; text-indent: -12px; } #log div.i2 { padding-left: 44px; text-indent: -12px; } -#log img { +#log .img { padding: 0; + text-indent: 0; + min-height: 0; +} + +#log img { max-width: 100%; } @@ -106,56 +144,12 @@ padding-left: 8px; } -/* -#log .n { padding: 0 3px } -#log .blue, #log .dkblue { background-color: lightskyblue; } -#log .red, #log .pink { background-color: pink; } -*/ - -/* -#log .n.dkblue::before { content: "\2660 "; color: var(--dkblue2); } -#log .n.blue::before { content: "\2663 "; color: var(--blue); } -#log .n.red::before { content: "\2665 "; color: var(--red); } -#log .n.pink::before { content: "\2666 "; color: var(--pink); } -*/ - -/* -#log .n.dkblue::before { content: "\25fe"; color: var(--dkblue2); } -#log .n.blue::before { content: "\25fe"; color: var(--blue); } -#log .n.red::before { content: "\25fe"; color: var(--red); } -#log .n.pink::before { content: "\25fe"; color: var(--pink); } -*/ - -/* -#log .n.dkblue::after { content: "\25b6"; color: var(--dkblue2); } -#log .n.blue::after { content: "\25b6"; color: var(--blue); } -#log .n.red::after { content: "\25b6"; color: var(--red); } -#log .n.pink::after { content: "\25b6"; color: var(--pink); } -#log .n.dkblue::before { content: "\25c0"; color: var(--dkblue2); } -#log .n.blue::before { content: "\25c0"; color: var(--blue); } -#log .n.red::before { content: "\25c0"; color: var(--red); } -#log .n.pink::before { content: "\25c0"; color: var(--pink); } -#log .n.dkblue { text-decoration: 1px underline var(--dkblue2); } -#log .n.blue { text-decoration: 1px underline var(--blue); } -#log .n.red { text-decoration: 1px underline var(--red); } -#log .n.pink { text-decoration: 1px underline var(--pink); } -*/ - - -#log .n { padding: 0 3px } -#log .n.dkblue { background-color: var(--bg-dkblue); } -#log .n.blue { background-color: var(--bg-blue); } -#log .n.red { background-color: var(--bg-red); } -#log .n.pink { background-color: var(--bg-pink); } -/* -*/ - -/* +X#log .n { font-style: italic; } +#log .n:hover { text-decoration: underline; } #log .n.dkblue { color: var(--fg-dkblue); } #log .n.blue { color: var(--fg-blue); } #log .n.red { color: var(--fg-red); } #log .n.pink { color: var(--fg-pink); } -*/ .mini { display: inline-block; @@ -166,7 +160,7 @@ background-size: 600% 100%; background-repeat: no-repeat; background-image: url(images/die_black_pips.svg); - background-color: #ccc; + background-color: #ddd; border: 1px solid black; } @@ -476,6 +470,7 @@ body.shift .card .number { display: block; } +
diff --git a/play.js b/play.js index 9204cef..5e7f081 100644 --- a/play.js +++ b/play.js @@ -16,8 +16,10 @@ let ui = { morale: [ document.getElementById("morale1"), document.getElementById("morale2") ], pool: [ document.getElementById("pool1"), document.getElementById("pool2") ], reserve: [ document.getElementById("reserve1"), document.getElementById("reserve2") ], + tooltip: document.getElementById("tooltip"), cards: {}, + cards_tip: {}, slots: {}, slot_sticks: {}, slot_shift: {}, @@ -163,14 +165,15 @@ function nbsp_target(target) { .replaceAll("\xa0OR\xa0", " OR ") } -function create_formation_card(id) { +function create_formation_card(id, tip=false) { let card = data.cards[id] let e = create_div("card formation " + wing_name[card.wing]) if (card.squeeze) e.classList.add("squeeze") - register_action(e, "card", id) + if (!tip) + register_action(e, "card", id) if (card.infantry || card.cavalry) append_div(e, "name with_symbol " + wing_name[card.wing], card.name) @@ -217,7 +220,8 @@ function create_formation_card(id) { et = append_div(ee, "action_type reaction", a.type) else et = append_div(ee, "action_type", a.type) - register_action(et, "a" + ix, id, "n" + ix) + if (!tip) + register_action(et, "a" + ix, id, "n" + ix) append_div(ee, "action_requirement", a.requirement) if (a.target) append_div(ee, "action_target", nbsp_target(a.target)) @@ -264,7 +268,8 @@ function create_formation_card(id) { ee = append_div(e, "retire", `RETIRE, RESERVE (${reserve})`) else ee = append_div(e, "retire", "RETIRE") - register_action(ee, "retire", id) + if (!tip) + register_action(ee, "retire", id) } else if (card.pursuit) { append_div(e, "reserve", "PURSUIT") } else if (card.reserve) { @@ -471,37 +476,27 @@ for (let i = 0; i < 12; ++i) { } const ICONS = { - D0: '', - D1: '', - D2: '', - D3: '', - D4: '', - D5: '', - D6: '', - R1: '', - R2: '', - R3: '', - R4: '', - R5: '', - R6: '', - P1: '', - P2: '', - P3: '', - P4: '', - P5: '', - P6: '', - B1: '', - B2: '', - B3: '', - B4: '', - B5: '', - B6: '', - K1: '', - K2: '', - K3: '', - K4: '', - K5: '', - K6: '', + D0: '', + D1: '', + D2: '', + D3: '', + D4: '', + D5: '', + D6: '', +} + +function on_click_tip(id) { + scroll_into_view_if_needed(ui.cards[id]) +} + +function on_focus_tip(id) { + if (!ui.cards_tip[id]) + ui.cards_tip[id] = create_formation_card(id, true) + ui.tooltip.replaceChildren(ui.cards_tip[id]) +} + +function on_blur_tip() { + ui.tooltip.replaceChildren() } function sub_icon(match) { @@ -512,7 +507,7 @@ function sub_card(match) { let c = parseInt(match.substring(1)) let wing = wing_name[data.cards[c].wing] let name = data.cards[c].name - return `${name}` + return `${name}` } function on_log(text) { @@ -520,10 +515,7 @@ function on_log(text) { if (text.match(/^\.h1 /)) { text = text.substring(4) p.className = "h1" - let w = null - for (let s of data.scenarios) - if (s.name === text) - w = s.wikipedia + let w = data.scenarios[view.scenario].wikipedia if (w) { p.innerHTML = `${text}` return p @@ -534,12 +526,14 @@ function on_log(text) { p.className = "h2" } else if (text.match(/^\.p1/)) { + let w = data.cards[data.scenarios[view.scenario].players[0].cards[0]].wing text = data.scenarios[view.scenario].players[0].name - p.className = "p1" + p.className = "h3 " + side_color[w] } else if (text.match(/^\.p2/)) { + let w = data.cards[data.scenarios[view.scenario].players[1].cards[0]].wing text = data.scenarios[view.scenario].players[1].name - p.className = "p2" + p.className = "h3 " + side_color[w] } else if (text.match(/^\.rule /)) { text = text.substring(6) @@ -557,9 +551,20 @@ function on_log(text) { text = text.substring(1) p.className = "i1" } - else if (text.match(/^.img /)) { - p = document.createElement("img") - p.src = "paintings/" + text.substring(5) + ".jpg" + else if (text.match(/^.img/)) { + p.className = "img" + let img = document.createElement("img") + img.src = "paintings/" + data.scenarios[view.scenario].name.toLowerCase().replaceAll(" ", "_") + ".jpg" + img.onerror = function (evt) { this.style.display="none" } + let w = data.scenarios[view.scenario].wikipedia + if (w) { + let a = document.createElement("a") + a.href = w + p.appendChild(a) + a.appendChild(img) + } else { + p.appendChild(img) + } return p } diff --git a/rules.js b/rules.js index 9fbe89e..be6aefc 100644 --- a/rules.js +++ b/rules.js @@ -493,7 +493,7 @@ exports.setup = function (seed, scenario, options) { log(".h1 " + info.name) log(".h2 " + info.date) - log(".img " + info.name.toLowerCase().replaceAll(" ", "_")) + log(".img") log("") if (info.players[0].tactical > 0 || info.players[1].tactical > 0) { @@ -1634,7 +1634,6 @@ function end_roll_phase() { game.selected = -1 if (game.placed.length > 0) { - log("Placed") for (let i = 0; i < game.placed.length; i += 2) { let c = game.placed[i] let s = [] @@ -1642,7 +1641,7 @@ function end_roll_phase() { if (game.summary & (1 << d)) if (get_dice_location(d) === c) s.push("D" + get_dice_value(d)) - log(">C" + c + "\n" + s.join(" ")) + log("C" + c + "\n" + s.join(" ")) } } @@ -3039,14 +3038,18 @@ states.attack = { function resume_attack() { pay_for_action(game.selected) - if (game.hits > 0 && game.self > 0) { - log(">" + game.hits + " hits. " + game.self + " self.") - } - else if (game.hits > 0) { - log(">" + game.hits + " hits.") - } - else if (game.self > 0) { - log(">" + game.self + " self.") + if (game.hits === 1) { + if (game.self > 0) + log(">1 hit. " + game.self + " self.") + else + log(">1 hit.") + } else { + if (game.hits > 0 && game.self > 0) + log(">" + game.hits + " hits. " + game.self + " self.") + else if (game.hits > 0) + log(">" + game.hits + " hits.") + else if (game.self > 0) + log(">" + game.self + " self.") } if (game.hits > 0) -- cgit v1.2.3