From 429f24464ace64bf5c267f9d4a5fd9ae863c005f Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 1 Jun 2024 14:00:45 +0200 Subject: client --- play.css | 17 ++++-- play.html | 1 + play.js | 201 +++++++++++++++++++++++++++++++++++++++++++++++++------------- 3 files changed, 173 insertions(+), 46 deletions(-) diff --git a/play.css b/play.css index 125388a..334f162 100644 --- a/play.css +++ b/play.css @@ -56,6 +56,18 @@ header.your_turn.saxony { background-color: var(--color-light-saxony); } header.your_turn.pragmatic { background-color: var(--color-light-pragmatic); } header.your_turn.austria { background-color: var(--color-light-austria); } +svg .road { + stroke: dimgray; + stroke-width: 8; + stroke-dasharray: 2 2; +} + +svg .main_road { + stroke: dimgray; + stroke-width: 16; + stroke-dasharray: 4 2; +} + /* COLORS */ :root { @@ -238,11 +250,6 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family: .space.city.Empire { background-color: #e0d796; } */ -.space { - border-color: white; - box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; -} - .space.tip { border-color: lime; box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; diff --git a/play.html b/play.html index 45aa939..2cc2490 100644 --- a/play.html +++ b/play.html @@ -41,6 +41,7 @@
+
diff --git a/play.js b/play.js index 188af9b..4204a13 100644 --- a/play.js +++ b/play.js @@ -5,7 +5,17 @@ */ function toggle_pieces() { - document.getElementById("pieces").classList.toggle("hide") + // Cycle between showing everything, only pieces, and nothing. + let hidden_pieces = ui.pieces_element.classList.contains("hide") + let hidden_markers = ui.markers_element.classList.contains("hide") + if (hidden_pieces && hidden_markers) { + ui.pieces_element.classList.remove("hide") + ui.markers_element.classList.remove("hide") + } else if (hidden_pieces) { + ui.markers_element.classList.add("hide") + } else { + ui.pieces_element.classList.add("hide") + } } /* DATA */ @@ -17,8 +27,7 @@ const P_SAXONY = 3 const P_PRAGMATIC = 4 const P_AUSTRIA = 5 -const cities = data.cities -const last_city = cities.name.length - 1 +const last_city = data.cities.name.length - 1 const ELIMINATED = data.cities.name.length const REMOVED = ELIMINATED + 1 @@ -35,6 +44,79 @@ const power_name = [ "France", "Bavaria", "Prussia", "Saxony", "Pragmatic", "Aus const all_powers = [ 0, 1, 2, 3, 4, 5 ] +const all_power_generals = [ + [ 0, 1, 2, 3, 4 ], + [ 5 ], + [ 6, 7, 8, 9 ], + [ 10 ], + [ 11, 12, 13 ], + [ 14, 15, 16, 17, 18, 19 ], +] + +const all_power_trains = [ + [ 20, 21 ], + [ 22 ], + [ 23, 24 ], + [ 25 ], + [ 26 ], + [ 27, 28, 29 ], +] + +const piece_power = [ + P_FRANCE, P_FRANCE, P_FRANCE, P_FRANCE, P_FRANCE, + P_BAVARIA, + P_PRUSSIA, P_PRUSSIA, P_PRUSSIA, P_PRUSSIA, + P_SAXONY, + P_PRAGMATIC, P_PRAGMATIC, P_PRAGMATIC, + P_AUSTRIA, P_AUSTRIA, P_AUSTRIA, P_AUSTRIA, P_AUSTRIA, P_AUSTRIA, + P_FRANCE, P_FRANCE, + P_BAVARIA, + P_PRUSSIA, P_PRUSSIA, + P_SAXONY, + P_PRAGMATIC, + P_AUSTRIA, P_AUSTRIA, P_AUSTRIA, + P_AUSTRIA, P_AUSTRIA +] + +const piece_abbr = [ + "F1", "F2", "F3", "F4", "F5", + "B1", + "P1", "P2", "P3", "P4", + "S1", + "PA1", "PA2", "PA3", + "A1", "A2", "A3", "A4", "A5", "A6", +] + +const piece_name = [ + "Moritz", + "Belle-Isle", + "Broglie", + "Maillebois", + "Noailles", + "Törring", + "Friedrich", + "Schwerin", + "Leopold", + "Dessauer", + "Rutowski", + "George II", + "Cumberland", + "Earl of Stair", + "Karl", + "Traun", + "Khevenhüller", + "Batthyány", + "Neipperg", + "Arenberg", + "supply train", "supply train", + "supply train", + "supply train", "supply train", + "supply train", + "supply train", + "supply train", "supply train", "supply train", + "hussars", "hussars", +] + let suit_class = [ "spades", "clubs", "hearts", "diamonds", "reserve" ] let suit_letter = [ "S", "C", "H", "D", "R" ] @@ -50,6 +132,35 @@ function to_value(c) { return c & 15 } +/* SHOW PATHS */ + +const svgNS = "http://www.w3.org/2000/svg" + +function make_road(c1, c2, type) { + let e = document.createElementNS(svgNS, "line") + e.setAttribute("class", type) + let x1 = data.cities.x[c1] + let y1 = data.cities.y[c1] + let x2 = data.cities.x[c2] + let y2 = data.cities.y[c2] + + let v = Math.hypot(x2 - x1, y2 - y1) + let dx = (x2 - x1) / v + let dy = (y2 - y1) / v + let r = 18 + x1 += r * dx + y1 += r * dy + x2 -= r * dx + y2 -= r * dy + + e.setAttribute("x1", x1) + e.setAttribute("y1", y1) + e.setAttribute("x2", x2) + e.setAttribute("y2", y2) + document.getElementById("roads").appendChild(e) +} + + /* PANEL ORDER */ const panel_order = [ P_FRANCE, P_BAVARIA, P_PRUSSIA, P_SAXONY, P_PRAGMATIC, P_AUSTRIA, P_AUSTRIA+1 ] @@ -328,21 +439,19 @@ function on_init() { ui.political[fc] = make_political_card(fc) for (let a = 0; a <= last_city; ++a) { - let e = ui.cities[a] = document.createElement("div") - let x = cities.x[a] - let y = cities.y[a] + let e = (ui.cities[a] = document.createElement("div")) + let x = data.cities.x[a] + let y = data.cities.y[a] if (set_has(data.type.major_fortress, a)) { e.className = "space major_fortress" x -= 16 + 6 + 4 y -= 16 + 6 + 4 - } - else if (set_has(data.type.minor_fortress, a)) { + } else if (set_has(data.type.minor_fortress, a)) { e.className = "space minor_fortress" x -= 14 + 5 + 4 y -= 14 + 5 + 4 - } - else if (set_has(data.type.box, a)) { + } else if (set_has(data.type.box, a)) { e.className = "space box" if (data.cities.name[a] === "England") { e.className = "space box england" @@ -352,22 +461,30 @@ function on_init() { x -= 22 + 4 y -= 22 + 4 } - } - else { + } else { e.className = "space city" x -= 9 + 5 + 4 y -= 9 + 5 + 4 } - if (set_has(data.country.Austria, a)) e.classList.add("country_austria") - if (set_has(data.country.France, a)) e.classList.add("country_france") - if (set_has(data.country.Prussia, a)) e.classList.add("country_prussia") - if (set_has(data.country.Netherlands, a)) e.classList.add("country_netherlands") - if (set_has(data.country.Silesia, a)) e.classList.add("country_silesia") - if (set_has(data.country.Saxony, a)) e.classList.add("country_saxony") - if (set_has(data.country.Bavaria, a)) e.classList.add("country_bavaria") - if (set_has(data.country.Poland, a)) e.classList.add("country_poland") - if (set_has(data.country.Empire, a)) e.classList.add("country_empire") + if (set_has(data.country.Austria, a)) + e.classList.add("country_austria") + if (set_has(data.country.France, a)) + e.classList.add("country_france") + if (set_has(data.country.Prussia, a)) + e.classList.add("country_prussia") + if (set_has(data.country.Netherlands, a)) + e.classList.add("country_netherlands") + if (set_has(data.country.Silesia, a)) + e.classList.add("country_silesia") + if (set_has(data.country.Saxony, a)) + e.classList.add("country_saxony") + if (set_has(data.country.Bavaria, a)) + e.classList.add("country_bavaria") + if (set_has(data.country.Poland, a)) + e.classList.add("country_poland") + if (set_has(data.country.Empire, a)) + e.classList.add("country_empire") register_action(e, "space", a) @@ -383,6 +500,18 @@ function on_init() { sort_power_panel(false) + // TOD: debug road network + if (0) { + for (let a = 0; a <= last_city; ++a) { + for (let b of data.cities.main_roads[a]) + if (a < b) + make_road(a, b, "main_road") + for (let b of data.cities.roads[a]) + if (a < b) + make_road(a, b, "road") + } + } + update_favicon() } @@ -423,7 +552,7 @@ function on_blur_city() { } function on_focus_piece(evt) { - ui.status.textContent = piece_tooltip_name[evt.target.my_id] + ui.status.textContent = piece_name[evt.target.my_id] } function on_blur_piece() { @@ -588,10 +717,9 @@ function create_conquest(style, s) { function update_favicon() { let favicon = document.querySelector('link[rel="icon"]') switch (params.role) { - case "Frederick": favicon.href = "favicon/favicon_frederick.png"; break - case "Elisabeth": favicon.href = "favicon/favicon_elisabeth.png"; break - case "Maria Theresa": favicon.href = "favicon/favicon_maria_theresa.png"; break - case "Pompadour": favicon.href = "favicon/favicon_pompadour.png"; break + case "Frederick": favicon.href = "favicon/fritz.png"; break + case "Maria Theresa": favicon.href = "favicon/maria.png"; break + case "Louis XV": favicon.href = "favicon/louis.png"; break } } @@ -706,8 +834,11 @@ function on_update() { for (let v = 16; v >= 0; --v) action_button_with_argument("value", v, v) - for (let p = 0; p < 24; ++p) - action_button_with_argument("detach", p, "Detach " + piece_button_name[p]) + for (let p = 0; p < 20; ++p) { + action_button_with_argument("detach", p, "Detach " + piece_abbr[p]) + action_button_with_argument("promote", p, "Promote " + piece_abbr[p]) + action_button_with_argument("demote", p, "Demote " + piece_abbr[p]) + } action_button("take", "Take") action_button("give", "Give") @@ -737,21 +868,9 @@ function on_update() { /* LOG */ -const piece_log_name = [ -] - -const piece_power = [ -] - -const piece_button_name = [ -] - -const piece_tooltip_name = [ -] - function sub_piece(match, p1) { let x = p1 | 0 - let n = piece_log_name[x] + let n = piece_name[x] let p = power_class[piece_power[x]] return `${n}` } -- cgit v1.2.3