<!DOCTYPE html> <!-- vim:set nowrap: --> <html lang="en"> <head> <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover"> <meta name="theme-color" content="#444"> <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! --> <menu> <li>Rules of Play <li>Background Book <li>Reference Sheets </menu> </details> <button onclick="toggle_pieces()"><img src="images/earth-africa-europe.svg"></button> <button onclick="toggle_discard()"><img src="images/bin.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> <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" src="images/Turn.gif"> <div class="us-action-round-tracker" id="action-round-tracker"></div> <img id="stability-track" src="images/SV_Stability.gif"> <img id="dem-TST" src="images/US_Tiananmen_Square.gif"> <img id="com-TST" src="images/SV_Tiananmen_Square.gif"> <img id="vp" src="images/VP.gif"> <div class="germany marker" id="East_Germany"> <p class="times_held" id="East_Germany_times_held">1</p></div> <div class="poland marker" id="Poland"> <p class="times_held" id="Poland_times_held">1</p></div> <div class="czech marker" id="Czechoslovakia"> <p class="times_held" id="Czechoslovakia_times_held">1</p></div> <div class="hungary marker" id="Hungary"> <p class="times_held" id="Hungary_times_held">1</p></div> <div class="romania marker" id="Romania"> <p class="times_held" id="Romania_times_held">1</p></div> <div class="bulgaria marker" id="Bulgaria"> <p class="times_held" id="Bulgaria_times_held">1</p></div> <!-- PERMANENT EVENT MARKERS ON THE BOARD --> <img id="solidarity_legalised" class="event-marker" src = "images/Event_Marker_Solidarity_Leg.gif"> <img id="systematization" class="event-marker" src="images/Event_Marker_Systematizatio.gif"> <img id="the_tyrant_is_gone" class="event-marker" src="images/Event_Marker_The_Tyrant_Is_.gif"> <img id="the_wall" class="event-marker" src="images/Event_Marker_The_Wall.gif"> </div> <div id="counters"></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="honecker" class="event-marker aside" src="images/Event_Marker_Honecker.gif"> <img id="st_nicholas_church" class="event-marker aside" src="images/Event_Marker_St_Nicholas.gif"> <img id="helsinki_final_act" class="event-marker aside" src="images/Event_Marker_Helsinki.gif"> <img id="eco_glasnost" class="event-marker aside" src = "images/Event_Marker_Eco_Glasnost.gif"> <img id="we_are_the_people" class="event-marker aside" src="images/Event_Marker_We_are_the_Peo.gif"> <img id="foreign_currency_debt_burden" class="event-marker aside" src="images/Event_Marker_Foreign_Curren.gif"> <img id="li_peng" class="event-marker aside" src="images/Event_Marker_Li_Peng_.gif"> <img id="austria_hungary_border_reopened" class="event-marker aside" src="images/Event_Marker_Austria_Hungar.gif"> <img id="grenztruppen" class="event-marker aside" src="images/Event_Marker_Grenz_Truppen.gif"> <img id="presidential_visit" class="event-marker aside" src="images/Event_Marker_Pres_Visit.gif"> <img id="securitate" class="event-marker aside" src="images/Event_Marker_Securitate.gif"> <img id="laslzo_tokes" class="event-marker aside" src="images/Event_Marker_Laszlo.gif"> <img id="stand_fast" class="event-marker aside" src="images/Event_Marker_Stand_Fast.gif"> <img id="elena" class="event-marker aside" src="images/Event_Marker_Elena.gif"> <img id="new_years_eve_party" class="event-marker aside" src="images/Event_Marker_NYE_Party.gif"> </div> </div> </section> <!-- 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> <!-- 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> </section> <!-- 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> <!-- 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> <!-- OPPONENT HAND --> <section id="sec_opp_hand"> <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> <!-- HAND --> <section id="sec_hand"> <div id="hand_panel" class="panel hide"> <div id="hand_header" class="panel_header">Hand</div> <div id="hand" class="panel_body"></div> </div> </section> </main> <footer id="status"></footer> </html>