diff options
Diffstat (limited to 'play.js')
| -rw-r--r-- | play.js | 144 |
1 files changed, 96 insertions, 48 deletions
@@ -119,10 +119,10 @@ const space_count = space_names.length const boxes = { "Royalists": [80,428,126,126], "Republicans": [490,428,126,126], - "Catholic Church": [80,786,126,126], - "Social Movements": [490,786,126,126], + "Catholic Church": [80,787,126,126], + "Social Movements": [490,787,126,126], "Fort d'Issy": [844,793,126,126], - "Butte-Aux-Cailles": [1038,660,126,126], + "Butte-Aux-Cailles": [1038,661,126,126], "Père Lachaise": [1206,591,126,126], "Château de Vincennes": [1342,650,126,127], "Press": [294,727,112,112], @@ -131,29 +131,34 @@ const boxes = { "Mont-Valérien": [717,507,112,112], "Versailles HQ": [662,850,101,95], "Prussian Occupied Territory": [1298,353,180,86], - "Red Crisis Track Start": [982,61,90,112], - "Red Crisis Track Escalation": [1072,61,84,112], - "Red Crisis Track Tension": [1156,61,83,112], - "Red Crisis Track Final Crisis": [1239,61,83,112], - "Blue Crisis Track Start": [432,61,88,112], - "Blue Crisis Track Escalation": [348,61,84,112], - "Blue Crisis Track Tension": [265,61,83,112], - "Blue Crisis Track Final Crisis": [182,61,83,112], + "Blue Objective Card": [120,996,272,54], "Red Objective Card": [1114,996,272,54], + "Blue Cube Pool": [180,198,198,55], - "Red Bonus Cubes 1": [1072,22,84,39], - "Red Bonus Cubes 2": [1156,22,83,39], - "Red Bonus Cubes 3": [1239,22,83,39], - "Blue Bonus Cubes 1": [348,22,84,39], - "Blue Bonus Cubes 2": [265,22,83,39], - "Blue Bonus Cubes 3": [182,22,83,39], - "Red Cube Pool 1": [787,330,115,39], - "Red Cube Pool 2": [902,330,136,39], - "Red Cube Pool 3": [1038,330,157,40], - "Prussian Collaboration 1": [600,330,115,39], - "Prussian Collaboration 2": [463,330,136,39], - "Prussian Collaboration 3": [306,330,157,39], + + "Red Crisis Track Start": [982,70,90,112], + "Red Crisis Track Escalation": [1072,70,84,112], + "Red Crisis Track Tension": [1156,70,84,112], + "Red Crisis Track Final Crisis": [1239,70,84,112], + "Blue Crisis Track Start": [432,70,88,112], + "Blue Crisis Track Escalation": [348,70,84,112], + "Blue Crisis Track Tension": [265,70,84,112], + "Blue Crisis Track Final Crisis": [182,70,84,112], + + "Red Bonus Cubes 1": [1072,20,84,40], + "Red Bonus Cubes 2": [1156,20,84,40], + "Red Bonus Cubes 3": [1239,20,84,40], + "Blue Bonus Cubes 1": [348,23,84,40], + "Blue Bonus Cubes 2": [265,23,84,40], + "Blue Bonus Cubes 3": [182,20,84,40], + + "Red Cube Pool 1": [787,340,115,40], + "Red Cube Pool 2": [902,340,100,40], + "Red Cube Pool 3": [1038,340,157,40], + "Prussian Collaboration 1": [600,340,115,40], + "Prussian Collaboration 2": [463,340,100,40], + "Prussian Collaboration 3": [306,340,140,40], } function is_action(action) { @@ -188,6 +193,11 @@ function on_focus_space(evt) { document.getElementById("status").textContent = evt.target.my_name } +function on_focus_piece(evt) { + if (evt.target.my_name) + document.getElementById("status").textContent = evt.target.my_name +} + function on_click_red_momentum(evt) { if (evt.button === 0) { if (send_action('red_momentum')) @@ -237,11 +247,34 @@ function create(t, p, ...c) { return e } +const DIMENSION_CLASS = [ + "institutional", "institutional", "institutional", + "public_opinion", "public_opinion", "public_opinion", + "forts", "forts", "forts", + "paris", "paris", "paris", +] + + function build_user_interface() { let elt - document.getElementById("red_momentum").addEventListener("mousedown", on_click_red_momentum) - document.getElementById("blue_momentum").addEventListener("mousedown", on_click_blue_momentum) + ui.red_momentum.my_name = "Revolutionary Momentum" + ui.red_momentum.onmousedown = on_click_red_momentum + ui.red_momentum.onmouseenter = on_focus_piece + ui.red_momentum.onmouseleave = on_blur + + ui.blue_momentum.my_name = "Prussian Collaboration" + ui.blue_momentum.onmousedown = on_click_blue_momentum + ui.blue_momentum.onmouseenter = on_focus_piece + ui.blue_momentum.onmouseleave = on_blur + + ui.political_vp.my_name = "Political VP" + ui.political_vp.onmouseenter = on_focus_piece + ui.political_vp.onmouseleave = on_blur + + ui.military_vp.my_name = "Military VP" + ui.military_vp.onmouseenter = on_focus_piece + ui.military_vp.onmouseleave = on_blur ui.objective_back = [ create("div", { className: "card card_objective_back" }), @@ -276,20 +309,35 @@ function build_user_interface() { document.getElementById("pieces").appendChild(elt) } - for (let i = 0; i < space_count; ++i) { - let name = space_names[i] + for (let s = 0; s < space_count; ++s) { + let name = space_names[s] let [x, y, w, h] = boxes[name] - elt = ui.spaces[i] = create("div", { - className: "space", - my_space: i, + let cn = "space" + if (s < 12) + cn += " " + DIMENSION_CLASS[s] + if (s === 0 || s === 3 || s === 6 || s === 9) { + cn += " pivotal" + x -= 22 + y -= 23 + w += 46 + h += 46 + } else { + x += 5 + y += 5 + w -= 10 + h -= 10 + } + elt = ui.spaces[s] = create("div", { + className: cn, + my_space: s, my_name: name, onmousedown: on_click_space, onmouseenter: on_focus_space, onmouseleave: on_blur, style: `top: ${y-1}px;left:${x-1}px;width:${w+2}px;height:${h+2}px` }) - space_layout_cube[i] = { x: x + Math.round(w/2), y: y + Math.round(h*1/2) } - space_layout_disc[i] = { x: x + w, y: y + h } + space_layout_cube[s] = { x: x + Math.round(w/2), y: y + Math.round(h*1/2) } + space_layout_disc[s] = { x: x + w, y: y + h } document.getElementById("spaces").appendChild(elt) } } @@ -355,35 +403,35 @@ function sub_space_name(match, p1, offset, string) { } if (true) { if (c <= 2) - return '<img class="s" src="space_institutional.svg">' + n + return '<img class="s" src="images/icon_institutional.svg">' + n if (c <= 5) - return '<img class="s" src="space_public_opinion.svg">' + n + return '<img class="s" src="images/icon_public_opinion.svg">' + n if (c <= 8) - return '<img class="s" src="space_forts.svg">' + n + return '<img class="s" src="images/icon_forts.svg">' + n if (c <= 11) - return '<img class="s" src="space_paris.svg">' + n + return '<img class="s" src="images/icon_paris.svg">' + n } if (true) { if (c <= 2) - return '<span class="institutional"><img class="s" src="space_institutional.svg">' + n + "</span>" + return '<span class="institutional"><img class="s" src="images/icon_institutional.svg">' + n + "</span>" if (c <= 5) - return '<span class="public_opinion"><img class="s" src="space_public_opinion.svg">' + n + "</span>" + return '<span class="public_opinion"><img class="s" src="images/icon_public_opinion.svg">' + n + "</span>" if (c <= 8) - return '<span class="forts"><img class="s" src="space_forts.svg">' + n + "</span>" + return '<span class="forts"><img class="s" src="images/icon_forts.svg">' + n + "</span>" if (c <= 11) - return '<span class="paris"><img class="s" src="space_paris.svg">' + n + "</span>" + return '<span class="paris"><img class="s" src="images/icon_paris.svg">' + n + "</span>" } return n } -const IMG_RC = '<img class="c" src="pieces/red_cube.svg">' -const IMG_BC = '<img class="c" src="pieces/blue_cube.svg">' -const IMG_RD = '<img class="d" src="pieces/red_disc.svg">' -const IMG_BD = '<img class="d" src="pieces/blue_disc.svg">' -const IMG_RM = '<img class="m" src="pieces/red_cylinder.svg">' -const IMG_BM = '<img class="m" src="pieces/blue_cylinder.svg">' -const IMG_MV = '<img class="m" src="pieces/purple_cylinder.svg">' -const IMG_PV = '<img class="m" src="pieces/orange_cylinder.svg">' +const IMG_RC = '<img class="c" src="images/red_cube.svg">' +const IMG_BC = '<img class="c" src="images/blue_cube.svg">' +const IMG_RD = '<img class="d" src="images/red_disc.svg">' +const IMG_BD = '<img class="d" src="images/blue_disc.svg">' +const IMG_RM = '<img class="m" src="images/red_cylinder.svg">' +const IMG_BM = '<img class="m" src="images/blue_cylinder.svg">' +const IMG_MV = '<img class="m" src="images/purple_cylinder.svg">' +const IMG_PV = '<img class="m" src="images/orange_cylinder.svg">' function on_log(text) { let p = document.createElement("div") |