summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--images/gui_box_maximize.svg3
-rw-r--r--images/gui_box_minimize.svg3
-rw-r--r--play.css24
-rw-r--r--play.html45
-rw-r--r--play.js29
5 files changed, 73 insertions, 31 deletions
diff --git a/images/gui_box_maximize.svg b/images/gui_box_maximize.svg
new file mode 100644
index 0000000..038c71a
--- /dev/null
+++ b/images/gui_box_maximize.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16">
+<path stroke-width="3" stroke="gold" fill="none" d="M 14 5 L 8 11 L 2 5" />
+</svg>
diff --git a/images/gui_box_minimize.svg b/images/gui_box_minimize.svg
new file mode 100644
index 0000000..add3008
--- /dev/null
+++ b/images/gui_box_minimize.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16">
+<path stroke-width="3" stroke="gold" fill="none" d="M 14 11 L 8 5 L 2 11" />
+</svg>
diff --git a/play.css b/play.css
index feb06e5..b65830f 100644
--- a/play.css
+++ b/play.css
@@ -216,18 +216,16 @@ img.f {
z-index: 200;
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
border: 1px solid black;
- min-width: 425px;
- background-color: #d6c4a9;
+ min-width: 494px;
}
-@media (max-width: 400px) {
+@media (max-width: 494px) {
#attack_table {
min-width: 90vw;
min-width: 90dvw;
}
}
-#attack_header { background-color: brown; color: gold }
#attack_header {
list-style: none;
cursor: move;
@@ -237,8 +235,26 @@ img.f {
text-align: center;
font-weight: bold;
font-size: 18px;
+
+ background-repeat: no-repeat;
+ background-position: 100% 50%;
+ background-image: url(images/gui_box_maximize.svg);
+ background-color: rgba(165, 42, 42, 0.637);
+ color: gold;
}
+#attack_table[open] {
+ background-color: #d6c4a9;
+}
+
+#attack_table[open] #attack_header {
+ cursor: n-resize;
+ border-bottom: 1px solid black;
+ background-image: url(images/gui_box_minimize.svg);
+ background-color: brown;
+}
+
+
/* SPACES */
path { fill: none; stroke-width: 4; }
diff --git a/play.html b/play.html
index f5ea375..e91e13a 100644
--- a/play.html
+++ b/play.html
@@ -58,35 +58,36 @@
<div id="table">
-<div id="attack_table" class="hide">
- <summary id="attack_header">Attack in $NAME</summary>
- <div id="attacker" class="player_pool">
- <div class="attacker_banner">
- <img class="f attacker_flag" src="images/Flags_DS.png">
- <div>
- <div id="name_attacker" class="player_name">Attacker</div>
- <div id="pool_a" class="table_pool attacker"></div>
+
+<div id="mapwrap">
+
+ <details id="attack_table" class="hide">
+ <summary id="attack_header">Attack in $NAME</summary>
+ <div id="attacker" class="player_pool">
+ <div class="attacker_banner">
+ <img class="f attacker_flag" src="images/Flags_DS.png">
+ <div>
+ <div id="name_attacker" class="player_name">Attacker</div>
+ <div id="pool_a" class="table_pool attacker"></div>
+ </div>
+ <img class="f attacker_flag" src="images/Flags_DS.png">
</div>
- <img class="f attacker_flag" src="images/Flags_DS.png">
</div>
- </div>
- <div id="defender" class="player_pool defender">
- <div class="defender_banner">
- <img class="f defender_flag" src="images/Flags_DS.png">
- <div>
- <div id="pool_d" class="table_pool"></div>
- <div id="name_defender" class="player_name">Defender</div>
+ <div id="defender" class="player_pool defender">
+ <div class="defender_banner">
+ <img class="f defender_flag" src="images/Flags_DS.png">
+ <div>
+ <div id="pool_d" class="table_pool"></div>
+ <div id="name_defender" class="player_name">Defender</div>
+ </div>
+ <img class="f defender_flag" src="images/Flags_DS.png">
</div>
- <img class="f defender_flag" src="images/Flags_DS.png">
</div>
- </div>
-
-</div>
+ </details>
-<div id="mapwrap">
<div id="map">
- <svg id="svgmap" width="1275" height="1650" viewBox="0 0 1275 1650">
+ <svg id="svgmap" width="1275" height="1650" viewBox="0 0 1275 1650">
<g transform="translate(0.000000,1650.000000) scale(1.000000,-1.000000)" fill="#000000" stroke="none">
<path class="mongol province" id="space_Mountain_Passes" d="M1 1478 l0 -92 3 1 c2 1 4 1 6 2 2 1 5 1 8 1 2 0 4 1 5 2 5 5 19 3
28 -3 4 -3 8 -4 18 -5 2 -1 6 -3 9 -5 l4 -3 15 -1 c9 -1 16 -1 17 -1 2 0 14 2
diff --git a/play.js b/play.js
index d5caa27..d1c5878 100644
--- a/play.js
+++ b/play.js
@@ -178,6 +178,25 @@ const space_id = [
"space_Punjab",
]
+const bb_loc = {
+ 0: {"x": 522, "y": 1260}, // S_ANDHRA
+ 1: {"x": 776, "y": 730}, // S_BENGAL
+ 2: {"x": 640, "y": 920}, // S_GONDWANA
+ 3: {"x": 82, "y": 841}, // S_GUJARAT
+ 4: {"x": 666, "y": 625}, // S_JAUNPUR
+ 5: {"x": 698, "y": 1262}, // S_KARNATAKA
+ 6: {"x": 446, "y": 987}, // S_MADHYADESH
+ 7: {"x": 379, "y": 1140}, // S_MAHARASHTRA
+ 8: {"x": 397, "y": 798}, // S_MALWA
+ 9: {"x": 770, "y": 1068}, // S_ORISSA
+ 10: {"x": 81, "y": 568}, // S_RAJPUT_KINGDOMS
+ 11: {"x": 163, "y": 311}, // S_SINDH
+ 12: {"x": 804, "y": 1357}, // S_TAMILAKAM
+ 13: {"x": 401, "y": 536}, // S_DELHI
+ 14: {"x": 152, "y": 235}, // S_MOUNTAIN_PASSES
+ 15: {"x": 195, "y": 314}, // S_PUNJAB
+}
+
/* LAYOUT DATA */
// modified from tools/parse-layout.js
const layout = {
@@ -549,8 +568,8 @@ function init_ui() {
ui.gk_unshaded_event.onmouseenter = on_focus_gk_unshaded_event
ui.gk_unshaded_event.onmouseleave = on_focus_this_event
- // Make combat table draggable
- dragElement(ui.attack_table)
+ // // Make combat table draggable
+ // dragElement(ui.attack_table)
// player cavalry tokens
for (let i = 0; i <= LAST_CAVALRY; ++i) {
@@ -925,15 +944,15 @@ function show_dice_box(box) {
box.classList.add("show")
box.style.top = null
box.style.left = null
- // box.setAttribute("open", true)
+ box.setAttribute("open", true)
// calculate size
let w = box.clientWidth
let h = box.clientHeight
// center where possible
- let x = 500
- let y = 500
+ let x = bb_loc[view.attack.where].x
+ let y = bb_loc[view.attack.where].y
box.style.top = y + "px"
box.style.left = x + "px"