diff options
| author | iainp5 <iain.pearce.ip@gmail.com> | 2024-08-16 08:40:49 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-08-16 08:40:49 +0100 |
| commit | 4c2889a7589113fbf4aabb82049d8291cacb5ecb (patch) | |
| tree | 139cac72e0579f6ce76e50f3fac01db96da1cc17 | |
| parent | dba108ef04df0e0d606b12bd69070440a5c2ce7e (diff) | |
| download | 1989-dawn-of-freedom-4c2889a7589113fbf4aabb82049d8291cacb5ecb.tar.gz | |
Update play.html
| -rw-r--r-- | play.html | 119 |
1 files changed, 88 insertions, 31 deletions
@@ -8,7 +8,7 @@ <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="/fonts/fonts.css">
<link rel="stylesheet" href="/common/client.css">
<link rel="stylesheet" href="play.css">
<script defer src="/common/client.js"></script>
@@ -17,8 +17,9 @@ <script defer src="play.js"></script>
</head>
-<body>
+<body>
+<div id="tooltip" class="card hide"></div>
<header>
<div id="toolbar">
<details>
@@ -31,6 +32,7 @@ </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>
@@ -46,7 +48,16 @@ <div class="role_stat" id="role_stat_com">0 cards in hand</div>
<div class="role_user">-</div>
</div>
- <div id="turn_info"><div id="command" class="card teutonic aow_back"></div></div>
+ <div id="turn_info">
+ <div class = "aside_events" id="events_info">Active Event Markers:</div>
+ <div class = "aside_events" id="no_events">None</div>
+ <div>
+ <img id="eco_glasnost" class="event-marker aside" src = "images/Event_Marker_Eco_Glasnost.gif">
+ <img id="helsinki_final_act" class="event-marker aside" src="images/Event_Marker_Helsinki.gif">
+ <img id="st_nicholas_church" class="event-marker aside" src="images/Event_Marker_St_Nicholas.gif">
+ <img id="we_are_the_people" class="event-marker aside" src="images/Event_Marker_We_are_the_Peo.gif">
+ </div>
+ </div>
</div>
<div id="log"></div>
</aside>
@@ -57,45 +68,91 @@ <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 id="overlay">
- <h2 id="space-characteristics">here I am!</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">1</p></div>
- <div class="poland marker" id="Poland">
- <p class="times_held" id="Poland">1</p></div>
- <div class="czech marker" id="Czechoslovakia">
- <p class="times_held" id="Czechoslovakia">1</p></div>
- <div class="hungary marker" id="Hungary">
- <p class="times_held" id="Hungary">1</p></div>
- <div class="romania marker" id="Romania">
- <p class="times_held" id="Romania">1</p></div>
- <div class="bulgaria marker" id="Bulgaria">
- <p class="times_held" id="Bulgaria">1</p></div>
-</div>
+ </div>
+ <div id="counters"></div>
+ </div>
</div>
+</section>
+
-<div id="events_panel" class="panel hide">
-<div id="events_header" class="panel_header">Events</div>
-<div id="events" class="panel_body"></div>
+<!-- EVENTS IN PLAY -->
+<section id = "sec_events">
+ <div id="events_panel" class="panel hide">
+ <div id="events_header" class="panel_header">Events in Play</div>
+ <div id="events" 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="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>
+ <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">
|