From 162437b0694696abcd55d4c432950a24414d5f18 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Sat, 28 Oct 2023 00:02:04 +0200 Subject: New player list. Optimize board (no SVG). Icons for deck and checks left. --- board_fg.1x.webp | Bin 0 -> 115714 bytes board_fg.2x.webp | Bin 0 -> 238012 bytes icons/hand.svg | 1 - icons/icon_deck.png | Bin 0 -> 9459 bytes icons/icon_deck.svg | 344 +++++++++++++++++++++++++++++++++++++++++++++++ icons/icon_dominance.png | Bin 0 -> 9083 bytes icons/icon_dominance.svg | 9 ++ icons/treasure-map.svg | 1 - play.css | 97 ++++++------- play.html | 76 ++++++----- play.js | 44 ++++-- 11 files changed, 473 insertions(+), 99 deletions(-) create mode 100644 board_fg.1x.webp create mode 100644 board_fg.2x.webp delete mode 100644 icons/hand.svg create mode 100644 icons/icon_deck.png create mode 100644 icons/icon_deck.svg create mode 100644 icons/icon_dominance.png create mode 100644 icons/icon_dominance.svg delete mode 100644 icons/treasure-map.svg diff --git a/board_fg.1x.webp b/board_fg.1x.webp new file mode 100644 index 0000000..8c37509 Binary files /dev/null and b/board_fg.1x.webp differ diff --git a/board_fg.2x.webp b/board_fg.2x.webp new file mode 100644 index 0000000..05ef5d9 Binary files /dev/null and b/board_fg.2x.webp differ diff --git a/icons/hand.svg b/icons/hand.svg deleted file mode 100644 index e1bd4f2..0000000 --- a/icons/hand.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/icons/icon_deck.png b/icons/icon_deck.png new file mode 100644 index 0000000..24bb60c Binary files /dev/null and b/icons/icon_deck.png differ diff --git a/icons/icon_deck.svg b/icons/icon_deck.svg new file mode 100644 index 0000000..92a4d04 --- /dev/null +++ b/icons/icon_deck.svg @@ -0,0 +1,344 @@ + + + + + + + + + diff --git a/icons/icon_dominance.png b/icons/icon_dominance.png new file mode 100644 index 0000000..6b170c1 Binary files /dev/null and b/icons/icon_dominance.png differ diff --git a/icons/icon_dominance.svg b/icons/icon_dominance.svg new file mode 100644 index 0000000..9d4623c --- /dev/null +++ b/icons/icon_dominance.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/icons/treasure-map.svg b/icons/treasure-map.svg deleted file mode 100644 index 6feefc7..0000000 --- a/icons/treasure-map.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/play.css b/play.css index 5064805..6d5265a 100644 --- a/play.css +++ b/play.css @@ -45,32 +45,25 @@ body.shift #tooltip.focus { display: block; } #deck_info { position: absolute; - right: 8px; - bottom: 5px; - white-space: pre-line; - font-family: "Source Serif SmText", "Georgia", serif; - font-size: 12px; - font-style: italic; -} - -#banner { - cursor: pointer; display: flex; - justify-content: space-between; - border-bottom: 1px solid black; - background-color: #856781; - height: 40px; + flex-direction: column; + justify-content: start; + align-items: end; + font-family: var(--font-small); + font-style: italic; + font-size: 14px; + width: 100px; + top: 8px; + right: 4px; + gap: 5px; } -#banner > div { - flex-grow: 1; +#deck_info img { + display: block; } -.icon { - background-repeat: no-repeat; - background-size: auto 25px; - background-position: center; - filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); +#deck_info img.hide { + display: none; } #popup { box-shadow: 2px 2px 4px #0004; } @@ -91,21 +84,16 @@ body.shift #tooltip.focus { display: block; } #popup.Political li.title { background-color: hsl(299, 30%, 63%) } #popup.Political li.action:hover { background-color: hsl(299, 30%, 28%) } -#favored_suit_banner.Political { background-image: url(icons/suit_political.svg) } -#favored_suit_banner.Intelligence { background-image: url(icons/suit_intelligence.svg) } -#favored_suit_banner.Economic { background-image: url(icons/suit_economic.svg) } -#favored_suit_banner.Military { background-image: url(icons/suit_military.svg) } - -#map_banner { background-image: url(icons/treasure-map.svg) } -#hand_banner { background-image: url(icons/hand.svg) } - .role { - position: relative; cursor: pointer; } -.role.active span { - text-decoration: underline; +.role_stat { + display: flex; + flex-wrap: wrap; + justify-content: end; + align-items: center; + gap: 4px; } .role_rupees_icon, @@ -116,8 +104,6 @@ body.shift #tooltip.focus { display: block; } .role_cylinders_text { width: 24px; height: 24px; - position: absolute; - cursor: pointer; top: 2px; text-align: right; background-repeat: no-repeat; @@ -433,26 +419,33 @@ body.shift #tooltip.focus { display: block; } .suit { position: absolute; - border: 3px solid transparent; + box-sizing: border-box; + border: 8px solid transparent; border-radius: 50%; - left: 31px; - width: 48px; - height: 48px; + left: 33px; + width: 50px; + height: 50px; + background-clip: padding-box; } .suit.action { - box-shadow: 0 0 0 2px black; + box-shadow: 0 0 0 3px white, inset 0 0 0 3px white; } -#suit_political { top: 129px; } -#suit_intelligence { top: 216px; } -#suit_economic { top: 305px; } -#suit_military { top: 394px; } +#suit_political { top: 131px; } +#suit_intelligence { top: 218px; } +#suit_economic { top: 307px; } +#suit_military { top: 396px; } -#suit_political.action { border-color: orchid; } -#suit_intelligence.action { border-color: deepskyblue; } -#suit_economic.action { border-color: orange; } -#suit_military.action { border-color: orangered; } +#suit_political.favored { background-color: #8c198c; } +#suit_intelligence.favored { background-color: #3370bf; } +#suit_economic.favored { background-color: #cc6e0c; } +#suit_military.favored { background-color: #bf1c2b; } + +#suit_political.action { background-color: #8c198c; } +#suit_intelligence.action { background-color: #3370bf; } +#suit_economic.action { background-color: #cc6e0c; } +#suit_military.action { background-color: #bf1c2b; } /* MARKET BOARD */ @@ -714,7 +707,7 @@ body.open .hand.minimize .card { /* IMAGES */ #market { background-image: url(market.1x.jpg) } -#board { background-image: url(board_fg.svg), url(board_bg.1x.jpg) } +#board { background-image: url(board_fg.1x.webp), url(board_bg.1x.jpg) } .player_dial.p0 { background-image: url(dials/loyalty_gray.1x.opt.png) } .player_dial.p1 { background-image: url(dials/loyalty_blue.1x.opt.png) } @@ -739,7 +732,7 @@ body.open .hand.minimize .card { @media (min-resolution: 97dpi) { #market { background-image: url(market.2x.jpg) } - #board { background-image: url(board_fg.svg), url(board_bg.2x.jpg) } + #board { background-image: url(board_fg.2x.webp), url(board_bg.2x.jpg) } .player_dial.p0 { background-image: url(dials/loyalty_gray.2x.opt.png) } .player_dial.p1 { background-image: url(dials/loyalty_blue.2x.opt.png) } @@ -886,9 +879,6 @@ body.open .hand.minimize .card { /* MOBILE PHONE LAYOUT */ @media (max-width: 800px) { - #banner { - display: none; - } #tooltip { top: 0; left: 0; @@ -899,9 +889,6 @@ body.open .hand.minimize .card { } @media (max-width: 400px) or (max-height: 600px) { - #banner { - display: none; - } #tooltip.card { width: 248px; height: 344px; diff --git a/play.html b/play.html index aecfdef..f9e28f1 100644 --- a/play.html +++ b/play.html @@ -35,78 +35,79 @@
  • Resign + @@ -183,6 +184,17 @@
    +
    +
    +
    + + +
    + + + +
    + @@ -336,8 +348,6 @@
    -
    -
    diff --git a/play.js b/play.js index ecd088f..3543b3f 100644 --- a/play.js +++ b/play.js @@ -336,15 +336,28 @@ let ui = { } function scroll_to_map() { - scroll_into_view(ui.board) + scroll_into_view_if_needed(ui.board) } function scroll_to_market() { - scroll_into_view(ui.market) + scroll_into_view_if_needed(ui.market) } function scroll_to_player(p) { - scroll_into_view(ui.player[p].area) + scroll_into_view_if_needed(ui.player[p].area) +} + +function on_suit_button() { + if (is_suit_action("Political")) + send_action("suit", "Political") + else if (is_suit_action("Intelligence")) + send_action("suit", "Intelligence") + else if (is_suit_action("Economic")) + send_action("suit", "Economic") + else if (is_suit_action("Military")) + send_action("suit", "Military") + else + scroll_into_view_if_needed(ui.board) } let open_toggle = true @@ -499,7 +512,7 @@ function on_log(text) { function layout_block_pool() { function place_block_pool(i, x, y) { - ui.pieces[i].style = `top:${27+y*48}px;left:${1070+26+x*(26+35)}px` + ui.pieces[i].style = `top:${40+y*47}px;left:${1105+x*45}px` } for (let k = 0, i = 0; i < 12; ++i) { if (view.pieces[i] === 0) { @@ -671,7 +684,9 @@ function on_update() { ui.prompt.innerHTML = view.prompt.replace(/#(\d+)/g, sub_card_name) - ui.deck_info.textContent = `${view.cards[0]}x Draw Deck, ${view.cards[1]}x Dominance Check` + ui.deck_count.textContent = view.cards[0] + for (let i = 0; i < 4; ++i) + ui.dom_info[i].classList.toggle("hide", i >= view.cards[1]) action_button("loyalty_afghan", "Afghan") action_button("loyalty_british", "British") @@ -706,7 +721,11 @@ function on_update() { ui.body.classList.toggle("open", !!view.open) ui.favored1.className = view.favored - ui.favored2.className = view.favored + " icon" + ui.suit_political.classList.toggle("favored", view.favored === "Political") + ui.suit_intelligence.classList.toggle("favored", view.favored === "Intelligence") + ui.suit_economic.classList.toggle("favored", view.favored === "Economic") + ui.suit_military.classList.toggle("favored", view.favored === "Military") + ui.favored2.src = "icons/suit_" + view.favored.toLowerCase() + ".svg" for (let row = 0; row < 2; ++row) { for (let col = 0; col < 6; ++col) { @@ -1019,7 +1038,15 @@ function build_ui() { ui.body = document.querySelector("body") ui.main = document.querySelector("main") ui.prompt = document.getElementById("prompt") - ui.deck_info = document.getElementById("deck_info") + + ui.deck_count = document.getElementById("deck_count") + ui.dom_info = [ + document.getElementById("dom_info_1"), + document.getElementById("dom_info_2"), + document.getElementById("dom_info_3"), + document.getElementById("dom_info_4") + ] + ui.board = document.getElementById("board") ui.market = document.getElementById("market") ui.market_a = document.getElementById("market_a") @@ -1027,7 +1054,7 @@ function build_ui() { ui.status = document.getElementById("status") ui.tooltip = document.getElementById("tooltip") ui.favored1 = document.getElementById("favored_suit_marker") - ui.favored2 = document.getElementById("favored_suit_banner") + ui.favored2 = document.getElementById("favored_suit_icon") ui.popup_label = document.getElementById("popup_label") ui.global_events = document.getElementById("global_events") @@ -1092,4 +1119,3 @@ function build_ui() { if (player !== 'Observer') ui.player[top].hand_size.classList.add("hide") } - -- cgit v1.2.3