diff options
| author | Tor Andersson <tor@ccxvii.net> | 2021-12-29 17:01:28 +0100 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2023-02-18 12:42:59 +0100 |
| commit | 2ab8a12ee5aa715e04b35e21e24af647e8108683 (patch) | |
| tree | 268caf7970b40a8aca816520c92165f90f6c1ef7 | |
| parent | 12cd83d20907475034ce13d1f560d064c8ab6e1c (diff) | |
| download | 300-earth-and-water-2ab8a12ee5aa715e04b35e21e24af647e8108683.tar.gz | |
Simplify styles and html for play.html
Change font css link.
Clean up common play.css file.
Mobile layout.
| -rw-r--r-- | info/rules.html | 2 | ||||
| -rw-r--r-- | play.css | 327 | ||||
| -rw-r--r-- | play.html | 580 | ||||
| -rw-r--r-- | play.js (renamed from ui.js) | 44 |
4 files changed, 484 insertions, 469 deletions
diff --git a/info/rules.html b/info/rules.html index 5ad204f..7ceabb1 100644 --- a/info/rules.html +++ b/info/rules.html @@ -2,7 +2,7 @@ <html> <head> <title>300: Earth & Water Rules</title> -<link rel="stylesheet" href="/fonts/gentium.css"> +<link rel="stylesheet" href="/fonts/fonts.css"> <style> body{background-color:slategray;text-align:center} div{position:relative;background-color:white;margin:1em auto;line-height:0.8;box-shadow:1px 1px 8px -2px black} diff --git a/play.css b/play.css new file mode 100644 index 0000000..879cfba --- /dev/null +++ b/play.css @@ -0,0 +1,327 @@ +main { background-color: slategray; } +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_info { background-color: silver; } +.one .role_name { background-color: salmon; } +.two .role_name { background-color: skyblue; } + +#log { + background-color: gainsboro; +} + +#log div { + padding-left: 20px; + text-indent: -12px; +} + +#log .tip { + cursor: help; + text-decoration: dotted underline; +} + +#log .st { + font-weight: bold; + background-color: gray; + color: white; + text-align: center; + padding: 3px; +} + +#log .hr { + border-top: 1px solid darkgray; + padding-top: 9px; +} + +#log .G { color: #c00; } +#log .P { color: #00e; } + +#hand.greek { + background-color: rosybrown; + border-radius: 10px; +} + +.role_info { + padding: 10px 20px; + background-color: gainsboro; + white-space: pre-wrap; +} +.card_info { + padding: 10px 20px; + background-color: silver; +} +#deck_info { + text-align: center; +} + +/* CARDS */ + +.card.enabled { + cursor: pointer; +} + +.card.disabled { + filter: grayscale(100%); +} + +.hand { + margin: 15px; + display: flex; + flex-wrap: wrap; + justify-content: center; + min-height: 370px; +} + +.hand .card { + margin: 10px; +} + +.card { + background-size: cover; + background-repeat: no-repeat; + background-color: #f0e0d0; + width: 250px; + height: 350px; + border-radius: 12px; +} + +.card_info .card { + margin: 15px auto; + width: 125px; + height: 175px; + border-radius: 10px; +} + +.role_info, .card_info { + border-bottom: 1px solid black; +} + +#tooltip.card { + position: fixed; + z-index: 200; + right: 230px; + top: 60px; +} + +/* PHONE SIZE: squeeze side bar on small screens */ + +#log_button { display: none } + +@media (max-height: 700px) { + .card_info .card { + margin: 0 auto; + width: 100px; + height: 140px; + border-radius: 5px; + } + .role_info { padding: 3px 20px; } + .card_info { padding: 5px 0px; } + #deck_info { padding-top: 5px; } +} + +@media (max-width: 1200px) { + #prompt { + font-size: medium; + margin: 0 5px; + } + #log_button { display: block } +} + +/* CARD ACTION POPUP MENU */ + +#popup { + position: fixed; + user-select: none; + background-color: gainsboro; + left: 10px; + top: 100px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3); + z-index: 200; + min-width: 20ex; + white-space: nowrap; + display: none; +} +#popup div { padding: 3pt 8pt; color: gray; } +#popup div.enabled { color: black; } +#popup div.enabled:hover { background-color: teal; color: white; } + +/* MAP WITH ARMIES, FLEETS, AND MARKERS */ + +#map.greek, #map.greek > div { + transform: rotate(180deg); + transform-origin: center; +} + +#map { + width: 1240px; + height: 878px; + background-size: cover; + box-shadow: 0px 1px 10px rgba(0,0,0,0.5); + margin: 0 auto; +} + +#map { background-image: url("map75.webp") } +@media (min-resolution: 97dpi) { + #map { background-image: url("map150.webp") } +} + +#map.hide_markers > div { + visibility: hidden; +} + +.port { + position: absolute; + border-radius: 50%; + z-index: 1; +} +.port.enabled { + box-shadow: 0 0 20px 2px white, inset 0 0 5px 2px white; + z-index: 3; +} + +.persian_city { + position: absolute; + border-radius: 50%; + z-index: 4; +} +.persian_city.enabled { + box-shadow: 0 0 10px 2px white, inset 0 0 5px 2px white; + z-index: 100; +} + +.greek_city { + position: absolute; + border-radius: 5px; + z-index: 4; +} +.greek_city.enabled { + box-shadow: 0 0 10px 4px white, inset 0 0 5px 4px white; + z-index: 100; +} + +.greek_army, .greek_fleet, .persian_army, .persian_fleet, .marker { + transition-property: top, left, transform; + transition-duration: 700ms; + transition-timing-function: ease; + z-index: 2; +} + +.greek_army, .greek_fleet, .persian_army, .persian_fleet, .marker, #bridge { + position: absolute; + display: none; + background-repeat: no-repeat; + background-size: cover; +} + +.marker { background-image: url("icons/black_cube.png"); } +.greek_army { background-image: url("icons/red_cube.png"); } +.greek_fleet { background-image: url("icons/red_disk.png"); } +.persian_army { background-image: url("icons/blue_cube.png"); } +.persian_fleet { background-image: url("icons/blue_disk.png"); } +.greek_army, .persian_army, .marker { width: 22px; height: 26px; } +.greek_fleet, .persian_fleet { width: 26px; height: 20px; } + +.campaign_1 { left: 1074px; top: 368px; } +.campaign_2 { left: 1077px; top: 402px; } +.campaign_3 { left: 1078px; top: 435px; } +.campaign_4 { left: 1077px; top: 467px; } +.campaign_5 { left: 1072px; top: 501px; } +.vp_g6 { left: 181px; top: 228px; } +.vp_g5 { left: 168px; top: 259px; } +.vp_g4 { left: 157px; top: 291px; } +.vp_g3 { left: 148px; top: 323px; } +.vp_g2 { left: 142px; top: 357px; } +.vp_g1 { left: 138px; top: 389px; } +.vp_0 { left: 138px; top: 425px; } +.vp_p1 { left: 138px; top: 460px; } +.vp_p2 { left: 142px; top: 493px; } +.vp_p3 { left: 148px; top: 526px; } +.vp_p4 { left: 157px; top: 559px; } +.vp_p5 { left: 168px; top: 590px; } +.vp_p6 { left: 181px; top: 622px; } + +.greek_fleet.show, .persian_fleet.show, .greek_army.show, .persian_army.show, .marker.show, #bridge.show { + display: block; + filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5)); +} + +.greek_fleet.selected, .persian_fleet.selected, .greek_army.selected, .persian_army.selected { + filter: brightness(150%) drop-shadow(0 0 3px white); +} +#bridge.destroy { + filter: brightness(150%) drop-shadow(0 0 10px skyblue); +} +#bridge.build { + filter: brightness(150%) drop-shadow(0 0 10px white); + opacity: 0.5; +} + +#darius { left: 77px; top: 562px; } +#xerxes { left: 61px; top: 717px; } +#artemisia { left: 167px; top: 799px; } +#miltiades { left: 1179px; top: 305px; } +#themistocles { left: 1156px; top: 153px; } +#leonidas { left: 1068px; top: 41px; } +#bridge { + background-image: url("icons/bridge.png"); + width: 48px; height: 36px; + left: 932px; top: 655px; +} + +/* MOBILE PHONE LAYOUT */ + +@media (max-width: 640px) { + .hand .card { + width: 125px; + height: 175px; + border-radius: 6px; + } + .hand { + min-height: 125px; + } + #tooltip.card { + top: 10px; + right: 10px; + } +} + +/* CARD IMAGES */ + +.card_back { background-image: url('cards.1x/card_back.webp'); } +.card_1 { background-image: url('cards.1x/card_en_01.webp'); } +.card_2 { background-image: url('cards.1x/card_en_02.webp'); } +.card_3 { background-image: url('cards.1x/card_en_03.webp'); } +.card_4 { background-image: url('cards.1x/card_en_04.webp'); } +.card_5 { background-image: url('cards.1x/card_en_05.webp'); } +.card_6 { background-image: url('cards.1x/card_en_06.webp'); } +.card_7 { background-image: url('cards.1x/card_en_07.webp'); } +.card_8 { background-image: url('cards.1x/card_en_08.webp'); } +.card_9 { background-image: url('cards.1x/card_en_09.webp'); } +.card_10 { background-image: url('cards.1x/card_en_10.webp'); } +.card_11 { background-image: url('cards.1x/card_en_11.webp'); } +.card_12 { background-image: url('cards.1x/card_en_12.webp'); } +.card_13 { background-image: url('cards.1x/card_en_13.webp'); } +.card_14 { background-image: url('cards.1x/card_en_14.webp'); } +.card_15 { background-image: url('cards.1x/card_en_15.webp'); } +.card_16 { background-image: url('cards.1x/card_en_16.webp'); } + +@media (min-resolution: 97dpi) { +.card_back { background-image: url('cards.2x/card_back.webp'); } +.card_1 { background-image: url('cards.2x/card_en_01.webp'); } +.card_2 { background-image: url('cards.2x/card_en_02.webp'); } +.card_3 { background-image: url('cards.2x/card_en_03.webp'); } +.card_4 { background-image: url('cards.2x/card_en_04.webp'); } +.card_5 { background-image: url('cards.2x/card_en_05.webp'); } +.card_6 { background-image: url('cards.2x/card_en_06.webp'); } +.card_7 { background-image: url('cards.2x/card_en_07.webp'); } +.card_8 { background-image: url('cards.2x/card_en_08.webp'); } +.card_9 { background-image: url('cards.2x/card_en_09.webp'); } +.card_10 { background-image: url('cards.2x/card_en_10.webp'); } +.card_11 { background-image: url('cards.2x/card_en_11.webp'); } +.card_12 { background-image: url('cards.2x/card_en_12.webp'); } +.card_13 { background-image: url('cards.2x/card_en_13.webp'); } +.card_14 { background-image: url('cards.2x/card_en_14.webp'); } +.card_15 { background-image: url('cards.2x/card_en_15.webp'); } +.card_16 { background-image: url('cards.2x/card_en_16.webp'); } +} @@ -7,461 +7,177 @@ <link rel="icon" href="Achaemenid_Falcon.svg"> <link rel="stylesheet" href="/fonts/fonts.css"> <link rel="stylesheet" href="/common/grid.css"> +<link rel="stylesheet" href="play.css"> <script defer src="/socket.io/socket.io.min.js"></script> <script defer src="/common/client.js"></script> -<script defer src="ui.js"></script> -<style> - -#grid_center { background-color: slategray; } -#grid_role { background-color: gainsboro; } -#grid_top { background-color: silver; } -.Persia #grid_top.your_turn { background-color: skyblue; } -.Greece #grid_top.your_turn { background-color: salmon; } -#grid_top.disconnected { background-color: red; } -.role_info { background-color: silver; } -.one .role_name { background-color: salmon; } -.two .role_name { background-color: skyblue; } - -#log { - background-color: gainsboro; -} - -#log .tip { - cursor: help; - text-decoration: dotted underline; -} - -#log .st { - font-weight: bold; - background-color: gray; - color: white; - text-align: center; - padding: 3px; -} - -#log .hr { - border-top: 1px solid darkgray; - padding-top: 9px; -} - -#log .G { color: #c00; } -#log .P { color: #00e; } - -#hand.greek { - background-color: rosybrown; - border-radius: 10px; -} - -.role_info { - padding: 10px 20px; - background-color: gainsboro; - white-space: pre-wrap; -} -.role_info.card_info { - background-color: silver; -} -#deck_info { - text-align: center; -} - -/* CARDS */ - -.card_back { background-image: url('cards/card_back.jpg'); } -.card_1 { background-image: url('cards/card_en_01.jpg'); } -.card_2 { background-image: url('cards/card_en_02.jpg'); } -.card_3 { background-image: url('cards/card_en_03.jpg'); } -.card_4 { background-image: url('cards/card_en_04.jpg'); } -.card_5 { background-image: url('cards/card_en_05.jpg'); } -.card_6 { background-image: url('cards/card_en_06.jpg'); } -.card_7 { background-image: url('cards/card_en_07.jpg'); } -.card_8 { background-image: url('cards/card_en_08.jpg'); } -.card_9 { background-image: url('cards/card_en_09.jpg'); } -.card_10 { background-image: url('cards/card_en_10.jpg'); } -.card_11 { background-image: url('cards/card_en_11.jpg'); } -.card_12 { background-image: url('cards/card_en_12.jpg'); } -.card_13 { background-image: url('cards/card_en_13.jpg'); } -.card_14 { background-image: url('cards/card_en_14.jpg'); } -.card_15 { background-image: url('cards/card_en_15.jpg'); } -.card_16 { background-image: url('cards/card_en_16.jpg'); } - -.card { - background-repeat: no-repeat; - width: 250px; - height: 350px; - border-radius: 12px; -} - -.card_info .card { - margin: 15px auto; - width: 125px; - height: 175px; - border-radius: 10px; -} - -#tooltip.card { - position: fixed; - z-index: 200; - right: 230px; - top: 60px; -} - -/* PHONE SIZE: squeeze side bar on small screens */ - -#log_button { display: none } - -@media (max-height: 700px) { - .card_info .card { - margin: 0 auto; - width: 100px; - height: 140px; - border-radius: 5px; - } - .role_info { padding: 3px 20px; } - .card_info { padding: 5px 0px; } - #deck_info { padding-top: 5px; } -} - -@media (max-width: 1200px) { - #prompt { - font-size: medium; - margin: 0 5px; - } - #log_button { display: block } -} - -/* CARD ACTION POPUP MENU */ - -#popup { - position: fixed; - user-select: none; - background-color: gainsboro; - left: 10px; - top: 100px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3); - z-index: 200; - min-width: 20ex; - white-space: nowrap; - display: none; -} -#popup div { padding: 3pt 8pt; color: gray; } -#popup div.enabled { color: black; } -#popup div.enabled:hover { background-color: teal; color: white; } - -/* MAP WITH ARMIES, FLEETS, AND MARKERS */ - -#map.greek, #map.greek > div { - transform: rotate(180deg); - transform-origin: center; -} - -#map { - position: relative; - width: 1240px; - height: 878px; - background-image: url("map.jpg"); - background-size: cover; - box-shadow: 0px 1px 10px rgba(0,0,0,0.5); - margin: 0 auto; -} - -#map.hide_markers > div { - visibility: hidden; -} - -.port { - position: absolute; - border-radius: 50%; - z-index: 1; -} -.port.enabled { - box-shadow: 0 0 20px 2px white, inset 0 0 5px 2px white; - z-index: 3; -} - -.persian_city { - position: absolute; - border-radius: 50%; - z-index: 4; -} -.persian_city.enabled { - box-shadow: 0 0 10px 2px white, inset 0 0 5px 2px white; - z-index: 100; -} - -.greek_city { - position: absolute; - border-radius: 5px; - z-index: 4; -} -.greek_city.enabled { - box-shadow: 0 0 10px 4px white, inset 0 0 5px 4px white; - z-index: 100; -} - -.greek_army, .greek_fleet, .persian_army, .persian_fleet, .marker { - transition-property: top, left, transform; - transition-duration: 700ms; - transition-timing-function: ease; - z-index: 2; -} - -.greek_army, .greek_fleet, .persian_army, .persian_fleet, .marker, #bridge { - position: absolute; - display: none; - background-repeat: no-repeat; - background-size: cover; -} - -.marker { background-image: url("icons/black_cube.png"); } -.greek_army { background-image: url("icons/red_cube.png"); } -.greek_fleet { background-image: url("icons/red_disk.png"); } -.persian_army { background-image: url("icons/blue_cube.png"); } -.persian_fleet { background-image: url("icons/blue_disk.png"); } -.greek_army, .persian_army, .marker { width: 22px; height: 26px; } -.greek_fleet, .persian_fleet { width: 26px; height: 20px; } - -.campaign_1 { left: 1074px; top: 368px; } -.campaign_2 { left: 1077px; top: 402px; } -.campaign_3 { left: 1078px; top: 435px; } -.campaign_4 { left: 1077px; top: 467px; } -.campaign_5 { left: 1072px; top: 501px; } -.vp_g6 { left: 181px; top: 228px; } -.vp_g5 { left: 168px; top: 259px; } -.vp_g4 { left: 157px; top: 291px; } -.vp_g3 { left: 148px; top: 323px; } -.vp_g2 { left: 142px; top: 357px; } -.vp_g1 { left: 138px; top: 389px; } -.vp_0 { left: 138px; top: 425px; } -.vp_p1 { left: 138px; top: 460px; } -.vp_p2 { left: 142px; top: 493px; } -.vp_p3 { left: 148px; top: 526px; } -.vp_p4 { left: 157px; top: 559px; } -.vp_p5 { left: 168px; top: 590px; } -.vp_p6 { left: 181px; top: 622px; } - -.greek_fleet.show, .persian_fleet.show, .greek_army.show, .persian_army.show, .marker.show, #bridge.show { - display: block; - filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5)); -} - -.greek_fleet.selected, .persian_fleet.selected, .greek_army.selected, .persian_army.selected { - filter: brightness(150%) drop-shadow(0 0 3px white); -} -#bridge.destroy { - filter: brightness(150%) drop-shadow(0 0 10px skyblue); -} -#bridge.build { - filter: brightness(150%) drop-shadow(0 0 10px white); - opacity: 0.5; -} - -#darius { left: 77px; top: 562px; } -#xerxes { left: 61px; top: 717px; } -#artemisia { left: 167px; top: 799px; } -#miltiades { left: 1179px; top: 305px; } -#themistocles { left: 1156px; top: 153px; } -#leonidas { left: 1068px; top: 41px; } -#bridge { - background-image: url("icons/bridge.png"); - width: 48px; height: 36px; - left: 932px; top: 655px; -} - -</style> +<script defer src="play.js"></script> </head> <body> -<div id="status"></div> <div id="tooltip" class="card"></div> -<div id="chat_window"> -<div id="chat_header">Chat</div> -<div id="chat_text"></div> -<form id="chat_form" action=""><input id="chat_input" autocomplete="off"></form> +<div id="popup" onmouseleave="hide_popup_menu()"> + <div id="menu_card_event" onclick="on_card_event()">Play Event</div> + <div id="menu_card_move" onclick="on_card_move()">Play for Movement</div> </div> -<div id="grid_window"> - - <div id="grid_top"> - - <div class="menu"> - <div class="menu_title"><img src="/images/cog.svg"></div> - <div class="menu_popup"> - <div class="menu_item" onclick="toggle_fullscreen()">Fullscreen</div> - <div class="menu_separator"></div> - <div class="menu_item" onclick="window.open('info/notes.html', '_blank')">Notes</div> - <div class="menu_item" onclick="window.open('info/rules.html', '_blank')">Rules</div> - <div class="menu_item" onclick="window.open('info/cards.html', '_blank')">Cards</div> - <div class="resign menu_separator"></div> - <div class="resign menu_item" onclick="confirm_resign()">Resign</div> - <div class="debug menu_separator"></div> - <div class="debug menu_item" onclick="send_save()">🐞 Save</div> - <div class="debug menu_item" onclick="send_restore()">🐞 Restore</div> - <div class="debug menu_separator"></div> - <div class="debug menu_item" onclick="send_restart('Historical')">⚠ Restart</div> - </div> +<header> + <div id="toolbar"> + <div class="menu"> + <div class="menu_title"><img src="/images/cog.svg"></div> + <div class="menu_popup"> + <a class="menu_item" href="info/notes.html" target="_blank">Notes</a> + <a class="menu_item" href="info/rules.html" target="_blank">Rules</a> + <a class="menu_item" href="info/cards.html" target="_blank">Cards</a> + <div class="resign menu_separator"></div> + <div class="resign menu_item" onclick="confirm_resign()">Resign</div> </div> - - <div id="log_button" class="image_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div> - <div id="chat_button" class="image_button" onclick="toggle_chat()"><img src="/images/chat-bubble.svg"></div> - - <div id="prompt">Connecting...</div> - - <button id="button_build" onclick="on_build()" class="hide">Build bridge</button> - <button id="button_destroy" onclick="on_destroy()" class="hide">Destroy bridge</button> - <button id="button_draw" onclick="on_draw()" class="hide">Draw</button> - <button id="button_battle" onclick="on_battle()" class="hide">Battle</button> - <button id="button_pass" onclick="on_pass()" class="hide">Pass</button> - <button id="button_next" onclick="on_next()" class="hide">Next</button> - <button id="button_undo" onclick="on_undo()" class="hide">Undo</button> - - <div id="rematch_button" class="image_button hide" onclick="send_rematch()"><img src="/images/cycle.svg"></div> - <div id="exit_button" class="image_button hide" onclick="send_exit()"><img src="/images/exit-door.svg"></div> </div> + <div id="log_button" class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div> + </div> + <div id="prompt"></div> + <div id="actions"></div> +</header> - <div id="grid_role"> - +<aside> + <div id="roles"> <div class="role one"> - <div class="role_name">Greece – <span class="role_user">$USER</span></div> + <div class="role_name">Greece – <span class="role_user"></span></div> <div class="role_info" id="greek_info">0 cards in hand</div> </div> - <div class="role two"> - <div class="role_name">Persia – <span class="role_user">$USER</span></div> + <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="role_info card_info"><div id="discard" class="card show card_back"></div><div id="deck_info"></div></div> + <div class="card_info"> + <div id="discard" class="card show card_back"></div> + <div id="deck_info"></div> + </div> </div> - <div id="log"></div> +</aside> + +<main> + <div id="map"> + + <div id="campaign" class="marker campaign_1"></div> + <div id="bridge" class="bridge"></div> + <div id="vp" class="marker vp_0"></div> + <div id="darius" class="persian_army"></div> + <div id="xerxes" class="persian_army"></div> + <div id="artemisia" class="persian_fleet"></div> + <div id="miltiades" class="greek_army"></div> + <div id="themistocles" class="greek_army"></div> + <div id="leonidas" class="greek_army"></div> + + <div id="port_Abydos" class="port"></div> + <div id="port_Ephesos" class="port"></div> + <div id="port_Athenai" class="port"></div> + <div id="port_Eretria" class="port"></div> + <div id="port_Naxos" class="port"></div> + <div id="port_Pella" class="port"></div> + <div id="port_Sparta" class="port"></div> + <div id="port_Thebai" class="port"></div> + + <div id="gf1" class="greek_fleet"></div> + <div id="gf2" class="greek_fleet"></div> + <div id="gf3" class="greek_fleet"></div> + <div id="gf4" class="greek_fleet"></div> + <div id="gf5" class="greek_fleet"></div> + + <div id="pf1" class="persian_fleet"></div> + <div id="pf2" class="persian_fleet"></div> + <div id="pf3" class="persian_fleet"></div> + <div id="pf4" class="persian_fleet"></div> + <div id="pf5" class="persian_fleet"></div> + <div id="pf6" class="persian_fleet"></div> + + <div id="city_Abydos" class="persian_city"></div> + <div id="city_Ephesos" class="persian_city"></div> + <div id="city_Athenai" class="greek_city"></div> + <div id="city_Delphi" class="greek_city"></div> + <div id="city_Eretria" class="greek_city"></div> + <div id="city_Korinthos" class="greek_city"></div> + <div id="city_Larissa" class="greek_city"></div> + <div id="city_Naxos" class="greek_city"></div> + <div id="city_Pella" class="greek_city"></div> + <div id="city_Sparta" class="greek_city"></div> + <div id="city_Thebai" class="greek_city"></div> + + <div id="ga1" class="greek_army"></div> + <div id="ga2" class="greek_army"></div> + <div id="ga3" class="greek_army"></div> + <div id="ga4" class="greek_army"></div> + <div id="ga5" class="greek_army"></div> + <div id="ga6" class="greek_army"></div> + <div id="ga7" class="greek_army"></div> + <div id="ga8" class="greek_army"></div> + <div id="ga9" class="greek_army"></div> + + <div id="pa1" class="persian_army"></div> + <div id="pa2" class="persian_army"></div> + <div id="pa3" class="persian_army"></div> + <div id="pa4" class="persian_army"></div> + <div id="pa5" class="persian_army"></div> + <div id="pa6" class="persian_army"></div> + <div id="pa7" class="persian_army"></div> + <div id="pa8" class="persian_army"></div> + <div id="pa9" class="persian_army"></div> + <div id="pa10" class="persian_army"></div> + <div id="pa11" class="persian_army"></div> + <div id="pa12" class="persian_army"></div> + <div id="pa13" class="persian_army"></div> + <div id="pa14" class="persian_army"></div> + <div id="pa15" class="persian_army"></div> + <div id="pa16" class="persian_army"></div> + <div id="pa17" class="persian_army"></div> + <div id="pa18" class="persian_army"></div> + <div id="pa19" class="persian_army"></div> + <div id="pa20" class="persian_army"></div> + <div id="pa21" class="persian_army"></div> + <div id="pa22" class="persian_army"></div> + <div id="pa23" class="persian_army"></div> + <div id="pa24" class="persian_army"></div> - <div id="grid_center"> - - <div id="map"> - - <div id="campaign" class="marker campaign_1"></div> - <div id="bridge" class="bridge"></div> - <div id="vp" class="marker vp_0"></div> - <div id="darius" class="persian_army"></div> - <div id="xerxes" class="persian_army"></div> - <div id="artemisia" class="persian_fleet"></div> - <div id="miltiades" class="greek_army"></div> - <div id="themistocles" class="greek_army"></div> - <div id="leonidas" class="greek_army"></div> - - <div id="port_Abydos" class="port"></div> - <div id="port_Ephesos" class="port"></div> - <div id="port_Athenai" class="port"></div> - <div id="port_Eretria" class="port"></div> - <div id="port_Naxos" class="port"></div> - <div id="port_Pella" class="port"></div> - <div id="port_Sparta" class="port"></div> - <div id="port_Thebai" class="port"></div> - - <div id="gf1" class="greek_fleet"></div> - <div id="gf2" class="greek_fleet"></div> - <div id="gf3" class="greek_fleet"></div> - <div id="gf4" class="greek_fleet"></div> - <div id="gf5" class="greek_fleet"></div> - - <div id="pf1" class="persian_fleet"></div> - <div id="pf2" class="persian_fleet"></div> - <div id="pf3" class="persian_fleet"></div> - <div id="pf4" class="persian_fleet"></div> - <div id="pf5" class="persian_fleet"></div> - <div id="pf6" class="persian_fleet"></div> - - <div id="city_Abydos" class="persian_city"></div> - <div id="city_Ephesos" class="persian_city"></div> - <div id="city_Athenai" class="greek_city"></div> - <div id="city_Delphi" class="greek_city"></div> - <div id="city_Eretria" class="greek_city"></div> - <div id="city_Korinthos" class="greek_city"></div> - <div id="city_Larissa" class="greek_city"></div> - <div id="city_Naxos" class="greek_city"></div> - <div id="city_Pella" class="greek_city"></div> - <div id="city_Sparta" class="greek_city"></div> - <div id="city_Thebai" class="greek_city"></div> - - <div id="ga1" class="greek_army"></div> - <div id="ga2" class="greek_army"></div> - <div id="ga3" class="greek_army"></div> - <div id="ga4" class="greek_army"></div> - <div id="ga5" class="greek_army"></div> - <div id="ga6" class="greek_army"></div> - <div id="ga7" class="greek_army"></div> - <div id="ga8" class="greek_army"></div> - <div id="ga9" class="greek_army"></div> - - <div id="pa1" class="persian_army"></div> - <div id="pa2" class="persian_army"></div> - <div id="pa3" class="persian_army"></div> - <div id="pa4" class="persian_army"></div> - <div id="pa5" class="persian_army"></div> - <div id="pa6" class="persian_army"></div> - <div id="pa7" class="persian_army"></div> - <div id="pa8" class="persian_army"></div> - <div id="pa9" class="persian_army"></div> - <div id="pa10" class="persian_army"></div> - <div id="pa11" class="persian_army"></div> - <div id="pa12" class="persian_army"></div> - <div id="pa13" class="persian_army"></div> - <div id="pa14" class="persian_army"></div> - <div id="pa15" class="persian_army"></div> - <div id="pa16" class="persian_army"></div> - <div id="pa17" class="persian_army"></div> - <div id="pa18" class="persian_army"></div> - <div id="pa19" class="persian_army"></div> - <div id="pa20" class="persian_army"></div> - <div id="pa21" class="persian_army"></div> - <div id="pa22" class="persian_army"></div> - <div id="pa23" class="persian_army"></div> - <div id="pa24" class="persian_army"></div> - - </div> + </div> - <div id="hand" class="hand"> - <div id="card_1" class="card card_1"></div> - <div id="card_2" class="card card_2"></div> - <div id="card_3" class="card card_3"></div> - <div id="card_4" class="card card_4"></div> - <div id="card_5" class="card card_5"></div> - <div id="card_6" class="card card_6"></div> - <div id="card_7" class="card card_7"></div> - <div id="card_8" class="card card_8"></div> - <div id="card_9" class="card card_9"></div> - <div id="card_10" class="card card_10"></div> - <div id="card_11" class="card card_11"></div> - <div id="card_12" class="card card_12"></div> - <div id="card_13" class="card card_13"></div> - <div id="card_14" class="card card_14"></div> - <div id="card_15" class="card card_15"></div> - <div id="card_16" class="card card_16"></div> - <div id="back_1" class="card card_back"></div> - <div id="back_2" class="card card_back"></div> - <div id="back_3" class="card card_back"></div> - <div id="back_4" class="card card_back"></div> - <div id="back_5" class="card card_back"></div> - <div id="back_6" class="card card_back"></div> - <div id="back_7" class="card card_back"></div> - <div id="back_8" class="card card_back"></div> - <div id="back_9" class="card card_back"></div> - <div id="back_10" class="card card_back"></div> - <div id="back_11" class="card card_back"></div> - <div id="back_12" class="card card_back"></div> - <div id="back_13" class="card card_back"></div> - <div id="back_14" class="card card_back"></div> - <div id="back_15" class="card card_back"></div> - <div id="back_16" class="card card_back"></div> - </div> + <div id="hand" class="hand"> + <div id="card_1" class="card card_1"></div> + <div id="card_2" class="card card_2"></div> + <div id="card_3" class="card card_3"></div> + <div id="card_4" class="card card_4"></div> + <div id="card_5" class="card card_5"></div> + <div id="card_6" class="card card_6"></div> + <div id="card_7" class="card card_7"></div> + <div id="card_8" class="card card_8"></div> + <div id="card_9" class="card card_9"></div> + <div id="card_10" class="card card_10"></div> + <div id="card_11" class="card card_11"></div> + <div id="card_12" class="card card_12"></div> + <div id="card_13" class="card card_13"></div> + <div id="card_14" class="card card_14"></div> + <div id="card_15" class="card card_15"></div> + <div id="card_16" class="card card_16"></div> + <div id="back_1" class="card card_back"></div> + <div id="back_2" class="card card_back"></div> + <div id="back_3" class="card card_back"></div> + <div id="back_4" class="card card_back"></div> + <div id="back_5" class="card card_back"></div> + <div id="back_6" class="card card_back"></div> + <div id="back_7" class="card card_back"></div> + <div id="back_8" class="card card_back"></div> + <div id="back_9" class="card card_back"></div> + <div id="back_10" class="card card_back"></div> + <div id="back_11" class="card card_back"></div> + <div id="back_12" class="card card_back"></div> + <div id="back_13" class="card card_back"></div> + <div id="back_14" class="card card_back"></div> + <div id="back_15" class="card card_back"></div> + <div id="back_16" class="card card_back"></div> + </div> - <div id="popup" onmouseleave="hide_popup_menu()"> - <div id="menu_card_event" onclick="on_card_event()">Play Event</div> - <div id="menu_card_move" onclick="on_card_move()">Play for Movement</div> - </div> +</main> - </div> +<footer id="status"></footer> -</div> </body> @@ -304,26 +304,6 @@ function show_marker(id, class_name, show = 1, enabled = 0) { elt.className = class_name; } -function show_undo_button(sel, action, use_label = false) { - let button = document.querySelector(sel); - if (game.actions) { - button.classList.remove("hide"); - if (game.actions && action in game.actions) { - if (game.actions[action]) { - if (use_label) - button.textContent = game.actions[action]; - button.disabled = false; - } else { - button.disabled = true; - } - } else { - button.disabled = true; - } - } else { - button.classList.add("hide"); - } -} - function on_update() { document.getElementById("greek_info").textContent = greek_info(); document.getElementById("persian_info").textContent = persian_info(); @@ -336,13 +316,13 @@ function on_update() { document.getElementById("deck_info").textContent = "Deck: " + game.deck_size + " \u2014 Discard: " + game.discard_size; - show_action_button("#button_battle", "battle"); - show_action_button("#button_build", "build"); - show_action_button("#button_destroy", "destroy"); - show_action_button("#button_draw", "draw"); - show_action_button("#button_next", "next"); - show_action_button("#button_pass", "pass"); - show_undo_button("#button_undo", "undo"); + action_button("battle", "Battle"); + action_button("build", "Build bridge"); + action_button("destroy", "Destroy bridge"); + action_button("draw", "Draw"); + action_button("pass", "Pass"); + action_button("next", "Next"); + action_button("undo", "Undo"); if (game.actions && game.actions.destroy) document.getElementById("bridge").className = "show destroy"; @@ -591,14 +571,6 @@ function update_ui() { e.classList.remove("selected"); } -function on_destroy() { if (game.actions) { send_action('destroy'); } } -function on_battle() { if (game.actions) { send_action('battle'); } } -function on_build() { if (game.actions) { send_action('build'); } } -function on_draw() { if (game.actions) { send_action('draw'); } } -function on_next() { if (game.actions) { send_action('next'); } } -function on_pass() { if (game.actions) { send_action('pass'); } } -function on_undo() { if (game.actions) { send_action('undo'); } } - let current_popup_card = 0; function show_popup_menu(evt, list) { @@ -663,5 +635,5 @@ if (param_role == GREECE) document.getElementById("map").classList.add("greek"); build_ui(); -scroll_with_middle_mouse("#grid_center", 2); +scroll_with_middle_mouse("main", 2); init_client(["Greece", "Persia"]); |