<!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>