Polish.

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; }
 
 </main>
 
+<div id="tooltip"></div>
 <footer id="status"></footer>
 
 </body>
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: '<span class="mini black d0"></span>',
-	D1: '<span class="mini black d1"></span>',
-	D2: '<span class="mini black d2"></span>',
-	D3: '<span class="mini black d3"></span>',
-	D4: '<span class="mini black d4"></span>',
-	D5: '<span class="mini black d5"></span>',
-	D6: '<span class="mini black d6"></span>',
-	R1: '<span class="mini red d1"></span>',
-	R2: '<span class="mini red d2"></span>',
-	R3: '<span class="mini red d3"></span>',
-	R4: '<span class="mini red d4"></span>',
-	R5: '<span class="mini red d5"></span>',
-	R6: '<span class="mini red d6"></span>',
-	P1: '<span class="mini pink d1"></span>',
-	P2: '<span class="mini pink d2"></span>',
-	P3: '<span class="mini pink d3"></span>',
-	P4: '<span class="mini pink d4"></span>',
-	P5: '<span class="mini pink d5"></span>',
-	P6: '<span class="mini pink d6"></span>',
-	B1: '<span class="mini blue d1"></span>',
-	B2: '<span class="mini blue d2"></span>',
-	B3: '<span class="mini blue d3"></span>',
-	B4: '<span class="mini blue d4"></span>',
-	B5: '<span class="mini blue d5"></span>',
-	B6: '<span class="mini blue d6"></span>',
-	K1: '<span class="mini dkblue d1"></span>',
-	K2: '<span class="mini dkblue d2"></span>',
-	K3: '<span class="mini dkblue d3"></span>',
-	K4: '<span class="mini dkblue d4"></span>',
-	K5: '<span class="mini dkblue d5"></span>',
-	K6: '<span class="mini dkblue d6"></span>',
+	D0: '<span class="mini d0"></span>',
+	D1: '<span class="mini d1"></span>',
+	D2: '<span class="mini d2"></span>',
+	D3: '<span class="mini d3"></span>',
+	D4: '<span class="mini d4"></span>',
+	D5: '<span class="mini d5"></span>',
+	D6: '<span class="mini d6"></span>',
+}
+
+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 `<span class="n ${wing}">${name}</span>`
+	return `<span onclick="on_click_tip(${c})" onmouseenter="on_focus_tip(${c})" onmouseleave="on_blur_tip()" class="n ${wing}">${name}</span>`
 }
 
 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 = `<a href="${w}">${text}</a>`
 			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)