diff options
Diffstat (limited to 'play.js')
| -rw-r--r-- | play.js | 1276 |
1 files changed, 641 insertions, 635 deletions
@@ -1,178 +1,178 @@ -"use strict"; +"use strict" function abs(x) { - return x < 0 ? -x : x; + return x < 0 ? -x : x } // PIECE AND SPACE RANGES -const first_space = 1; -const last_space = 141; -const first_piece = 1; -const last_piece = 151; -const first_leader_box = 145; -const last_leader_box = 167; -function is_leader(p) { return (p >= 1 && p <= 13) || (p >= 87 && p <= 96); } -function is_unit(p) { return (p >= 14 && p <= 86) || (p >= 97 && p <= 151); } -function is_auxiliary(p) { return (p >= 14 && p <= 25) || (p >= 97 && p <= 126); } -function is_drilled_troops(p) { return (p >= 26 && p <= 82) || (p >= 127 && p <= 147); } -function is_indian(p) { return (p >= 14 && p <= 22) || (p >= 97 && p <= 118); } +const first_space = 1 +const last_space = 141 +const first_piece = 1 +const last_piece = 151 +const first_leader_box = 145 +const last_leader_box = 167 +function is_leader(p) { return (p >= 1 && p <= 13) || (p >= 87 && p <= 96) } +function is_unit(p) { return (p >= 14 && p <= 86) || (p >= 97 && p <= 151) } +function is_auxiliary(p) { return (p >= 14 && p <= 25) || (p >= 97 && p <= 126) } +function is_drilled_troops(p) { return (p >= 26 && p <= 82) || (p >= 127 && p <= 147) } +function is_indian(p) { return (p >= 14 && p <= 22) || (p >= 97 && p <= 118) } // Patch up leader/box associations. -const box_from_leader = []; -const leader_from_box = []; +const box_from_leader = [] +const leader_from_box = [] for (let p = 0; p <= last_piece; ++p) - box_from_leader[p] = 0; + box_from_leader[p] = 0 for (let s = first_leader_box; s <= last_leader_box; ++s) { - let p = pieces.findIndex(piece => piece.name === spaces[s].name); - box_from_leader[p] = s; - leader_from_box[s-first_leader_box] = p; + let p = pieces.findIndex(piece => piece.name === spaces[s].name) + box_from_leader[p] = s + leader_from_box[s-first_leader_box] = p } -function leader_box(p) { return box_from_leader[p]; } -function box_leader(s) { return leader_from_box[s-first_leader_box]; } +function leader_box(p) { return box_from_leader[p] } +function box_leader(s) { return leader_from_box[s-first_leader_box] } function is_unit_reduced(p) { - return view.reduced.includes(p); + return view.reduced.includes(p) } function unit_strength(p) { if (is_unit_reduced(p)) - return pieces[p].reduced_strength; - return pieces[p].strength; + return pieces[p].reduced_strength + return pieces[p].strength } function force_strength(ldr) { - let str = 0; - let s = leader_box(ldr); + let str = 0 + let s = leader_box(ldr) for (let p = 1; p <= last_piece; ++p) if (view.location[p] === s) if (is_unit(p)) - str += unit_strength(p); - return str; + str += unit_strength(p) + return str } function stack_strength(stack) { - let str = 0; + let str = 0 for (let i = 0; i < stack.length; ++i) { - let p = stack[i][0]; + let p = stack[i][0] if (p > 0) { if (is_leader(p)) - str += force_strength(p); + str += force_strength(p) else - str += unit_strength(p); + str += unit_strength(p) } } - return str; + return str } function is_supreme_commander(ldr, stack) { // If anyone else is moving from here, we're not supreme anymore! for (let i = 0; i < stack.length; ++i) { - let p = stack[i][0]; + let p = stack[i][0] if (is_leader(p) && p !== ldr) if (force_strength(p) > 0) - return false; + return false } // Otherwise, if we're on top of the stack, we're supreme! for (let i = 0; i < stack.length; ++i) { - let p = stack[i][0]; + let p = stack[i][0] if (is_leader(p)) - return (p === ldr); + return (p === ldr) } - return false; + return false } function check_menu(id, x) { - document.getElementById(id).className = x ? "menu_item checked" : "menu_item unchecked"; + document.getElementById(id).className = x ? "menu_item checked" : "menu_item unchecked" } // LAYOUT AND STYLE OPTIONS -let layout = 0; -let style = "bevel"; -let mouse_focus = 0; +let layout = 0 +let style = "bevel" +let mouse_focus = 0 function set_layout(x) { - layout = x; - window.localStorage[params.title_id + "/layout"] = layout; - check_menu("stack_v", layout === 0); - check_menu("stack_h", layout === 1); - check_menu("stack_d", layout === 2); + layout = x + window.localStorage[params.title_id + "/layout"] = layout + check_menu("stack_v", layout === 0) + check_menu("stack_h", layout === 1) + check_menu("stack_d", layout === 2) if (view) - update_map(); + update_map() } function set_style(x) { - style = x; - window.localStorage[params.title_id + "/style"] = x; - check_menu("style_bevel", style === "bevel"); - check_menu("style_flat", style === "flat"); - let body = document.querySelector("body"); - body.classList.toggle("bevel", style === "bevel"); - body.classList.toggle("flat", style === "flat"); + style = x + window.localStorage[params.title_id + "/style"] = x + check_menu("style_bevel", style === "bevel") + check_menu("style_flat", style === "flat") + let body = document.querySelector("body") + body.classList.toggle("bevel", style === "bevel") + body.classList.toggle("flat", style === "flat") if (view) - update_map(); + update_map() } function set_mouse_focus(x) { if (x === undefined) - mouse_focus = 1 - mouse_focus; + mouse_focus = 1 - mouse_focus else - mouse_focus = x; - window.localStorage[params.title_id + "/mouse_focus"] = mouse_focus; - check_menu("mouse_focus", mouse_focus === 1); + mouse_focus = x + window.localStorage[params.title_id + "/mouse_focus"] = mouse_focus + check_menu("mouse_focus", mouse_focus === 1) } -set_layout(window.localStorage[params.title_id + "/layout"] | 0); -set_style(window.localStorage[params.title_id + "/style"] || "bevel"); -set_mouse_focus(window.localStorage[params.title_id + "/mouse_focus"] | 0); +set_layout(window.localStorage[params.title_id + "/layout"] | 0) +set_style(window.localStorage[params.title_id + "/style"] || "bevel") +set_mouse_focus(window.localStorage[params.title_id + "/mouse_focus"] | 0) -let focus = null; -let focus_box = document.getElementById("focus"); +let focus = null +let focus_box = document.getElementById("focus") // SUPPLY LINE DISPLAY -let showing_supply = false; +let showing_supply = false function show_supply(supply) { - showing_supply = true; + showing_supply = true for (let s = 1; s <= last_space; ++s) { - spaces[s].element.classList.toggle("french_supply", supply.french.includes(s)); - spaces[s].element.classList.toggle("british_supply", supply.british.includes(s)); + spaces[s].element.classList.toggle("french_supply", supply.french.includes(s)) + spaces[s].element.classList.toggle("british_supply", supply.british.includes(s)) } } function hide_supply() { if (showing_supply) { - showing_supply = false; + showing_supply = false for (let s = 1; s <= last_space; ++s) { - spaces[s].element.classList.remove("french_supply"); - spaces[s].element.classList.remove("british_supply"); + spaces[s].element.classList.remove("french_supply") + spaces[s].element.classList.remove("british_supply") } } } -const DEBUG_CONNECTIONS = false; +const DEBUG_CONNECTIONS = false -const RELUCTANT = 0; -const SUPPORTIVE = 1; -const ENTHUSIASTIC = 2; +const RELUCTANT = 0 +const SUPPORTIVE = 1 +const ENTHUSIASTIC = 2 -const EARLY = 0; -const LATE = 1; +const EARLY = 0 +const LATE = 1 -const VP_MARKER = "marker vps "; -const VP10_MARKER = "marker vps vps_10 "; -const PA_MARKER = "marker provincial_assemblies "; -const SEASON_MARKER_FF = "marker season_french_first "; -const SEASON_MARKER_BF = "marker season_british_first "; +const VP_MARKER = "marker vps " +const VP10_MARKER = "marker vps vps_10 " +const PA_MARKER = "marker provincial_assemblies " +const SEASON_MARKER_FF = "marker season_french_first " +const SEASON_MARKER_BF = "marker season_british_first " const SIEGE_MARKER = [ "marker small siege_0", "marker small siege_1", "marker small siege_2", -]; +] const FIELDWORKS_MARKER = [ "marker fieldworks" -]; +] const BRITISH_FORT_NAMES = { "Augusta": "Virginia fortification line", @@ -231,152 +231,152 @@ const INDIAN_ALLIED_NAMES = { // Patch up leader/box associations. for (let s = 1; s < spaces.length; ++s) { if (spaces[s].type === 'leader-box') { - let p = pieces.findIndex(x => x.name === spaces[s].name); - spaces[s].leader = p; - pieces[p].box = s; + let p = pieces.findIndex(x => x.name === spaces[s].name) + spaces[s].leader = p + pieces[p].box = s } } function print(x) { - console.log(JSON.stringify(x, (k,v)=>k==='log'?undefined:v)); + console.log(JSON.stringify(x, (k,v)=>k==='log'?undefined:v)) } function on_focus_card_tip(card_number) { - document.getElementById("tooltip").className = "card show card_" + card_number; + document.getElementById("tooltip").className = "card show card_" + card_number } function on_blur_card_tip() { - document.getElementById("tooltip").classList = "card"; + document.getElementById("tooltip").classList = "card" } function on_focus_last_card() { - console.log("focus", view.last_card); + console.log("focus", view.last_card) if (typeof view.last_card === 'number') { - document.getElementById("tooltip").className = "card show card_" + view.last_card; + document.getElementById("tooltip").className = "card show card_" + view.last_card } } function on_blur_last_card() { - document.getElementById("tooltip").classList = "card"; + document.getElementById("tooltip").classList = "card" } function on_focus_pa_marker() { - on_focus_bpa(view.pa); + on_focus_bpa(view.pa) } function on_focus_bpa(level) { switch (level) { case 0: document.getElementById("status").textContent = - `Reluctant: Max 2 southern & 6 northern provincials. No "Raise Provincial Regiments."`; - break; + `Reluctant: Max 2 southern & 6 northern provincials. No "Raise Provincial Regiments."` + break case 1: document.getElementById("status").textContent = - `Supportive: Max 4 southern & 10 northern provincials.`; - break; + `Supportive: Max 4 southern & 10 northern provincials.` + break case 2: document.getElementById("status").textContent = - `Enthusiastic: Unlimited provincials. No "Stingy Provincial Assembly."`; - break; + `Enthusiastic: Unlimited provincials. No "Stingy Provincial Assembly."` + break } } function on_blur_bpa() { - document.getElementById("status").textContent = ""; + document.getElementById("status").textContent = "" } function on_log_line(text, cn) { - let p = document.createElement("div"); - if (cn) p.className = cn; - p.innerHTML = text; - return p; + let p = document.createElement("div") + if (cn) p.className = cn + p.innerHTML = text + return p } function on_log(text) { - let p = document.createElement("div"); - text = text.replace(/&/g, "&"); - text = text.replace(/</g, "<"); - text = text.replace(/>/g, ">"); + let p = document.createElement("div") + text = text.replace(/&/g, "&") + text = text.replace(/</g, "<") + text = text.replace(/>/g, ">") text = text.replace(/#(\d+)[^\]]*\]/g, - '<span class="tip" onmouseenter="on_focus_card_tip($1)" onmouseleave="on_blur_card_tip()">$&</span>'); + '<span class="tip" onmouseenter="on_focus_card_tip($1)" onmouseleave="on_blur_card_tip()">$&</span>') if (text.match(/^\.h1/)) { - text = text.substring(4); - p.className = 'h1'; + text = text.substring(4) + p.className = 'h1' } if (text.match(/^\.h2/)) { - text = text.substring(4); + text = text.substring(4) if (text === 'France') - p.className = 'h2 france'; + p.className = 'h2 france' else if (text === 'Britain') - p.className = 'h2 britain'; + p.className = 'h2 britain' else - p.className = 'h2'; + p.className = 'h2' } if (text.match(/^\.h3/)) { - text = text.substring(4); - p.className = 'h3'; + text = text.substring(4) + p.className = 'h3' } if (text.match(/^\.assault/)) { - text = "Assault at " + text.substring(9); - p.className = 'h3 assault'; + text = "Assault at " + text.substring(9) + p.className = 'h3 assault' } if (text.match(/^\.battle/)) { - text = "Battle at " + text.substring(8); - p.className = 'h3 battle'; + text = "Battle at " + text.substring(8) + p.className = 'h3 battle' } if (text.match(/^\.siege/)) { - text = "Siege at " + text.substring(7); - p.className = 'h3 siege'; + text = "Siege at " + text.substring(7) + p.className = 'h3 siege' } if (text.match(/^\.raid/)) { - text = "Raid at " + text.substring(6); - p.className = 'h3 raid'; + text = "Raid at " + text.substring(6) + p.className = 'h3 raid' } if (text.match(/^\.b /)) { - text = text.substring(3); - p.className = 'b'; + text = text.substring(3) + p.className = 'b' } if (text.indexOf("\n") < 0) { - p.innerHTML = text; + p.innerHTML = text } else { - text = text.split("\n"); - p.appendChild(on_log_line(text[0])); + text = text.split("\n") + p.appendChild(on_log_line(text[0])) for (let i = 1; i < text.length; ++i) - p.appendChild(on_log_line(text[i], "indent")); + p.appendChild(on_log_line(text[i], "indent")) } - return p; + return p } function show_card_list(id, list) { - document.getElementById(id).classList.remove("hide"); - let body = document.getElementById(id + "_body"); + document.getElementById(id).classList.remove("hide") + let body = document.getElementById(id + "_body") while (body.firstChild) - body.removeChild(body.firstChild); + body.removeChild(body.firstChild) if (list.length === 0) { - body.innerHTML = "<div>None</div>"; + body.innerHTML = "<div>None</div>" } for (let c of list) { - let p = document.createElement("div"); - p.className = "tip"; - p.onmouseenter = () => on_focus_card_tip(c); - p.onmouseleave = on_blur_card_tip; - p.textContent = `#${c} ${cards[c].name} [${cards[c].activation}]`; - body.appendChild(p); + let p = document.createElement("div") + p.className = "tip" + p.onmouseenter = () => on_focus_card_tip(c) + p.onmouseleave = on_blur_card_tip + p.textContent = `#${c} ${cards[c].name} [${cards[c].activation}]` + body.appendChild(p) } } function hide_card_list(id) { - document.getElementById(id).classList.add("hide"); + document.getElementById(id).classList.add("hide") } function on_reply(q, params) { if (q === 'supply') - show_supply(params); + show_supply(params) if (q === 'discard') - show_card_list("discard", params); + show_card_list("discard", params) if (q === 'removed') - show_card_list("removed", params); + show_card_list("removed", params) } let ui = { @@ -430,250 +430,250 @@ let markers = { function toggle_counters() { // Cycle between showing everything, only markers, and nothing. if (ui.map.classList.contains("hide_markers")) { - ui.map.classList.remove("hide_markers"); - ui.map.classList.remove("hide_pieces"); + ui.map.classList.remove("hide_markers") + ui.map.classList.remove("hide_pieces") } else if (ui.map.classList.contains("hide_pieces")) { - ui.map.classList.add("hide_markers"); + ui.map.classList.add("hide_markers") } else { - ui.map.classList.add("hide_pieces"); + ui.map.classList.add("hide_pieces") } } function for_each_piece_in_space(s, fun) { for (let p = 1; p < pieces.length; ++p) if (abs(view.location[p]) === s) - fun(p); + fun(p) } // TOOLTIPS function on_click_space(evt) { if (evt.button === 0) { - hide_supply(); + hide_supply() if (view.actions && view.actions.space && view.actions.space.includes(evt.target.space)) { - event.stopPropagation(); - send_action('space', evt.target.space); + event.stopPropagation() + send_action('space', evt.target.space) } } } -const montcalm_and_co = [ "Montcalm", "Bougainville", "Lévis" ]; -const wolfe_and_co = [ "Amherst", "Forbes", "Wolfe" ]; +const montcalm_and_co = [ "Montcalm", "Bougainville", "Lévis" ] +const wolfe_and_co = [ "Amherst", "Forbes", "Wolfe" ] function is_leader_dead(p) { - let s = abs(view.location[p]); + let s = abs(view.location[p]) if (s) - return false; + return false if (view.british.pool.includes(p)) - return false; + return false if (view.events.once_french_regulars && montcalm_and_co.includes(pieces[p].name)) - return false; + return false if (wolfe_and_co.includes(pieces[p].name)) - return view.events.pitt || view.year >= 1759; - return true; + return view.events.pitt || view.year >= 1759 + return true } function is_leader_in_pool(p) { - return view.british.pool.includes(p); + return view.british.pool.includes(p) } function is_leader_unavailable(p) { - let s = view.location[p]; + let s = view.location[p] if (s) - return false; - return !is_leader_in_pool(p) && !is_leader_dead(p); + return false + return !is_leader_in_pool(p) && !is_leader_dead(p) } function on_focus_space(evt) { - let id = evt.target.space; - let space = spaces[id]; - let text = space.name; + let id = evt.target.space + let space = spaces[id] + let text = space.name if (space.type === 'leader-box') { if (view) { - let p = space.leader; - let s = abs(view.location[p]); + let p = space.leader + let s = abs(view.location[p]) if (!s) { if (is_leader_dead(p)) - text += " (eliminated)"; + text += " (eliminated)" else if (is_leader_in_pool(p)) - text += " (pool)"; + text += " (pool)" else - text += " (unavailable)"; + text += " (unavailable)" } else { - text += " (" + spaces[s].name + ")"; + text += " (" + spaces[s].name + ")" } } } else if (space.type === 'militia-box') { // } else { - let list = []; + let list = [] if (space.type !== 'box') - list.push(space.type); + list.push(space.type) if (space.is_port) - list.push("port"); + list.push("port") if (space.is_fortress) - list.push("fortress"); + list.push("fortress") if (space.department) { if (space.department === 'st_lawrence') list.push("st. lawrence department") else - list.push(space.department + " department"); + list.push(space.department + " department") } if (list.length > 0) - text += " (" + list.join(", ") + ")"; + text += " (" + list.join(", ") + ")" } - ui.status.textContent = text; + ui.status.textContent = text if (DEBUG_CONNECTIONS) { - space.element.classList.add('highlight'); - space.land.forEach(n => spaces[n].element.classList.add('highlight')); - space.river.forEach(n => spaces[n].element.classList.add('highlight')); - space.lakeshore.forEach(n => spaces[n].element.classList.add('highlight')); + space.element.classList.add('highlight') + space.land.forEach(n => spaces[n].element.classList.add('highlight')) + space.river.forEach(n => spaces[n].element.classList.add('highlight')) + space.lakeshore.forEach(n => spaces[n].element.classList.add('highlight')) } } function on_blur_space(evt) { - let id = evt.target.space; - ui.status.textContent = ""; + let id = evt.target.space + ui.status.textContent = "" if (DEBUG_CONNECTIONS) { - spaces.forEach(n => n.element && n.element.classList.remove('highlight')); + spaces.forEach(n => n.element && n.element.classList.remove('highlight')) } } function stack_piece_count(stack) { - let n = 0; + let n = 0 for (let i = 0; i < stack.length; ++i) if (stack[i][0] > 0) - ++n; - return n; + ++n + return n } function blur_stack() { if (focus !== null) { - // console.log("BLUR STACK"); - focus = null; + // console.log("BLUR STACK") + focus = null } - update_map(); + update_map() } function is_small_stack(stk) { - return stk.length <= 1 || (stack_piece_count(stk) === 1 && stk.length <= 2); + return stk.length <= 1 || (stack_piece_count(stk) === 1 && stk.length <= 2) } function focus_stack(stack) { if (focus !== stack) { - // console.log("FOCUS STACK", stack ? stack.name : "null"); - focus = stack; - update_map(); - return is_small_stack(stack); + // console.log("FOCUS STACK", stack ? stack.name : "null") + focus = stack + update_map() + return is_small_stack(stack) } - return true; + return true } document.getElementById("map").addEventListener("mousedown", evt => { if (evt.button === 0) { - hide_supply(); - blur_stack(); + hide_supply() + blur_stack() } -}); +}) function on_click_piece(evt) { if (evt.button === 0) { - hide_supply(); - event.stopPropagation(); + hide_supply() + event.stopPropagation() if (focus_stack(evt.target.my_stack)) { - send_action('piece', evt.target.piece); + send_action('piece', evt.target.piece) } } } function on_click_marker(evt) { if (evt.button === 0) { - hide_supply(); - event.stopPropagation(); - focus_stack(evt.target.my_stack); + hide_supply() + event.stopPropagation() + focus_stack(evt.target.my_stack) } } function on_focus_piece(evt) { - let id = evt.target.piece; - let piece = pieces[id]; - // evt.target.style.zIndex = 300; + let id = evt.target.piece + let piece = pieces[id] + // evt.target.style.zIndex = 300 if (view.reduced.includes(id)) - ui.status.textContent = piece.rdesc; + ui.status.textContent = piece.rdesc else - ui.status.textContent = piece.desc; + ui.status.textContent = piece.desc if (mouse_focus) - focus_stack(evt.target.my_stack); + focus_stack(evt.target.my_stack) } function on_blur_piece(evt) { - let id = evt.target.piece; - let piece = pieces[id]; - // evt.target.style.zIndex = piece.z; - ui.status.textContent = ""; + let id = evt.target.piece + let piece = pieces[id] + // evt.target.style.zIndex = piece.z + ui.status.textContent = "" } function on_focus_leader(evt) { - let id = evt.target.piece; - let piece = pieces[id]; - // evt.target.style.zIndex = 300; - let str = force_strength(id); + let id = evt.target.piece + let piece = pieces[id] + // evt.target.style.zIndex = 300 + let str = force_strength(id) if (str > 0) - ui.status.textContent = piece.desc + " (" + str + " strength)"; + ui.status.textContent = piece.desc + " (" + str + " strength)" else if (is_supreme_commander(id, evt.target.my_stack)) - ui.status.textContent = piece.desc + " (" + stack_strength(evt.target.my_stack) + " strength)"; + ui.status.textContent = piece.desc + " (" + stack_strength(evt.target.my_stack) + " strength)" else - ui.status.textContent = piece.desc; + ui.status.textContent = piece.desc if (mouse_focus) - focus_stack(evt.target.my_stack); + focus_stack(evt.target.my_stack) } function on_blur_leader(evt) { - let id = evt.target.piece; - let piece = pieces[id]; - // evt.target.style.zIndex = piece.z; - ui.status.textContent = ""; + let id = evt.target.piece + let piece = pieces[id] + // evt.target.style.zIndex = piece.z + ui.status.textContent = "" } function is_fortification_marker(marker) { - return marker.type === 'forts' || marker.type === 'forts_uc' || marker.type === 'stockades'; + return marker.type === 'forts' || marker.type === 'forts_uc' || marker.type === 'stockades' } function is_allied_marker(marker) { - return marker.type === 'allied'; + return marker.type === 'allied' } function on_focus_marker(evt) { - let marker = evt.target.marker; - let space = spaces[marker.space_id]; - let name = marker.name; + let marker = evt.target.marker + let space = spaces[marker.space_id] + let name = marker.name if (is_allied_marker(marker)) - name += " (" + INDIAN_ALLIED_NAMES[space.name] + ")"; + name += " (" + INDIAN_ALLIED_NAMES[space.name] + ")" if (is_fortification_marker(marker)) { if (marker.faction === 'british' && space.name in BRITISH_FORT_NAMES) - name += " (" + BRITISH_FORT_NAMES[space.name] + ")"; + name += " (" + BRITISH_FORT_NAMES[space.name] + ")" if (marker.faction === 'french' && space.name in FRENCH_FORT_NAMES) - name += " (" + FRENCH_FORT_NAMES[space.name] + ")"; + name += " (" + FRENCH_FORT_NAMES[space.name] + ")" } - ui.status.textContent = name; + ui.status.textContent = name if (mouse_focus) - focus_stack(evt.target.my_stack); + focus_stack(evt.target.my_stack) } function on_blur_marker(evt) { - let marker = evt.target.marker; - ui.status.textContent = ""; + let marker = evt.target.marker + ui.status.textContent = "" } function on_focus_card(evt) { - let id = evt.target.card; - let card = cards[id]; - ui.status.textContent = `#${id} ${card.name} [${card.activation}]`; + let id = evt.target.card + let card = cards[id] + ui.status.textContent = `#${id} ${card.name} [${card.activation}]` } function on_blur_card(evt) { - ui.status.textContent = ""; + ui.status.textContent = "" } // CARD MENU @@ -685,189 +685,189 @@ const card_action_menu = [ 'construct_stockades', 'construct_forts', 'discard', -]; +] -let current_popup_card = 0; +let current_popup_card = 0 function show_popup_menu(evt, list) { - document.querySelectorAll("#popup div").forEach(e => e.classList.remove('enabled')); + document.querySelectorAll("#popup div").forEach(e => e.classList.remove('enabled')) for (let item of list) { - let e = document.getElementById("menu_" + item); - e.classList.add('enabled'); + let e = document.getElementById("menu_" + item) + e.classList.add('enabled') } - let popup = document.getElementById("popup"); - popup.style.display = 'block'; - popup.style.left = (evt.clientX-50) + "px"; - popup.style.top = (evt.clientY-12) + "px"; - cards[current_popup_card].element.classList.add("selected"); + let popup = document.getElementById("popup") + popup.style.display = 'block' + popup.style.left = (evt.clientX-50) + "px" + popup.style.top = (evt.clientY-12) + "px" + cards[current_popup_card].element.classList.add("selected") } function hide_popup_menu() { - let popup = document.getElementById("popup"); - popup.style.display = 'none'; + let popup = document.getElementById("popup") + popup.style.display = 'none' if (current_popup_card) { - cards[current_popup_card].element.classList.remove("selected"); - current_popup_card = 0; + cards[current_popup_card].element.classList.remove("selected") + current_popup_card = 0 } } function is_card_enabled(card) { if (view.actions) { if (card_action_menu.some(a => view.actions[a] && view.actions[a].includes(card))) - return true; + return true if (view.actions.card && view.actions.card.includes(card)) - return true; + return true } - return false; + return false } function is_card_action(action, card) { - return view.actions && view.actions[action] && view.actions[action].includes(card); + return view.actions && view.actions[action] && view.actions[action].includes(card) } function on_click_card(evt) { - let card = evt.target.card; + let card = evt.target.card if (is_card_action('card', card)) { - send_action('card', card); + send_action('card', card) } else { - let menu = card_action_menu.filter(a => is_card_action(a, card)); + let menu = card_action_menu.filter(a => is_card_action(a, card)) if (menu.length > 0) { - current_popup_card = card; - show_popup_menu(evt, menu); + current_popup_card = card + show_popup_menu(evt, menu) } } } function on_play_event() { - send_action('play_event', current_popup_card); - hide_popup_menu(); + send_action('play_event', current_popup_card) + hide_popup_menu() } function on_activate_force() { - send_action('activate_force', current_popup_card); - hide_popup_menu(); + send_action('activate_force', current_popup_card) + hide_popup_menu() } function on_activate_individually() { - send_action('activate_individually', current_popup_card); - hide_popup_menu(); + send_action('activate_individually', current_popup_card) + hide_popup_menu() } function on_construct_stockades() { - send_action('construct_stockades', current_popup_card); - hide_popup_menu(); + send_action('construct_stockades', current_popup_card) + hide_popup_menu() } function on_construct_forts() { - send_action('construct_forts', current_popup_card); - hide_popup_menu(); + send_action('construct_forts', current_popup_card) + hide_popup_menu() } function on_discard() { - send_action('discard', current_popup_card); - hide_popup_menu(); + send_action('discard', current_popup_card) + hide_popup_menu() } // BUILD UI function build_siege_marker(space_id) { - let list = markers.sieges; - let marker = list.find(e => e.space_id === space_id); + let list = markers.sieges + let marker = list.find(e => e.space_id === space_id) if (marker) - return marker; - marker = { space_id: space_id, name: "Siege", type: "Siege", element: null, level: 0 }; - let elt = marker.element = document.createElement("div"); - elt.marker = marker; - elt.className = SIEGE_MARKER[marker.level]; - elt.addEventListener("mousedown", on_click_marker); - elt.addEventListener("mouseenter", on_focus_marker); - elt.addEventListener("mouseleave", on_blur_marker); - elt.my_size = 36; - list.push(marker); - ui.markers.appendChild(elt); - return marker; + return marker + marker = { space_id: space_id, name: "Siege", type: "Siege", element: null, level: 0 } + let elt = marker.element = document.createElement("div") + elt.marker = marker + elt.className = SIEGE_MARKER[marker.level] + elt.addEventListener("mousedown", on_click_marker) + elt.addEventListener("mouseenter", on_focus_marker) + elt.addEventListener("mouseleave", on_blur_marker) + elt.my_size = 36 + list.push(marker) + ui.markers.appendChild(elt) + return marker } function update_siege_marker(space_id, level) { - let marker = build_siege_marker(space_id); - marker.level = level; - marker.element.className = SIEGE_MARKER[marker.level]; - return marker.element; + let marker = build_siege_marker(space_id) + marker.level = level + marker.element.className = SIEGE_MARKER[marker.level] + return marker.element } function destroy_siege_marker(space_id) { - let list = markers.sieges; - let ix = list.findIndex(e => e.space_id === space_id); + let list = markers.sieges + let ix = list.findIndex(e => e.space_id === space_id) if (ix >= 0) { - list[ix].element.remove(); - list.splice(ix, 1); + list[ix].element.remove() + list.splice(ix, 1) } } function build_fieldworks_marker(space_id) { - let list = markers.fieldworks; - let marker = list.find(e => e.space_id === space_id); + let list = markers.fieldworks + let marker = list.find(e => e.space_id === space_id) if (marker) - return marker.element; - marker = { space_id: space_id, name: "Fieldworks", type: "Fieldworks", element: null }; - let elt = marker.element = document.createElement("div"); - elt.marker = marker; - elt.className = FIELDWORKS_MARKER; - elt.addEventListener("mousedown", on_click_marker); - elt.addEventListener("mouseenter", on_focus_marker); - elt.addEventListener("mouseleave", on_blur_marker); - elt.my_size = 45; - list.push(marker); - ui.markers.appendChild(elt); - return marker.element; + return marker.element + marker = { space_id: space_id, name: "Fieldworks", type: "Fieldworks", element: null } + let elt = marker.element = document.createElement("div") + elt.marker = marker + elt.className = FIELDWORKS_MARKER + elt.addEventListener("mousedown", on_click_marker) + elt.addEventListener("mouseenter", on_focus_marker) + elt.addEventListener("mouseleave", on_blur_marker) + elt.my_size = 45 + list.push(marker) + ui.markers.appendChild(elt) + return marker.element } function destroy_fieldworks_marker(space_id) { - let list = markers.fieldworks; - let ix = list.findIndex(e => e.space_id === space_id); + let list = markers.fieldworks + let ix = list.findIndex(e => e.space_id === space_id) if (ix >= 0) { - list[ix].element.remove(); - list.splice(ix, 1); + list[ix].element.remove() + list.splice(ix, 1) } } function build_faction_marker(space_id, faction, what) { - let list = markers[faction][what]; - let marker = list.find(e => e.space_id === space_id); + let list = markers[faction][what] + let marker = list.find(e => e.space_id === space_id) if (marker) - return marker.element; - marker = { space_id: space_id, name: marker_info[faction][what].name, faction: faction, type: what, element: null }; - let elt = marker.element = document.createElement("div"); - elt.marker = marker; - elt.className = marker_info[faction][what].counter; - elt.addEventListener("mousedown", on_click_marker); - elt.addEventListener("mouseenter", on_focus_marker); - elt.addEventListener("mouseleave", on_blur_marker); + return marker.element + marker = { space_id: space_id, name: marker_info[faction][what].name, faction: faction, type: what, element: null } + let elt = marker.element = document.createElement("div") + elt.marker = marker + elt.className = marker_info[faction][what].counter + elt.addEventListener("mousedown", on_click_marker) + elt.addEventListener("mouseenter", on_focus_marker) + elt.addEventListener("mouseleave", on_blur_marker) if (what === 'raids') - elt.my_size = 36; + elt.my_size = 36 else - elt.my_size = 45; - list.push(marker); - ui.markers.appendChild(elt); - return marker.element; + elt.my_size = 45 + list.push(marker) + ui.markers.appendChild(elt) + return marker.element } function destroy_faction_marker(space_id, faction, what) { - let list = markers[faction][what]; - let ix = list.findIndex(e => e.space_id === space_id); + let list = markers[faction][what] + let ix = list.findIndex(e => e.space_id === space_id) if (ix >= 0) { - list[ix].element.remove(); - list.splice(ix, 1); + list[ix].element.remove() + list.splice(ix, 1) } } function build_space(id) { - let space = spaces[id]; + let space = spaces[id] /* Make space for border */ - let x = space.x; - let y = space.y; - let w = space.w; - let h = space.h; + let x = space.x + let y = space.y + let w = space.w + let h = space.h if (space.type === 'box') { x -= 1; y -= 1; w -= 9; h -= 9; } if (space.type === 'militia-box') { x -= 1; y -= 1; w -= 9; h -= 9; } @@ -875,82 +875,82 @@ function build_space(id) { if (space.type === 'wilderness') { x -= 1; y -= 1; w -= 9; h -= 9; } if (space.type === 'leader-box') { x -= 1; y -= 1; w -= 9; h -= 9; } - space.fstack = []; - space.fstack.name = spaces[id].name + "/french"; - space.bstack = []; - space.bstack.name = spaces[id].name + "/british"; - - let elt = space.element = document.createElement("div"); - elt.space = id; - elt.className = space.type; - elt.style.left = x + "px"; - elt.style.top = y + "px"; - elt.style.width = w + "px"; - elt.style.height = h + "px"; - elt.addEventListener("mousedown", on_click_space); - elt.addEventListener("mouseenter", on_focus_space); - elt.addEventListener("mouseleave", on_blur_space); + space.fstack = [] + space.fstack.name = spaces[id].name + "/french" + space.bstack = [] + space.bstack.name = spaces[id].name + "/british" + + let elt = space.element = document.createElement("div") + elt.space = id + elt.className = space.type + elt.style.left = x + "px" + elt.style.top = y + "px" + elt.style.width = w + "px" + elt.style.height = h + "px" + elt.addEventListener("mousedown", on_click_space) + elt.addEventListener("mouseenter", on_focus_space) + elt.addEventListener("mouseleave", on_blur_space) if (space.type === 'leader-box') - elt.classList.add(pieces[box_leader(id)].faction); + elt.classList.add(pieces[box_leader(id)].faction) - ui.spaces.appendChild(elt); + ui.spaces.appendChild(elt) } function build_leader(id) { - let leader = pieces[id]; - let elt = leader.element = document.createElement("div"); - elt.piece = id; - elt.className = "offmap leader " + leader.faction + " " + leader.square; - elt.addEventListener("mousedown", on_click_piece); - elt.addEventListener("mouseenter", on_focus_leader); - elt.addEventListener("mouseleave", on_blur_leader); - ui.pieces.insertBefore(elt, ui.pieces.firstChild); + let leader = pieces[id] + let elt = leader.element = document.createElement("div") + elt.piece = id + elt.className = "offmap leader " + leader.faction + " " + leader.square + elt.addEventListener("mousedown", on_click_piece) + elt.addEventListener("mouseenter", on_focus_leader) + elt.addEventListener("mouseleave", on_blur_leader) + ui.pieces.insertBefore(elt, ui.pieces.firstChild) } function build_unit(id) { - let unit = pieces[id]; - let elt = unit.element = document.createElement("div"); - elt.piece = id; - elt.className = "offmap unit " + unit.faction + " " + unit.counter; - elt.addEventListener("mousedown", on_click_piece); - elt.addEventListener("mouseenter", on_focus_piece); - elt.addEventListener("mouseleave", on_blur_piece); - ui.pieces.insertBefore(elt, ui.pieces.firstChild); + let unit = pieces[id] + let elt = unit.element = document.createElement("div") + elt.piece = id + elt.className = "offmap unit " + unit.faction + " " + unit.counter + elt.addEventListener("mousedown", on_click_piece) + elt.addEventListener("mouseenter", on_focus_piece) + elt.addEventListener("mouseleave", on_blur_piece) + ui.pieces.insertBefore(elt, ui.pieces.firstChild) } function build_card(id) { - let card = cards[id]; - let elt = card.element = document.createElement("div"); - elt.card = id; - elt.className = "card card_" + id; - elt.addEventListener("click", on_click_card); - elt.addEventListener("mouseenter", on_focus_card); - elt.addEventListener("mouseleave", on_blur_card); - ui.cards.appendChild(elt); + let card = cards[id] + let elt = card.element = document.createElement("div") + elt.card = id + elt.className = "card card_" + id + elt.addEventListener("click", on_click_card) + elt.addEventListener("mouseenter", on_focus_card) + elt.addEventListener("mouseleave", on_blur_card) + ui.cards.appendChild(elt) } for (let c = 1; c < cards.length; ++c) - build_card(c); + build_card(c) for (let s = 1; s < spaces.length; ++s) - build_space(s); + build_space(s) for (let p = 0; p < pieces.length; ++p) if (pieces[p].type === 'leader') - build_leader(p); + build_leader(p) else - build_unit(p); + build_unit(p) -document.getElementById("last_card").addEventListener("mouseenter", on_focus_last_card); -document.getElementById("last_card").addEventListener("mouseleave", on_blur_last_card); +document.getElementById("last_card").addEventListener("mouseenter", on_focus_last_card) +document.getElementById("last_card").addEventListener("mouseleave", on_blur_last_card) // UPDATE UI function is_action_piece(p) { if (view.actions && view.actions.piece && view.actions.piece.includes(p)) - return true; + return true if (view.who === p) - return true; - return false; + return true + return false } const indian_homes = { @@ -977,15 +977,15 @@ const indian_homes = { function is_different_piece(a, b) { if (a > 0 && b > 0) { if (pieces[a].type !== pieces[b].type) - return true; + return true if (pieces[a].type === 'indian') if (indian_homes[pieces[a].name] !== indian_homes[pieces[a].name]) - return true; + return true if (view.reduced.includes(a) !== view.reduced.includes(b)) - return true; - return false; + return true + return false } - return true; + return true } const style_dims = { @@ -1005,144 +1005,144 @@ const style_dims = { }, } -const MINX = 15; -const MINY = 15; -const MAXX = 2550 - 15; +const MINX = 15 +const MINY = 15 +const MAXX = 2550 - 15 // TODO: two or more columns/rows if too many pieces in stack // TODO: separate layout for leader and militia boxes function layout_stack(stack, x, y, dx) { - let dim = style_dims[style]; - let z = (stack === focus) ? 101 : 1; + let dim = style_dims[style] + let z = (stack === focus) ? 101 : 1 - let n = stack.length; - if (n > 32) n = Math.ceil(n / 4); - else if (n > 24) n = Math.ceil(n / 3); - else if (n > 10) n = Math.ceil(n / 2); - let m = Math.ceil(stack.length / n); + let n = stack.length + if (n > 32) n = Math.ceil(n / 4) + else if (n > 24) n = Math.ceil(n / 3) + else if (n > 10) n = Math.ceil(n / 2) + let m = Math.ceil(stack.length / n) // Lose focus if stack is small. if (stack === focus && is_small_stack(stack)) - focus = null; + focus = null if (stack === focus) { - let w, h; + let w, h if (layout === 0) { - h = (dim.width + dim.gap) * (n-1); + h = (dim.width + dim.gap) * (n-1) w = (dim.width + dim.gap) * (m-1) } if (layout === 1) { - h = (dim.width + dim.gap) * (m-1); - w = (dim.width + dim.gap) * (n-1); + h = (dim.width + dim.gap) * (m-1) + w = (dim.width + dim.gap) * (n-1) } if (y - h < MINY) - y = h + MINY; - focus_box.style.top = (y-h-dim.focus_margin) + "px"; + y = h + MINY + focus_box.style.top = (y-h-dim.focus_margin) + "px" if (dx > 0) { if (x + w > MAXX - dim.width) - x = MAXX - dim.width - w; - focus_box.style.left = (x-dim.focus_margin) + "px"; + x = MAXX - dim.width - w + focus_box.style.left = (x-dim.focus_margin) + "px" } else { if (x - w < MINX) - x = w + MINX; - focus_box.style.left = (x-w-dim.focus_margin) + "px"; + x = w + MINX + focus_box.style.left = (x-w-dim.focus_margin) + "px" } - focus_box.style.width = (w+dim.width + 2*dim.focus_margin) + "px"; - focus_box.style.height = (h+dim.width + 2*dim.focus_margin) + "px"; + focus_box.style.width = (w+dim.width + 2*dim.focus_margin) + "px" + focus_box.style.height = (h+dim.width + 2*dim.focus_margin) + "px" } - let start_x = x; - let start_y = y; + let start_x = x + let start_y = y for (let i = stack.length-1; i >= 0; --i, ++z) { - let ii = stack.length - i; - let [p, elt] = stack[i]; - let next_p = i > 0 ? stack[i-1][0] : 0; + let ii = stack.length - i + let [p, elt] = stack[i] + let next_p = i > 0 ? stack[i-1][0] : 0 if (layout === 2 && stack === focus) { - if (y < MINY) y = MINY; - if (x < MINX) x = MINX; - if (x > MAXX - dim.width) x = MAXX - dim.width ; + if (y < MINY) y = MINY + if (x < MINX) x = MINX + if (x > MAXX - dim.width) x = MAXX - dim.width } - let ex = x; - let ey = y; + let ex = x + let ey = y if (p > 0) { if (is_auxiliary(p)) { - ex -= 2; - ey -= 2; + ex -= 2 + ey -= 2 } } else { - ex += Math.floor((45-elt.my_size) / 2); - ey += Math.floor((45-elt.my_size) / 2); + ex += Math.floor((45-elt.my_size) / 2) + ey += Math.floor((45-elt.my_size) / 2) } - elt.style.left = Math.round(ex) + "px"; - elt.style.top = Math.round(ey) + "px"; - elt.style.zIndex = z; + elt.style.left = Math.round(ex) + "px" + elt.style.top = Math.round(ey) + "px" + elt.style.zIndex = z if (p > 0) - pieces[p].z = z; + pieces[p].z = z if (stack === focus || is_small_stack(stack)) { switch (layout) { case 2: // Diagonal if (y <= MINY + 25) { - x -= (dim.width + dim.gap); - y = MINY; - continue; + x -= (dim.width + dim.gap) + y = MINY + continue } if (x <= MINX + 25) { - y -= (dim.width + dim.gap); - x = MINX; - continue; + y -= (dim.width + dim.gap) + x = MINX + continue } if (x >= MAXX - dim.width - 25) { - y -= (dim.width + dim.gap); - x = MAXX - dim.width; - continue; + y -= (dim.width + dim.gap) + x = MAXX - dim.width + continue } if (p > 0) { if (is_leader(p)) { - x += 20; - y -= 20; + x += 20 + y -= 20 } else if (is_indian(p)) { - x -= 20; + x -= 20 // show stripe if (style === 'bevel') - y -= 28; + y -= 28 else - y -= 26; + y -= 26 } else if (is_auxiliary(p)) { - x -= 20; - y -= 20; + x -= 20 + y -= 20 } else { - x += dx * 20; - y -= 20; + x += dx * 20 + y -= 20 } } else { - x += dx * 15; - y -= 15; + x += dx * 15 + y -= 15 } - break; + break case 0: // Vertical - x = start_x + dx * (dim.width + dim.gap) * Math.floor(ii / n); - y = start_y - (dim.width + dim.gap) * (ii % n); - break; + x = start_x + dx * (dim.width + dim.gap) * Math.floor(ii / n) + y = start_y - (dim.width + dim.gap) * (ii % n) + break case 1: // Horizontal - x = start_x + dx * (dim.width + dim.gap) * (ii % n); - y = start_y - (dim.width + dim.gap) * Math.floor(ii / n); - break; + x = start_x + dx * (dim.width + dim.gap) * (ii % n) + y = start_y - (dim.width + dim.gap) * Math.floor(ii / n) + break } } else { for (let k = 0; k <= dim.offset.length; ++k) { if (stack.length > dim.thresh[k]) { - x += dx * dim.offset[k]; - y -= dim.offset[k]; - break; + x += dx * dim.offset[k] + y -= dim.offset[k] + break } } } @@ -1150,317 +1150,323 @@ function layout_stack(stack, x, y, dx) { } function push_stack(stk, pc, elt) { - stk.push([pc, elt]); - elt.my_stack = stk; + stk.push([pc, elt]) + elt.my_stack = stk } function unshift_stack(stk, pc, elt) { - stk.unshift([pc, elt]); - elt.my_stack = stk; + stk.unshift([pc, elt]) + elt.my_stack = stk } function update_space(s) { - let dim = style_dims[style]; - let space = spaces[s]; - let fstack = space.fstack; - let bstack = space.bstack; + let dim = style_dims[style] + let space = spaces[s] + let fstack = space.fstack + let bstack = space.bstack - fstack.length = 0; - bstack.length = 0; + fstack.length = 0 + bstack.length = 0 - let sx = space.x + Math.round(space.w/2) - 24; - let sy = space.y + Math.round(space.h/2) - 24; + let sx = space.x + Math.round(space.w/2) - 24 + let sy = space.y + Math.round(space.h/2) - 24 if (space.type !== 'box' && space.type !== 'militia-box' && space.type !== 'leader-box') sy += 12; // make room for label if (space.type === 'leader-box') - sy = space.y + space.h - 55; + sy = space.y + space.h - 55 function marker(type) { if (view.british[type].includes(s)) - push_stack(bstack, 0, build_faction_marker(s, 'british', type)); + push_stack(bstack, 0, build_faction_marker(s, 'british', type)) else - destroy_faction_marker(s, 'british', type); + destroy_faction_marker(s, 'british', type) if (view.french[type].includes(s)) - push_stack(fstack, 0, build_faction_marker(s, 'french', type)); + push_stack(fstack, 0, build_faction_marker(s, 'french', type)) else - destroy_faction_marker(s, 'french', type); + destroy_faction_marker(s, 'french', type) } if (s in view.sieges) { if (view.british.fortresses.includes(s) || view.british.forts.includes(s)) - push_stack(bstack, 0, update_siege_marker(s, view.sieges[s])); + push_stack(bstack, 0, update_siege_marker(s, view.sieges[s])) else - push_stack(fstack, 0, update_siege_marker(s, view.sieges[s])); + push_stack(fstack, 0, update_siege_marker(s, view.sieges[s])) } else { - destroy_siege_marker(s); + destroy_siege_marker(s) } marker("raids"); // TODO: more than one raid marker? for_each_piece_in_space(s, p => { if (view.location[p] >= 0) { - let pe = pieces[p].element; - pe.classList.remove('offmap'); - pe.classList.remove("inside"); + let pe = pieces[p].element + pe.classList.remove('offmap') + pe.classList.remove("inside") if (view.reduced.includes(p)) - pe.classList.add("reduced"); + pe.classList.add("reduced") else - pe.classList.remove("reduced"); + pe.classList.remove("reduced") if (pieces[p].faction === 'british') - push_stack(bstack, p, pe); + push_stack(bstack, p, pe) else - push_stack(fstack, p, pe); + push_stack(fstack, p, pe) } - }); + }) - marker("stockades"); - marker("forts"); - marker("forts_uc"); - marker("allied"); + marker("stockades") + marker("forts") + marker("forts_uc") + marker("allied") for_each_piece_in_space(s, p => { if (view.location[p] < 0) { - let pe = pieces[p].element; - pe.classList.remove('offmap'); - pe.classList.add("inside"); + let pe = pieces[p].element + pe.classList.remove('offmap') + pe.classList.add("inside") if (view.reduced.includes(p)) - pe.classList.add("reduced"); + pe.classList.add("reduced") else - pe.classList.remove("reduced"); + pe.classList.remove("reduced") if (pieces[p].faction === 'british') - push_stack(bstack, p, pe); + push_stack(bstack, p, pe) else - push_stack(fstack, p, pe); + push_stack(fstack, p, pe) } - }); + }) if (view.amphib.includes(s)) - push_stack(bstack, 0, build_faction_marker(s, 'british', 'amphib')); + push_stack(bstack, 0, build_faction_marker(s, 'british', 'amphib')) else - destroy_faction_marker(s, 'british', 'amphib'); + destroy_faction_marker(s, 'british', 'amphib') - let fw = null; + let fw = null if (view.fieldworks.includes(s)) { - fw = build_fieldworks_marker(s); - fw.my_stack = null; + fw = build_fieldworks_marker(s) + fw.my_stack = null } else { - destroy_fieldworks_marker(s); + destroy_fieldworks_marker(s) } if (fstack.length > 0 && bstack.length > 0) { - layout_stack(bstack, sx - 27, sy, -1); - layout_stack(fstack, sx + 27, sy, 1); + layout_stack(bstack, sx - 27, sy, -1) + layout_stack(fstack, sx + 27, sy, 1) if (fw) { - fw.style.left = (sx) + "px"; - fw.style.top = (sy - dim.width-5) + "px"; + fw.style.left = (sx) + "px" + fw.style.top = (sy - dim.width-5) + "px" } } else { if (fstack.length > 0) { - if (fw) unshift_stack(fstack, 0, fw); - layout_stack(fstack, sx, sy, 1); + if (fw) unshift_stack(fstack, 0, fw) + layout_stack(fstack, sx, sy, 1) } if (bstack.length > 0) { - if (fw) unshift_stack(bstack, 0, fw); - layout_stack(bstack, sx, sy, -1); + if (fw) unshift_stack(bstack, 0, fw) + layout_stack(bstack, sx, sy, -1) } if (fw && fstack.length === 0 && bstack.length === 0) { - fw.style.left = sx + "px"; - fw.style.top = sy + "px"; + fw.style.left = sx + "px" + fw.style.top = sy + "px" } } if (s >= first_leader_box && s <= last_leader_box) { - let p = box_leader(s); - space.element.classList.toggle("dead", is_leader_dead(p)); - space.element.classList.toggle("pool", is_leader_in_pool(p)); - space.element.classList.toggle("unavailable", is_leader_unavailable(p)); + let p = box_leader(s) + space.element.classList.toggle("dead", is_leader_dead(p)) + space.element.classList.toggle("pool", is_leader_in_pool(p)) + space.element.classList.toggle("unavailable", is_leader_unavailable(p)) } if (view.actions && view.actions.space && view.actions.space.includes(s)) - space.element.classList.add("highlight"); + space.element.classList.add("highlight") else - space.element.classList.remove("highlight"); + space.element.classList.remove("highlight") if (view.where === s) - space.element.classList.add("selected"); + space.element.classList.add("selected") else - space.element.classList.remove("selected"); + space.element.classList.remove("selected") } function update_card(id) { - let card = cards[id]; + let card = cards[id] if (is_card_enabled(id)) - card.element.classList.add('enabled'); + card.element.classList.add('enabled') else - card.element.classList.remove('enabled'); + card.element.classList.remove('enabled') if (view.actions && view.actions.card && view.actions.card.includes(id)) - card.element.classList.add('highlight'); + card.element.classList.add('highlight') else - card.element.classList.remove('highlight'); + card.element.classList.remove('highlight') if (view.hand.includes(id)) - card.element.classList.add("show"); + card.element.classList.add("show") else - card.element.classList.remove("show"); + card.element.classList.remove("show") } function update_piece(id) { - let piece = pieces[id]; + let piece = pieces[id] if (view.actions && view.actions.piece && view.actions.piece.includes(id)) - piece.element.classList.add('highlight'); + piece.element.classList.add('highlight') else - piece.element.classList.remove('highlight'); + piece.element.classList.remove('highlight') if (view.activation && view.activation.includes(id)) - piece.element.classList.add('activated'); + piece.element.classList.add('activated') else - piece.element.classList.remove('activated'); + piece.element.classList.remove('activated') if (view.who === id) - piece.element.classList.add('selected'); + piece.element.classList.add('selected') else - piece.element.classList.remove('selected'); + piece.element.classList.remove('selected') } function event_marker(e) { - let element = document.getElementById("event_" + e); + let element = document.getElementById("event_" + e) if (view.events[e]) - element.classList.add("show"); + element.classList.add("show") else - element.classList.remove("show"); + element.classList.remove("show") } function toggle_marker(id, show) { - let element = document.getElementById(id); + let element = document.getElementById(id) if (show) - element.classList.add("show"); + element.classList.add("show") else - element.classList.remove("show"); + element.classList.remove("show") } function update_map() { if (!view) - return; + return // Hide Dead and unused pieces - for_each_piece_in_space(0, p => pieces[p].element.classList.add('offmap')); + for_each_piece_in_space(0, p => pieces[p].element.classList.add('offmap')) for (let i = 1; i < cards.length; ++i) - update_card(i); + update_card(i) for (let i = 1; i < spaces.length; ++i) - update_space(i, false); + update_space(i, false) for (let i = 0; i < pieces.length; ++i) - update_piece(i); + update_piece(i) if (focus && focus.length === 0) - focus = null; + focus = null if (focus === null || layout > 1) - focus_box.className = "hide"; + focus_box.className = "hide" else - focus_box.className = "show"; + focus_box.className = "show" - ui.last_card.className = "card show card_" + view.last_card; + ui.last_card.className = "card show card_" + view.last_card - let sm = document.getElementById("season_marker"); + let sm = document.getElementById("season_marker") if (view.events.quiberon) { if (view.season === EARLY) - sm.className = SEASON_MARKER_BF + "early year_" + view.year; + sm.className = SEASON_MARKER_BF + "early year_" + view.year else - sm.className = SEASON_MARKER_BF + "late year_" + view.year; + sm.className = SEASON_MARKER_BF + "late year_" + view.year } else { if (view.season === EARLY) - sm.className = SEASON_MARKER_FF + "early year_" + view.year; + sm.className = SEASON_MARKER_FF + "early year_" + view.year else - sm.className = SEASON_MARKER_FF + "late year_" + view.year; + sm.className = SEASON_MARKER_FF + "late year_" + view.year } - let vpm = document.getElementById("vp_marker"); + let vpm = document.getElementById("vp_marker") if (view.vp > 20) - vpm.className = VP10_MARKER + "french_vp_10"; + vpm.className = VP10_MARKER + "french_vp_10" else if (view.vp > 10) - vpm.className = VP10_MARKER + "french_vp_" + (view.vp-10); + vpm.className = VP10_MARKER + "french_vp_" + (view.vp-10) else if (view.vp > 0) - vpm.className = VP_MARKER + "french_vp_" + view.vp; + vpm.className = VP_MARKER + "french_vp_" + view.vp else if (view.vp < -20) - vpm.className = VP10_MARKER + "flip british_vp_10"; + vpm.className = VP10_MARKER + "flip british_vp_10" else if (view.vp < -10) - vpm.className = VP10_MARKER + "flip british_vp_" + (-(view.vp+10)); + vpm.className = VP10_MARKER + "flip british_vp_" + (-(view.vp+10)) else if (view.vp < 0) - vpm.className = VP_MARKER + "british_vp_" + (-view.vp); + vpm.className = VP_MARKER + "british_vp_" + (-view.vp) else - vpm.className = VP_MARKER + "vp_0"; + vpm.className = VP_MARKER + "vp_0" - let pam = document.getElementById("pa_marker"); + let pam = document.getElementById("pa_marker") switch (view.pa) { - case RELUCTANT: pam.className = PA_MARKER + "reluctant"; break; - case SUPPORTIVE: pam.className = PA_MARKER + "supportive"; break; - case ENTHUSIASTIC: pam.className = PA_MARKER + "enthusiastic"; break; + case RELUCTANT: + pam.className = PA_MARKER + "reluctant" + break + case SUPPORTIVE: + pam.className = PA_MARKER + "supportive" + break + case ENTHUSIASTIC: + pam.className = PA_MARKER + "enthusiastic" + break } - document.getElementById("british_hand").textContent = view.british.hand; - document.getElementById("french_hand").textContent = view.french.hand; - document.getElementById("deck_size").textContent = view.deck; - - toggle_marker("british_card_held", view.british.held); - toggle_marker("french_card_held", view.french.held); - event_marker("pitt"); - event_marker("diplo"); - event_marker("quiberon"); - event_marker("no_fr_naval"); - event_marker("no_amphib"); - event_marker("cherokees"); - event_marker("cherokee_uprising"); - toggle_marker("event_british_blockhouses", view.events.blockhouses === 'Britain'); - toggle_marker("event_french_blockhouses", view.events.blockhouses === 'France'); - - let demo_fort = view.actions && "demolish_fort" in view.actions; - let demo_stockade = view.actions && "demolish_stockade" in view.actions; - let demo_fieldworks = view.actions && "demolish_fieldworks" in view.actions; + document.getElementById("british_hand").textContent = view.british.hand + document.getElementById("french_hand").textContent = view.french.hand + document.getElementById("deck_size").textContent = view.deck + + toggle_marker("british_card_held", view.british.held) + toggle_marker("french_card_held", view.french.held) + event_marker("pitt") + event_marker("diplo") + event_marker("quiberon") + event_marker("no_fr_naval") + event_marker("no_amphib") + event_marker("cherokees") + event_marker("cherokee_uprising") + toggle_marker("event_british_blockhouses", view.events.blockhouses === 'Britain') + toggle_marker("event_french_blockhouses", view.events.blockhouses === 'France') + + let demo_fort = view.actions && "demolish_fort" in view.actions + let demo_stockade = view.actions && "demolish_stockade" in view.actions + let demo_fieldworks = view.actions && "demolish_fieldworks" in view.actions if (demo_fort || demo_stockade || demo_fieldworks) { - document.getElementById("demolish_menu").classList.remove("hide"); - document.getElementById("demolish_fort").classList.toggle("hide", !demo_fort); - document.getElementById("demolish_stockade").classList.toggle("hide", !demo_stockade); - document.getElementById("demolish_fieldworks").classList.toggle("hide", !demo_fieldworks); + document.getElementById("demolish_menu").classList.remove("hide") + document.getElementById("demolish_fort").classList.toggle("hide", !demo_fort) + document.getElementById("demolish_stockade").classList.toggle("hide", !demo_stockade) + document.getElementById("demolish_fieldworks").classList.toggle("hide", !demo_fieldworks) } else { - document.getElementById("demolish_menu").classList.add("hide"); + document.getElementById("demolish_menu").classList.add("hide") } - action_button("restore", "Restore"); - action_button("northern", "Northern"); - action_button("southern", "Southern"); - action_button("siege", "Siege"); - action_button("assault", "Assault"); - action_button("move", "Move"); - action_button("naval_move", "Naval"); - action_button("eliminate", "Eliminate"); - action_button("pick_up_all", "Pick up all"); - action_button("drop_off", "Drop off"); - action_button("intercept", "Intercept"); - action_button("avoid", "Avoid battle"); - action_button("exchange", "Exchange"); - action_button("stop", "Stop"); + action_button("restore", "Restore") + action_button("northern", "Northern") + action_button("southern", "Southern") + action_button("siege", "Siege") + action_button("assault", "Assault") + action_button("move", "Move") + action_button("naval_move", "Naval") + action_button("eliminate", "Eliminate") + action_button("pick_up_all", "Pick up all") + action_button("drop_off", "Drop off") + action_button("intercept", "Intercept") + action_button("avoid", "Avoid battle") + action_button("exchange", "Exchange") + action_button("stop", "Stop") confirm_action_button("pass_bh_season", "Pass season", "PASS on playing \"Blockhouses\" for the rest of this SEASON?" - ); + ) confirm_action_button("pass_fw_season", "Pass season", "PASS on playing \"Foul Weather\" for the rest of this SEASON?" - ); + ) confirm_action_button("pass_fw_action", "Pass action", "PASS on playing \"Foul Weather\" for the rest of this ACTION PHASE?" - ); + ) - action_button("pass", "Pass"); - action_button("next", "Next"); - action_button("end_move", "End move"); - action_button("undo", "Undo"); + action_button("pass", "Pass") + action_button("next", "Next") + action_button("end_move", "End move") + action_button("undo", "Undo") } function on_update() { - hide_supply(); - update_map(); + hide_supply() + update_map() } // INITIALIZE CLIENT -drag_element_with_mouse("#removed", "#removed_header"); -drag_element_with_mouse("#discard", "#discard_header"); -scroll_with_middle_mouse("main"); +drag_element_with_mouse("#removed", "#removed_header") +drag_element_with_mouse("#discard", "#discard_header") +scroll_with_middle_mouse("main") |