From 443438629b1c6a3386aeef5b0ab33593d21a7e24 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Wed, 29 Dec 2021 17:01:28 +0100 Subject: Simplify styles and html for play.html --- play.css | 274 +++++++++++++++++++++ play.html | 367 +++------------------------- play.js | 770 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ui.js | 818 -------------------------------------------------------------- 4 files changed, 1074 insertions(+), 1155 deletions(-) create mode 100644 play.css create mode 100644 play.js delete mode 100644 ui.js diff --git a/play.css b/play.css new file mode 100644 index 0000000..b287433 --- /dev/null +++ b/play.css @@ -0,0 +1,274 @@ +main { background-color: #777; } +#roles { background-color: #999; } +header { background-color: silver; } +header.your_turn { background-color: orange; } +#role_Lancaster .role_name { background-color: salmon; } +#role_York .role_name { background-color: ghostwhite; } +#turn_info { background-color: gainsboro; } +.role_vp { float: right; } + +#log { background-color: ghostwhite; } +#log div { padding-left: 20px; text-indent: -12px; } +#log .st { background-color: steelblue; color: white; font-weight: bold; } +#log .L { background-color: pink; } +#log .Y { background-color: gainsboro; } +#log .bs { background-color: lightsteelblue; } +#log .br { font-style: italic; text-decoration: underline; } + +.hand { + margin: 25px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; + min-height: 280px; +} + +.card { + background-size: cover; + background-repeat: no-repeat; + width: 180px; + height: 280px; + border-radius: 12px; + box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + transition: 100ms; + display: none; +} + +.card.show { + display: block; +} + +.card.enabled:hover { + transform: translateY(-8px); +} + +.card.enabled { + cursor: pointer; +} + +.card.disabled { + filter: grayscale(100%); +} + +.role_info { + overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */ + padding-top: 16px; +} + +.role_info .card { + margin: 0 auto 16px auto; +} + +.role_info .card:not(:hover) { + margin: 0 auto; + height: 96px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +/* MAP */ + +#mapwrap { + box-shadow: 0px 1px 10px rgba(0,0,0,0.5); + width: 1688px; + height: 1950px; +} + +#map { + width: 1688px; + height: 1950px; + background-repeat: no-repeat; + background-size: cover; +} + +#map { background-image: url("map75.jpg") } +@media (min-resolution: 97dpi) { + #map { background-image: url("map150.jpg") } +} + +#map svg { + position: absolute; +} + +#map svg image { + pointer-events: none; +} + +#map svg path.area { + fill: green; + stroke: green; + stroke-width: 20px; + fill-opacity: 0.4; + stroke-opacity: 0.8; + opacity: 0; +} + +#map svg #area_France { fill: white; stroke: white; } +#map svg #area_Calais { fill: dodgerblue; stroke: dodgerblue; } +#map svg #area_English_Channel { fill: dodgerblue; stroke: dodgerblue; } +#map svg #area_Irish_Sea { fill: dodgerblue; stroke: dodgerblue; } +#map svg #area_North_Sea { fill: dodgerblue; stroke: dodgerblue; } + +#map svg path.area.highlight { + cursor: pointer; + opacity: 1; +} +#map svg path.area.where { + opacity: 1; + fill: darkslategray; + stroke: darkslategray; +} +#map svg path.area.where.highlight { + stroke: white; +} + +#map.hide_blocks #blocks { + visibility: hidden; +} + +/* BLOCKS */ + +body.shift .block.known:hover { + transform: scale(2) !important; + transition: 100ms; + z-index: 100; +} + +#battle div.block { + position: relative; +} + +#map div.block { + position: absolute; +} + +div.block { + border-radius: 6px; + width: 60px; + height: 60px; +} + +div.block { background-size: 700% 900%; background-repeat: no-repeat; } + +div.block { box-shadow: 0px 0px 3px 0px black; } + +div.block.Lancaster { border: 3px solid brown; background-color: indianred; } +div.block.York { border: 3px solid gainsboro; background-color: whitesmoke; } +div.block.Rebel { border: 3px solid dimgray; background-color: gray; } + +div.block.Lancaster.highlight { border-color: white; } +div.block.York.highlight { border-color: white; } +div.block.Rebel.highlight { border-color: white; } + +.hit div.block.highlight { border-color: black; box-shadow: 0 0 3px 0px black; } + +div.block.Lancaster.selected { border-color: yellow; } +div.block.York.selected { border-color: yellow; } +div.block.Rebel.selected { border-color: yellow; } + +div.block.highlight { cursor: pointer; box-shadow: 0 0 3px 1px white; } +div.block.selected { box-shadow: 0 0 3px 1px yellow; } +div.block.moved { filter: grayscale(50%) brightness(85%); } +div.block.highlight.moved { filter: grayscale(60%) brightness(95%); } + +div.block:hover { z-index: 1; } + +div.block.r1 { transform: rotate(-90deg); } +div.block.r2 { transform: rotate(-180deg); } +div.block.r3 { transform: rotate(-270deg); } + +div.block { + transition-property: top, left, transform; + transition-duration: 700ms, 700ms, 200ms; + transition-timing-function: ease; +} + +/* BATTLE BOARD */ + +#battle { background-color: silver; } +#battle_message { background-color: lightsteelblue; } +#battle_header { background-color: steelblue; color: white; } +#FR, #ER { background-color: #acacac; } + +/* CARD AND BLOCK IMAGES */ + +.card, .small_card { background-color: #d3b37b; } +.card_back { background-color: black; } + +.card_back{background-image:url('cards/card_back.jpg')} +.card_force_march{background-image:url('cards/card_force_march.jpg')} +.card_muster{background-image:url('cards/card_muster.jpg')} +.card_piracy{background-image:url('cards/card_piracy.jpg')} +.card_plague{background-image:url('cards/card_plague.jpg')} +.card_surprise{background-image:url('cards/card_surprise.jpg')} +.card_treason{background-image:url('cards/card_treason.jpg')} +.card_2{background-image:url('cards/card_2.jpg')} +.card_3{background-image:url('cards/card_3.jpg')} +.card_4{background-image:url('cards/card_4.jpg')} + +.known.block{background-image:url(blocks.jpg)} + +.known.block_11{background-position:0px 0px} +.known.block_12{background-position:-60px 0px} +.known.block_13{background-position:-120px 0px} +.known.block_14{background-position:-180px 0px} +.known.block_15{background-position:-240px 0px} +.known.block_16{background-position:-300px 0px} +.known.block_17{background-position:-360px 0px} +.known.block_21{background-position:0px -60px} +.known.block_22{background-position:-60px -60px} +.known.block_23{background-position:-120px -60px} +.known.block_24{background-position:-180px -60px} +.known.block_25{background-position:-240px -60px} +.known.block_26{background-position:-300px -60px} +.known.block_27{background-position:-360px -60px} +.known.block_31{background-position:0px -120px} +.known.block_32{background-position:-60px -120px} +.known.block_33{background-position:-120px -120px} +.known.block_34{background-position:-180px -120px} +.known.block_35{background-position:-240px -120px} +.known.block_36{background-position:-300px -120px} +.known.block_37{background-position:-360px -120px} +.known.block_41{background-position:0px -180px} +.known.block_42{background-position:-60px -180px} +.known.block_43{background-position:-120px -180px} +.known.block_44{background-position:-180px -180px} +.known.block_45{background-position:-240px -180px} +.known.block_46{background-position:-300px -180px} +.known.block_47{background-position:-360px -180px} +.known.block_51{background-position:0px -240px} +.known.block_52{background-position:-60px -240px} +.known.block_53{background-position:-120px -240px} +.known.block_54{background-position:-180px -240px} +.known.block_55{background-position:-240px -240px} +.known.block_56{background-position:-300px -240px} +.known.block_57{background-position:-360px -240px} +.known.block_61{background-position:0px -300px} +.known.block_62{background-position:-60px -300px} +.known.block_63{background-position:-120px -300px} +.known.block_64{background-position:-180px -300px} +.known.block_65{background-position:-240px -300px} +.known.block_66{background-position:-300px -300px} +.known.block_67{background-position:-360px -300px} +.known.block_71{background-position:0px -360px} +.known.block_72{background-position:-60px -360px} +.known.block_73{background-position:-120px -360px} +.known.block_74{background-position:-180px -360px} +.known.block_75{background-position:-240px -360px} +.known.block_76{background-position:-300px -360px} +.known.block_77{background-position:-360px -360px} +.known.block_81{background-position:0px -420px} +.known.block_82{background-position:-60px -420px} +.known.block_83{background-position:-120px -420px} +.known.block_84{background-position:-180px -420px} +.known.block_85{background-position:-240px -420px} +.known.block_86{background-position:-300px -420px} +.known.block_87{background-position:-360px -420px} +.known.block_91{background-position:0px -480px} +.known.block_92{background-position:-60px -480px} +.known.block_93{background-position:-120px -480px} +.known.block_94{background-position:-180px -480px} +.known.block_95{background-position:-240px -480px} +.known.block_96{background-position:-300px -480px} +.known.block_97{background-position:-360px -480px} diff --git a/play.html b/play.html index 6d1f227..cc14c49 100644 --- a/play.html +++ b/play.html @@ -2,278 +2,20 @@ - + RICHARD III + - - + -
- -
-
Chat
-
-
-
- @@ -297,74 +39,29 @@ div.block {
-
- -
- -
-
-
-
Fullscreen
-
-
Notes
-
Rules
-
Cards
-
Blocks
-
-
Resign
-
+
+
+
+
+
Fullscreen
+
+
Notes
+
Rules
+
Cards
+
Blocks
+
+
Resign
- -
-
-
-
- -
Connecting...
- - - - - - - - - - - - - - -
-
- -
- +
+
+
+
+
+
+ + -
- +
@@ -1556,11 +1249,10 @@ c20 -20 41 -80 41 -116 0 -27 -18 -45 -46 -45 -40 0 -54 25 -54 99 0 37 3 71
-
-
+
@@ -1595,7 +1287,8 @@ c20 -20 41 -80 41 -116 0 -27 -18 -45 -46 -45 -40 0 -54 25 -54 99 0 37 3 71
-
+
+ +
-
diff --git a/play.js b/play.js new file mode 100644 index 0000000..b12f235 --- /dev/null +++ b/play.js @@ -0,0 +1,770 @@ +"use strict"; + +const LANCASTER = "Lancaster"; +const YORK = "York"; +const REBEL = "Rebel"; +const ENEMY = { York: "Lancaster", Lancaster: "York" } + +const POOL = "Pool"; +const MINOR = "Minor"; + +const KING_TEXT = "\u2756"; +const PRETENDER_TEXT = ""; + +const LONG_NAME = { + "Somerset": "Duke of Somerset", + "Exeter": "Duke of Exeter", + "Devon": "Earl of Devon", + "Pembroke": "Earl of Pembroke", + "Wiltshire": "Earl of Wiltshire", + "Oxford": "Earl of Oxford", + "Beaumont": "Viscount Beaumont", + "Clifford": "Lord Clifford", + "Buckingham": "Duke of Buckingham", + "Northumberland": "Earl of Northumberland", + "Shrewsbury": "Earl of Shrewsbury", + "Westmoreland": "Earl of Westmoreland", + "Rivers": "Lord Rivers", + "Stanley": "Lord Stanley", + "Richmond": "Earl of Richmond", + "York": "Duke of York", + "Rutland": "Earl of Rutland", + "March": "Earl of March", + "Warwick": "Earl of Warwick", + "Salisbury": "Earl of Salisbury", + "Kent": "Earl of Kent", + "Norfolk": "Duke of Norfolk", + "Suffolk": "Duke of Suffolk", + "Arundel": "Earl of Arundel", + "Essex": "Earl of Essex", + "Worcester": "Earl of Worcester", + "Hastings": "Lord Hastings", + "Herbert": "Lord Herbert", + "Clarence": "Duke of Clarence", + "Gloucester": "Duke of Gloucester", +} + +function toggle_blocks() { + document.getElementById("map").classList.toggle("hide_blocks"); +} + +let ui = { + cards: {}, + card_backs: {}, + areas: {}, + known: {}, + secret: { Lancaster: {}, York: {}, Rebel: {} }, + battle_menu: {}, + battle_block: {}, + present: new Set(), +} + +create_log_entry = function (text) { + let p = document.createElement("div"); + text = text.replace(/&/g, "&"); + text = text.replace(//g, ">"); + + text = text.replace(/\u2192 /g, "\u2192\xa0"); + + text = text.replace(/^([A-Z]):/, ' $1 '); + + if (text.match(/^~ .* ~$/)) + p.className = 'br', text = text.substring(2, text.length-2); + else if (text.match(/^Start Lancaster turn/)) + p.className = 'L'; + else if (text.match(/^Start York turn/)) + p.className = 'Y'; + else if (text.match(/^Start /)) + p.className = 'st', text = text.replace(/\.$/, ""); + else if (text.match(/^Battle in/)) + p.className = 'bs'; + + if (text.match(/^Start /)) + text = text.substring(6); + + p.innerHTML = text; + return p; +} + +function on_focus_area(evt) { + let where = evt.target.area; + let text = where; + if (AREAS[where].city) + text += " (" + AREAS[where].city + ")"; + if (AREAS[where].crown) + text += " - Crown"; // " \u2655"; + if (where === "South Yorks" || where === "Kent") + text += " - Church"; // " -" \u2657"; + if (AREAS[where].major_port) + text += " - Port"; + if (AREAS[where].shields.length > 0) + text += " - " + AREAS[where].shields.join(", "); + document.getElementById("status").textContent = text; +} + +function on_blur_area(evt) { + document.getElementById("status").textContent = ""; +} + +function on_click_area(evt) { + let where = evt.target.area; + send_action('area', where); +} + +const STEP_TEXT = [ 0, "I", "II", "III", "IIII" ]; +const HEIR_TEXT = [ 0, '\u00b9', '\u00b2', '\u00b3', '\u2074', '\u2075' ]; + +function block_name(who) { + if (!who) return "Nobody"; + let name = BLOCKS[who].name; + let long_name = LONG_NAME[name]; + return long_name ? long_name : name; +} + +function block_owner(who) { + if (who === REBEL) { + if (game.pretender) + return BLOCKS[game.pretender].owner; + if (game.king) + return ENEMY[BLOCKS[game.king].owner]; + return YORK; + } + return BLOCKS[who].owner; +} + +function on_focus_secret_block(evt) { + let owner = evt.target.owner; + let text = owner; + document.getElementById("status").textContent = text; +} + +function on_blur_secret_block(evt) { + document.getElementById("status").textContent = ""; +} + +function on_click_secret_block(evt) { +} + +function on_focus_map_block(evt) { + let b = evt.target.block; + let s = game.known[b][1]; + let text = block_name(b) + " "; + if (BLOCKS[b].type === 'heir') + text += "H" + HEIR_TEXT[BLOCKS[b].heir] + "-"; + if (BLOCKS[b].loyalty) + text += BLOCKS[b].loyalty + "-"; + else if (BLOCKS[b].type === 'nobles') + text += "\u2740-"; + text += STEP_TEXT[s] + "-" + BLOCKS[b].combat; + document.getElementById("status").textContent = text; +} + +function on_blur_map_block(evt) { + document.getElementById("status").textContent = ""; +} + +function on_click_map_block(evt) { + let b = evt.target.block; + if (!game.battle) + send_action('block', b); +} + +function is_battle_reserve(who, list) { + for (let [b, s, m] of list) + if (who === b) + return true; + return false; +} + +function on_focus_battle_block(evt) { + let b = evt.target.block; + let msg = block_name(b); + if (is_battle_reserve(b, game.battle.LR)) + msg = "Lancaster Reserve"; + if (is_battle_reserve(b, game.battle.YR)) + msg = "York Reserve"; + + if (game.actions && game.actions.battle_fire && game.actions.battle_fire.includes(b)) + msg = "Fire with " + msg; + else if (game.actions && game.actions.battle_retreat && game.actions.battle_retreat.includes(b)) + msg = "Retreat with " + msg; + else if (game.actions && game.actions.battle_charge && game.actions.battle_charge.includes(b)) + msg = "Charge " + msg; + else if (game.actions && game.actions.battle_treachery && game.actions.battle_treachery.includes(b)) + msg = "Attempt treachery on " + msg; + else if (game.actions && game.actions.battle_hit && game.actions.battle_hit.includes(b)) + msg = "Take hit on " + msg; + + document.getElementById("status").textContent = msg; +} + +function on_blur_battle_block(evt) { + document.getElementById("status").textContent = ""; +} + +function on_click_battle_block(evt) { + let b = evt.target.block; + send_action('block', b); +} + +function on_focus_battle_fire(evt) { + document.getElementById("status").textContent = + "Fire with " + block_name(evt.target.block); +} + +function on_focus_battle_retreat(evt) { + document.getElementById("status").textContent = + "Retreat with " + block_name(evt.target.block); +} + +function on_focus_battle_pass(evt) { + document.getElementById("status").textContent = + "Pass with " + block_name(evt.target.block); +} + +function on_focus_battle_hit(evt) { + document.getElementById("status").textContent = + "Take hit on " + block_name(evt.target.block); +} + +function on_focus_battle_charge(evt) { + if (block_owner(evt.target.block) === game.active) + document.getElementById("status").textContent = + "Charge with " + block_name(evt.target.block); + else + document.getElementById("status").textContent = + "Charge " + block_name(evt.target.block); +} + +function on_focus_battle_treachery(evt) { + if (block_owner(evt.target.block) === game.active) + document.getElementById("status").textContent = + "Attempt treachery with " + block_name(evt.target.block); + else + document.getElementById("status").textContent = + "Attempt treachery on " + block_name(evt.target.block); +} + +function on_blur_battle_button(evt) { + document.getElementById("status").textContent = ""; +} + +function on_click_battle_hit(evt) { send_action('battle_hit', evt.target.block); } +function on_click_battle_fire(evt) { send_action('battle_fire', evt.target.block); } +function on_click_battle_retreat(evt) { send_action('battle_retreat', evt.target.block); } +function on_click_battle_charge(evt) { send_action('battle_charge', evt.target.block); } +function on_click_battle_treachery(evt) { send_action('battle_treachery', evt.target.block); } + +function on_click_battle_pass(evt) { + if (window.confirm("Are you sure that you want to PASS with " + block_name(evt.target.block) + "?")) + send_action('battle_pass', evt.target.block); +} + +function on_click_card(evt) { + let c = evt.target.id.split("+")[1] | 0; + send_action('play', c); +} + +function build_battle_button(menu, b, c, click, enter, img_src) { + let img = new Image(); + img.draggable = false; + img.classList.add("action"); + img.classList.add(c); + img.setAttribute("src", img_src); + img.addEventListener("click", click); + img.addEventListener("mouseenter", enter); + img.addEventListener("mouseleave", on_blur_battle_button); + img.block = b; + menu.appendChild(img); +} + +function build_battle_block(b, block) { + let element = document.createElement("div"); + element.classList.add("block"); + element.classList.add("known"); + element.classList.add(BLOCKS[b].owner); + element.classList.add("block_" + block.image); + element.addEventListener("mouseenter", on_focus_battle_block); + element.addEventListener("mouseleave", on_blur_battle_block); + element.addEventListener("click", on_click_battle_block); + element.block = b; + ui.battle_block[b] = element; + + let menu_list = document.createElement("div"); + menu_list.classList.add("battle_menu_list"); + + build_battle_button(menu_list, b, "treachery", + on_click_battle_treachery, on_focus_battle_treachery, + "/images/rose.svg"); + build_battle_button(menu_list, b, "charge", + on_click_battle_charge, on_focus_battle_charge, + "/images/mounted-knight.svg"); + build_battle_button(menu_list, b, "hit", + on_click_battle_hit, on_focus_battle_hit, + "/images/cross-mark.svg"); + + // menu_list.appendChild(document.createElement("br")); + + build_battle_button(menu_list, b, "fire", + on_click_battle_fire, on_focus_battle_fire, + "/images/pointy-sword.svg"); + build_battle_button(menu_list, b, "retreat", + on_click_battle_retreat, on_focus_battle_retreat, + "/images/flying-flag.svg"); + build_battle_button(menu_list, b, "pass", + on_click_battle_pass, on_focus_battle_pass, + "/images/sands-of-time.svg"); + + let menu = document.createElement("div"); + menu.classList.add("battle_menu"); + menu.appendChild(element); + menu.appendChild(menu_list); + ui.battle_menu[b] = menu; +} + +function build_known_block(b, block) { + let element = document.createElement("div"); + element.classList.add("block"); + element.classList.add("known"); + element.classList.add(BLOCKS[b].owner); + element.classList.add("block_" + block.image); + element.addEventListener("mouseenter", on_focus_map_block); + element.addEventListener("mouseleave", on_blur_map_block); + element.addEventListener("click", on_click_map_block); + element.block = b; + return element; +} + +function build_secret_block(b, block) { + let element = document.createElement("div"); + element.classList.add("block"); + element.classList.add("secret"); + element.classList.add(BLOCKS[b].owner); + element.addEventListener("mouseenter", on_focus_secret_block); + element.addEventListener("mouseleave", on_blur_secret_block); + element.addEventListener("click", on_click_secret_block); + element.owner = BLOCKS[b].owner; + return element; +} + +function build_map() { + let element; + + ui.blocks_element = document.getElementById("blocks"); + ui.offmap_element = document.getElementById("offmap"); + + for (let c = 1; c <= 25; ++c) { + ui.cards[c] = document.getElementById("card+"+c); + ui.cards[c].addEventListener("click", on_click_card); + } + + for (let c = 1; c <= 7; ++c) + ui.card_backs[c] = document.getElementById("back+"+c); + + for (let name in AREAS) { + let area = AREAS[name]; + element = document.getElementById("svgmap").getElementById("area_"+name.replace(/ /g, "_")); + if (element) { + element.area = name; + element.addEventListener("mouseenter", on_focus_area); + element.addEventListener("mouseleave", on_blur_area); + element.addEventListener("click", on_click_area); + ui.areas[name] = element; + } + ui.secret.Lancaster[name] = []; + ui.secret.York[name] = []; + ui.secret.Rebel[name] = []; + } + ui.secret.Lancaster.offmap = []; + ui.secret.York.offmap = []; + ui.secret.Rebel.offmap = []; + + for (let b in BLOCKS) { + let block = BLOCKS[b]; + build_battle_block(b, block); + ui.known[b] = build_known_block(b, block); + ui.secret[BLOCKS[b].owner].offmap.push(build_secret_block(b, block)); + } +} + +function update_steps(b, steps, element) { + element.classList.remove("r1"); + element.classList.remove("r2"); + element.classList.remove("r3"); + element.classList.add("r"+(BLOCKS[b].steps - steps)); +} + +function layout_blocks(area, secret, known) { + let wrap = AREAS[area].wrap; + let s = secret.length; + let k = known.length; + let n = s + k; + let row, rows = []; + let i = 0; + + function new_line() { + rows.push(row = []); + i = 0; + } + + new_line(); + + while (secret.length > 0) { + if (i === wrap) + new_line(); + row.push(secret.shift()); + ++i; + } + + // Break early if secret and known fit in exactly two rows, and more than three blocks total + if (s > 0 && s <= wrap && k > 0 && k <= wrap && n > 3) + new_line(); + + while (known.length > 0) { + if (i === wrap) + new_line(); + row.push(known.shift()); + ++i; + } + + if (AREAS[area].layout_minor > 0.5) + rows.reverse(); + + for (let j = 0; j < rows.length; ++j) + for (i = 0; i < rows[j].length; ++i) + position_block(area, j, rows.length, i, rows[j].length, rows[j][i]); +} + +function position_block(area, row, n_rows, col, n_cols, element) { + let space = AREAS[area]; + let block_size = 60+6; + let padding = 4; + let offset = block_size + padding; + let row_size = (n_rows-1) * offset; + let col_size = (n_cols-1) * offset; + let x = space.x - block_size/2; + let y = space.y - block_size/2; + + if (space.layout_axis === 'X') { + x -= col_size * space.layout_major; + y -= row_size * space.layout_minor; + x += col * offset; + y += row * offset; + } else { + y -= col_size * space.layout_major; + x -= row_size * space.layout_minor; + y += col * offset; + x += row * offset; + } + + element.style.left = (x|0)+"px"; + element.style.top = (y|0)+"px"; +} + +function show_block(element) { + if (element.parentElement !== ui.blocks_element) + ui.blocks_element.appendChild(element); +} + +function hide_block(element) { + if (element.parentElement !== ui.offmap_element) + ui.offmap_element.appendChild(element); +} + +function update_map() { + let overflow = { Lancaster: [], York: [], Rebel: [] }; + let layout = {}; + + document.getElementById("turn_info").textContent = + "Campaign " + game.campaign + + "\nKing: " + block_name(game.king) + + "\nPretender: " + block_name(game.pretender); + + for (let area in AREAS) + layout[area] = { Lancaster: [], York: [] }; + + // Move secret blocks to overflow queue if there are too many in a area + for (let area in AREAS) { + for (let color of [LANCASTER, YORK, REBEL]) { + if (game.secret[color]) { + let max = game.secret[color][area] ? game.secret[color][area][0] : 0; + while (ui.secret[color][area].length > max) { + overflow[color].push(ui.secret[color][area].pop()); + } + } + } + } + + // Add secret blocks if there are too few in a location + for (let area in AREAS) { + for (let color of [LANCASTER, YORK, REBEL]) { + if (game.secret[color]) { + let max = game.secret[color][area] ? game.secret[color][area][0] : 0; + while (ui.secret[color][area].length < max) { + if (overflow[color].length > 0) { + ui.secret[color][area].push(overflow[color].pop()); + } else { + let element = ui.secret[color].offmap.pop(); + show_block(element); + ui.secret[color][area].push(element); + } + } + } + } + } + + // Remove any blocks left in the overflow queue + for (let color of [LANCASTER, YORK, REBEL]) { + while (overflow[color].length > 0) { + let element = overflow[color].pop(); + hide_block(element); + ui.secret[color].offmap.push(element); + } + } + + // Hide formerly known blocks + for (let b in BLOCKS) { + if (!(b in game.known)) { + hide_block(ui.known[b]); + } + } + + // Add secret blocks to layout + for (let area in AREAS) { + for (let color of [LANCASTER, YORK, REBEL]) { + let i = 0, n = 0, m = 0; + if (game.secret[color] && game.secret[color][area]) { + n = game.secret[color][area][0]; + m = game.secret[color][area][1]; + } + for (let element of ui.secret[color][area]) { + if (i++ < n - m) + element.classList.remove("moved"); + else + element.classList.add("moved"); + if (color === REBEL) + layout[area][BLOCKS[game.pretender].owner].push(element); + else + layout[area][color].push(element); + } + } + } + + // Add known blocks to layout + for (let b in game.known) { + let area = game.known[b][0]; + if (area) { + let steps = game.known[b][1]; + let moved = game.known[b][2]; + let element = ui.known[b]; + let color = block_owner(b); + + show_block(element); + layout[area][color].push(element); + update_steps(b, steps, element); + + if (moved) + element.classList.add("moved"); + else + element.classList.remove("moved"); + } + } + + // Layout blocks on map + for (let area in AREAS) { + if (area === POOL) { + layout_blocks("LPool", layout[area].Lancaster, []); + layout_blocks("YPool", layout[area].York, []); + } else if (area === MINOR) { + layout_blocks("LMinor", layout[area].Lancaster, []); + layout_blocks("YMinor", layout[area].York, []); + } else { + layout_blocks(area, layout[area].Lancaster, layout[area].York); + } + } + + for (let where in AREAS) { + if (ui.areas[where]) { + ui.areas[where].classList.remove('highlight'); + ui.areas[where].classList.remove('where'); + } + } + if (game.actions && game.actions.area) + for (let where of game.actions.area) + ui.areas[where].classList.add('highlight'); + if (game.where) + ui.areas[game.where].classList.add('where'); + + for (let b in BLOCKS) { + ui.known[b].classList.remove('highlight'); + ui.known[b].classList.remove('selected'); + } + if (!game.battle) { + if (game.actions && game.actions.block) + for (let b of game.actions.block) + ui.known[b].classList.add('highlight'); + if (game.who) + ui.known[game.who].classList.add('selected'); + } +} + +function update_cards() { + let cards = game.hand; + for (let c = 1; c <= 25; ++c) { + ui.cards[c].classList.remove('enabled'); + if (cards && cards.includes(c)) + ui.cards[c].classList.add('show'); + else + ui.cards[c].classList.remove('show'); + } + + if (player === 'Observer') { + let n = game.hand.length; + for (let c = 1; c <= 7; ++c) + if (c <= n) + ui.card_backs[c].classList.add("show"); + else + ui.card_backs[c].classList.remove("show"); + } + + if (game.actions && game.actions.play) { + for (let c of game.actions.play) + ui.cards[c].classList.add('enabled'); + } + + if (!game.l_card) + document.getElementById("lancaster_card").className = "small_card card_back"; + else + document.getElementById("lancaster_card").className = "small_card " + CARDS[game.l_card].image; + if (!game.y_card) + document.getElementById("york_card").className = "small_card card_back"; + else + document.getElementById("york_card").className = "small_card " + CARDS[game.y_card].image; +} + +function update_battle() { + function fill_cell(name, list, reserve) { + let cell = window[name]; + + ui.present.clear(); + + for (let [block, steps, moved] of list) { + ui.present.add(block); + + if (block === game.who) + ui.battle_block[block].classList.add("selected"); + else + ui.battle_block[block].classList.remove("selected"); + + ui.battle_block[block].classList.remove("highlight"); + ui.battle_menu[block].classList.remove('hit'); + ui.battle_menu[block].classList.remove('fire'); + ui.battle_menu[block].classList.remove('retreat'); + ui.battle_menu[block].classList.remove('pass'); + ui.battle_menu[block].classList.remove('charge'); + ui.battle_menu[block].classList.remove('treachery'); + + if (game.actions && game.actions.block && game.actions.block.includes(block)) + ui.battle_block[block].classList.add("highlight"); + if (game.actions && game.actions.battle_fire && game.actions.battle_fire.includes(block)) + ui.battle_menu[block].classList.add('fire'); + if (game.actions && game.actions.battle_retreat && game.actions.battle_retreat.includes(block)) + ui.battle_menu[block].classList.add('retreat'); + if (game.actions && game.actions.battle_pass && game.actions.battle_pass.includes(block)) + ui.battle_menu[block].classList.add('pass'); + if (game.actions && game.actions.battle_hit && game.actions.battle_hit.includes(block)) + ui.battle_menu[block].classList.add('hit'); + if (game.actions && game.actions.battle_charge && game.actions.battle_charge.includes(block)) + ui.battle_menu[block].classList.add('charge'); + if (game.actions && game.actions.battle_treachery && game.actions.battle_treachery.includes(block)) + ui.battle_menu[block].classList.add('treachery'); + + update_steps(block, steps, ui.battle_block[block], false); + if (reserve) + ui.battle_block[block].classList.add("secret"); + else + ui.battle_block[block].classList.remove("secret"); + if (moved) + ui.battle_block[block].classList.add("moved"); + else + ui.battle_block[block].classList.remove("moved"); + if (reserve) + ui.battle_block[block].classList.remove("known"); + else + ui.battle_block[block].classList.add("known"); + } + + for (let b in BLOCKS) { + if (ui.present.has(b)) { + if (!cell.contains(ui.battle_menu[b])) + cell.appendChild(ui.battle_menu[b]); + } else { + if (cell.contains(ui.battle_menu[b])) + cell.removeChild(ui.battle_menu[b]); + } + } + } + + if (player === LANCASTER) { + fill_cell("FR", game.battle.LR, true); + fill_cell("FA", game.battle.LA, false); + fill_cell("FB", game.battle.LB, false); + fill_cell("FC", game.battle.LC, false); + fill_cell("FD", game.battle.LD, false); + fill_cell("EA", game.battle.YA, false); + fill_cell("EB", game.battle.YB, false); + fill_cell("EC", game.battle.YC, false); + fill_cell("ED", game.battle.YD, false); + fill_cell("ER", game.battle.YR, true); + } else { + fill_cell("ER", game.battle.LR, true); + fill_cell("EA", game.battle.LA, false); + fill_cell("EB", game.battle.LB, false); + fill_cell("EC", game.battle.LC, false); + fill_cell("ED", game.battle.LD, false); + fill_cell("FA", game.battle.YA, false); + fill_cell("FB", game.battle.YB, false); + fill_cell("FC", game.battle.YC, false); + fill_cell("FD", game.battle.YD, false); + fill_cell("FR", game.battle.YR, true); + } +} + +function on_update() { + let king = block_owner(game.king); + document.getElementById("lancaster_vp").textContent = (king === LANCASTER ? KING_TEXT : PRETENDER_TEXT); + document.getElementById("york_vp").textContent = (king === YORK ? KING_TEXT : PRETENDER_TEXT); + + action_button("eliminate", "Eliminate"); + action_button("execute_clarence", "Execute Clarence"); + action_button("execute_exeter", "Execute Exeter"); + action_button("end_action_phase", "End action phase"); + action_button("end_supply_phase", "End supply phase"); + action_button("end_political_turn", "End political turn"); + action_button("end_exile_limits", "End exile limits"); + action_button("end_regroup", "End regroup"); + action_button("end_retreat", "End retreat"); + action_button("pass", "Pass"); + action_button("undo", "Undo"); + + update_cards(); + update_map(); + + if (game.battle) { + document.getElementById("battle_header").textContent = game.battle.title; + document.getElementById("battle_message").textContent = game.battle.flash; + document.getElementById("battle").classList.add("show"); + update_battle(); + } else { + document.getElementById("battle").classList.remove("show"); + } +} + +build_map(); + +drag_element_with_mouse("#battle", "#battle_header"); +scroll_with_middle_mouse("main", 2); +init_map_zoom(); +init_shift_zoom(); +init_client(["Lancaster", "York"]); diff --git a/ui.js b/ui.js deleted file mode 100644 index 2f8632a..0000000 --- a/ui.js +++ /dev/null @@ -1,818 +0,0 @@ -"use strict"; - -const LANCASTER = "Lancaster"; -const YORK = "York"; -const REBEL = "Rebel"; -const ENEMY = { York: "Lancaster", Lancaster: "York" } - -const POOL = "Pool"; -const MINOR = "Minor"; - -const KING_TEXT = "\u2756"; -const PRETENDER_TEXT = ""; - -const LONG_NAME = { - "Somerset": "Duke of Somerset", - "Exeter": "Duke of Exeter", - "Devon": "Earl of Devon", - "Pembroke": "Earl of Pembroke", - "Wiltshire": "Earl of Wiltshire", - "Oxford": "Earl of Oxford", - "Beaumont": "Viscount Beaumont", - "Clifford": "Lord Clifford", - "Buckingham": "Duke of Buckingham", - "Northumberland": "Earl of Northumberland", - "Shrewsbury": "Earl of Shrewsbury", - "Westmoreland": "Earl of Westmoreland", - "Rivers": "Lord Rivers", - "Stanley": "Lord Stanley", - "Richmond": "Earl of Richmond", - "York": "Duke of York", - "Rutland": "Earl of Rutland", - "March": "Earl of March", - "Warwick": "Earl of Warwick", - "Salisbury": "Earl of Salisbury", - "Kent": "Earl of Kent", - "Norfolk": "Duke of Norfolk", - "Suffolk": "Duke of Suffolk", - "Arundel": "Earl of Arundel", - "Essex": "Earl of Essex", - "Worcester": "Earl of Worcester", - "Hastings": "Lord Hastings", - "Herbert": "Lord Herbert", - "Clarence": "Duke of Clarence", - "Gloucester": "Duke of Gloucester", -} - -function toggle_blocks() { - document.getElementById("map").classList.toggle("hide_blocks"); -} - -let ui = { - cards: {}, - card_backs: {}, - areas: {}, - known: {}, - secret: { Lancaster: {}, York: {}, Rebel: {} }, - battle_menu: {}, - battle_block: {}, - present: new Set(), -} - -create_log_entry = function (text) { - let p = document.createElement("div"); - text = text.replace(/&/g, "&"); - text = text.replace(//g, ">"); - - text = text.replace(/\u2192 /g, "\u2192\xa0"); - - text = text.replace(/^([A-Z]):/, ' $1 '); - - if (text.match(/^~ .* ~$/)) - p.className = 'br', text = text.substring(2, text.length-2); - else if (text.match(/^Start Lancaster turn/)) - p.className = 'L'; - else if (text.match(/^Start York turn/)) - p.className = 'Y'; - else if (text.match(/^Start /)) - p.className = 'st', text = text.replace(/\.$/, ""); - else if (text.match(/^Battle in/)) - p.className = 'bs'; - - if (text.match(/^Start /)) - text = text.substring(6); - - p.innerHTML = text; - return p; -} - -function on_focus_area(evt) { - let where = evt.target.area; - let text = where; - if (AREAS[where].city) - text += " (" + AREAS[where].city + ")"; - if (AREAS[where].crown) - text += " - Crown"; // " \u2655"; - if (where === "South Yorks" || where === "Kent") - text += " - Church"; // " -" \u2657"; - if (AREAS[where].major_port) - text += " - Port"; - if (AREAS[where].shields.length > 0) - text += " - " + AREAS[where].shields.join(", "); - document.getElementById("status").textContent = text; -} - -function on_blur_area(evt) { - document.getElementById("status").textContent = ""; -} - -function on_click_area(evt) { - let where = evt.target.area; - send_action('area', where); -} - -const STEP_TEXT = [ 0, "I", "II", "III", "IIII" ]; -const HEIR_TEXT = [ 0, '\u00b9', '\u00b2', '\u00b3', '\u2074', '\u2075' ]; - -function block_name(who) { - if (!who) return "Nobody"; - let name = BLOCKS[who].name; - let long_name = LONG_NAME[name]; - return long_name ? long_name : name; -} - -function block_owner(who) { - if (who === REBEL) { - if (game.pretender) - return BLOCKS[game.pretender].owner; - if (game.king) - return ENEMY[BLOCKS[game.king].owner]; - return YORK; - } - return BLOCKS[who].owner; -} - -function on_focus_secret_block(evt) { - let owner = evt.target.owner; - let text = owner; - document.getElementById("status").textContent = text; -} - -function on_blur_secret_block(evt) { - document.getElementById("status").textContent = ""; -} - -function on_click_secret_block(evt) { -} - -function on_focus_map_block(evt) { - let b = evt.target.block; - let s = game.known[b][1]; - let text = block_name(b) + " "; - if (BLOCKS[b].type === 'heir') - text += "H" + HEIR_TEXT[BLOCKS[b].heir] + "-"; - if (BLOCKS[b].loyalty) - text += BLOCKS[b].loyalty + "-"; - else if (BLOCKS[b].type === 'nobles') - text += "\u2740-"; - text += STEP_TEXT[s] + "-" + BLOCKS[b].combat; - document.getElementById("status").textContent = text; -} - -function on_blur_map_block(evt) { - document.getElementById("status").textContent = ""; -} - -function on_click_map_block(evt) { - let b = evt.target.block; - if (!game.battle) - send_action('block', b); -} - -function is_battle_reserve(who, list) { - for (let [b, s, m] of list) - if (who === b) - return true; - return false; -} - -function on_focus_battle_block(evt) { - let b = evt.target.block; - let msg = block_name(b); - if (is_battle_reserve(b, game.battle.LR)) - msg = "Lancaster Reserve"; - if (is_battle_reserve(b, game.battle.YR)) - msg = "York Reserve"; - - if (game.actions && game.actions.battle_fire && game.actions.battle_fire.includes(b)) - msg = "Fire with " + msg; - else if (game.actions && game.actions.battle_retreat && game.actions.battle_retreat.includes(b)) - msg = "Retreat with " + msg; - else if (game.actions && game.actions.battle_charge && game.actions.battle_charge.includes(b)) - msg = "Charge " + msg; - else if (game.actions && game.actions.battle_treachery && game.actions.battle_treachery.includes(b)) - msg = "Attempt treachery on " + msg; - else if (game.actions && game.actions.battle_hit && game.actions.battle_hit.includes(b)) - msg = "Take hit on " + msg; - - document.getElementById("status").textContent = msg; -} - -function on_blur_battle_block(evt) { - document.getElementById("status").textContent = ""; -} - -function on_click_battle_block(evt) { - let b = evt.target.block; - send_action('block', b); -} - -function on_focus_battle_fire(evt) { - document.getElementById("status").textContent = - "Fire with " + block_name(evt.target.block); -} - -function on_focus_battle_retreat(evt) { - document.getElementById("status").textContent = - "Retreat with " + block_name(evt.target.block); -} - -function on_focus_battle_pass(evt) { - document.getElementById("status").textContent = - "Pass with " + block_name(evt.target.block); -} - -function on_focus_battle_hit(evt) { - document.getElementById("status").textContent = - "Take hit on " + block_name(evt.target.block); -} - -function on_focus_battle_charge(evt) { - if (block_owner(evt.target.block) === game.active) - document.getElementById("status").textContent = - "Charge with " + block_name(evt.target.block); - else - document.getElementById("status").textContent = - "Charge " + block_name(evt.target.block); -} - -function on_focus_battle_treachery(evt) { - if (block_owner(evt.target.block) === game.active) - document.getElementById("status").textContent = - "Attempt treachery with " + block_name(evt.target.block); - else - document.getElementById("status").textContent = - "Attempt treachery on " + block_name(evt.target.block); -} - -function on_blur_battle_button(evt) { - document.getElementById("status").textContent = ""; -} - -function on_click_battle_hit(evt) { send_action('battle_hit', evt.target.block); } -function on_click_battle_fire(evt) { send_action('battle_fire', evt.target.block); } -function on_click_battle_retreat(evt) { send_action('battle_retreat', evt.target.block); } -function on_click_battle_charge(evt) { send_action('battle_charge', evt.target.block); } -function on_click_battle_treachery(evt) { send_action('battle_treachery', evt.target.block); } - -function on_click_battle_pass(evt) { - if (window.confirm("Are you sure that you want to PASS with " + block_name(evt.target.block) + "?")) - send_action('battle_pass', evt.target.block); -} - -function on_click_card(evt) { - let c = evt.target.id.split("+")[1] | 0; - send_action('play', c); -} - -function on_button_undo(evt) { - send_action('undo'); -} - -function on_button_pass(evt) { - send_action('pass'); -} - -function on_button_end_action_phase(evt) { - send_action('end_action_phase'); -} - -function on_button_end_supply_phase(evt) { - send_action('end_supply_phase'); -} - -function on_button_end_political_turn(evt) { - send_action('end_political_turn'); -} - -function on_button_end_exile_limits(evt) { - send_action('end_exile_limits'); -} - -function on_button_end_regroup(evt) { - send_action('end_regroup'); -} - -function on_button_end_retreat(evt) { - send_action('end_retreat'); -} - -function on_button_eliminate(evt) { - send_action('eliminate'); -} - -function on_button_treachery(evt) { - send_action('treachery'); -} - -function on_button_execute_clarence(evt) { - send_action('execute_clarence'); -} - -function on_button_execute_exeter(evt) { - send_action('execute_exeter'); -} - -function build_battle_button(menu, b, c, click, enter, img_src) { - let img = new Image(); - img.draggable = false; - img.classList.add("action"); - img.classList.add(c); - img.setAttribute("src", img_src); - img.addEventListener("click", click); - img.addEventListener("mouseenter", enter); - img.addEventListener("mouseleave", on_blur_battle_button); - img.block = b; - menu.appendChild(img); -} - -function build_battle_block(b, block) { - let element = document.createElement("div"); - element.classList.add("block"); - element.classList.add("known"); - element.classList.add(BLOCKS[b].owner); - element.classList.add("block_" + block.image); - element.addEventListener("mouseenter", on_focus_battle_block); - element.addEventListener("mouseleave", on_blur_battle_block); - element.addEventListener("click", on_click_battle_block); - element.block = b; - ui.battle_block[b] = element; - - let menu_list = document.createElement("div"); - menu_list.classList.add("battle_menu_list"); - - build_battle_button(menu_list, b, "treachery", - on_click_battle_treachery, on_focus_battle_treachery, - "/images/rose.svg"); - build_battle_button(menu_list, b, "charge", - on_click_battle_charge, on_focus_battle_charge, - "/images/mounted-knight.svg"); - build_battle_button(menu_list, b, "hit", - on_click_battle_hit, on_focus_battle_hit, - "/images/cross-mark.svg"); - - // menu_list.appendChild(document.createElement("br")); - - build_battle_button(menu_list, b, "fire", - on_click_battle_fire, on_focus_battle_fire, - "/images/pointy-sword.svg"); - build_battle_button(menu_list, b, "retreat", - on_click_battle_retreat, on_focus_battle_retreat, - "/images/flying-flag.svg"); - build_battle_button(menu_list, b, "pass", - on_click_battle_pass, on_focus_battle_pass, - "/images/sands-of-time.svg"); - - let menu = document.createElement("div"); - menu.classList.add("battle_menu"); - menu.appendChild(element); - menu.appendChild(menu_list); - ui.battle_menu[b] = menu; -} - -function build_known_block(b, block) { - let element = document.createElement("div"); - element.classList.add("block"); - element.classList.add("known"); - element.classList.add(BLOCKS[b].owner); - element.classList.add("block_" + block.image); - element.addEventListener("mouseenter", on_focus_map_block); - element.addEventListener("mouseleave", on_blur_map_block); - element.addEventListener("click", on_click_map_block); - element.block = b; - return element; -} - -function build_secret_block(b, block) { - let element = document.createElement("div"); - element.classList.add("block"); - element.classList.add("secret"); - element.classList.add(BLOCKS[b].owner); - element.addEventListener("mouseenter", on_focus_secret_block); - element.addEventListener("mouseleave", on_blur_secret_block); - element.addEventListener("click", on_click_secret_block); - element.owner = BLOCKS[b].owner; - return element; -} - -function build_map() { - let element; - - ui.blocks_element = document.getElementById("blocks"); - ui.offmap_element = document.getElementById("offmap"); - - for (let c = 1; c <= 25; ++c) { - ui.cards[c] = document.getElementById("card+"+c); - ui.cards[c].addEventListener("click", on_click_card); - } - - for (let c = 1; c <= 7; ++c) - ui.card_backs[c] = document.getElementById("back+"+c); - - for (let name in AREAS) { - let area = AREAS[name]; - element = document.getElementById("svgmap").getElementById("area_"+name.replace(/ /g, "_")); - if (element) { - element.area = name; - element.addEventListener("mouseenter", on_focus_area); - element.addEventListener("mouseleave", on_blur_area); - element.addEventListener("click", on_click_area); - ui.areas[name] = element; - } - ui.secret.Lancaster[name] = []; - ui.secret.York[name] = []; - ui.secret.Rebel[name] = []; - } - ui.secret.Lancaster.offmap = []; - ui.secret.York.offmap = []; - ui.secret.Rebel.offmap = []; - - for (let b in BLOCKS) { - let block = BLOCKS[b]; - build_battle_block(b, block); - ui.known[b] = build_known_block(b, block); - ui.secret[BLOCKS[b].owner].offmap.push(build_secret_block(b, block)); - } -} - -function update_steps(b, steps, element) { - element.classList.remove("r1"); - element.classList.remove("r2"); - element.classList.remove("r3"); - element.classList.add("r"+(BLOCKS[b].steps - steps)); -} - -function layout_blocks(area, secret, known) { - let wrap = AREAS[area].wrap; - let s = secret.length; - let k = known.length; - let n = s + k; - let row, rows = []; - let i = 0; - - function new_line() { - rows.push(row = []); - i = 0; - } - - new_line(); - - while (secret.length > 0) { - if (i === wrap) - new_line(); - row.push(secret.shift()); - ++i; - } - - // Break early if secret and known fit in exactly two rows, and more than three blocks total - if (s > 0 && s <= wrap && k > 0 && k <= wrap && n > 3) - new_line(); - - while (known.length > 0) { - if (i === wrap) - new_line(); - row.push(known.shift()); - ++i; - } - - if (AREAS[area].layout_minor > 0.5) - rows.reverse(); - - for (let j = 0; j < rows.length; ++j) - for (i = 0; i < rows[j].length; ++i) - position_block(area, j, rows.length, i, rows[j].length, rows[j][i]); -} - -function position_block(area, row, n_rows, col, n_cols, element) { - let space = AREAS[area]; - let block_size = 60+6; - let padding = 4; - let offset = block_size + padding; - let row_size = (n_rows-1) * offset; - let col_size = (n_cols-1) * offset; - let x = space.x - block_size/2; - let y = space.y - block_size/2; - - if (space.layout_axis === 'X') { - x -= col_size * space.layout_major; - y -= row_size * space.layout_minor; - x += col * offset; - y += row * offset; - } else { - y -= col_size * space.layout_major; - x -= row_size * space.layout_minor; - y += col * offset; - x += row * offset; - } - - element.style.left = (x|0)+"px"; - element.style.top = (y|0)+"px"; -} - -function show_block(element) { - if (element.parentElement !== ui.blocks_element) - ui.blocks_element.appendChild(element); -} - -function hide_block(element) { - if (element.parentElement !== ui.offmap_element) - ui.offmap_element.appendChild(element); -} - -function update_map() { - let overflow = { Lancaster: [], York: [], Rebel: [] }; - let layout = {}; - - document.getElementById("turn_info").textContent = - "Campaign " + game.campaign + - "\nKing: " + block_name(game.king) + - "\nPretender: " + block_name(game.pretender); - - for (let area in AREAS) - layout[area] = { Lancaster: [], York: [] }; - - // Move secret blocks to overflow queue if there are too many in a area - for (let area in AREAS) { - for (let color of [LANCASTER, YORK, REBEL]) { - if (game.secret[color]) { - let max = game.secret[color][area] ? game.secret[color][area][0] : 0; - while (ui.secret[color][area].length > max) { - overflow[color].push(ui.secret[color][area].pop()); - } - } - } - } - - // Add secret blocks if there are too few in a location - for (let area in AREAS) { - for (let color of [LANCASTER, YORK, REBEL]) { - if (game.secret[color]) { - let max = game.secret[color][area] ? game.secret[color][area][0] : 0; - while (ui.secret[color][area].length < max) { - if (overflow[color].length > 0) { - ui.secret[color][area].push(overflow[color].pop()); - } else { - let element = ui.secret[color].offmap.pop(); - show_block(element); - ui.secret[color][area].push(element); - } - } - } - } - } - - // Remove any blocks left in the overflow queue - for (let color of [LANCASTER, YORK, REBEL]) { - while (overflow[color].length > 0) { - let element = overflow[color].pop(); - hide_block(element); - ui.secret[color].offmap.push(element); - } - } - - // Hide formerly known blocks - for (let b in BLOCKS) { - if (!(b in game.known)) { - hide_block(ui.known[b]); - } - } - - // Add secret blocks to layout - for (let area in AREAS) { - for (let color of [LANCASTER, YORK, REBEL]) { - let i = 0, n = 0, m = 0; - if (game.secret[color] && game.secret[color][area]) { - n = game.secret[color][area][0]; - m = game.secret[color][area][1]; - } - for (let element of ui.secret[color][area]) { - if (i++ < n - m) - element.classList.remove("moved"); - else - element.classList.add("moved"); - if (color === REBEL) - layout[area][BLOCKS[game.pretender].owner].push(element); - else - layout[area][color].push(element); - } - } - } - - // Add known blocks to layout - for (let b in game.known) { - let area = game.known[b][0]; - if (area) { - let steps = game.known[b][1]; - let moved = game.known[b][2]; - let element = ui.known[b]; - let color = block_owner(b); - - show_block(element); - layout[area][color].push(element); - update_steps(b, steps, element); - - if (moved) - element.classList.add("moved"); - else - element.classList.remove("moved"); - } - } - - // Layout blocks on map - for (let area in AREAS) { - if (area === POOL) { - layout_blocks("LPool", layout[area].Lancaster, []); - layout_blocks("YPool", layout[area].York, []); - } else if (area === MINOR) { - layout_blocks("LMinor", layout[area].Lancaster, []); - layout_blocks("YMinor", layout[area].York, []); - } else { - layout_blocks(area, layout[area].Lancaster, layout[area].York); - } - } - - for (let where in AREAS) { - if (ui.areas[where]) { - ui.areas[where].classList.remove('highlight'); - ui.areas[where].classList.remove('where'); - } - } - if (game.actions && game.actions.area) - for (let where of game.actions.area) - ui.areas[where].classList.add('highlight'); - if (game.where) - ui.areas[game.where].classList.add('where'); - - for (let b in BLOCKS) { - ui.known[b].classList.remove('highlight'); - ui.known[b].classList.remove('selected'); - } - if (!game.battle) { - if (game.actions && game.actions.block) - for (let b of game.actions.block) - ui.known[b].classList.add('highlight'); - if (game.who) - ui.known[game.who].classList.add('selected'); - } -} - -function update_cards() { - let cards = game.hand; - for (let c = 1; c <= 25; ++c) { - ui.cards[c].classList.remove('enabled'); - if (cards && cards.includes(c)) - ui.cards[c].classList.add('show'); - else - ui.cards[c].classList.remove('show'); - } - - if (player === 'Observer') { - let n = game.hand.length; - for (let c = 1; c <= 7; ++c) - if (c <= n) - ui.card_backs[c].classList.add("show"); - else - ui.card_backs[c].classList.remove("show"); - } - - if (game.actions && game.actions.play) { - for (let c of game.actions.play) - ui.cards[c].classList.add('enabled'); - } - - if (!game.l_card) - document.getElementById("lancaster_card").className = "small_card card_back"; - else - document.getElementById("lancaster_card").className = "small_card " + CARDS[game.l_card].image; - if (!game.y_card) - document.getElementById("york_card").className = "small_card card_back"; - else - document.getElementById("york_card").className = "small_card " + CARDS[game.y_card].image; -} - -function update_battle() { - function fill_cell(name, list, reserve) { - let cell = window[name]; - - ui.present.clear(); - - for (let [block, steps, moved] of list) { - ui.present.add(block); - - if (block === game.who) - ui.battle_block[block].classList.add("selected"); - else - ui.battle_block[block].classList.remove("selected"); - - ui.battle_block[block].classList.remove("highlight"); - ui.battle_menu[block].classList.remove('hit'); - ui.battle_menu[block].classList.remove('fire'); - ui.battle_menu[block].classList.remove('retreat'); - ui.battle_menu[block].classList.remove('pass'); - ui.battle_menu[block].classList.remove('charge'); - ui.battle_menu[block].classList.remove('treachery'); - - if (game.actions && game.actions.block && game.actions.block.includes(block)) - ui.battle_block[block].classList.add("highlight"); - if (game.actions && game.actions.battle_fire && game.actions.battle_fire.includes(block)) - ui.battle_menu[block].classList.add('fire'); - if (game.actions && game.actions.battle_retreat && game.actions.battle_retreat.includes(block)) - ui.battle_menu[block].classList.add('retreat'); - if (game.actions && game.actions.battle_pass && game.actions.battle_pass.includes(block)) - ui.battle_menu[block].classList.add('pass'); - if (game.actions && game.actions.battle_hit && game.actions.battle_hit.includes(block)) - ui.battle_menu[block].classList.add('hit'); - if (game.actions && game.actions.battle_charge && game.actions.battle_charge.includes(block)) - ui.battle_menu[block].classList.add('charge'); - if (game.actions && game.actions.battle_treachery && game.actions.battle_treachery.includes(block)) - ui.battle_menu[block].classList.add('treachery'); - - update_steps(block, steps, ui.battle_block[block], false); - if (reserve) - ui.battle_block[block].classList.add("secret"); - else - ui.battle_block[block].classList.remove("secret"); - if (moved) - ui.battle_block[block].classList.add("moved"); - else - ui.battle_block[block].classList.remove("moved"); - if (reserve) - ui.battle_block[block].classList.remove("known"); - else - ui.battle_block[block].classList.add("known"); - } - - for (let b in BLOCKS) { - if (ui.present.has(b)) { - if (!cell.contains(ui.battle_menu[b])) - cell.appendChild(ui.battle_menu[b]); - } else { - if (cell.contains(ui.battle_menu[b])) - cell.removeChild(ui.battle_menu[b]); - } - } - } - - if (player === LANCASTER) { - fill_cell("FR", game.battle.LR, true); - fill_cell("FA", game.battle.LA, false); - fill_cell("FB", game.battle.LB, false); - fill_cell("FC", game.battle.LC, false); - fill_cell("FD", game.battle.LD, false); - fill_cell("EA", game.battle.YA, false); - fill_cell("EB", game.battle.YB, false); - fill_cell("EC", game.battle.YC, false); - fill_cell("ED", game.battle.YD, false); - fill_cell("ER", game.battle.YR, true); - } else { - fill_cell("ER", game.battle.LR, true); - fill_cell("EA", game.battle.LA, false); - fill_cell("EB", game.battle.LB, false); - fill_cell("EC", game.battle.LC, false); - fill_cell("ED", game.battle.LD, false); - fill_cell("FA", game.battle.YA, false); - fill_cell("FB", game.battle.YB, false); - fill_cell("FC", game.battle.YC, false); - fill_cell("FD", game.battle.YD, false); - fill_cell("FR", game.battle.YR, true); - } -} - -function on_update() { - show_action_button("#undo_button", "undo"); - show_action_button("#pass_button", "pass"); - show_action_button("#end_action_phase_button", "end_action_phase"); - show_action_button("#end_supply_phase_button", "end_supply_phase"); - show_action_button("#end_political_turn_button", "end_political_turn"); - show_action_button("#end_exile_limits_button", "end_exile_limits"); - show_action_button("#end_regroup_button", "end_regroup"); - show_action_button("#end_retreat_button", "end_retreat"); - show_action_button("#eliminate_button", "eliminate"); - show_action_button("#execute_clarence_button", "execute_clarence"); - show_action_button("#execute_exeter_button", "execute_exeter"); - - let king = block_owner(game.king); - document.getElementById("lancaster_vp").textContent = (king === LANCASTER ? KING_TEXT : PRETENDER_TEXT); - document.getElementById("york_vp").textContent = (king === YORK ? KING_TEXT : PRETENDER_TEXT); - - update_cards(); - update_map(); - - if (game.battle) { - document.getElementById("battle_header").textContent = game.battle.title; - document.getElementById("battle_message").textContent = game.battle.flash; - document.getElementById("battle").classList.add("show"); - update_battle(); - } else { - document.getElementById("battle").classList.remove("show"); - } -} - -build_map(); - -drag_element_with_mouse("#battle", "#battle_header"); -scroll_with_middle_mouse("#grid_center", 2); -init_map_zoom(); -init_shift_zoom(); -init_client(["Lancaster", "York"]); -- cgit v1.2.3