diff options
| -rw-r--r-- | play.css | 23 | ||||
| -rw-r--r-- | play.html | 15 | ||||
| -rw-r--r-- | play.js | 35 |
3 files changed, 29 insertions, 44 deletions
@@ -3,9 +3,8 @@ aside { background-color: gainsboro; } header { background-color: silver; } body.Persia header.your_turn { background-color: skyblue; } body.Greece header.your_turn { background-color: salmon; } -#role_Persia .role_name { background-color: skyblue; } -#role_Greece .role_name { background-color: salmon; } -.role_info { background-color: silver; } +#role_Persia { background-color: skyblue; } +#role_Greece { background-color: salmon; } #log { background-color: gainsboro; @@ -44,15 +43,10 @@ body.Greece header.your_turn { background-color: salmon; } border-radius: 10px; } -.role_info { - padding: 3px 18px; - background-color: gainsboro; - white-space: pre-wrap; -} -.card_info { - padding: 3px 18px; +#turn_info { background-color: silver; } + #deck_info { text-align: center; } @@ -101,17 +95,13 @@ body.Greece header.your_turn { background-color: salmon; } display: block; } -.card_info .card { +#turn_info .card { margin: 10px auto 5px auto; width: 125px; height: 175px; border-radius: 10px; } -.role_info, .card_info { - border-bottom: 1px solid black; -} - #tooltip { pointer-events: none; position: fixed; @@ -131,8 +121,7 @@ body.Greece header.your_turn { background-color: salmon; } } @media (max-height: 700px) { - .card_info { padding: 3px 18px; } - .card_info .card { display: none; } + #turn_info .card { display: none; } } /* CARD ACTION POPUP MENU */ @@ -41,18 +41,17 @@ <aside> <div id="roles"> <div class="role" id="role_Greece"> - <div class="role_name">Greece – <span class="role_user"></span></div> - <div class="role_info" id="greek_info">0 cards in hand</div> + <div class="role_name">Greece</div> + <div class="role_stat" id="greek_stat"></div> + <div class="role_user">-</div> </div> <div class="role" id="role_Persia"> - <div class="role_name">Persia – <span class="role_user"></span></div> - <div class="role_info" id="persian_info">0 cards in hand</div> - </div> - <div class="card_info"> - <div id="discard" class="card show card_back"></div> - <div id="deck_info"></div> + <div class="role_name">Persia</div> + <div class="role_stat" id="persian_stat"></div> + <div class="role_user">-</div> </div> </div> + <div id="turn_info"><div id="discard" class="card show card_back"></div><div id="deck_info"></div></div> <div id="log"></div> </aside> @@ -309,23 +309,20 @@ function build_ui() { document.getElementById("discard").addEventListener("mouseleave", on_blur_discard); } -function greek_info() { - let text = ""; - if (view.g_cards === 1) - text += "1 card in hand"; - else - text += view.g_cards + " cards in hand"; - if (view.trigger.acropolis_on_fire) - text += "\nAcropolis on Fire!"; - if (view.trigger.carneia_festival) - text += "\nCarneia Festival!"; - return text; +function greek_stat() { + let text = "" + if (view.trigger.carneia_festival || view.trigger.acropolis_on_fire) { + if (view.trigger.carneia_festival) + text += "\u{1f3ad} " + if (view.trigger.acropolis_on_fire) + text += "\u{1f525} " + } + text += view.g_cards + " \u{1f3b4}" + return text } -function persian_info() { - if (view.p_cards === 1) - return "1 card in hand"; - return view.p_cards + " cards in hand"; +function persian_stat() { + return view.p_cards + " \u{1f3b4}" } function show_marker(id, class_name, show = 1, enabled = 0) { @@ -338,8 +335,8 @@ function show_marker(id, class_name, show = 1, enabled = 0) { } function on_update() { - document.getElementById("greek_info").textContent = greek_info(); - document.getElementById("persian_info").textContent = persian_info(); + document.getElementById("greek_stat").textContent = greek_stat(); + document.getElementById("persian_stat").textContent = persian_stat(); if (player === GREECE) document.getElementById("map").classList.add("greek"); @@ -351,8 +348,8 @@ function on_update() { else document.getElementById("discard").className = "card show card_" + view.discard; - document.getElementById("deck_info").textContent = - "Deck: " + view.deck_size + " \u2014 Discard: " + view.discard_size; + let text = "Deck: " + view.deck_size + " \u2014 Discard: " + view.discard_size; + document.getElementById("deck_info").textContent = text action_button("battle", "Battle"); action_button("build", "Build bridge"); |