Battle -> Combat. Card tooltips.

1 files changed, 116 insertions, 55 deletions

diff --git a/play.js b/play.js
index a0bcacf..0e6618c 100644
--- a/play.js
+++ b/play.js
@@ -57,31 +57,57 @@ const CARD_INDEX = [
 	20, 20, 20, 20, 21, 21, 21, 21, 21, 21,
 ]
 
-const CARD_INFO = [
-	{ name: "M1", type: 0, cost: 1, event: "None" },
-	{ name: "S1", type: 1, cost: 1, event: "None" },
-	{ name: "P1", type: 2, cost: 1, event: "None" },
-	{ name: "M2", type: 0, cost: 2, event: "Castra" },
-	{ name: "S2", type: 1, cost: 2, event: "Tribute" },
-	{ name: "P2", type: 2, cost: 2, event: "Quaestor" },
-	{ name: "M2X", type: 0, cost: 2, event: "Cavalry" },
-	{ name: "S2X", type: 1, cost: 2, event: "Princeps Senatus" },
-	{ name: "P2X", type: 2, cost: 2, event: "Ambitus" },
-	{ name: "M3", type: 0, cost: 3, event: "Flanking Maneuver" },
-	{ name: "S3", type: 1, cost: 3, event: "Foederati" },
-	{ name: "P3", type: 2, cost: 3, event: "Mob" },
-	{ name: "M3X", type: 0, cost: 3, event: "Force March" },
-	{ name: "S3X", type: 1, cost: 3, event: "Frumentarii" },
-	{ name: "P3X", type: 2, cost: 3, event: "Mobile Vulgus" },
-	{ name: "M4", type: 0, cost: 4, event: "Praetorian Guard" },
-	{ name: "S4", type: 1, cost: 4, event: "Damnatio Memoriae" },
-	{ name: "S4B", type: 1, cost: 4, event: "Damnatio Memoriae (exp)" },
-	{ name: "P4", type: 2, cost: 4, event: "Pretender" },
-	{ name: "M4X", type: 0, cost: 4, event: "Spiculum" },
-	{ name: "S4X", type: 1, cost: 4, event: "Triumph" },
-	{ name: "P4X", type: 2, cost: 4, event: "Demagogue" },
+const CARD_CLASS = [
+	"influence_m1",
+	"influence_s1",
+	"influence_p1",
+	"influence_m2",
+	"influence_s2",
+	"influence_p2",
+	"influence_m2x",
+	"influence_s2x",
+	"influence_p2x",
+	"influence_m3",
+	"influence_s3",
+	"influence_p3",
+	"influence_m3x",
+	"influence_s3x",
+	"influence_p3x",
+	"influence_m4",
+	"influence_s4",
+	"influence_s4b",
+	"influence_p4",
+	"influence_m4x",
+	"influence_s4x",
+	"influence_p4x",
 ]
 
+const CARD_MAP = [
+	"M1",
+	"S1",
+	"P1",
+	"M2(Castra)",
+	"S2(Tribute)",
+	"P2(Quaestor)",
+	"M2(Cavalry)",
+	"S2(Princeps Senatus)",
+	"P2(Ambitus)",
+	"M3(Flanking Maneuver)",
+	"S3(Foederati)",
+	"P3(Mob)",
+	"M3(Force March)",
+	"S3(Frumentarii)",
+	"P3(Mobile Vulgus)",
+	"M4(Praetorian Guard)",
+	"S4(Damnatio Memoriae)",
+	"S4(Damnatio Memoriae)",
+	"P4(Pretender)",
+	"M4(Spiculum)",
+	"S4(Triumph)",
+	"P4(Demagogue)",
+]
+
+
 const EVENT_NAME = [
 	"None",
 	"Plague of Cyprian",
@@ -628,6 +654,7 @@ const LAYOUT_PATTERN = [
 ]
 
 let ui = {
+	card_tip: document.getElementById("card_tip"),
 	cards: [],
 	event_cards: [],
 	militia: [],
@@ -813,8 +840,8 @@ function is_action(action, arg) {
 
 function on_init() {
 	for (let c = 0; c < CARD_INDEX.length; ++c) {
-		let name = CARD_INFO[CARD_INDEX[c]].name
-		ui.cards[c] = create("div", { className: "card influence influence_" + name.toLowerCase(), my_action: "card", my_id: c })
+		let name = CARD_CLASS[CARD_INDEX[c]]
+		ui.cards[c] = create("div", { className: "card influence " + name, my_action: "card", my_id: c })
 	}
 
 	for (let e = 0; e <= 15; ++e) {
@@ -835,17 +862,17 @@ function on_init() {
 		}
 	}
 
-	ui.rival_emperors[0] = create_piece(0, "rival_emperor", "rival_emperor", "postumus")
-	ui.rival_emperors[1] = create_piece(1, "rival_emperor", "rival_emperor", "priest_king")
-	ui.rival_emperors[2] = create_piece(2, "rival_emperor", "rival_emperor", "zenobia")
+	ui.rival_emperors[0] = create_piece(0, "rival_emperor", "rival_emperor postumus", "postumus")
+	ui.rival_emperors[1] = create_piece(1, "rival_emperor", "rival_emperor priest_king", "priest_king")
+	ui.rival_emperors[2] = create_piece(2, "rival_emperor", "rival_emperor zenobia", "zenobia")
 
 	for (let tribe = 0; tribe < 5; ++tribe)
 		for (let id = first_barbarian[tribe]; id <= last_barbarian[tribe]; ++id)
 			ui.barbarians[id] = create_piece(id, "barbarian", BARBARIAN_CLASS[tribe])
 
-	ui.barbarians[CNIVA].id = "cniva"
-	ui.barbarians[SHAPUR].id = "shapur"
-	ui.barbarians[ARDASHIR].id = "ardashir"
+	ui.barbarians[CNIVA].classList.add("cniva")
+	ui.barbarians[SHAPUR].classList.add("shapur")
+	ui.barbarians[ARDASHIR].classList.add("ardashir")
 
 	for (let p = 0; p < 4; ++p) {
 		for (let g = 0; g < 6; ++g) {
@@ -891,7 +918,7 @@ function on_init() {
 
 let stack_count = new Array(21).fill(0)
 
-let battle_width = 0
+let combat_width = 0
 const BATTLE_MIN = 3
 const BATTLE_H_MARGIN = 12
 const BATTLE_V_MARGIN = 12
@@ -904,8 +931,8 @@ function layout_battle_stack(is_att, list, region) {
 	if (region < 12)
 		y -= 7
 
-	if (list.length > battle_width)
-		battle_width = list.length
+	if (list.length > combat_width)
+		combat_width = list.length
 
 	w = list.length * 60 + (list.length - 1) * BATTLE_H_GAP
 	x -= w / 2
@@ -1010,15 +1037,15 @@ function layout_barbarian_dice(black, white, tribe) {
 }
 
 function is_battle_stack(region, type, id) {
-	if (view.battle_region !== region)
+	if (view.combat_region !== region)
 		return false
-	if (type === "general" && view.battle.attacker === id)
+	if (type === "general" && view.combat.attacker === id)
 		return true
-	if (type === "militia" && view.battle.attacker < 0)
+	if (type === "militia" && view.combat.attacker < 0)
 		return true
-	if (type === "militia" && view.battle.type === "militia")
+	if (type === "militia" && view.combat.type === "militia")
 		return true
-	return view.battle.type === type && view.battle.target === id
+	return view.combat.type === type && view.combat.target === id
 }
 
 function on_update() {
@@ -1050,7 +1077,7 @@ function on_update() {
 	ui.discard.replaceChildren()
 	ui.market.replaceChildren()
 
-	battle_width = BATTLE_MIN
+	combat_width = BATTLE_MIN
 
 	for (let pi = 0; pi < player_count; ++pi) {
 		let legacy = view.legacy[pi]
@@ -1249,9 +1276,9 @@ function on_update() {
 			if (lone_militia) {
 				if (is_battle_stack(region, "militia", region)) {
 					if (has_militia_castra(region))
-						layout_battle_stack(view.battle.attacker < 0, [ ui.mcastra[region], ui.militia[region] ], region)
+						layout_battle_stack(view.combat.attacker < 0, [ ui.mcastra[region], ui.militia[region] ], region)
 					else
-						layout_battle_stack(view.battle.attacker < 0, [ ui.militia[region] ], region, true)
+						layout_battle_stack(view.combat.attacker < 0, [ ui.militia[region] ], region, true)
 				} else {
 					if (has_militia_castra(region))
 						layout_stack(-1, [ ui.mcastra[region], ui.militia[region] ], region, true, 16, 16)
@@ -1320,7 +1347,7 @@ function on_update() {
 					stack.push(ui.militia[region])
 
 				if (is_battle_stack(region, "general", pi * 6 + ai))
-					layout_battle_stack(pi * 6 + ai === view.battle.attacker, stack, region)
+					layout_battle_stack(pi * 6 + ai === view.combat.attacker, stack, region)
 				else
 					layout_stack(pi * 6 + ai, stack, region, inside, 16, 16)
 			} else {
@@ -1362,13 +1389,13 @@ function on_update() {
 			layout_available(avail_stack, 64, pi * 625 + 325, 27)
 	}
 
-	if (view.battle) {
-		let [ x, y, w, h ] = LAYOUT_BATTLE[view.battle_region]
-		if (view.battle_region < 12)
+	if (view.combat) {
+		let [ x, y, w, h ] = LAYOUT_BATTLE[view.combat_region]
+		if (view.combat_region < 12)
 			y -= 7
 		x += w >> 1
 
-		w = battle_width * 60 + (battle_width - 1) * BATTLE_H_GAP + BATTLE_H_MARGIN * 2
+		w = combat_width * 60 + (combat_width - 1) * BATTLE_H_GAP + BATTLE_H_MARGIN * 2
 		x -= w / 2
 		h = 120 + BATTLE_V_GAP + BATTLE_V_MARGIN * 2
 
@@ -1486,10 +1513,13 @@ function sub_region_name(match, p1) {
 	return REGION_NAME[x]
 }
 
+function sub_barbarian(match) {
+	return `<span class="tip" onmouseenter="on_focus_barbarian_tip('${match}')" onmouseleave="on_blur_tip()">${match}</span>`
+}
+
 function sub_event_name(match, p1) {
 	let x = p1 | 0
-	// TODO: tooltip?
-	return EVENT_NAME[x]
+	return `<span class="tip" onmouseenter="on_focus_event_tip(${x})" onmouseleave="on_blur_tip()">${EVENT_NAME[x]}</span>`
 }
 
 function sub_icon(match) {
@@ -1497,11 +1527,13 @@ function sub_icon(match) {
 }
 
 function sub_card_1(match) {
-	return match
+	let x = CARD_MAP.indexOf(match)
+	return `<span class="tip ${match[0]}" onmouseenter="on_focus_influence_tip(${x})" onmouseleave="on_blur_tip()">${match}</span>`
 }
 
 function sub_card_x(match, p1, p2) {
-	return p1 + " " + p2
+	let x = CARD_MAP.indexOf(match)
+	return `<span class="tip ${match[0]}" onmouseenter="on_focus_influence_tip(${x})" onmouseleave="on_blur_tip()">${p1} ${p2}</span>`
 }
 
 function on_log(text) {
@@ -1516,9 +1548,18 @@ function on_log(text) {
 	text = text.replace(/</g, "&lt;")
 	text = text.replace(/>/g, "&gt;")
 
+	text = text.replace(/\bCniva\b/g, sub_barbarian)
+	text = text.replace(/\bShapur I\b/g, sub_barbarian)
+	text = text.replace(/\bArdashir\b/g, sub_barbarian)
+	text = text.replace(/\bPostumus\b/g, sub_barbarian)
+	text = text.replace(/\bZenobia\b/g, sub_barbarian)
+	text = text.replace(/\bPriest King\b/g, sub_barbarian)
+
 	text = text.replace(/%(\d+)/g, sub_region_name)
 	text = text.replace(/\bE(\d+)/g, sub_event_name)
+
 	text = text.replace(/\b[BW]\d\b/g, sub_icon)
+
 	text = text.replace(/\b[MSP][1]\b/g, sub_card_1)
 	text = text.replace(/\b([MSP][234])\(([^)]*)\)/g, sub_card_x)
 
@@ -1529,19 +1570,19 @@ function on_log(text) {
 
 	if (text.match(/^\.h1 Red/)) {
 		text = text.substring(4)
-		p.className = "h1 p_red"
+		p.className = "h1 R"
 	}
 	else if (text.match(/^\.h1 Blue/)) {
 		text = text.substring(4)
-		p.className = "h1 p_blue"
+		p.className = "h1 B"
 	}
 	else if (text.match(/^\.h1 Yellow/)) {
 		text = text.substring(4)
-		p.className = "h1 p_yellow"
+		p.className = "h1 Y"
 	}
 	else if (text.match(/^\.h1 Green/)) {
 		text = text.substring(4)
-		p.className = "h1 p_green"
+		p.className = "h1 G"
 	}
 	else if (text.match(/^\.h1/)) {
 		text = text.substring(4)
@@ -1560,6 +1601,26 @@ function on_log(text) {
 	return p
 }
 
+function on_focus_event_tip(c) {
+	ui.card_tip.className = "card event event_" + c
+}
+
+function on_focus_influence_tip(x) {
+	ui.card_tip.className = "card influence " + CARD_CLASS[x]
+}
+
+function on_focus_barbarian_tip(x) {
+	if (x === "Ardashir") ui.card_tip.className = "card event event_2"
+	if (x === "Priest King") ui.card_tip.className = "card event event_3"
+	if (x === "Shapur I") ui.card_tip.className = "card event event_5"
+	if (x === "Postumus") ui.card_tip.className = "card event event_6"
+	if (x === "Cniva") ui.card_tip.className = "card event event_8"
+	if (x === "Zenobia") ui.card_tip.className = "card event event_9"
+}
+
+function on_blur_tip() {
+	ui.card_tip.className = "hide"
+}
 
 on_init()
 scroll_with_middle_mouse("main")