diff options
| -rw-r--r-- | play.css | 274 | ||||
| -rw-r--r-- | play.html | 367 | ||||
| -rw-r--r-- | play.js (renamed from ui.js) | 74 |
3 files changed, 317 insertions, 398 deletions
diff --git a/play.css b/play.css new file mode 100644 index 0000000..b287433 --- /dev/null +++ b/play.css @@ -0,0 +1,274 @@ +main { background-color: #777; } +#roles { background-color: #999; } +header { background-color: silver; } +header.your_turn { background-color: orange; } +#role_Lancaster .role_name { background-color: salmon; } +#role_York .role_name { background-color: ghostwhite; } +#turn_info { background-color: gainsboro; } +.role_vp { float: right; } + +#log { background-color: ghostwhite; } +#log div { padding-left: 20px; text-indent: -12px; } +#log .st { background-color: steelblue; color: white; font-weight: bold; } +#log .L { background-color: pink; } +#log .Y { background-color: gainsboro; } +#log .bs { background-color: lightsteelblue; } +#log .br { font-style: italic; text-decoration: underline; } + +.hand { + margin: 25px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; + min-height: 280px; +} + +.card { + background-size: cover; + background-repeat: no-repeat; + width: 180px; + height: 280px; + border-radius: 12px; + box-shadow: 1px 1px 5px rgba(0,0,0,0.5); + transition: 100ms; + display: none; +} + +.card.show { + display: block; +} + +.card.enabled:hover { + transform: translateY(-8px); +} + +.card.enabled { + cursor: pointer; +} + +.card.disabled { + filter: grayscale(100%); +} + +.role_info { + overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */ + padding-top: 16px; +} + +.role_info .card { + margin: 0 auto 16px auto; +} + +.role_info .card:not(:hover) { + margin: 0 auto; + height: 96px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +/* MAP */ + +#mapwrap { + box-shadow: 0px 1px 10px rgba(0,0,0,0.5); + width: 1688px; + height: 1950px; +} + +#map { + width: 1688px; + height: 1950px; + background-repeat: no-repeat; + background-size: cover; +} + +#map { background-image: url("map75.jpg") } +@media (min-resolution: 97dpi) { + #map { background-image: url("map150.jpg") } +} + +#map svg { + position: absolute; +} + +#map svg image { + pointer-events: none; +} + +#map svg path.area { + fill: green; + stroke: green; + stroke-width: 20px; + fill-opacity: 0.4; + stroke-opacity: 0.8; + opacity: 0; +} + +#map svg #area_France { fill: white; stroke: white; } +#map svg #area_Calais { fill: dodgerblue; stroke: dodgerblue; } +#map svg #area_English_Channel { fill: dodgerblue; stroke: dodgerblue; } +#map svg #area_Irish_Sea { fill: dodgerblue; stroke: dodgerblue; } +#map svg #area_North_Sea { fill: dodgerblue; stroke: dodgerblue; } + +#map svg path.area.highlight { + cursor: pointer; + opacity: 1; +} +#map svg path.area.where { + opacity: 1; + fill: darkslategray; + stroke: darkslategray; +} +#map svg path.area.where.highlight { + stroke: white; +} + +#map.hide_blocks #blocks { + visibility: hidden; +} + +/* BLOCKS */ + +body.shift .block.known:hover { + transform: scale(2) !important; + transition: 100ms; + z-index: 100; +} + +#battle div.block { + position: relative; +} + +#map div.block { + position: absolute; +} + +div.block { + border-radius: 6px; + width: 60px; + height: 60px; +} + +div.block { background-size: 700% 900%; background-repeat: no-repeat; } + +div.block { box-shadow: 0px 0px 3px 0px black; } + +div.block.Lancaster { border: 3px solid brown; background-color: indianred; } +div.block.York { border: 3px solid gainsboro; background-color: whitesmoke; } +div.block.Rebel { border: 3px solid dimgray; background-color: gray; } + +div.block.Lancaster.highlight { border-color: white; } +div.block.York.highlight { border-color: white; } +div.block.Rebel.highlight { border-color: white; } + +.hit div.block.highlight { border-color: black; box-shadow: 0 0 3px 0px black; } + +div.block.Lancaster.selected { border-color: yellow; } +div.block.York.selected { border-color: yellow; } +div.block.Rebel.selected { border-color: yellow; } + +div.block.highlight { cursor: pointer; box-shadow: 0 0 3px 1px white; } +div.block.selected { box-shadow: 0 0 3px 1px yellow; } +div.block.moved { filter: grayscale(50%) brightness(85%); } +div.block.highlight.moved { filter: grayscale(60%) brightness(95%); } + +div.block:hover { z-index: 1; } + +div.block.r1 { transform: rotate(-90deg); } +div.block.r2 { transform: rotate(-180deg); } +div.block.r3 { transform: rotate(-270deg); } + +div.block { + transition-property: top, left, transform; + transition-duration: 700ms, 700ms, 200ms; + transition-timing-function: ease; +} + +/* BATTLE BOARD */ + +#battle { background-color: silver; } +#battle_message { background-color: lightsteelblue; } +#battle_header { background-color: steelblue; color: white; } +#FR, #ER { background-color: #acacac; } + +/* CARD AND BLOCK IMAGES */ + +.card, .small_card { background-color: #d3b37b; } +.card_back { background-color: black; } + +.card_back{background-image:url('cards/card_back.jpg')} +.card_force_march{background-image:url('cards/card_force_march.jpg')} +.card_muster{background-image:url('cards/card_muster.jpg')} +.card_piracy{background-image:url('cards/card_piracy.jpg')} +.card_plague{background-image:url('cards/card_plague.jpg')} +.card_surprise{background-image:url('cards/card_surprise.jpg')} +.card_treason{background-image:url('cards/card_treason.jpg')} +.card_2{background-image:url('cards/card_2.jpg')} +.card_3{background-image:url('cards/card_3.jpg')} +.card_4{background-image:url('cards/card_4.jpg')} + +.known.block{background-image:url(blocks.jpg)} + +.known.block_11{background-position:0px 0px} +.known.block_12{background-position:-60px 0px} +.known.block_13{background-position:-120px 0px} +.known.block_14{background-position:-180px 0px} +.known.block_15{background-position:-240px 0px} +.known.block_16{background-position:-300px 0px} +.known.block_17{background-position:-360px 0px} +.known.block_21{background-position:0px -60px} +.known.block_22{background-position:-60px -60px} +.known.block_23{background-position:-120px -60px} +.known.block_24{background-position:-180px -60px} +.known.block_25{background-position:-240px -60px} +.known.block_26{background-position:-300px -60px} +.known.block_27{background-position:-360px -60px} +.known.block_31{background-position:0px -120px} +.known.block_32{background-position:-60px -120px} +.known.block_33{background-position:-120px -120px} +.known.block_34{background-position:-180px -120px} +.known.block_35{background-position:-240px -120px} +.known.block_36{background-position:-300px -120px} +.known.block_37{background-position:-360px -120px} +.known.block_41{background-position:0px -180px} +.known.block_42{background-position:-60px -180px} +.known.block_43{background-position:-120px -180px} +.known.block_44{background-position:-180px -180px} +.known.block_45{background-position:-240px -180px} +.known.block_46{background-position:-300px -180px} +.known.block_47{background-position:-360px -180px} +.known.block_51{background-position:0px -240px} +.known.block_52{background-position:-60px -240px} +.known.block_53{background-position:-120px -240px} +.known.block_54{background-position:-180px -240px} +.known.block_55{background-position:-240px -240px} +.known.block_56{background-position:-300px -240px} +.known.block_57{background-position:-360px -240px} +.known.block_61{background-position:0px -300px} +.known.block_62{background-position:-60px -300px} +.known.block_63{background-position:-120px -300px} +.known.block_64{background-position:-180px -300px} +.known.block_65{background-position:-240px -300px} +.known.block_66{background-position:-300px -300px} +.known.block_67{background-position:-360px -300px} +.known.block_71{background-position:0px -360px} +.known.block_72{background-position:-60px -360px} +.known.block_73{background-position:-120px -360px} +.known.block_74{background-position:-180px -360px} +.known.block_75{background-position:-240px -360px} +.known.block_76{background-position:-300px -360px} +.known.block_77{background-position:-360px -360px} +.known.block_81{background-position:0px -420px} +.known.block_82{background-position:-60px -420px} +.known.block_83{background-position:-120px -420px} +.known.block_84{background-position:-180px -420px} +.known.block_85{background-position:-240px -420px} +.known.block_86{background-position:-300px -420px} +.known.block_87{background-position:-360px -420px} +.known.block_91{background-position:0px -480px} +.known.block_92{background-position:-60px -480px} +.known.block_93{background-position:-120px -480px} +.known.block_94{background-position:-180px -480px} +.known.block_95{background-position:-240px -480px} +.known.block_96{background-position:-300px -480px} +.known.block_97{background-position:-360px -480px} @@ -2,278 +2,20 @@ <html> <head> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> -<meta charset="UTF-8"> +<meta charset="utf-8"> <title>RICHARD III</title> <link rel="icon" href="icons/Red_Rose_Badge_of_Lancaster.svg"> <link rel="stylesheet" href="/fonts/fonts.css"> <link rel="stylesheet" href="/common/grid.css"> <link rel="stylesheet" href="/common/battle_abc.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="data.js"></script> -<script defer src="ui.js"></script> -<style> - -#grid_center { background-color: #788; } -#grid_role { background-color: silver; } -#grid_top { background-color: silver; } -#grid_top.your_turn { background-color: orange; } -.one .role_name { background-color: salmon; } -.two .role_name { background-color: ghostwhite; } -#turn_info { background-color: gainsboro; } - -#log { background-color: ghostwhite; } -#log .st { background-color: steelblue; color: white; font-weight: bold; } -#log .L { background-color: pink; } -#log .Y { background-color: gainsboro; } -#log .bs { background-color: lightsteelblue; } -#log .br { font-style: italic; text-decoration: underline; } - -.hand { - min-height: 300px; -} - -.card { - width: 180px; - height: 280px; - border-radius: 12px; -} - -.card.enabled:hover { - transform: scale(1.1); -} - -.role_info { padding: 15px; } -.small_card { width: 90px; height: 140px; border-radius: 5px; } -.small_card:hover { width: 180px; height: 280px; border-radius: 10px; } - -@media (max-height: 800px) { - .role_info { padding: 15px 0 0 0; } - .small_card { width: 180px; height: 80px; border-radius: 10px 10px 0 0; } - .small_card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; } -} - -@media (min-height: 1200px) { - .small_card { width: 180px; height: 280px; border-radius: 10px; } -} - -/* MAP */ - -#mapwrap { - position: relative; - box-shadow: 0px 1px 10px rgba(0,0,0,0.5); - width: 1688px; - height: 1950px; -} - -#map { - position: absolute; - width: 1688px; - height: 1950px; -} - -#map svg { - position: absolute; -} - -#map svg image { - pointer-events: none; -} - -#map svg path.area { - fill: green; - stroke: green; - stroke-width: 20px; - fill-opacity: 0.4; - stroke-opacity: 0.8; - opacity: 0; -} - -#map svg #area_France { fill: white; stroke: white; } -#map svg #area_Calais { fill: dodgerblue; stroke: dodgerblue; } -#map svg #area_English_Channel { fill: dodgerblue; stroke: dodgerblue; } -#map svg #area_Irish_Sea { fill: dodgerblue; stroke: dodgerblue; } -#map svg #area_North_Sea { fill: dodgerblue; stroke: dodgerblue; } - -#map svg path.area.highlight { - cursor: pointer; - opacity: 1; -} -#map svg path.area.where { - opacity: 1; - fill: darkslategray; - stroke: darkslategray; -} -#map svg path.area.where.highlight { - stroke: white; -} - -#map.hide_blocks #blocks { - visibility: hidden; -} - -/* BLOCKS */ - -body.shift .block.known:hover { - transform: scale(2) !important; - transition: 100ms; - z-index: 100; -} - -#battle div.block { - position: relative; -} - -#map div.block { - position: absolute; -} - -div.block { - border-radius: 6px; - width: 60px; - height: 60px; -} - -div.block { background-size: cover; background-repeat: no-repeat; } - -div.block { box-shadow: 0px 0px 3px 0px black; } - -div.block.Lancaster { border: 3px solid brown; background-color: indianred; } -div.block.York { border: 3px solid gainsboro; background-color: whitesmoke; } -div.block.Rebel { border: 3px solid dimgray; background-color: gray; } - -div.block.Lancaster.highlight { border-color: white; } -div.block.York.highlight { border-color: white; } -div.block.Rebel.highlight { border-color: white; } - -.hit div.block.highlight { border-color: black; box-shadow: 0 0 3px 0px black; } - -div.block.Lancaster.selected { border-color: yellow; } -div.block.York.selected { border-color: yellow; } -div.block.Rebel.selected { border-color: yellow; } - -div.block.highlight { cursor: pointer; box-shadow: 0 0 3px 1px white; } -div.block.selected { box-shadow: 0 0 3px 1px yellow; } -div.block.moved { filter: grayscale(50%) brightness(85%); } -div.block.highlight.moved { filter: grayscale(60%) brightness(95%); } - -div.block:hover { z-index: 1; } - -div.block.r1 { transform: rotate(-90deg); } -div.block.r2 { transform: rotate(-180deg); } -div.block.r3 { transform: rotate(-270deg); } - -div.block { - transition-property: top, left, transform; - transition-duration: 700ms, 700ms, 200ms; - transition-timing-function: ease; -} - -/* BATTLE BOARD */ - -#battle { background-color: silver; } -#battle_message { background-color: lightsteelblue; } -#battle_header { background-color: steelblue; color: white; } -.battle_separator { background-color: steelblue; } - -.battle_reserves > td > div { height: 75px; padding: 5px; } -.battle_a_cell > div { min-width: 180px; padding: 5px 10px; } -.battle_b_cell > div { min-width: 180px; padding: 5px 10px; } -.battle_c_cell > div { min-width: 180px; padding: 5px 10px; } -.battle_d_cell > div { min-width: 90px; padding: 5px 10px; } - -/* CARD AND BLOCK IMAGES */ - -.card, .small_card { background-color: #d3b37b; } -.card_back { background-color: black; } - -.card_back{background-image:url('cards/card_back.jpg')} -.card_force_march{background-image:url('cards/card_force_march.jpg')} -.card_muster{background-image:url('cards/card_muster.jpg')} -.card_piracy{background-image:url('cards/card_piracy.jpg')} -.card_plague{background-image:url('cards/card_plague.jpg')} -.card_surprise{background-image:url('cards/card_surprise.jpg')} -.card_treason{background-image:url('cards/card_treason.jpg')} -.card_2{background-image:url('cards/card_2.jpg')} -.card_3{background-image:url('cards/card_3.jpg')} -.card_4{background-image:url('cards/card_4.jpg')} - -.known.block_11{background-image:url(blocks/block_11.jpg)} -.known.block_12{background-image:url(blocks/block_12.jpg)} -.known.block_13{background-image:url(blocks/block_13.jpg)} -.known.block_14{background-image:url(blocks/block_14.jpg)} -.known.block_15{background-image:url(blocks/block_15.jpg)} -.known.block_16{background-image:url(blocks/block_16.jpg)} -.known.block_17{background-image:url(blocks/block_17.jpg)} -.known.block_21{background-image:url(blocks/block_21.jpg)} -.known.block_22{background-image:url(blocks/block_22.jpg)} -.known.block_23{background-image:url(blocks/block_23.jpg)} -.known.block_24{background-image:url(blocks/block_24.jpg)} -.known.block_25{background-image:url(blocks/block_25.jpg)} -.known.block_26{background-image:url(blocks/block_26.jpg)} -.known.block_27{background-image:url(blocks/block_27.jpg)} -.known.block_31{background-image:url(blocks/block_31.jpg)} -.known.block_32{background-image:url(blocks/block_32.jpg)} -.known.block_33{background-image:url(blocks/block_33.jpg)} -.known.block_34{background-image:url(blocks/block_34.jpg)} -.known.block_35{background-image:url(blocks/block_35.jpg)} -.known.block_36{background-image:url(blocks/block_36.jpg)} -.known.block_37{background-image:url(blocks/block_37.jpg)} -.known.block_41{background-image:url(blocks/block_41.jpg)} -.known.block_42{background-image:url(blocks/block_42.jpg)} -.known.block_43{background-image:url(blocks/block_43.jpg)} -.known.block_44{background-image:url(blocks/block_44.jpg)} -.known.block_45{background-image:url(blocks/block_45.jpg)} -.known.block_46{background-image:url(blocks/block_46.jpg)} -.known.block_47{background-image:url(blocks/block_47.jpg)} -.known.block_51{background-image:url(blocks/block_51.jpg)} -.known.block_52{background-image:url(blocks/block_52.jpg)} -.known.block_53{background-image:url(blocks/block_53.jpg)} -.known.block_54{background-image:url(blocks/block_54.jpg)} -.known.block_55{background-image:url(blocks/block_55.jpg)} -.known.block_56{background-image:url(blocks/block_56.jpg)} -.known.block_57{background-image:url(blocks/block_57.jpg)} -.known.block_61{background-image:url(blocks/block_61.jpg)} -.known.block_62{background-image:url(blocks/block_62.jpg)} -.known.block_63{background-image:url(blocks/block_63.jpg)} -.known.block_64{background-image:url(blocks/block_64.jpg)} -.known.block_65{background-image:url(blocks/block_65.jpg)} -.known.block_66{background-image:url(blocks/block_66.jpg)} -.known.block_67{background-image:url(blocks/block_67.jpg)} -.known.block_71{background-image:url(blocks/block_71.jpg)} -.known.block_72{background-image:url(blocks/block_72.jpg)} -.known.block_73{background-image:url(blocks/block_73.jpg)} -.known.block_74{background-image:url(blocks/block_74.jpg)} -.known.block_75{background-image:url(blocks/block_75.jpg)} -.known.block_76{background-image:url(blocks/block_76.jpg)} -.known.block_77{background-image:url(blocks/block_77.jpg)} -.known.block_81{background-image:url(blocks/block_81.jpg)} -.known.block_82{background-image:url(blocks/block_82.jpg)} -.known.block_83{background-image:url(blocks/block_83.jpg)} -.known.block_84{background-image:url(blocks/block_84.jpg)} -.known.block_85{background-image:url(blocks/block_85.jpg)} -.known.block_86{background-image:url(blocks/block_86.jpg)} -.known.block_87{background-image:url(blocks/block_87.jpg)} -.known.block_91{background-image:url(blocks/block_91.jpg)} -.known.block_92{background-image:url(blocks/block_92.jpg)} -.known.block_93{background-image:url(blocks/block_93.jpg)} -.known.block_94{background-image:url(blocks/block_94.jpg)} -.known.block_95{background-image:url(blocks/block_95.jpg)} -.known.block_96{background-image:url(blocks/block_96.jpg)} -.known.block_97{background-image:url(blocks/block_97.jpg)} - -</style> +<script defer src="play.js"></script> </head> <body> -<div id="status"></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> - <table id="battle"> <tr> <th id="battle_header" colspan=4></th> @@ -297,74 +39,29 @@ div.block { <th id="battle_message" colspan=4></th> </table> -<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="menu_item" onclick="window.open('info/blocks.html', '_blank')">Blocks</div> - <div class="resign menu_separator"></div> - <div class="resign menu_item" onclick="confirm_resign()">Resign</div> - </div> +<header> + <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="menu_item" onclick="window.open('info/blocks.html', '_blank')">Blocks</div> + <div class="resign menu_separator"></div> + <div class="resign menu_item" onclick="confirm_resign()">Resign</div> </div> - - <div class="image_button" onclick="toggle_blocks()"><img src="/images/earth-africa-europe.svg"></div> - <div class="image_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div> - <div 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="execute_clarence_button" onclick="on_button_execute_clarence()" class="hide"> - Execute Clarence - </button> - <button id="execute_exeter_button" onclick="on_button_execute_exeter()" class="hide"> - Execute Exeter - </button> - <button id="treachery_button" onclick="on_button_treachery()" class="hide"> - Treachery - </button> - <button id="eliminate_button" onclick="on_button_eliminate()" class="hide"> - Eliminate - </button> - <button id="end_retreat_button" onclick="on_button_end_retreat()" class="hide"> - End retreat - </button> - <button id="end_regroup_button" onclick="on_button_end_regroup()" class="hide"> - End regroup - </button> - <button id="end_political_turn_button" onclick="on_button_end_political_turn()" class="hide"> - End political turn - </button> - <button id="end_supply_phase_button" onclick="on_button_end_supply_phase()" class="hide"> - End supply phase - </button> - <button id="end_action_phase_button" onclick="on_button_end_action_phase()" class="hide"> - End action phase - </button> - <button id="end_exile_limits_button" onclick="on_button_end_exile_limits()" class="hide"> - End exile limits - </button> - <button id="pass_button" onclick="on_button_pass()" class="hide"> - Pass - </button> - <button id="undo_button" onclick="on_button_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="grid_role"> - + <div class="icon_button" onclick="toggle_blocks()"><img src="/images/earth-africa-europe.svg"></div> + <div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div> + <div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div> + <div id="prompt"></div> + <div id="actions"></div> +</header> + +<aside> + <div id="roles"> <div class="role one"> <div class="role_name"> Lancaster @@ -373,7 +70,6 @@ div.block { </div> <div class="role_info"><div class="small_card card_back" id="lancaster_card"></div></div> </div> - <div class="role two"> <div class="role_name"> York @@ -382,15 +78,12 @@ div.block { </div> <div class="role_info"><div class="small_card card_back" id="york_card"></div></div> </div> - <div id="turn_info">-</div> - </div> - <div id="log"></div> +</aside> - <div id="grid_center"> - +<main> <div id="mapwrap"> <div id="map"> @@ -1556,11 +1249,10 @@ c20 -20 41 -80 41 -116 0 -27 -18 -45 -46 -45 -40 0 -54 25 -54 99 0 37 3 71 <div id="blocks"></div> <div id="offmap" style="visibility:hidden"></div> - </div> </div> -<div class="hand"> +<div id="cards" class="hand"> <div id="card+1" class="card card_force_march"></div> <div id="card+2" class="card card_muster"></div> <div id="card+3" class="card card_piracy"></div> @@ -1595,7 +1287,8 @@ c20 -20 41 -80 41 -116 0 -27 -18 -45 -46 -45 -40 0 -54 25 -54 99 0 37 3 71 <div id="back+7" class="card card_back"></div> </div> - </div> +</main> + +<footer id="status"></footer> -</div> </body> @@ -266,54 +266,6 @@ function on_click_card(evt) { send_action('play', c); } -function on_button_undo(evt) { - send_action('undo'); -} - -function on_button_pass(evt) { - send_action('pass'); -} - -function on_button_end_action_phase(evt) { - send_action('end_action_phase'); -} - -function on_button_end_supply_phase(evt) { - send_action('end_supply_phase'); -} - -function on_button_end_political_turn(evt) { - send_action('end_political_turn'); -} - -function on_button_end_exile_limits(evt) { - send_action('end_exile_limits'); -} - -function on_button_end_regroup(evt) { - send_action('end_regroup'); -} - -function on_button_end_retreat(evt) { - send_action('end_retreat'); -} - -function on_button_eliminate(evt) { - send_action('eliminate'); -} - -function on_button_treachery(evt) { - send_action('treachery'); -} - -function on_button_execute_clarence(evt) { - send_action('execute_clarence'); -} - -function on_button_execute_exeter(evt) { - send_action('execute_exeter'); -} - function build_battle_button(menu, b, c, click, enter, img_src) { let img = new Image(); img.draggable = false; @@ -780,22 +732,22 @@ function update_battle() { } function on_update() { - show_action_button("#undo_button", "undo"); - show_action_button("#pass_button", "pass"); - show_action_button("#end_action_phase_button", "end_action_phase"); - show_action_button("#end_supply_phase_button", "end_supply_phase"); - show_action_button("#end_political_turn_button", "end_political_turn"); - show_action_button("#end_exile_limits_button", "end_exile_limits"); - show_action_button("#end_regroup_button", "end_regroup"); - show_action_button("#end_retreat_button", "end_retreat"); - show_action_button("#eliminate_button", "eliminate"); - show_action_button("#execute_clarence_button", "execute_clarence"); - show_action_button("#execute_exeter_button", "execute_exeter"); - let king = block_owner(game.king); document.getElementById("lancaster_vp").textContent = (king === LANCASTER ? KING_TEXT : PRETENDER_TEXT); document.getElementById("york_vp").textContent = (king === YORK ? KING_TEXT : PRETENDER_TEXT); + action_button("eliminate", "Eliminate"); + action_button("execute_clarence", "Execute Clarence"); + action_button("execute_exeter", "Execute Exeter"); + action_button("end_action_phase", "End action phase"); + action_button("end_supply_phase", "End supply phase"); + action_button("end_political_turn", "End political turn"); + action_button("end_exile_limits", "End exile limits"); + action_button("end_regroup", "End regroup"); + action_button("end_retreat", "End retreat"); + action_button("pass", "Pass"); + action_button("undo", "Undo"); + update_cards(); update_map(); @@ -812,7 +764,7 @@ function on_update() { build_map(); drag_element_with_mouse("#battle", "#battle_header"); -scroll_with_middle_mouse("#grid_center", 2); +scroll_with_middle_mouse("main", 2); init_map_zoom(); init_shift_zoom(); init_client(["Lancaster", "York"]); |