summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--play.css3
-rw-r--r--play.html20
-rw-r--r--play.js129
3 files changed, 53 insertions, 99 deletions
diff --git a/play.css b/play.css
index 5671132..e9485b7 100644
--- a/play.css
+++ b/play.css
@@ -55,6 +55,9 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) }
box-shadow: 1px 1px 8px #0008;
}
+#map.hide_pieces #pieces { display: none; }
+#map.hide_markers #markers { display: none; }
+
@media (max-width: 800px) {
#tooltip {
top: 0;
diff --git a/play.html b/play.html
index 8379323..3c78e97 100644
--- a/play.html
+++ b/play.html
@@ -18,21 +18,6 @@
<div id="tooltip"></div>
-<menu id="popup">
- <li class="title">CARD
- <li class="separator">
- <li data-action="card_play_event">&#x1f3b4; Play Event
- <li data-action="card_discard_event">&#x274c; Discard for PC action
- <li data-action="card_campaign">&#x1f465; Play Campaign
- <li data-action="card_ops_general">&#x1f464; Activate a General
- <li data-action="card_ops_pc">&#x2b55; Place PC markers
- <li data-action="card_ops_reinforcements">&#x1f6a9; Bring on Reinforcements
- <li data-action="card_ops_queue">&#x231b; Place into Operations Queue
- <li data-action="card_battle_play">&#x1f3b2; Play for +2 DRM
- <li data-action="card_battle_discard">&#x1f3b2; Discard for +1 DRM
- <li data-action="exchange_for_discard">&#x267b; Exchange for Discarded Event
-</menu>
-
<header>
<div id="toolbar">
<details>
@@ -43,7 +28,7 @@
<li><a href="info/cards.html" target="blank">Cards</a>
</menu>
</details>
- <button onclick="toggle_markers()"><img src="/images/earth-america.svg"></button>
+ <button onclick="toggle_counters()"><img src="/images/earth-america.svg"></button>
</div>
</header>
@@ -66,11 +51,12 @@
<div id="log"></div>
</aside>
-<main onclick="hide_popup_menu()">
+<main data-max-zoom="2">
<div id="mapwrap">
<div id="map">
<div id="spaces"></div>
+ <div id="markers"></div>
<div id="pieces"></div>
<div id="war_ends"></div>
<div id="played_british_reinforcements" class="reinforcements"></div>
diff --git a/play.js b/play.js
index 530b40f..3b11b69 100644
--- a/play.js
+++ b/play.js
@@ -5,6 +5,20 @@
*/
// TODO: show "reshuffle" flag next to card deck display
+// TODO: improve animations by having one CU stack per general and one CU stack per space
+
+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")
+ } else if (ui.map.classList.contains("hide_pieces")) {
+ ui.map.classList.add("hide_markers")
+ } else {
+ ui.map.classList.add("hide_pieces")
+ }
+}
+
/* COMMON */
@@ -144,7 +158,9 @@ let ui = {
last_played: document.getElementById("last_played"),
hand: document.getElementById("hand"),
+ map: document.getElementById("map"),
spaces_element: document.getElementById("spaces"),
+ markers_element: document.getElementById("markers"),
pieces_element: document.getElementById("pieces"),
cards: [],
@@ -214,7 +230,6 @@ function on_init() {
e.className = "card card_" + c
if (c > 0) {
e.my_id = c
- e.onclick = on_click_card
register_action(e, "card", c)
}
}
@@ -319,11 +334,7 @@ function show_move_marker(marker, s1, s2) {
marker.style.left = (x|0) - 24 + "px"
marker.style.top = (y|0) - 24 + "px"
marker.style.transform = "rotate(" + (a + Math.PI/2) + "rad)"
- ui.pieces_element.appendChild(marker)
-}
-
-function show_marker(e) {
- ui.pieces_element.appendChild(e)
+ ui.markers_element.appendChild(marker)
}
function toggle_marker(e, cond) {
@@ -331,6 +342,10 @@ function toggle_marker(e, cond) {
show_marker(e)
}
+function show_marker(e) {
+ ui.markers_element.appendChild(e)
+}
+
function show_marker_at(e, x, y) {
show_marker(e)
e.style.left = x - e.my_dx + "px"
@@ -341,9 +356,23 @@ function show_marker_at_xy(e, xy) {
show_marker_at(e, xy[0], xy[1])
}
-function toggle_marker_with_number_at(e, n, x, y) {
+function show_piece(e) {
+ ui.pieces_element.appendChild(e)
+}
+
+function show_piece_at(e, x, y) {
+ show_piece(e)
+ e.style.left = x - e.my_dx + "px"
+ e.style.top = y - e.my_dy + "px"
+}
+
+function show_piece_at_xy(e, xy) {
+ show_piece_at(e, xy[0], xy[1])
+}
+
+function show_piece_with_number_at(e, n, x, y) {
if (n > 0) {
- show_marker(e)
+ show_piece(e)
e.textContent = n
e.style.left = x - e.my_dx + "px"
e.style.top = y - e.my_dy + "px"
@@ -477,13 +506,13 @@ function get_static_bcu(s) {
function layout_all_cu(an, fn, bn, ae, fe, be, pos) {
let [ x, y ] = pos
- toggle_marker_with_number_at(ae, an, x, y)
+ show_piece_with_number_at(ae, an, x, y)
if (an > 0)
x += 30
- toggle_marker_with_number_at(fe, fn, x, y)
+ show_piece_with_number_at(fe, fn, x, y)
if (fn > 0)
x += 30
- toggle_marker_with_number_at(be, bn, x, y)
+ show_piece_with_number_at(be, bn, x, y)
if (bn > 0)
x += 30
// if (an > 0 || fn > 0 || bn > 0) x -= 10
@@ -510,6 +539,7 @@ function on_update() {
ui.last_played.className = "card shrink card_" + view.last_played
+ ui.markers_element.replaceChildren()
ui.pieces_element.replaceChildren()
for (let s = 0; s < data.spaces.length; ++s) {
@@ -518,16 +548,16 @@ function on_update() {
}
if (view.congress === CONTINENTAL_CONGRESS_DISPERSED)
- show_marker_at(ui.congress, data.spaces[view.congress].x, data.spaces[view.congress].y)
+ show_piece_at(ui.congress, data.spaces[view.congress].x, data.spaces[view.congress].y)
else
- show_marker_at(ui.congress, data.spaces[view.congress].x+20, data.spaces[view.congress].y-10)
+ show_piece_at(ui.congress, data.spaces[view.congress].x+20, data.spaces[view.congress].y-10)
if (view.french_navy < 0)
- show_marker_at(ui.french_navy, data.spaces[FRENCH_REINFORCEMENTS].x-65, data.spaces[FRENCH_REINFORCEMENTS].y)
+ show_piece_at(ui.french_navy, data.spaces[FRENCH_REINFORCEMENTS].x-65, data.spaces[FRENCH_REINFORCEMENTS].y)
else if (view.french_navy > 1700)
- show_marker_at_xy(ui.french_navy, data.layout.turn[view.french_navy])
+ show_piece_at_xy(ui.french_navy, data.layout.turn[view.french_navy])
else
- show_marker_at(ui.french_navy, data.layout.sea[view.french_navy][0]-15, data.layout.sea[view.french_navy][1]+42)
+ show_piece_at(ui.french_navy, data.layout.sea[view.french_navy][0]-15, data.layout.sea[view.french_navy][1]+42)
if (view.move && view.move.from !== view.move.to)
show_move_marker(ui.combat, view.move.from, view.move.to)
@@ -628,7 +658,6 @@ function on_update() {
if (view.react && view.react.who === g)
[ x, y ] = ui.layout_react
-
ui.generals[g].classList.toggle("selected", view.selected_general === g)
if (view.move && view.move.who === g) {
@@ -654,7 +683,7 @@ function on_update() {
}
}
- show_marker_at(ui.generals[g], x, y)
+ show_piece_at(ui.generals[g], x, y)
}
for (let i = 0; i < 14; ++i) {
@@ -743,70 +772,6 @@ function on_update() {
}
-/* POPUP MENU */
-
-function show_popup_menu(evt, menu_id, card, title) {
- let menu = document.getElementById(menu_id)
-
- let show = false
- for (let item of menu.querySelectorAll("li")) {
- let action = item.dataset.action
- if (action) {
- if (is_action(action, card)) {
- show = true
- item.classList.add("action")
- item.classList.remove("disabled")
- item.onclick = function () {
- send_action(action, card)
- hide_popup_menu()
- evt.stopPropagation()
- }
- } else {
- item.classList.remove("action")
- item.classList.add("disabled")
- item.onclick = null
- }
- }
- }
-
- if (show) {
- menu.onmouseleave = hide_popup_menu
- menu.style.display = "block"
- if (title) {
- let item = menu.querySelector("li.title")
- if (item) {
- item.onclick = hide_popup_menu
- item.textContent = title
- }
- }
-
- let w = menu.clientWidth
- let h = menu.clientHeight
- let x = Math.max(5, Math.min(evt.clientX - w / 2, window.innerWidth - w - 5))
- let y = Math.max(5, Math.min(evt.clientY - 12, window.innerHeight - h - 40))
- menu.style.left = x + "px"
- menu.style.top = y + "px"
-
- evt.stopPropagation()
- } else {
- menu.style.display = "none"
- }
-}
-
-function hide_popup_menu() {
- document.getElementById("popup").style.display = "none"
-}
-
-function on_click_card(evt) {
- if (view.actions) {
- let c = evt.target.my_id
- if (is_action("card", c))
- send_action("card", c)
- else
- show_popup_menu(evt, "popup", c, data.cards[c].title)
- }
-}
-
/* LOG */
function sub_space(_match, p1) {