diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 402 |
1 files changed, 133 insertions, 269 deletions
@@ -1,269 +1,133 @@ -<!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>
-
-<menu id="popup" class="popup">
- <li class="title">TITLE
- <li class="separator">
- <li data-action="card_event"><span>🎴</span> Event
- <li data-action="card_influence"><span>⭐</span> Place SPs
- <li data-action="card_support_check"><span>💪</span> Support Check
- <li data-action="card_tst"><span><img id = "tank" src="images/tank2.png" style="width:20px; height: 30px; vertical-align: middle;"></span> Tiananmen Square Track
-</menu>
-
-<menu id="popup_opp_event" class="popup">
- <li class="title">TITLE
- <li class="separator">
- <li data-action="card_opp_event"><span>🎴</span> Resolve Opponent Event
- <li data-action="card_influence"><span>⭐</span> Place SPs
- <li data-action="card_support_check"><span>💪</span> Support Check
- <li data-action="card_tst"><span><img src="images/tank1.png" style="width:16px; height: 16px; vertical-align: middle;"></span> Tiananmen Square Track
-</menu>
-
-<menu id="popup_ceh_check" class="popup">
- <li class="title">TITLE
- <li class="separator">
- <li data-action="card_ceh"><span>🎴</span> Play with Common European Home
- <li data-action="card_opp_event"><span>🎴</span> Resolve Opponent Event
- <li data-action="card_influence"><span>⭐</span> Place SPs
- <li data-action="card_support_check"><span>💪</span> Support Check
- <li data-action="card_tst"><span>🛤</span> Tiananmen Square Track
-</menu>
-
-<menu id="popup_tst_7" class="popup">
- <li class="title">TITLE
- <li class="separator">
- <li data-action="card_tst_7"><span>🎴</span> Cancel Opponent Event
- <li data-action="card_opp_event"><span>🎴</span> Resolve Opponent Event
- <li data-action="card_influence"><span>⭐</span> Place SPs
- <li data-action="card_support_check"><span>💪</span> Support Check
- <li data-action="card_tst"><span><img src="images/tank1.png" style="width:16px; height: 16px; vertical-align: middle;"></span> Tiananmen Square Track
-</menu>
-
-<menu id="popup_tst_8" class="popup">
- <li class="title">TITLE
- <li class="separator">
- <li data-action="card_tst_8"><span>🎴</span> Event and Operations
- <li data-action="card_event"><span>🎴</span> Event
- <li data-action="card_influence"><span>⭐</span> Place SPs
- <li data-action="card_support_check"><span>💪</span> Support Check
- <li data-action="card_tst"><span><img src="images/tank1.png" style="width:16px; height: 16px; vertical-align: middle;"></span> Tiananmen Square Track
-</menu>
-
-<menu id="popup_tst_7_8" class="popup">
- <li class="title">TITLE
- <li class="separator">
- <li data-action="card_tst_7"><span>🎴</span> Cancel Opponent Event
- <li data-action="card_opp_event"><span>🎴</span> Resolve Opponent Event
- <li data-action="card_tst_8"><span>🎴</span> Event and Operations
- <li data-action="card_influence"><span>⭐</span> Place SPs
- <li data-action="card_support_check"><span>💪</span> Support Check
- <li data-action="card_tst"><span><img src="images/tank1.png" style="width:16px; height: 16px; vertical-align: middle;"></span> Tiananmen Square Track
-</menu>
-
-<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>
- <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="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>
-
- <!-- 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>
-</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>
-
-<!-- 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>
-
-<!-- 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>
-
-<!-- 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>
-
-
-
-<!-- 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>
-
-<!-- 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>
-
-
-<!-- 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>
+<!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="images/Hammer_and_sickle.svg"> +<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="play.js"></script> +</head> + +<body> + +<div id="tooltip" class="card hide"></div> + +<header> + <div id="toolbar"> + <details> + <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 id="show_removed_menu" onclick="toggle_removed()">Show/hide removed events + <li id="show_discard_menu" onclick="toggle_discard()">Show/hide discard + </menu> + </details> + </div> +</header> + +<aside> + <div id="roles"></div> + <div id="turn_info"></div> + <div id="log"></div> +</aside> + +<main> + +<div id="mapwrap"> +<div id="map"> + <div id="spaces"></div> + <div id="markers"> + <div id="marker_turn" class="marker" style="left: 653px; top: 79px;"></div> + <div id="marker_action_round" class="marker dem" style="left: 708px; top: 141px;"></div> + <div id="marker_stability_track" class="marker" style="left: 1380px; top: 1080px;"></div> + <div id="marker_dem_tst" class="marker" style="left: 52px; top: 2127px;"></div> + <div id="marker_com_tst" class="marker" style="left: 52px; top: 2256px;"></div> + <div id="marker_vp" class="marker" style="left: 846px; top: 2425px;"></div> + + <!-- PERMANENT EVENT MARKERS ON THE BOARD --> + <div id="event_reminder_list"></div> + </div> +</div> +</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> + +<div id="power_panel" class="autohide panel"> + <div id="power_header" class="panel_header">Power Struggle Hand</div> + <div id="power_hand" class="panel_body power"></div> +</div> + +<div id="ceausescu_panel" class="autohide panel"> + <div id="ceausescu_header" class="panel_header">The Crowd Turns Against Ceausescu</div> + <div id="ceausescu_hand" class="panel_body power"></div> +</div> + +<div id="securitate_panel" class="autohide panel"> + <div id="securiate_header" class="panel_header">Securitate - Democrat Power Struggle Cards</div> + <div id="securitate" class="panel_body"></div> +</div> + +<div id="power_discard_panel" class="autohide panel"> + <div id="power_discard_header" class="panel_header">Power Struggle Discard</div> + <div id="power_discard" class="panel_body power"></div> +</div> + +<div id="hand_panel" class="panel"> + <div id="hand_header" class="panel_header">Hand</div> + <div id="hand" class="panel_body"></div> +</div> + +<!-- OPPONENT HAND --> +<div id="opp_hand_panel" class="autohide panel"> + <div id="opp_hand_header" class="panel_header">Opponent Hand</div> + <div id="opp_hand" class="panel_body"></div> +</div> + +<!-- SAMIZDAT CARD --> +<div id="samizdat_panel" class="autohide panel"> + <div id="samizdat_header" class="panel_header">Samizdat - Set Aside Card</div> + <div id="samizdat_card" class="panel_body"></div> +</div> + +<!-- DISCARD --> +<div id="discard_panel" class="panel hide"> + <div id="discard_header" class="panel_header">Discard</div> + <div id="discard" class="panel_body"></div> +</div> + +<!-- PERSISTENT EVENTS --> +<div id="persistent_panel" class="panel"> + <div id="persistent_header" class="panel_header">Persistent Events on the Table</div> + <div id="persistent" class="panel_body"></div> +</div> + +<!-- PERMANENTLY 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> + +</main> + +<footer id="status"></footer> + +</html>
\ No newline at end of file |