diff options
| -rw-r--r-- | play.css | 13 | ||||
| -rw-r--r-- | play.html | 8 | ||||
| -rw-r--r-- | play.js | 68 | ||||
| -rw-r--r-- | rules.js | 15 |
4 files changed, 70 insertions, 34 deletions
@@ -394,6 +394,19 @@ path.campaign { stroke: black; stroke-dasharray: 4 4; } box-shadow: 0 0 0 1px #223f21, 1px 1px 4px #0008; } +#discard_pile { + display: flex; + position: relative; +} + +#discard_pile .card.side { + margin-left: -226px; +} + +#discard_pile .card.stack { + margin-top: -325px; +} + .card.card_back { background-color: orange; } @@ -361,7 +361,13 @@ c-32 0 -38 0 -46 2 -11 2 -20 5 -23 6 -2 0 -5 2 -8 3 -4 1 -10 4 -14 6 -6 4 <div id="card_panel"> <div id="this_card" class="card card_1"><div id="unshaded_event" class="unshaded_event"></div><div id="shaded_event" class="shaded_event"></div></div> <div id="deck_outer" class="card card_back"><div id="deck_size">35</div></div> - <div id="dynasty_card" class="card card_dynasty_khalji"></div> + <div id="discard_pile"> + <div id="dynasty_card" class="card card_dynasty_khalji" style="z-index: 5;"></div> + <div id="stack1" class="card" style="z-index: 4"></div> + <div id="stack2" class="card" style="z-index: 3"></div> + <div id="stack3" class="card" style="z-index: 2"></div> + <div id="stack4" class="card" style="z-index: 1"></div> + </div> <div id="of_gods_and_kings" class="hide"><div id="gk_unshaded_event" class="unshaded_event"></div><div id="gk_shaded_event" class="shaded_event"></div></div> </div> @@ -80,16 +80,16 @@ const LAYOUT = { "Mountain Passes BK": [236, 110], "Mountain Passes VE": [318, 105], "Mountain Passes mongols": [404, 127], - "Punjab DS": [515, 164], + "Punjab DS": [380, 238], "Punjab BK": [279, 262], "Punjab VE": [477, 266], - "Punjab mongols": [370, 233], - "BK_DI_2" : [160 + 30, 1186 + 40], - "BK_DI_4" : [302 + 30, 1186 + 40], - "VE_DI_1" : [ 89 + 30, 1292 + 40], - "VE_DI_2" : [160 + 30, 1292 + 40], - "VE_DI_3" : [231 + 30, 1292 + 40], - "VE_DI_4" : [302 + 30, 1292 + 40], + "Punjab mongols": [515, 184], + "BK_DI_2" : [160 + 20, 1186 + 43], + "BK_DI_4" : [302 + 20, 1186 + 43], + "VE_DI_1" : [ 89 + 20, 1292 + 43], + "VE_DI_2" : [160 + 20, 1292 + 43], + "VE_DI_3" : [231 + 20, 1292 + 43], + "VE_DI_4" : [302 + 20, 1292 + 43], } /* COMMON */ @@ -477,6 +477,13 @@ let ui = { deck_size: document.getElementById("deck_size"), of_gods_and_kings: document.getElementById("of_gods_and_kings"), dynasty_card: document.getElementById("dynasty_card"), + discard_pile: document.getElementById("discard_pile"), + discard: [ + document.getElementById("stack1"), + document.getElementById("stack2"), + document.getElementById("stack3"), + document.getElementById("stack4"), + ], tokens: { token_ds_vp: document.getElementById("token_ds_vp"), token_bk_vp: document.getElementById("token_bk_vp"), @@ -953,33 +960,27 @@ function show_dice_box(box) { box.style.left = x + "px" } -function dragElement(elmnt) { - var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; - ui.attack_header.onmousedown = dragMouseDown; - - function dragMouseDown(e) { - e.preventDefault(); - pos3 = e.clientX; - pos4 = e.clientY; - document.onmouseup = closeDragElement; - document.onmousemove = elementDrag; - } +function is_stacked() { + let card_panel = document.getElementById('card_panel').children; + let e1 = card_panel[0].getBoundingClientRect(); + let e2 = card_panel[1].getBoundingClientRect(); + return Math.abs(e1.left - e2.left) < 1; +} - function elementDrag(e) { - e.preventDefault(); - pos1 = pos3 - e.clientX; - pos2 = pos4 - e.clientY; - pos3 = e.clientX; - pos4 = e.clientY; - elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; - elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; - } - - function closeDragElement() { - document.onmouseup = null; - document.onmousemove = null; +function update_discard() { + let stacked = is_stacked() + ui.discard_pile.style.flexDirection = (stacked ? "column" : "row") + for (let i = 0; i < 4; ++i) { + console.log(view.discard, view.discard.length) + if (i < view.discard.length) { + ui.discard[i].className = "card card_" + view.discard[i] + " " + (stacked ? "stack" : "side") + } else { + ui.discard[i].className = "" + } } } +window.addEventListener("resize", update_discard) + let once = true function on_update() { @@ -1049,6 +1050,9 @@ function on_update() { else ui.dynasty_card.className = "card card_dynasty_khalji" + // Discard stack + update_discard() + ui.this_card.classList.toggle("action", !!(view.actions && view.actions.event === 1)) ui.dynasty_card.classList.toggle("action", !!(view.actions && view.actions.dynasty_card === 1)) ui.shaded_event.classList.toggle("action", !!(view.actions && view.actions.shaded === 1)) @@ -127,6 +127,7 @@ exports.view = function (state, role) { resources: game.resources, inf: game.inf, deck: [ this_card, deck_size, card_back, game.of_gods_and_kings ], + discard: game.discard, cavalry: game.cavalry, cylinder: game.cylinder, pieces: game.pieces, @@ -251,6 +252,7 @@ exports.setup = function (seed, scenario, _options) { cavalry: Array(10).fill(AVAILABLE), deck: [], of_gods_and_kings: [null, null, 0], + discard: [], order: [], cmd: { type: null, @@ -403,11 +405,22 @@ function resume_event_card() { function end_card() { clear_undo() - + update_discard() array_remove(game.deck, 0) goto_card() } +function update_discard() { + if (this_card() === 45) + game.discard = [45] + else if (this_card() === 46) + game.discard = [45, 46] + else if (this_card() === 47) + game.discard = [45, 46, 47] + else if (this_card() > 36) + game.discard.push(this_card()) +} + function goto_eligible() { change_current(next_eligible_faction()) if (game.current < 0) { |