diff options
| author | Tor Andersson <tor@ccxvii.net> | 2024-10-25 11:58:58 +0200 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2024-10-26 00:00:01 +0200 |
| commit | 5d81b4294bd8f9b20ac8a396a185f6cf9550c00f (patch) | |
| tree | 1fd4e5fd1bbab268f3421cef825d6504b39d5370 /play.html | |
| parent | 7122c8101e49300b7e29266a939f355e9eb8ffd3 (diff) | |
| download | 1989-dawn-of-freedom-5d81b4294bd8f9b20ac8a396a185f6cf9550c00f.tar.gz | |
Update client.
Fixed some spelling errors in space data table.
Create tools directory and add Makefile.
Add layout.svg with boxes drawn on top of locations.
Add genlayout.js to create list of box locations.
Add gencolors.js to create beveled marker border colors.
Major rewrite of play.js and play.css with official assets.
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> |