diff options
| -rw-r--r-- | play.css | 34 | ||||
| -rw-r--r-- | play.html | 18 | ||||
| -rw-r--r-- | play.js | 80 | ||||
| -rw-r--r-- | rules.js | 3 |
4 files changed, 99 insertions, 36 deletions
@@ -118,8 +118,6 @@ header.your_turn { background-color: orange; } /* BATTLE BOARD */ -#battle { top: 60px; left: 160px; } - #battle { background-color: tan; } #battle_message { background-color: wheat; } #battle_header { background-color: brown; color: lemonchiffon; } @@ -185,6 +183,16 @@ header.your_turn { background-color: orange; } border-style: dashed; z-index: 9; } +.space.battle { + opacity: 1; + border-color: #700c; + background-color: #6008; +} +.space.sea.battle { + opacity: 1; + border-color: #037c; + background-color: #0368; +} #blocks.hide_blocks { display: none; @@ -196,11 +204,12 @@ body.shift .block.known:hover { z-index: 100; } -#battle .block { position: relative; } -#map .block { position: absolute; z-index: 2; } -#map .block.highlight { z-index: 3; } -#map .block.selected { z-index: 4; } -#map .block.known:hover { z-index: 5; } +#battle > .block { position: relative; } + +#blocks > .block { position: absolute; z-index: 2; } +#blocks > .block.highlight { z-index: 3; } +#blocks > .block.selected { z-index: 4; } +#blocks > .block.known:hover { z-index: 5; } .block.highlight { cursor: pointer; } @@ -248,6 +257,11 @@ body.shift .block.known:hover { background-position: center; } +/* +.block.battle { filter: grayscale(60%) brightness(60%) !important } +*/ +.block.battle { opacity: 0; pointer-events: none; } + body.Observer .simple-labels .known.jupiter.Caesar { border: 2px solid #862; } body.Observer .simple-labels .known.jupiter.Pompeius { border: 2px solid #822; } body.Observer .simple-labels .known.jupiter.Cleopatra { border: 2px solid #822; } @@ -258,9 +272,9 @@ body.Observer .columbia-labels .known.jupiter.Cleopatra { border: 3px solid #822 .block { box-shadow: 0px 0px 4px 0px black; } .block { - transition-property: top, left, transform, filter; - transition-duration: 700ms, 700ms, 300ms, 300ms; - transition-timing-function: ease; + transition-property: top, left, transform, opacity; + transition-duration: 700ms, 700ms, 250ms, 250ms; + transition-timing-function: ease, ease, ease, linear; } #replay_panel { @@ -66,15 +66,17 @@ <main data-min-zoom="1" data-max-zoom="2"> <div id="mapwrap"> - <div id="battle"> - <div id="battle_header"></div> - <div id="ER"></div> - <div id="EF"></div> - <div id="FF"></div> - <div id="FR"></div> - <div id="battle_message"></div> - </div> <div id="map"> + + <details id="battle"> + <summary id="battle_header"></summary> + <div id="ER"></div> + <div id="EF"></div> + <div id="FF"></div> + <div id="FR"></div> + <div id="battle_message"></div> + </details> + <div id="offmap" style="visibility:hidden"></div> <div id="blocks"></div> <div id="spaces"></div> @@ -1,11 +1,5 @@ "use strict" -function scroll_into_view_if_mobile(e) { - // if ("ontouchstart" in window) - if (window.innerWidth <= 800) - e.scrollIntoView({ block: "center", inline: "center", behavior: "smooth" }) -} - function set_has(set, item) { let a = 0 let b = set.length - 1 @@ -150,7 +144,7 @@ function on_blur_space_tip(x) { } function on_click_space_tip(x) { - ui.spaces[x].scrollIntoView({ block:"center", inline:"center", behavior:"smooth" }) + scroll_into_view(ui.spaces[x]) } function sub_space_name(match, p1, offset, string) { @@ -559,13 +553,26 @@ function is_visible_block(where, who) { return true } +function is_in_battle(b) { + if (view.battle) { + if (view.battle.CR.includes(b)) return true + if (view.battle.PR.includes(b)) return true + if (view.battle.CF.includes(b)) return true + if (view.battle.PF.includes(b)) return true + } + return false +} + function update_map() { let layout = {} for (let s = 0; s < space_count; ++s) layout[s] = { north: [], south: [] } + let is_battle_open = document.getElementById("battle").getAttribute("open") !== null + for (let b in view.location) { + b = b | 0 let info = BLOCKS[b] let element = ui.blocks[b] let space = view.location[b] @@ -573,10 +580,13 @@ function update_map() { let moved = set_has(view.moved, b) ? " moved" : "" if (space === DEAD && info.type !== 'leader') moved = " moved" + let battle = "" + if (is_battle_open && is_in_battle(b)) + battle = " battle" if (is_known_block(b)) { let image = " block_" + b let known = " known" - element.classList = block_color(b) + known + " block" + image + moved + element.classList = block_color(b) + known + " block" + image + moved + battle update_steps(b, element, true) } else { let jupiter = "" @@ -588,7 +598,7 @@ function update_map() { mars = " mars" if (block_owner(b) === view.neptune && space === view.surprise) neptune = " neptune" - element.classList = block_color(b) + " block" + moved + jupiter + mars + neptune + element.classList = block_color(b) + " block" + moved + jupiter + mars + neptune + battle } if (block_owner(b) === CAESAR) layout[space].north.push(element) @@ -609,6 +619,7 @@ function update_map() { if (ui.spaces[s]) { ui.spaces[s].classList.remove('highlight') ui.spaces[s].classList.remove('where') + ui.spaces[s].classList.remove('battle') } } if (view.actions && view.actions.space) @@ -625,6 +636,8 @@ function update_map() { ui.blocks[b].classList.add('highlight') if (view.who >= 0) ui.blocks[view.who].classList.add('selected') + } else { + ui.spaces[view.battle.where].classList.add('battle') } for (let b = 0; b < block_count; ++b) { @@ -660,6 +673,37 @@ function sort_battle_row(root, ballista) { } while (swapped) } +function show_battle() { + let box = document.getElementById("battle") + let space = SPACES[view.battle.where].layout + + // reset position + box.classList.add("show") + box.style.top = null + box.style.left = null + box.setAttribute("open", true) + + // calculate size + let w = box.clientWidth + let h = box.clientHeight + + // center where possible + let x = space.x - w / 2 + if (x < 140) + x = 140 + if (x > 2475 - w - 60) + x = 2475 - w - 60 + + let y = space.y - h - 120 + if (y < 50) + y = space.y + 120 + + box.style.top = y + "px" + box.style.left = x + "px" + + scroll_into_view_if_needed(box) +} + function update_battle() { function fill_cell(name, list, reserve, ballista) { let cell = window[name] @@ -707,6 +751,10 @@ function update_battle() { ui.battle_block[block].classList.remove("known") else ui.battle_block[block].classList.add("known") + if (set_has(view.traitor, block)) + ui.battle_block[block].classList.add("jupiter") + else + ui.battle_block[block].classList.remove("jupiter") } for (let b = 0; b < block_count; ++b) { @@ -798,20 +846,19 @@ function on_update() { remember_position(ui.cards[c]) update_cards() - update_map() if (view.battle) { document.getElementById("battle_header").textContent = view.battle.title document.getElementById("battle_message").textContent = view.battle.flash - if (!document.getElementById("battle").classList.contains("show")) { - document.getElementById("battle").classList.add("show") - scroll_into_view_if_mobile(document.getElementById("battle")) - } update_battle() + if (!document.getElementById("battle").classList.contains("show")) + show_battle() } else { document.getElementById("battle").classList.remove("show") } + update_map() + ui.old_location = Object.assign({}, view.location) ui.old_steps = Object.assign({}, view.steps) @@ -823,10 +870,9 @@ function select_card(c) { send_action('card', c) } +document.getElementById("battle").addEventListener("toggle", on_update) + build_map() document.getElementById("blocks").classList.add(label_style+'-labels') document.getElementById("battle").classList.add(label_style+'-labels') - -drag_element_with_mouse("#battle", "#battle_header") -scroll_with_middle_mouse("main") @@ -2788,7 +2788,8 @@ function make_battle_view() { A: attacker, CF: [], CR: [], PF: [], PR: [], - flash: game.flash + flash: game.flash, + where: game.where } bv.title = attacker |