summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--play.css64
-rw-r--r--play.html6
-rw-r--r--play.js28
3 files changed, 71 insertions, 27 deletions
diff --git a/play.css b/play.css
index 07d25cd..4e948cd 100644
--- a/play.css
+++ b/play.css
@@ -334,21 +334,26 @@ body.shift #tooltip.focus { display: block; }
.block.road.British { background-image: url(pieces/road_british.svg) }
.block.road.Russian { background-image: url(pieces/road_russian.svg) }
-.Afghan.block.action {
+.Afghan.block.action,
+.Afghan.block.selected {
filter:
drop-shadow(0 -2px 0 turquoise)
drop-shadow(0 2px 0 turquoise)
drop-shadow(-2px 0 0 turquoise)
drop-shadow(2px 0 0 turquoise)
}
-.British.block.action {
+
+.British.block.action,
+.British.block.selected {
filter:
drop-shadow(0 -2px 0 hotpink)
drop-shadow(0 2px 0 hotpink)
drop-shadow(-2px 0 0 hotpink)
drop-shadow(2px 0 0 hotpink)
}
-.Russian.block.action {
+
+.Russian.block.action,
+.Russian.block.selected {
filter:
drop-shadow(0 -2px 0 orange)
drop-shadow(0 2px 0 orange)
@@ -356,28 +361,49 @@ body.shift #tooltip.focus { display: block; }
drop-shadow(2px 0 0 orange)
}
-.cylinder.action {
+.cylinder.p0.action,
+.cylinder.p0.selected {
+ filter:
+ drop-shadow(0 -2px 0 silver)
+ drop-shadow(0 2px 0 silver)
+ drop-shadow(-2px 0 0 silver)
+ drop-shadow(2px 0 0 silver)
+}
+
+.cylinder.p1.action,
+.cylinder.p1.selected {
filter:
- drop-shadow(0 -2px 0 yellow)
- drop-shadow(0 2px 0 yellow)
- drop-shadow(-2px 0 0 yellow)
- drop-shadow(2px 0 0 yellow)
+ drop-shadow(0 -2px 0 skyblue)
+ drop-shadow(0 2px 0 skyblue)
+ drop-shadow(-2px 0 0 skyblue)
+ drop-shadow(2px 0 0 skyblue)
}
-.block.selected {
+.cylinder.p2.action,
+.cylinder.p2.selected {
filter:
- drop-shadow(0 -2px 0 deepskyblue)
- drop-shadow(0 2px 0 deepskyblue)
- drop-shadow(-2px 0 0 deepskyblue)
- drop-shadow(2px 0 0 deepskyblue)
+ drop-shadow(0 -2px 0 gold)
+ drop-shadow(0 2px 0 gold)
+ drop-shadow(-2px 0 0 gold)
+ drop-shadow(2px 0 0 gold)
}
-.cylinder.selected {
+.cylinder.p3.action,
+.cylinder.p3.selected {
filter:
- drop-shadow(0 -2px 0 deepskyblue)
- drop-shadow(0 2px 0 deepskyblue)
- drop-shadow(-2px 0 0 deepskyblue)
- drop-shadow(2px 0 0 deepskyblue)
+ drop-shadow(0 -2px 0 tomato)
+ drop-shadow(0 2px 0 tomato)
+ drop-shadow(-2px 0 0 tomato)
+ drop-shadow(2px 0 0 tomato)
+}
+
+.cylinder.p4.action,
+.cylinder.p4.selected {
+ filter:
+ drop-shadow(0 -2px 0 black)
+ drop-shadow(0 2px 0 black)
+ drop-shadow(-2px 0 0 black)
+ drop-shadow(2px 0 0 black)
}
/* FAVORED SUIT MARKER AND SPACES */
@@ -473,7 +499,7 @@ body.shift #tooltip.focus { display: block; }
}
.border, .region {
- fill: none;
+ fill: transparent;
stroke: none;
}
diff --git a/play.html b/play.html
index 1088c36..dec4065 100644
--- a/play.html
+++ b/play.html
@@ -45,9 +45,9 @@
<aside>
<div id="roles">
<div id="banner" class="Political">
- <div id="favored_suit_banner" class="icon" onclick="scroll_to_market()"></div>
- <div id="map_banner" class="icon"onclick="scroll_to_map()"></div>
- <div id="hand_banner" class="icon" onclick="toggle_open_hands()"></div>
+ <div id="favored_suit_banner" class="icon" onclick="scroll_to_market()" onmouseenter="ui.status.textContent='Scroll to Market'" onmouseleave="on_blur()"></div>
+ <div id="map_banner" class="icon"onclick="scroll_to_map()" onmouseenter="ui.status.textContent='Scroll to Map'" onmouseleave="on_blur()"></div>
+ <div id="hand_banner" class="icon" onclick="toggle_open_hands()" onmouseenter="ui.status.textContent='Hide/show hands'" onmouseleave="on_blur()"></div>
</div>
<div class="role hide" onclick="scroll_to_player(0)" id="role_Gray">
diff --git a/play.js b/play.js
index c1ffde0..df535e0 100644
--- a/play.js
+++ b/play.js
@@ -36,14 +36,23 @@ const region_index = {
"Punjab": Punjab,
};
-const region_names = {
+const space_names = {
[Persia]: "Persia",
[Transcaspia]: "Transcaspia",
[Herat]: "Herat",
[Kabul]: "Kabul",
[Kandahar]: "Kandahar",
[Punjab]: "Punjab",
-};
+ [Persia_Transcaspia]: "Persia/Transcaspia",
+ [Persia_Herat]: "Persia/Herat",
+ [Transcaspia_Herat]: "Transcaspia/Herat",
+ [Transcaspia_Kabul]: "Transcaspia/Kabul",
+ [Herat_Kabul]: "Herat/Kabul",
+ [Herat_Kandahar]: "Herat/Kandahar",
+ [Kabul_Kandahar]: "Kabul/Kandahar",
+ [Kabul_Punjab]: "Kabul/Punjab",
+ [Kandahar_Punjab]: "Kandahar/Punjab",
+}
cards.forEach(card => {
if (card) {
@@ -278,6 +287,10 @@ function on_focus_card(evt) {
}
}
+function on_focus_space(evt) {
+ ui.status.textContent = space_names[evt.target.space];
+}
+
function on_click_space(evt) {
send_action('space', evt.target.space);
evt.stopPropagation();
@@ -653,7 +666,10 @@ function on_update() {
else if (s <= 100)
ui.spyrows[s].appendChild(ui.pieces[x]);
else
- ui.board.appendChild(ui.pieces[x]);
+ {
+ if (ui.pieces[x].parentElement !== ui.board)
+ ui.board.appendChild(ui.pieces[x]);
+ }
ui.pieces[x].classList.toggle('action', is_piece_action(x));
ui.pieces[x].classList.toggle('selected', view.selected === x);
ui.pieces[x].style = "";
@@ -662,9 +678,9 @@ function on_update() {
for (let i = 0; i < 6; ++i)
if (ruler[i] === -1)
- ui.rule[i].classList = `rule ${region_names[i+Persia]} hide`;
+ ui.rule[i].classList = `rule ${space_names[i+Persia]} hide`;
else
- ui.rule[i].classList = `rule ${region_names[i+Persia]} ${player_names[ruler[i]]}`;
+ ui.rule[i].classList = `rule ${space_names[i+Persia]} ${player_names[ruler[i]]}`;
ui.suit_political.classList.toggle('action', is_suit_action('Political'));
ui.suit_intelligence.classList.toggle('action', is_suit_action('Intelligence'));
@@ -746,6 +762,8 @@ function build_ui() {
ui.spaces[i] = document.getElementById("svgmap").getElementById(n);
ui.spaces[i].space = i;
ui.spaces[i].addEventListener("click", on_click_space);
+ ui.spaces[i].addEventListener("mouseenter", on_focus_space);
+ ui.spaces[i].addEventListener("mouseleave", on_blur);
}
for (let c = 1; c < cards.length; ++c) {