diff options
Diffstat (limited to 'play.js')
| -rw-r--r-- | play.js | 763 |
1 files changed, 459 insertions, 304 deletions
@@ -2,7 +2,11 @@ /* global action_button, data, scroll_into_view, send_action, view */ -const SCALE = 1.8033333333333332 +function toggle_pieces() { + document.getElementById("pieces").classList.toggle("hide") +} + +const SCALE = 1.8 const FLN = 0 const GOV = 1 @@ -17,28 +21,26 @@ const BAND = 6 const CADRE = 7 const FRONT = 8 -const UNIT_TYPE_SORT = { - [POL]: 0, - [FR_XX]: 1, - [AL_X]: 2, - [FR_X]: 3, - [EL_X]: 4, - [FRONT]: 5, - [CADRE]: 6, - [BAND]: 7, - [FAILEK]: 8 -} +var FRANCE = data.locations["FRANCE"] +var MOROCCO = data.locations["MOROCCO"] +var TUNISIA = data.locations["TUNISIA"] +var ORAN = data.locations["ORAN"] +var ALGIERS = data.locations["ALGIERS"] +var CONSTANTINE = data.locations["CONSTANTINE"] + +const OUT_OF_PLAY = 0 const DEPLOY = 1 const ELIMINATED = 2 -// const UG = 0 -// const OPS = 1 -// const PTL = 2 -// const OC = 3 -// const BOXES = [UG, OPS, PTL, OC] +const UG = 0 +const OPS = 1 +const PTL = 2 +const OC = 3 const BOX_NAMES = ["UG", "OPS", "PTL", "OC"] +const area_type_names = [ "none", "rural", "urban", "remote", "country" ] + // const area_count = 31 const unit_count = 120 @@ -66,143 +68,139 @@ function set_has(set, item) { // :r !python3 tools/genlayout.py // BEGIN LAYOUT DATA const LAYOUT = { - "Laghouat-OC": [846, 972], - "Laghouat-PTL": [648, 999], - "Laghouat-OPS": [806, 882], - "Laghouat-UG": [631, 896], - "Laghouat-MK": [727, 906], - "Ain Sefra-OC": [465, 1008], - "Ain Sefra-PTL": [365, 1009], - "Ain Sefra-OPS": [485, 927], - "Ain Sefra-UG": [263, 999], - "Ain Sefra-MK": [323, 961], - "Mascara-OC": [523, 815], - "Mascara-PTL": [453, 838], - "Mascara-OPS": [523, 751], - "Mascara-UG": [454, 766], - "Mascara-MK": [440, 714], - "Saida-OC": [379, 883], - "Saida-PTL": [303, 896], - "Saida-OPS": [363, 782], - "Saida-UG": [295, 782], - "Saida-MK": [301, 839], - "Mecheria-OC": [218, 919], - "Mecheria-PTL": [156, 928], - "Mecheria-OPS": [213, 817], - "Mecheria-UG": [153, 828], - "Mecheria-MK": [228, 866], - "Mostaganem-OC": [494, 618], - "Mostaganem-PTL": [436, 567], - "Mostaganem-OPS": [473, 435], - "Mostaganem-UG": [418, 468], - "Mostaganem-MK": [500, 556], - "Sidi Bel Abbes-OC": [368, 639], - "Sidi Bel Abbes-PTL": [301, 680], - "Sidi Bel Abbes-OPS": [338, 545], - "Sidi Bel Abbes-UG": [251, 552], - "Sidi Bel Abbes-MK": [256, 631], - "Tlemcen-OC": [183, 738], - "Tlemcen-PTL": [122, 703], - "Tlemcen-OPS": [183, 661], - "Tlemcen-UG": [112, 629], - "Tlemcen-MK": [130, 556], - "Orleansville-OC": [620, 574], - "Orleansville-PTL": [571, 526], - "Orleansville-OPS": [631, 496], - "Orleansville-UG": [572, 450], - "Orleansville-MK": [631, 436], - "Medea-OC": [751, 491], - "Medea-PTL": [701, 538], - "Medea-OPS": [768, 426], - "Medea-UG": [701, 432], - "Medea-MK": [771, 368], - "Ain Qussera-OC": [696, 794], - "Ain Qussera-PTL": [613, 749], - "Ain Qussera-OPS": [699, 642], - "Ain Qussera-UG": [601, 661], - "Ain Qussera-MK": [655, 689], - "Sidi Aissa-OC": [860, 744], - "Sidi Aissa-PTL": [791, 781], - "Sidi Aissa-OPS": [870, 641], - "Sidi Aissa-UG": [786, 613], - "Sidi Aissa-MK": [769, 731], - "Bougie-OC": [1029, 424], - "Bougie-PTL": [972, 424], - "Bougie-OPS": [1030, 365], - "Bougie-UG": [973, 365], - "Bougie-MK": [1047, 303], - "Bordj Bou Arreridj-OC": [893, 543], - "Bordj Bou Arreridj-PTL": [836, 544], - "Bordj Bou Arreridj-OPS": [893, 485], - "Bordj Bou Arreridj-UG": [837, 485], - "Bordj Bou Arreridj-MK": [945, 539], - "Tizi Ouzou-OC": [903, 411], - "Tizi Ouzou-PTL": [845, 411], - "Tizi Ouzou-OPS": [902, 353], - "Tizi Ouzou-UG": [845, 353], - "Tizi Ouzou-MK": [845, 262], - "Biskra-OC": [1146, 993], - "Biskra-PTL": [1004, 968], - "Biskra-OPS": [1216, 926], - "Biskra-UG": [988, 858], - "Biskra-MK": [1083, 889], - "Batna-OC": [1284, 859], - "Batna-PTL": [1143, 812], - "Batna-OPS": [1303, 781], - "Batna-UG": [1113, 737], - "Batna-MK": [1182, 749], - "Tebessa-OC": [1330, 704], - "Tebessa-PTL": [1249, 688], - "Tebessa-OPS": [1366, 642], - "Tebessa-UG": [1175, 639], - "Tebessa-MK": [1231, 619], - "Barika-OC": [1027, 714], - "Barika-PTL": [954, 737], - "Barika-OPS": [1082, 621], - "Barika-UG": [962, 595], - "Barika-MK": [957, 662], - "Souk Ahras-OC": [1386, 551], - "Souk Ahras-PTL": [1329, 550], - "Souk Ahras-OPS": [1391, 490], - "Souk Ahras-UG": [1327, 488], - "Souk Ahras-MK": [1381, 400], - "Constantine-OC": [1227, 263], - "Constantine-PTL": [1170, 263], - "Constantine-OPS": [1227, 204], - "Constantine-UG": [1170, 204], - "Constantine-MK": [1280, 151], - "Philippeville-OC": [1244, 540], - "Philippeville-PTL": [1251, 456], - "Philippeville-OPS": [1306, 402], - "Philippeville-UG": [1249, 344], - "Philippeville-MK": [1306, 307], - "Setif-OC": [1139, 541], - "Setif-PTL": [1043, 523], - "Setif-OPS": [1164, 376], - "Setif-UG": [1104, 408], - "Setif-MK": [1157, 467], - "Algiers-OC": [742, 282], - "Algiers-PTL": [685, 282], - "Algiers-OPS": [742, 223], - "Algiers-UG": [685, 223], - "Algiers-MK": [771, 168], - "Oran-OC": [319, 415], - "Oran-PTL": [263, 415], - "Oran-OPS": [319, 356], - "Oran-UG": [263, 356], - "Oran-MK": [343, 300], - "Morocco-UG": [87, 1005], - "Tunisia-UG": [1412, 951], - "France-UG": [963, 162], - "France-MK": [1013, 128], + "Laghouat-OC": [848, 974], + "Laghouat-PTL": [650, 1000], + "Laghouat-OPS": [807, 884], + "Laghouat-UG": [632, 898], + "Laghouat-MK": [734, 932], + "Ain Sefra-OC": [466, 1010], + "Ain Sefra-PTL": [366, 1011], + "Ain Sefra-OPS": [486, 929], + "Ain Sefra-UG": [263, 1001], + "Ain Sefra-MK": [403, 952], + "Mascara-OC": [524, 814], + "Mascara-PTL": [454, 840], + "Mascara-OPS": [524, 750], + "Mascara-UG": [455, 767], + "Mascara-MK": [510, 700], + "Saida-OC": [379, 879], + "Saida-PTL": [304, 898], + "Saida-OPS": [364, 763], + "Saida-UG": [296, 784], + "Saida-MK": [360, 822], + "Mecheria-OC": [221, 912], + "Mecheria-PTL": [157, 930], + "Mecheria-OPS": [213, 818], + "Mecheria-UG": [153, 829], + "Mecheria-MK": [205, 867], + "Mostaganem-OC": [495, 619], + "Mostaganem-PTL": [437, 568], + "Mostaganem-OPS": [474, 436], + "Mostaganem-UG": [419, 469], + "Mostaganem-MK": [485, 513], + "Sidi Bel Abbes-OC": [369, 640], + "Sidi Bel Abbes-PTL": [301, 681], + "Sidi Bel Abbes-OPS": [339, 526], + "Sidi Bel Abbes-UG": [252, 533], + "Sidi Bel Abbes-MK": [285, 625], + "Tlemcen-OC": [193, 724], + "Tlemcen-PTL": [122, 704], + "Tlemcen-OPS": [183, 652], + "Tlemcen-UG": [112, 630], + "Tlemcen-MK": [164, 577], + "Orleansville-OC": [630, 495], + "Orleansville-PTL": [565, 460], + "Orleansville-OPS": [622, 420], + "Orleansville-UG": [557, 381], + "Orleansville-MK": [570, 530], + "Medea-OC": [752, 492], + "Medea-PTL": [702, 539], + "Medea-OPS": [769, 427], + "Medea-UG": [702, 432], + "Medea-MK": [700, 485], + "Ain Qussera-OC": [698, 795], + "Ain Qussera-PTL": [614, 750], + "Ain Qussera-OPS": [700, 643], + "Ain Qussera-UG": [602, 662], + "Ain Qussera-MK": [685, 695], + "Sidi Aissa-OC": [862, 745], + "Sidi Aissa-PTL": [793, 783], + "Sidi Aissa-OPS": [872, 643], + "Sidi Aissa-UG": [788, 614], + "Sidi Aissa-MK": [800, 680], + "Bougie-OC": [1031, 405], + "Bougie-PTL": [972, 402], + "Bougie-OPS": [1035, 345], + "Bougie-UG": [975, 343], + "Bougie-MK": [1005, 450], + "Bordj Bou Arreridj-OC": [894, 548], + "Bordj Bou Arreridj-PTL": [838, 549], + "Bordj Bou Arreridj-OPS": [895, 490], + "Bordj Bou Arreridj-UG": [838, 490], + "Bordj Bou Arreridj-MK": [952, 505], + "Tizi Ouzou-OC": [900, 412], + "Tizi Ouzou-PTL": [842, 412], + "Tizi Ouzou-OPS": [905, 354], + "Tizi Ouzou-UG": [840, 354], + "Tizi Ouzou-MK": [905, 302], + "Biskra-OC": [1148, 995], + "Biskra-PTL": [1006, 970], + "Biskra-OPS": [1218, 928], + "Biskra-UG": [989, 859], + "Biskra-MK": [1090, 904], + "Batna-OC": [1287, 861], + "Batna-PTL": [1145, 813], + "Batna-OPS": [1306, 783], + "Batna-UG": [1115, 739], + "Batna-MK": [1218, 777], + "Tebessa-OC": [1333, 706], + "Tebessa-PTL": [1251, 690], + "Tebessa-OPS": [1369, 643], + "Tebessa-UG": [1178, 640], + "Tebessa-MK": [1271, 628], + "Barika-OC": [1029, 716], + "Barika-PTL": [955, 739], + "Barika-OPS": [1084, 622], + "Barika-UG": [964, 596], + "Barika-MK": [1001, 657], + "Souk Ahras-OC": [1388, 552], + "Souk Ahras-PTL": [1331, 551], + "Souk Ahras-OPS": [1393, 491], + "Souk Ahras-UG": [1329, 489], + "Souk Ahras-MK": [1383, 401], + "Constantine-OC": [1229, 224], + "Constantine-PTL": [1172, 224], + "Constantine-OPS": [1229, 165], + "Constantine-UG": [1172, 165], + "Constantine-MK": [1200, 280], + "Philippeville-OC": [1246, 541], + "Philippeville-PTL": [1253, 457], + "Philippeville-OPS": [1308, 403], + "Philippeville-UG": [1252, 345], + "Philippeville-MK": [1322, 316], + "Setif-OC": [1141, 542], + "Setif-PTL": [1045, 524], + "Setif-OPS": [1166, 377], + "Setif-UG": [1106, 409], + "Setif-MK": [1119, 473], + "Algiers-OC": [743, 239], + "Algiers-PTL": [686, 239], + "Algiers-OPS": [743, 180], + "Algiers-UG": [686, 180], + "Algiers-MK": [715, 295], + "Oran-OC": [317, 370], + "Oran-PTL": [260, 370], + "Oran-OPS": [317, 311], + "Oran-UG": [260, 311], + "Oran-MK": [290, 425], + "Morocco-UG": [87, 1007], + "Tunisia-UG": [1415, 953], + "France-UG": [985, 175], + "France-MK": [940, 110], } // END LAYOUT DATA let ui = { - board: document.getElementById("map"), - map: document.getElementById("map"), - favicon: document.getElementById("favicon"), - header: document.querySelector("header"), status: document.getElementById("status"), player: [ document.getElementById("role_FLN"), @@ -224,25 +222,24 @@ let ui = { helo_max: document.getElementById("helo_max"), naval: document.getElementById("naval"), border_zone: document.getElementById("border_zone"), - }, + container: document.getElementById("pieces"), tracker: [], drm: [], areas: [], + areas_u: [], area_markers: [], boxes: [], locations: [], zones: [], units: [], - units_holder: document.getElementById("units"), - fln_supply_panel: document.getElementById("fln_supply_panel"), - gov_supply_panel: document.getElementById("gov_supply_panel"), - eliminated_panel: document.getElementById("eliminated_panel"), fln_supply: document.getElementById("fln_supply"), gov_supply: document.getElementById("gov_supply"), eliminated: document.getElementById("eliminated"), } +const LAYOUT_BOX = [] + // remote (1 bit), terrorized (1 bit), gov control (1 bit), fln control (1 bit) const AREA_FLN_CONTROL_SHIFT = 0 @@ -358,16 +355,170 @@ function is_loc_action(x) { return !!(view.actions && view.actions.loc && view.actions.loc.includes(x)) } -let on_init_once = false +// === STACK LAYOUT === + +var stack_cache = [] +var focus = null + +document.querySelector("main").addEventListener("mousedown", evt => { + if (evt.button === 0) + blur_stack() +}) + +function focus_stack(stack) { + if (focus !== stack) { + console.log("FOCUS STACK", stack) + focus = stack + update_map() + return stack.length <= 1 + } + return true +} + +function blur_stack() { + if (focus !== null) { + console.log("BLUR STACK") + focus = null + } + update_map() +} + +function on_click_unit(evt) { + if (evt.button === 0) { + event.stopPropagation() + if (focus_stack(evt.target.my_stack)) + send_action('unit', evt.target.my_id) + } +} + +function on_click_loc(evt) { + if (evt.button === 0) { + let loc = parseInt(evt.target.dataset.loc) + console.log('loc', loc) + if (send_action('loc', loc)) + evt.stopPropagation() + } +} + +function on_focus_loc(evt) { + document.getElementById("status").textContent = data.areas[evt.target.my_id].full_name +} function on_focus_unit(evt) { - document.getElementById("status").textContent = data.units[evt.target.unit].name + document.getElementById("status").textContent = data.units[evt.target.my_id].name } function on_blur(_evt) { document.getElementById("status").textContent = "" } +let LAYOUT_TRACK = [] +let track_count = Array(100).fill(0) + + +function layout_track(track, e) { + let n = track_count[track] + let x = LAYOUT_TRACK[track][0] - 20 + let y = LAYOUT_TRACK[track][1] - 20 + + let dx = 0 + let dy = 41 + + const DIAG = 24 + + if (track === 0) + dx = DIAG, dy = DIAG + else if (track === 29) + dx = -DIAG, dy = DIAG + else if (track === 50) + dx = -DIAG, dy = -DIAG + else if (track === 79) + dx = DIAG, dy = -DIAG + + else if (track >= 30 && track <= 49) + dx = -41, dy = 0 + else if (track >= 51 && track <= 78) + dx = 0, dy = -41 + else if (track >= 80 && track <= 99) + dx = 41, dy = 0 + + e.style.left = x + (dx * n) + "px" + e.style.top = y + (dy * n) + "px" + e.style.zIndex = track * 4 + n + + track_count[track] = n + 1 +} + +function layout_stack(loc_id, box_id) { + let stack_id = loc_id * 4 + box_id + let stack = stack_cache[stack_id] + if (!stack) + stack = stack_cache[stack_id] = [] + + stack.length = 0 + for (let u = 0; u < unit_count; ++u) { + let loc = unit_loc(u) + let box = loc < 6 ? 0 : unit_box(u) + if (loc == loc_id && box === box_id) + stack.push(ui.units[u]) + } + + let z = 1 + let x = LAYOUT_BOX[loc_id * 4 + box_id][0] - 22 + let y = LAYOUT_BOX[loc_id * 4 + box_id][1] - 22 + + let dx = 4 + let dy = -4 + + if (stack === focus) { + if (loc_id === MOROCCO) { + dx = 0 + dy = -45 + } else if (loc_id === TUNISIA) { + dx = 0 + dy = -45 + } else { + switch (box_id) { + case UG: dx = 0, dy = -45; break + case PTL: dx = -45, dy = 0; break + case OPS: dx = 45, dy = 0; break + case OC: dx = 0, dy = 45; break + } + } + } else { + if (loc_id === MOROCCO) { + dx = 4 + dy = -14 + } else if (loc_id === TUNISIA) { + dx = -4 + dy = -14 + } + else if (stack.length < 4) { + dx = 13 + dy = -13 + } + else if (stack.length < 8) { + dx = 8 + dy = -8 + } + } + + // TODO: clamp x,y to fit on map + + for (let e of stack) { + e.my_stack = stack + e.style.left = x + "px" + e.style.top = y + "px" + e.style.zIndex = z++ + x += dx + y += dy + } +} + +// === BUILD UI === + +let on_init_once = false + function build_units() { function build_unit(u) { let side = is_gov_unit(u) ? "gov" : "fln" @@ -377,100 +528,126 @@ function build_units() { elt.addEventListener("mousedown", on_click_unit) elt.addEventListener("mouseenter", on_focus_unit) elt.addEventListener("mouseleave", on_blur) - elt.unit = u - elt.index = UNIT_TYPE_SORT[unit_type(u)] + elt.my_id = u } for (let u = 0; u < unit_count; ++u) { build_unit(u) } } -function on_click_loc(evt) { - if (evt.button === 0) { - let loc = parseInt(evt.target.dataset.loc) - console.log('loc', loc) - if (send_action('loc', loc)) - evt.stopPropagation() - } -} - -function on_click_unit(evt) { - if (evt.button === 0) { - console.log('unit', evt.target.unit, data.units[evt.target.unit]) - send_action('unit', evt.target.unit) - } -} - function create_tracker(i, x, y) { let e = ui.tracker[i] = document.createElement("div") e.dataset.id = i - e.className = "space stack m" - e.style.left = x / SCALE + "px" - e.style.top = y / SCALE + "px" - e.style.width = 85 / SCALE + "px" - e.style.height = 85 / SCALE + "px" - document.getElementById("tracker").appendChild(e) -} - -function create_border_zone(i) { - let e = ui.drm[i] = document.createElement("div") + if (i % 5 === 0) + e.className = "box track5" + else + e.className = "box track1" + e.style.left = x + "px" + e.style.top = y + "px" + e.textContent = i + document.getElementById("decor").appendChild(e) +} + +const DRM_X = 370 +const DRM_Y = 140 +const DRM_DX = 55 +const DRM_DY = 0 + +function create_border_zone(i, label) { + let e = document.createElement("div") e.dataset.id = i - e.className = "space" - e.style.left = (288.2 + (i * 99)) / SCALE + "px" - e.style.top = 396 / SCALE + "px" - e.style.width = 94 / SCALE + "px" - e.style.height = 94 / SCALE + "px" - document.getElementById("drm").appendChild(e) + e.className = "box drm_track" + e.style.left = (DRM_X + i * DRM_DX) + "px" + e.style.top = (DRM_Y + i * DRM_DY) + "px" + e.textContent = label + document.getElementById("boxes").appendChild(e) } const COUNTRY = 4 function create_area(i, _area_id, area_name, _type) { let area_name_css = area_name.replaceAll(' ', '-') - let e = ui.areas[i] = document.querySelector(`#svgmap #areas #${area_name_css}`) + let e = ui.areas[i] = document.querySelector(`#svgmap #${area_name_css}`) + e.dataset.loc = data.areas[i].loc + e.my_id = i + e.addEventListener("mousedown", on_click_loc) + e.addEventListener("mouseenter", on_focus_loc) + e.addEventListener("mouseleave", on_blur) +} + +function create_area_u(i, sel) { + let e = document.querySelector(sel) e.dataset.loc = data.areas[i].loc + e.my_id = i e.addEventListener("mousedown", on_click_loc) + e.addEventListener("mouseenter", on_focus_loc) + e.addEventListener("mouseleave", on_blur) + return e } function create_area_markers(i, area_id, area_name) { - const box_size = 95 / SCALE - let [x, y] = LAYOUT[area_name + '-MK'] + const box_w = 150 + const box_h = 50 + + let layout = LAYOUT[area_name + '-MK'] + if (!layout) + return + + let [x, y] = layout let e = document.createElement("div") e.id = `area-marker-${area_id}` e.dataset.loc = data.areas[i].loc - e.className = "space stack" - e.style.left = x - (box_size / 2) + "px" - e.style.top = y - (box_size / 2) + "px" - e.style.width = box_size + "px" - e.style.height = box_size + "px" - document.getElementById("area_markers").appendChild(e) + e.className = "area_markers" + e.style.left = x - (box_w / 2) + "px" + e.style.top = y - (box_h / 2) + "px" + e.style.width = box_w + "px" + e.style.height = box_h + "px" + document.getElementById("boxes").appendChild(e) ui.area_markers[i] = {} for (let marker of ['remote', 'fln_control', 'gov_control', 'terror', 'oas_active']) { let em = ui.area_markers[i][marker] = document.createElement("div") em.id = `area-marker-${i}-${marker}` - em.className = `counter ${marker}` + em.className = `counter ${marker} hide` e.appendChild(em) } } -function create_box(i, area_id, area_name, box_id) { - const box_size = 90 / SCALE +const box_type_w = [ 38*2+6, 30*2+6, 27*2, 27*2 ] +const box_type_h = [ 30*2+6, 30*2+6, 27*2, 27*2 ] + +function create_box(i, area_id, area_name, box_id, show) { + const box_w = box_type_w[box_id] + const box_h = box_type_h[box_id] + let [x, y] = LAYOUT[area_name + '-' + BOX_NAMES[box_id]] - let e = ui.boxes[i * 4 + box_id] = document.createElement("div") - e.id = `ops-${area_id}-${box_id}` - e.dataset.loc = data.areas[i].loc - e.className = "space stack" - e.addEventListener("mousedown", on_click_loc) - e.style.left = x - (box_size / 2) + "px" - e.style.top = y - (box_size / 2) + "px" - e.style.width = box_size + "px" - e.style.height = box_size + "px" - document.getElementById("boxes").appendChild(e) - return e + LAYOUT_BOX[i * 4 + box_id] = [x, y] + + if (show) { + let sh = document.createElement("div") + sh.className = "box " + BOX_NAMES[box_id].toLowerCase() + " " + area_type_names[data.areas[i].type] + sh.addEventListener("mousedown", on_click_loc) + sh.style.left = x - (box_w / 2) + "px" + sh.style.top = y - (box_h / 2) + "px" + sh.style.width = box_w + "px" + sh.style.height = box_h + "px" + document.getElementById("decor").appendChild(sh) + + let tx = document.createElement("div") + tx.textContent = BOX_NAMES[box_id] + tx.className = "box text" + tx.style.left = x - (box_w/2) + "px" + if (box_id === 0) + tx.style.top = y - 5 + "px" + else + tx.style.top = y - 9 + "px" + tx.style.width = (box_w) + "px" + tx.style.height = 20 + "px" + document.getElementById("decor").appendChild(tx) + } } function on_init() { @@ -479,26 +656,31 @@ function on_init() { on_init_once = true // Tracker - let x = 5 - let y = 5 + let x = 3 + let y = 3 for (let i = 0; i < 100; ++i) { + LAYOUT_TRACK[i] = [x + 22, y + 22] create_tracker(i, x, y) - if (i < 29) { - x += 90 + x += 50 } else if (i < 50) { - y += 90 + y += 50 } else if (i < 79) { - x -= 90 + x -= 50 } else { - y -= 90 + y -= 50 } } // Border Zone DRM - for (let i = 0; i < 4; ++i) { - create_border_zone(i) - } + create_border_zone(0, "0") + create_border_zone(1, "-1") + create_border_zone(2, "-2") + create_border_zone(3, "-3") + + ui.areas_u[ORAN] = create_area_u(ORAN, "#svgmap #Oran-2") + ui.areas_u[ALGIERS] = create_area_u(ALGIERS, "#svgmap #Algiers-2") + ui.areas_u[CONSTANTINE] = create_area_u(CONSTANTINE, "#svgmap #Constantine-2") // Areas for (let i = 0; i < data.areas.length; ++i) { @@ -507,27 +689,15 @@ function on_init() { let type = data.areas[i].type if (type) { create_area(i, area_id, area_name, type) - if (type !== COUNTRY) { // Area markers create_area_markers(i, area_id, area_name) - // Unit Boxes - for (let box_id = 0; box_id < 4; ++box_id) { - create_box(i, area_id, area_name, box_id) - } + for (let box_id = 0; box_id < 4; ++box_id) + create_box(i, area_id, area_name, box_id, true) } else { - let e = create_box(i, area_id, area_name, 0) - - if (area_id === "FRANCE") { - ui.area_markers[i] = {} - let marker = 'oas_active' - let em = ui.area_markers[i][marker] = document.createElement("div") - em.id = `area-marker-${i}-${marker}` - em.className = `counter ${marker}` - em.index = 9 // on top - e.appendChild(em) - } + create_area_markers(i, area_id, area_name) + create_box(i, area_id, area_name, 0, false) } } } @@ -562,90 +732,76 @@ function animate(e, x0, y0, x1, y1) { }) } -Node.prototype.appendChildAnimated = function(e, beforeReferenceNode) { - if (this.contains(e)) - return - const { left: x0, top: y0 } = e.getBoundingClientRect() - - if (!this.hasChildNodes || beforeReferenceNode === undefined) { - this.appendChild(e) - } else { - this.insertBefore(e, beforeReferenceNode) - } - - if (!x0) - return - const { left: x1, top: y1 } = e.getBoundingClientRect() - animate(e, x0, y0, x1, y1) -} - function update_map() { - console.log("VIEW", view) - ui.player[FLN].classList.toggle("active", view.active === "FLN") ui.player[GOV].classList.toggle("active", view.active === "Government") ui.ap.textContent = view.fln_ap ui.psl[FLN].textContent = view.fln_psl ui.psl[GOV].textContent = view.gov_psl - - ui.tracker[view.turn % 100].appendChildAnimated(ui.markers.turn) - ui.tracker[view.fln_ap].appendChildAnimated(ui.markers.fln_ap) - ui.tracker[view.fln_psl].appendChildAnimated(ui.markers.fln_psl) - ui.tracker[view.gov_psl].appendChildAnimated(ui.markers.gov_psl) - ui.tracker[view.air_avail].appendChildAnimated(ui.markers.air_avail) - ui.tracker[view.air_max].appendChildAnimated(ui.markers.air_max) - ui.tracker[view.helo_avail].appendChildAnimated(ui.markers.helo_avail) - ui.tracker[view.helo_max].appendChildAnimated(ui.markers.helo_max) - ui.tracker[view.naval].appendChildAnimated(ui.markers.naval) + + track_count.fill(0) + layout_track(view.turn % 100, ui.markers.turn) + layout_track(view.fln_ap, ui.markers.fln_ap) + layout_track(view.fln_psl, ui.markers.fln_psl) + layout_track(view.gov_psl, ui.markers.gov_psl) + if (view.air_max) + layout_track(view.air_avail, ui.markers.air_avail) + layout_track(view.air_max, ui.markers.air_max) + if (view.helo_max) + layout_track(view.helo_avail, ui.markers.helo_avail) + layout_track(view.helo_max, ui.markers.helo_max) + layout_track(view.naval, ui.markers.naval) // Hide avail markers when no Air / Helo at all ui.markers.air_avail.classList.toggle("hide", !view.air_max) ui.markers.helo_avail.classList.toggle("hide", !view.helo_max) - ui.drm[-view.border_zone_drm].appendChildAnimated(ui.markers.border_zone) + ui.markers.border_zone.style.left = 4 + DRM_X + DRM_DX * (-view.border_zone_drm) + "px" + ui.markers.border_zone.style.top = 4 + DRM_Y + DRM_DY * (-view.border_zone_drm) + "px" + ui.markers.border_zone.classList.toggle("hide", view.border_zone_drm === null) ui.markers.border_zone.classList.toggle("neutralized", !view.border_zone_active) for (let u = 0; u < unit_count; ++u) { let e = ui.units[u] let loc = unit_loc(u) - e.dataset.loc = loc - - if (loc) { - if (loc === DEPLOY) { + switch (loc) { + case OUT_OF_PLAY: + e.remove() + break + case DEPLOY: if (is_gov_unit(u)) - ui.gov_supply.appendChildAnimated(e) + ui.gov_supply.appendChild(e) if (is_fln_unit(u)) - ui.fln_supply.appendChildAnimated(e) - - } else if (loc === ELIMINATED) { - ui.eliminated.appendChildAnimated(e) - } else { - let box_id = unit_box(u) - if (is_area_country(loc)) { - // only single box in France, Morocco and Tunisia - box_id = 0 - } - if (!ui.boxes[loc * 4 + box_id].contains(e)) { - // find position to insert / append node - let children = Array.from(ui.boxes[loc * 4 + box_id].childNodes) - let referenceNode = children.find((er) => er.index > e.index) - ui.boxes[loc * 4 + box_id].appendChildAnimated(e, referenceNode) - } - } - update_unit(e, u) - } else { - e.remove() + ui.fln_supply.appendChild(e) + break + case ELIMINATED: + ui.eliminated.appendChild(e) + break + default: + if (e.parentElement !== ui.container) + ui.container.appendChild(e) + break } + update_unit(e, u) } - // Hide supply panels when empty - /* - ui.fln_supply_panel.classList.toggle("hide", !(ui.fln_supply.childNodes.length - 1)) - ui.gov_supply_panel.classList.toggle("hide", !(ui.gov_supply.childNodes.length - 1)) - ui.eliminated_panel.classList.toggle("hide", !(ui.eliminated.childNodes.length - 1)) - */ + layout_stack(FRANCE, 0) + layout_stack(MOROCCO, 0) + layout_stack(TUNISIA, 0) + + for (let loc = 6; loc < data.areas.length; ++loc) { + layout_stack(loc, 0) + layout_stack(loc, 1) + layout_stack(loc, 2) + layout_stack(loc, 3) + } + + for (let loc of [ ORAN, ALGIERS, CONSTANTINE ]) { + ui.areas_u[loc].classList.toggle("action", is_loc_action(loc)) + ui.areas_u[loc].classList.toggle("target", is_loc_selected(loc)) + } for (let i = 0; i < ui.areas.length; ++i) { let e = ui.areas[i] @@ -674,7 +830,6 @@ function on_update() { // eslint-disable-line no-unused-vars update_map() action_button("quick_setup", "Quick Setup") - action_button("end_deployment", "End Deployment") action_button("roll", "Roll") action_button("raise_fln_psl_1d6", "+1d6 FLN PSL") action_button("lower_gov_psl_1d6", "-1d6 Gov PSL") @@ -708,10 +863,8 @@ function on_update() { // eslint-disable-line no-unused-vars action_button("convert_band_to_failek", "Convert to Failek") action_button("convert_front_to_cadre", "Convert to Cadre") - action_button("end_reinforcement", "End Reinforcement") action_button("change_division_mode", "Change Division Mode") - action_button("end_deployment", "End Deployment") action_button("propaganda", "Propaganda") action_button("strike", "Strike") @@ -746,6 +899,8 @@ function on_update() { // eslint-disable-line no-unused-vars action_button("reduce_front", "Reduce Front") action_button("reduce_failek", "Reduce Failek") + action_button("end_reinforcement", "End Reinforcement") + action_button("end_deployment", "End Deployment") action_button("end_turn", "End Turn") action_button("done", "Done") action_button("undo", "Undo") |