diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 236 |
1 files changed, 86 insertions, 150 deletions
@@ -7,204 +7,140 @@ <meta charset="utf-8"> <title>1989</title> <link rel="icon" href="favicon.png"> -<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/fonts/fonts.css"> <link rel="stylesheet" href="/common/client.css"> <link rel="stylesheet" href="play.css"> <script defer src="/common/client.js"></script> <script defer src="data.js"></script> -<!-- <script defer src="rules.js"></script> --> <script defer src="play.js"></script> - </head> <body> + <div id="tooltip" class="card hide"></div> <header> <div id="toolbar"> <details> - <summary><img src="images/cog.svg" width="50" height="50"></summary> <!-- Not sure why this is so big! --> + <summary><img src="/images/cog.svg"></summary> + <menu> + <li><a target="_blank" href="/1989-dawn-of-freedom/info/rules.html">Rules of Play</a> + <li><a target="_blank" href="/1989-dawn-of-freedom/info/background.html">Background Book</a> + <li><a target="_blank" href="/1989-dawn-of-freedom/info/reference.html">Reference Sheets</a> + <li class="separator"> + <li><a target="_blank" href="/1989-dawn-of-freedom/info/cards.html">Card Gallery</a> + </menu> + </details> + <details> + <summary><img src="images/trash-can.svg"></summary> <menu> - <li>Rules of Play - <li>Background Book - <li>Reference Sheets - + <li id="show_removed_menu" onclick="toggle_removed()">Show removed events + <li id="show_discard_menu" onclick="toggle_discard()">Show discard </menu> </details> - <button onclick="toggle_pieces()"><img src="images/earth-africa-europe.svg"></button> - <button onclick="toggle_discard()"><img src="images/bin.png"></button> - <button onclick="toggle_removed()"><img src="images/remove.png"></button> </div> </header> <aside> - <div id="roles"> - <div class="role" id="role_Democrat"> - <div class="role_name">Democrat</div> - <div class="role_stat" id="role_stat_dem">0 cards in hand</div> - <div class="role_user">-</div> - </div> - <div class="role" id="role_Communist"> - <div class="role_name">Communist</div> - <div class="role_stat" id="role_stat_com">0 cards in hand</div> - <div class="role_user">-</div> - </div> - <div class="role" id="deck_data"> - <div class="deck_name" id="deck_stat">Strategy deck:</div> - <div class="role_stat" id="deck_length">0 cards</div> - </div> - </div> + <div id="roles"></div> + <div id="turn_info"></div> <div id="log"></div> </aside> -<main data-min-zoom="0.5" data-max-zoom = "2.0"> - -<!-- MAP, EVENTS --> -<section id="sec_map"> - -<div class="map" id="map"> - <div id="pieces"> - <div id="overlay"> - <h2 id="space-characteristics"></h2> - <img id="turn-tracker" class="hide" src="images/Turn.gif"> - <div class="us-action-round-tracker hide" id="action-round-tracker"></div> - <img id="stability-track" class="hide" src="images/SV_Stability.gif"> - <img id="dem-TST" class="hide" src="images/US_Tiananmen_Square.gif"> - <img id="com-TST" class="hide" src="images/SV_Tiananmen_Square.gif"> - <img id="vp" class="hide" src="images/VP.gif"> - <div class="germany marker" id="East_Germany"> - <p class="times_held hide" id="East_Germany_times_held">1</p></div> - <div class="poland marker" id="Poland"> - <p class="times_held hide" id="Poland_times_held">1</p></div> - <div class="czech marker" id="Czechoslovakia"> - <p class="times_held hide" id="Czechoslovakia_times_held">1</p></div> - <div class="hungary marker" id="Hungary"> - <p class="times_held hide" id="Hungary_times_held">1</p></div> - <div class="romania marker" id="Romania"> - <p class="times_held hide" id="Romania_times_held">1</p></div> - <div class="bulgaria marker" id="Bulgaria"> - <p class="times_held hide" id="Bulgaria_times_held">1</p></div> +<main> + +<div id="mapwrap"> +<div id="map"> + <div id="spaces"></div> + <div id="markers"> + <div id="marker_turn" class="marker"></div> + <div id="marker_action_round" class="marker"></div> + <div id="marker_stability_track" class="marker"></div> + <div id="marker_dem_tst" class="marker"></div> + <div id="marker_com_tst" class="marker"></div> + <div id="marker_vp" class="marker"></div> + + <!-- TODO + <div class="germany marker" id="East_Germany"> + <p class="times_held hide" id="East_Germany_times_held">1</p></div> + <div class="poland marker" id="Poland"> + <p class="times_held hide" id="Poland_times_held">1</p></div> + <div class="czech marker" id="Czechoslovakia"> + <p class="times_held hide" id="Czechoslovakia_times_held">1</p></div> + <div class="hungary marker" id="Hungary"> + <p class="times_held hide" id="Hungary_times_held">1</p></div> + <div class="romania marker" id="Romania"> + <p class="times_held hide" id="Romania_times_held">1</p></div> + <div class="bulgaria marker" id="Bulgaria"> + <p class="times_held hide" id="Bulgaria_times_held">1</p></div> + --> <!-- PERMANENT EVENT MARKERS ON THE BOARD --> - - - <img id="event_2" class="event-marker" src = "images/Event_Marker_Solidarity_Leg.gif"> - <img id="event_69" class="event-marker" src="images/Event_Marker_Systematizatio.gif"> - <img id="event_97" class="event-marker" src="images/Event_Marker_The_Tyrant_Is_.gif"> - <img id="event_9" class="event-marker" src="images/Event_Marker_The_Wall.gif"> - - </div> - <div id="counters"></div> + <div id="event_reminder_list"></div> </div> </div> -</section> - - -<!-- EVENTS IN PLAY --> -<section id = "sec_events"> - <div id="events_panel" class="panel hide"> - <div id="events_header" class="panel_header">Event Markers</div> - <div id="events" class="panel_body"> - <img id="event_15" class="event-marker aside" src="images/Event_Marker_Honecker.gif"> - <img id="event_24" class="event-marker aside" src="images/Event_Marker_St_Nicholas.gif"> - <img id="event_26" class="event-marker aside" src="images/Event_Marker_Helsinki.gif"> - <img id="event_39" class="event-marker aside" src = "images/Event_Marker_Eco_Glasnost.gif"> - <img id="event_48" class="event-marker aside" src="images/Event_Marker_We_are_the_Peo.gif"> - <img id="event_49" class="event-marker aside" src="images/Event_Marker_Foreign_Curren.gif"> - <img id="event_53" class="event-marker aside" src="images/Event_Marker_Li_Peng_.gif"> - <img id="event_58" class="event-marker aside" src="images/Event_Marker_Austria_Hungar.gif"> - <img id="event_59" class="event-marker aside" src="images/Event_Marker_Grenz_Truppen.gif"> - <img id="event_65" class="event-marker aside" src="images/Event_Marker_Pres_Visit.gif"> - <img id="event_70" class="event-marker aside" src="images/Event_Marker_Securitate.gif"> - <img id="event_73" class="event-marker aside" src="images/Event_Marker_Laszlo.gif"> - <img id="event_100" class="event-marker aside" src="images/Event_Marker_Stand_Fast.gif"> - <img id="event_101" class="event-marker aside" src="images/Event_Marker_Elena.gif"> - <img id="event_104" class="event-marker aside" src="images/Event_Marker_NYE_Party.gif"> - </div> - </div> -</section> +</div> <!-- EVENTS ON THE TABLE --> -<section id = "sec_table_cards"> - <div id="table_panel" class="panel hide"> - <div id="table_header" class="panel_header">Cards on the Table</div> - <div id="table_cards" class="panel_body"></div> - </div> -</section> +<div id="table_panel" class="panel"> + <div id="table_header" class="panel_header">Cards on the Table</div> + <div id="table_cards" class="panel_body"></div> +</div> <!-- PLAYED CARD --> -<section id="sec_played_card"> -<div id="played_card_panel" class="panel hide"> -<div id="played_card_header" class="panel_header">Played Card</div> -<div id="played_card" class="panel_body"></div> +<div id="played_card_panel" class="panel"> + <div id="played_card_header" class="panel_header">Played Card</div> + <div id="played_card" class="panel_body"></div> </div> -</section> - -<!-- DISCARD --> -<section id = "sec_discard"> - <div id="discard_panel" class="panel"> - <div id="discard_header" class="panel_header">Discard</div> - <div id="discard" class="panel_body"></div> - </div> -</section> - -<!-- PERMANENTLY REMOVED --> -<section id = "sec_removed"> - <div id="removed_panel" class="panel hide"> - <div id="removed_header" class="panel_header">Permanently Removed Events</div> - <div id="removed" class="panel_body"></div> - </div> -</section> +<!-- HAND --> +<div id="hand_panel" class="panel"> + <div id="hand_header" class="panel_header">Hand</div> + <div id="hand" class="panel_body"></div> +</div> <!-- POWERSTRUGGLE --> -<section id = "sec_power"> - <div id="ceausescu_panel" class="panel hide"> - <div id="ceausescu_header" class="panel_header">Ceausescu Cards</div> - <div id="ceausescu_hand" class="panel_body"></div> - </div> - <div id="power_panel" class="panel hide"> - <div id="power_header" class="panel_header">Power Struggle Hand</div> - <div id="power_hand" class="panel_body"></div> - </div> -</section> - - +<div id="ceausescu_panel" class="panel"> + <div id="ceausescu_header" class="panel_header">Ceausescu Cards</div> + <div id="ceausescu_hand" class="panel_body"></div> +</div> +<div id="power_panel" class="panel"> + <div id="power_header" class="panel_header">Power Struggle Hand</div> + <div id="power_hand" class="panel_body"></div> +</div> <!-- OPPONENT HAND --> -<section id="sec_opp_hand"> +<div id="opp_hand_panel" class="panel"> + <div id="opp_hand_header" class="panel_header">Opponent Hand</div> + <div id="opp_hand" class="panel_body"></div> +</div> - <div id="opp_hand_panel" class="panel hide"> - <div id="opp_hand_header" class="panel_header">Opponent Hand</div> - <div id="opp_hand" class="panel_body"></div> - </div> - -</section> +<div id="opp_power_hand_panel" class="panel"> + <div id="opp_power_hand_header" class="panel_header">Opponent Power Struggle Hand</div> + <div id="opp_power_hand" class="panel_body"></div> +</div> <!-- SAMIZDAT CARD --> -<section id = "sec_samizdat"> - <div id="samizdat_panel" class="panel"> - <div id="samizdat_header" class="panel_header">Set aside card</div> - <div id="samizdat_card" class="panel_body"></div> - </div> -</section> - +<div id="samizdat_panel" class="panel"> + <div id="samizdat_header" class="panel_header">Samizdat Card</div> + <div id="samizdat_card" class="panel_body"></div> +</div> -<!-- HAND --> -<section id="sec_hand"> +<!-- PERMANENTLY REMOVED --> +<div id="removed_panel" class="panel"> + <div id="removed_header" class="panel_header">Permanently Removed Events</div> + <div id="removed" class="panel_body"></div> +</div> -<div id="hand_panel" class="panel hide"> - <div id="hand_header" class="panel_header">Hand</div> - <div id="hand" class="panel_body"></div> +<!-- DISCARD --> +<div id="discard_panel" class="panel"> + <div id="discard_header" class="panel_header">Discard</div> + <div id="discard" class="panel_body"></div> </div> -</section> </main> <footer id="status"></footer> - - </html> |