"use strict" const ELIMINATED = 0 const REINFORCEMENTS = 100 const AVAILABLE_P1 = 101 const AVAILABLE_P2 = 102 const BLOWN = 103 const last_corps = 22 const piece_count = 39 const first_hex = 1000 const last_hex = 4041 function find_piece(name) { let id = data.pieces.findIndex(pc => pc.name === name) if (id < 0) throw new Error("PIECE NOT FOUND: " + name) return id } for (let info of data.reinforcements) info.list = info.list.map(name => find_piece(name)) let yoff = 1555 let xoff = 36 let hex_dx = 58.67 let hex_dy = 68 let hex_r = 56 >> 1 function set_has(set, item) { if (!set) return false let a = 0 let b = set.length - 1 while (a <= b) { let m = (a + b) >> 1 let x = set[m] if (item < x) b = m - 1 else if (item > x) a = m + 1 else return true } return false } const FRENCH = "French" const COALITION = "Coalition" const TURN_X = 20 - 70 + 35 + 8 const TURN_Y = 1745 const TURN_DX = 70 const REINF_OFFSET = { 1015: [ hex_dx/2, hex_dy * 3/4 ], 1018: [ -hex_dx/2, hex_dy * 3/4 ], 1020: [ -hex_dx/2, hex_dy * 3/4 ], 3000: [ -hex_dx/2, 0 ], 4015: [ 0, -hex_dy * 3/8 ], } let ui = { hexes: new Array(last_hex+1).fill(null), sides: new Array((last_hex+1)*3).fill(null), hex_x: new Array(last_hex+1).fill(0), hex_y: new Array(last_hex+1).fill(0), pieces: [ document.getElementById("french_hq_1"), document.getElementById("french_hq_2"), document.getElementById("french_hq_3"), document.getElementById("anglo_hq_1"), document.getElementById("prussian_hq_1"), document.getElementById("french_corps_1"), document.getElementById("french_corps_2"), document.getElementById("french_corps_3"), document.getElementById("french_corps_4"), document.getElementById("french_corps_5"), document.getElementById("french_corps_6"), document.getElementById("french_corps_7"), document.getElementById("french_corps_8"), document.getElementById("anglo_corps_1"), document.getElementById("anglo_corps_2"), document.getElementById("anglo_corps_3"), document.getElementById("anglo_corps_4"), document.getElementById("anglo_corps_5"), document.getElementById("prussian_corps_1"), document.getElementById("prussian_corps_2"), document.getElementById("prussian_corps_3"), document.getElementById("prussian_corps_4"), document.getElementById("prussian_corps_5"), document.getElementById("french_detachment_1"), document.getElementById("french_detachment_2"), document.getElementById("french_detachment_3"), document.getElementById("french_detachment_4"), document.getElementById("french_detachment_5"), document.getElementById("french_detachment_6"), document.getElementById("anglo_detachment_1"), document.getElementById("anglo_detachment_2"), document.getElementById("anglo_detachment_3"), document.getElementById("anglo_detachment_4"), document.getElementById("prussian_detachment_1"), document.getElementById("prussian_detachment_2"), document.getElementById("prussian_detachment_3"), document.getElementById("prussian_detachment_4"), document.getElementById("prussian_detachment_5"), document.getElementById("prussian_detachment_6"), ], stack: new Array(last_hex+1).fill(0), } function toggle_pieces() { document.getElementById("pieces").classList.toggle("hide") } function on_blur(evt) { document.getElementById("status").textContent = "" } function on_focus_hex(evt) { document.getElementById("status").textContent = "Hex " + evt.target.my_name } function on_focus_piece(evt) { document.getElementById("status").textContent = evt.target.my_name } function on_click_action(evt) { if (evt.button === 0) { if (send_action(evt.target.my_action, evt.target.my_id)) evt.stopPropagation() if (evt.target.my_action_2) if (send_action(evt.target.my_action_2, evt.target.my_id)) evt.stopPropagation() } } function toggle_pieces() { document.getElementById("pieces").classList.toggle("hide") } function build_hexes() { for (let row = 0; row < data.map.rows; ++row) { for (let col = 0; col < data.map.cols; ++col) { let hex_id = first_hex + 100 * row + col let hex_x = ui.hex_x[hex_id] = Math.floor(xoff + hex_dx * (col + (row & 1) * 0.5 + 0.5)) let hex_y = ui.hex_y[hex_id] = Math.floor(yoff - hex_dy * 3 / 4 * row + hex_dy/2) let hex = ui.hexes[hex_id] = document.createElement("div") hex.className = "hex" hex.style.left = (hex_x - hex_r) + "px" hex.style.top = (hex_y - hex_r) + "px" hex.style.width = (hex_r * 2) + "px" hex.style.height = (hex_r * 2) + "px" hex.onmousedown = on_click_action hex.onmouseenter = on_focus_hex hex.onmouseleave = on_blur hex.my_action = "hex" hex.my_action_2 = "stop_hex" hex.my_id = hex_id if (data.map.names[hex_id]) hex.my_name = String(hex_id) + " (" + data.map.names[hex_id] + ")" else hex.my_name = String(hex_id) document.getElementById("hexes").appendChild(hex) // for (let s = 0; s < 3; ++s) { let side_id = (hex_id << 2) + s let elt = ui.sides[side_id] = document.createElement("div") elt.className = "hexside + s" + s elt.style.left = (hex_x) + "px" elt.style.top = (hex_y) + "px" document.getElementById("hexes").appendChild(elt) } } } for (let p = 0; p < ui.pieces.length; ++p) { ui.pieces[p].onmousedown = on_click_action ui.pieces[p].onmouseenter = on_focus_piece ui.pieces[p].onmouseleave = on_blur ui.pieces[p].my_action = "piece" ui.pieces[p].my_id = p ui.pieces[p].my_name = data.pieces[p].name } } function is_action(action, arg) { if (arg === undefined) return !!(view.actions && view.actions[action] === 1) return !!(view.actions && view.actions[action] && set_has(view.actions[action], arg)) } function find_hex_side(a, b) { if (a > b) return find_hex_side(b, a) if (b === a + 1) return (a << 2) + 0 if ((a/100) & 1) { if (b === a + 101) return (a << 2) + 1 if (b === a + 100) return (a << 2) + 2 } else { if (b === a + 100) return (a << 2) + 1 if (b === a + 99) return (a << 2) + 2 } return -1 } function find_reinforcement_hex(who) { for (let info of data.reinforcements) for (let p of info.list) if (p === who) return info.hex return REINFORCEMENTS } function find_reinforcement_z(who) { for (let info of data.reinforcements) { let n = 0 for (let p of info.list) { if (p === who) return n if ((view.pieces[p] >> 1) === REINFORCEMENTS) ++n } } return 0 } function on_update() { ui.stack.fill(0) for (let row = 0; row < data.map.rows; ++row) { for (let col = 0; col < data.map.cols; ++col) { let id = first_hex + row * 100 + col ui.hexes[id].classList.toggle("action", is_action("hex", id) || is_action("stop_hex", id)) ui.hexes[id].classList.toggle("stop", is_action("stop_hex", id)) } } for (let id = 0; id < piece_count; ++id) { let hex = view.pieces[id] >> 1 let z = 0 let s = 0 if (hex > BLOWN && hex < first_hex) hex -= BLOWN if (hex >= first_hex || hex === REINFORCEMENTS) { // ON MAP ui.pieces[id].classList.remove("hide") ui.pieces[id].classList.toggle("flip", (view.pieces[id] & 1) === 1) let x, y if (hex === REINFORCEMENTS) { hex = find_reinforcement_hex(id) s = find_reinforcement_z(id) z = 4 - s x = ui.hex_x[hex] + s * 24 y = ui.hex_y[hex] + s * 18 if (REINF_OFFSET[hex]) { x += REINF_OFFSET[hex][0] y += REINF_OFFSET[hex][1] } } else { s = z = ui.stack[hex]++ x = ui.hex_x[hex] - s * 18 y = ui.hex_y[hex] + s * 12 } if (id <= last_corps) { x -= (46>>1) y -= (46>>1) } else { x -= (38>>1) y -= (38>>1) } ui.pieces[id].style.top = y + "px" ui.pieces[id].style.left = x + "px" ui.pieces[id].style.zIndex = z } else if (hex >= AVAILABLE_P1 && hex <= BLOWN) { // OFF MAP DETACHMENTS / LEADERS / REINFORCEMENTS ui.pieces[id].classList.remove("hide") ui.pieces[id].classList.toggle("flip", (view.pieces[id] & 1) === 1) let x = 600 + 40 + ui.stack[hex] * 60 let y = 1650 + 40 + 60 * (hex-AVAILABLE_P1) ui.stack[hex] += 1 ui.pieces[id].style.top = y + "px" ui.pieces[id].style.left = x + "px" ui.pieces[id].style.zIndex = 0 } else if (hex >= 1) { // ON TURN TRACK ui.pieces[id].classList.remove("hide") ui.pieces[id].classList.remove("flip") let x = TURN_X + hex * TURN_DX - ui.stack[hex] * 18 let y = TURN_Y + ui.stack[hex] * 12 ui.stack[hex] += 1 if (id <= last_corps) { x -= (46>>1) y -= (46>>1) } else { x -= (38>>1) y -= (38>>1) } ui.pieces[id].style.top = y + "px" ui.pieces[id].style.left = x + "px" } else { // TODO: ENTRY HEXES // ELIMINATED ui.pieces[id].classList.add("hide") } //if (is_action("piece", id)) z = 101 if (view.target === id) z = 102 if (view.who === id) z = 103 ui.pieces[id].style.zIndex = z ui.pieces[id].classList.toggle("action", is_action("piece", id)) ui.pieces[id].classList.toggle("selected", view.who === id) ui.pieces[id].classList.toggle("target", view.target === id) } if (view.roads) { for (let road of view.roads) { for (let i = 1; i < road.length; ++i) { let id = find_hex_side(road[i-1], road[i]) console.log("id", id) ui.sides[id].classList.add("road") } } } action_button("roll", "Roll") action_button("next", "Next") action_button("done", "Done") action_button("pass", "Pass") action_button("undo", "Undo") } build_hexes() scroll_with_middle_mouse("main")