diff options
| -rw-r--r-- | play.css | 177 | ||||
| -rw-r--r-- | play.html | 4 | ||||
| -rw-r--r-- | play.js | 41 | ||||
| -rw-r--r-- | rules.js | 2 |
4 files changed, 161 insertions, 63 deletions
@@ -60,6 +60,28 @@ main { background-color: #777; } #cities { position: absolute; } #boxes { position: absolute; } +#capabilities .token { + position: static; + pointer-events: auto; +} + +#capabilities { + display: flex; + justify-content: center; + align-content: center; + flex-wrap: wrap; + gap: 4px; +} + +#insurgent_momentum { + pointer-events: none; + display: flex; + flex-wrap: wrap; + gap: 17px; +} + +/* SPACES */ + path { fill: transparent; stroke-width: 4; } path.action { fill: white; fill-opacity: 0.3; stroke: white; } path.action.foreign { fill: gold; stroke: lemonchiffon; } @@ -78,28 +100,7 @@ path.tip { stroke: yellow; } .box.selected{border-color:yellow;} .box.tip { border-color: yellow; } -#capabilities .token { - position: static; - pointer-events: auto; -} -#capabilities { - display: flex; - justify-content: center; - align-content: center; - flex-wrap: wrap; - gap: 4px; -} -#insurgent_momentum { - pointer-events: none; - display: flex; - flex-wrap: wrap; - gap: 17px; -} -.card.momentum { - width: 186px; - height: 261px; - border-radius: 12px; -} +/* PIECES */ .piece { position: absolute; @@ -131,6 +132,30 @@ path.tip { stroke: yellow; } ; } +.cylinder { width: 44px; height: 48px; } +.base { width: 44px; height: 38px; } +.guerrilla { width: 29px; height: 36px; } +.police, .troops { width: 29px; height: 36px; } + +.govt.cylinder { background-image: url(images/govt_cylinder.svg) } +.govt.police { background-image: url(images/govt_police.svg) } +.govt.troops { background-image: url(images/govt_troops.svg) } +.govt.base { background-image: url(images/govt_base.svg) } +.auc.cylinder { background-image: url(images/auc_cylinder.svg) } +.auc.guerrilla { background-image: url(images/auc_guerrilla.svg) } +.auc.guerrilla.active { background-image: url(images/auc_guerrilla_active.svg) } +.auc.base { background-image: url(images/auc_base.svg) } +.cartels.cylinder { background-image: url(images/cartels_cylinder.svg) } +.cartels.guerrilla { background-image: url(images/cartels_guerrilla.svg) } +.cartels.guerrilla.active { background-image: url(images/cartels_guerrilla_active.svg) } +.cartels.base { background-image: url(images/cartels_base.svg) } +.farc.cylinder { background-image: url(images/farc_cylinder.svg) } +.farc.guerrilla { background-image: url(images/farc_guerrilla.svg) } +.farc.guerrilla.active { background-image: url(images/farc_guerrilla_active.svg) } +.farc.base { background-image: url(images/farc_base.svg) } + +/* TOKENS */ + .token { pointer-events: none; position: absolute; @@ -284,41 +309,38 @@ path.tip { stroke: yellow; } .token.reminder.sucumbios { background-image: url(tokens.2x/reminder_sucumbios.png) } } -.cylinder { width: 44px; height: 48px; } -.base { width: 44px; height: 38px; } -.guerrilla { width: 29px; height: 36px; } -.police, .troops { width: 29px; height: 36px; } - -.govt.cylinder { background-image: url(images/govt_cylinder.svg) } -.govt.police { background-image: url(images/govt_police.svg) } -.govt.troops { background-image: url(images/govt_troops.svg) } -.govt.base { background-image: url(images/govt_base.svg) } -.auc.cylinder { background-image: url(images/auc_cylinder.svg) } -.auc.guerrilla { background-image: url(images/auc_guerrilla.svg) } -.auc.guerrilla.active { background-image: url(images/auc_guerrilla_active.svg) } -.auc.base { background-image: url(images/auc_base.svg) } -.cartels.cylinder { background-image: url(images/cartels_cylinder.svg) } -.cartels.guerrilla { background-image: url(images/cartels_guerrilla.svg) } -.cartels.guerrilla.active { background-image: url(images/cartels_guerrilla_active.svg) } -.cartels.base { background-image: url(images/cartels_base.svg) } -.farc.cylinder { background-image: url(images/farc_cylinder.svg) } -.farc.guerrilla { background-image: url(images/farc_guerrilla.svg) } -.farc.guerrilla.active { background-image: url(images/farc_guerrilla_active.svg) } -.farc.base { background-image: url(images/farc_base.svg) } +/* CARDS */ #card_panel { display: flex; flex-wrap: wrap; justify-content: center; - gap: 18px; - padding: 0 18px; + gap: 24px; max-width: 1614px; margin: 36px auto; } -#deck_outer { - position: relative; +.card { + width: 248px; + height: 348px; + border-radius: 16px; + background-color: #cde1c9; + background-size: cover; + background-repeat: no-repeat; + box-shadow: 0 0 0 1px #223f21, 1px 1px 4px #0008; +} + +.card.action { + box-shadow: 0 0 0 3px white; } + +.card.momentum { + width: 186px; + height: 261px; + border-radius: 12px; +} + +#deck_outer { position: relative; } #deck_size { position: absolute; right: 24px; @@ -328,17 +350,58 @@ path.tip { stroke: yellow; } color: white; } +#this_card { position: relative; } +#shaded_event { + position: absolute; + box-sizing: border-box; +} +#shaded_event { + left: 19px; + width: 210px; + bottom: 23px; + border-radius: 6px; +} +#shaded_event.action { + border: 3px solid white; +} + +#this_card.n4c #shaded_event { height: 83px; border-top-color: transparent; } +#this_card.n3c #shaded_event { height: 73px; border-top-color: transparent; } +#this_card.n4 #shaded_event { height: 82px; } +#this_card.n3 #shaded_event { height: 67px; } +#this_card.n2 #shaded_event { height: 56px; } +#this_card.n0 #shaded_event { display: none; } + +/* OPTION: tiny cards on map - + +#card_panel { + position: absolute; + top: 82px; + left: 500px; + width: 714px; + margin: 0; +} + .card { - width: 248px; - height: 348px; - border-radius: 16px; - box-shadow: 1px 1px 4px #0008; - background-color: darkgreen; - background-size: cover; - background-repeat: no-repeat; - border: 1px solid #454; + width: 186px; + height: 261px; + border-radius: 12px; } +#shaded_event { + left: 13px; + width: 159px; + bottom: 16px; +} + +#this_card.n4c #shaded_event { height: 64px; border-top-color: transparent; } +#this_card.n3c #shaded_event { height: 57px; border-top-color: transparent; } +#this_card.n4 #shaded_event { height: 64px; } +#this_card.n3 #shaded_event { height: 51px; } +#this_card.n2 #shaded_event { height: 44px; } + +*/ + .card.card_back{background-image:url(cards.1x/card_back.jpg)} .card.card_1{background-image:url(cards.1x/card_01.jpg)} .card.card_2{background-image:url(cards.1x/card_02.jpg)} @@ -412,7 +475,7 @@ path.tip { stroke: yellow; } .card.card_70{background-image:url(cards.1x/card_70.jpg)} .card.card_71{background-image:url(cards.1x/card_71.jpg)} .card.card_72{background-image:url(cards.1x/card_72.jpg)} -.card.card_73, .card.card_74, .card.card_75, .card.card_76 {background-image:url(cards.1x/card_7x.jpg)} +.card.card_73{background-image:url(cards.1x/card_7x.jpg)} @media (min-resolution: 97dpi) { .card.card_back{background-image:url(cards.2x/card_back.jpg)} @@ -488,5 +551,5 @@ path.tip { stroke: yellow; } .card.card_70{background-image:url(cards.2x/card_70.jpg)} .card.card_71{background-image:url(cards.2x/card_71.jpg)} .card.card_72{background-image:url(cards.2x/card_72.jpg)} -.card.card_73, .card.card_74, .card.card_75, .card.card_76 {background-image:url(cards.2x/card_7x.jpg)} +.card.card_73{background-image:url(cards.2x/card_7x.jpg)} } @@ -183,8 +183,8 @@ </div> <div id="card_panel"> -<div id="this_card" class="card card_1"></div> -<div id="next_card" class="card card_2"></div> +<div id="this_card" class="card"><div id="unshaded_event"></div><div id="shaded_event"></div></div> +<div id="next_card" class="card"></div> <div id="deck_outer" class="card card_back"><div id="deck_size"></div></div> </div> @@ -74,6 +74,7 @@ const senado_class_list = [ let ui = { favicon: document.getElementById("favicon"), header: document.querySelector("header"), + status: document.getElementById("status"), player: [ document.getElementById("role_Government"), document.getElementById("role_FARC"), @@ -288,6 +289,34 @@ function get_layout_radius(s) { } } +function on_focus_next_event() { + let c = view.deck[1] + if (c > 0) + ui.status.textContent = data.card_title[c] +} + +function on_focus_event() { + let c = view.deck[0] + if (c > 0) { + let f = data.card_flavor[c] + if (f) + ui.status.textContent = data.card_title[c] + " - " + f + else + ui.status.textContent = data.card_title[c] + } +} + +function on_focus_shaded_event() { + let c = view.deck[0] + if (c > 0) { + ui.status.textContent = data.card_title[c] + " - " + data.card_flavor_shaded[c] + } +} + +function on_blur_event() { + ui.status.textContent = "" +} + function init_ui() { register_action(ui.this_card, "event", undefined) register_action(ui.shaded_event, "shaded", undefined) @@ -297,6 +326,13 @@ function init_ui() { register_action(ui.resources[AUC], "resources", AUC) register_action(ui.resources[CARTELS], "resources", CARTELS) + ui.this_card.onmouseenter = on_focus_event + ui.this_card.onmouseleave = on_blur_event + ui.shaded_event.onmouseenter = on_focus_shaded_event + ui.shaded_event.onmouseleave = on_focus_event + ui.next_card.onmouseenter = on_focus_next_event + ui.next_card.onmouseleave = on_blur_event + for (let c of momentum_events) register_card_tip(ui.momentum[c], c) for (let c of capability_events) @@ -1022,9 +1058,8 @@ function on_update() { action_button("opposition", "Opposition") action_button("limop", "LimOp") - action_button("event", "Event") - action_button("unshaded", "Unshaded") - action_button("shaded", "Shaded") + // action_button("event", "Event") + // action_button("shaded", "Shaded") action_button("skip", "Skip") action_button("next", "Next") @@ -284,7 +284,6 @@ exports.setup = function (seed, scenario, options) { setup_deck(4, 0, 15) } - game.deck[0] = PROPAGANDA log("DECK " + game.deck.join(", ")) update_control() @@ -2006,6 +2005,7 @@ function goto_eligible(limited) { states.eligible = { disable_negotiation: true, + inactive: "Eligible Faction", prompt() { if (did_option(SOP_1ST_OP_ONLY)) { view.prompt = `${data.card_title[this_card()]}: Limited Operation.` |