diff options
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 354 |
1 files changed, 354 insertions, 0 deletions
diff --git a/play.html b/play.html new file mode 100644 index 0000000..fabd597 --- /dev/null +++ b/play.html @@ -0,0 +1,354 @@ +<!DOCTYPE html> +<!-- vim:set nowrap: --> +<html lang="en"> +<head> +<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> +<meta charset="utf-8"> +<title>TIME OF CRISIS</title> +<link rel="icon" href="favicon.png"> +<link rel="stylesheet" href="/fonts/fonts.css"> +<link rel="stylesheet" href="/common/play.css"> +<link rel="stylesheet" href="play.css"> +<script defer src="/common/play.js"></script> +<script defer src="play.js"></script> +</head> +<body> + +<header> + <div id="toolbar"> + <div class="menu"> + <div class="menu_title"><img src="/images/cog.svg"></div> + <div class="menu_popup"> + <a class="menu_item" target="_blanK" href="/time-of-crisis/info/rules.html">Rules of Play</a> + <a class="menu_item" target="_blanK" href="/time-of-crisis/info/expansion.html">Expansion Rules</a> + <a class="menu_item" target="_blanK" href="/time-of-crisis/info/cards.html">Card Gallery</a> + <div class="debug menu_separator"></div> + <div class="debug menu_item" onclick="send_save()">🐞 Save</div> + <div class="debug menu_item" onclick="send_restore()">🐞 Restore</div> + <div class="debug menu_item" onclick="send_restart('Standard')">⚠ Restart</div> + </div> + </div> + <div class="icon_button" onclick="toggle_pieces()"><img src="/images/earth-africa-europe.svg"></div> + <div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div> + </div> + <div id="prompt"></div> + <div id="actions"></div> +</header> + +<aside> + <div id="roles"> + <div class="role" id="role_Red"><div class="role_name">Red<div class="role_vp"></div><div class="role_user">-</div></div></div> + <div class="role" id="role_Blue"><div class="role_name">Blue<div class="role_vp"></div><div class="role_user">-</div></div></div> + <div class="role" id="role_Yellow"><div class="role_name">Yellow<div class="role_vp"></div><div class="role_user">-</div></div></div> + <div class="role" id="role_Green"><div class="role_name">Green<div class="role_vp"></div><div class="role_user">-</div></div></div> + </div> + <div id="log"></div> +</aside> + +<main> + +<div id="mapwrap"> +<div id="map"> +<div id="crisis_table" class="p4"></div> + +<div style="position:relative;display:flex;flex-wrap:wrap;gap:8px;top:200px;left:600px;width:1000px;"> +<div class="amphitheater"></div> +<div class="basilica"></div> +<div class="limes"></div> +<div class="militia"></div> +<div class="alamanni"></div> +<div class="alamanni inactive"></div> +<div class="franks"></div> +<div class="franks inactive"></div> +<div class="goths"></div> +<div class="goths inactive"></div> +<div class="nomads"></div> +<div class="nomads inactive"></div> +<div class="sassanids"></div> +<div class="sassanids inactive"></div> +<div class="goths" id="cniva"></div> +<div class="sassanids" id="ardashir"></div> +<div class="sassanids" id="shapur"></div> +<div class="rival" id="postumus"></div> +<div class="rival" id="priest_king"></div> +<div class="rival" id="zenobia"></div> +<div class="red governor"></div> +<div class="blue governor"></div> +<div class="yellow governor"></div> +<div class="green governor"></div> +<div class="red general"></div> +<div class="blue general"></div> +<div class="yellow general"></div> +<div class="green general"></div> +<div class="red emperor_turns"></div> +<div class="blue emperor_turns"></div> +<div class="yellow emperor_turns"></div> +<div class="green emperor_turns"></div> +<div class="red legacy"></div> +<div class="blue legacy"></div> +<div class="yellow legacy"></div> +<div class="green legacy"></div> +<div class="red legacy_40"></div> +<div class="blue legacy_40"></div> +<div class="yellow legacy_40"></div> +<div class="green legacy_40"></div> +<div class="red seat_of_power"></div> +<div class="blue seat_of_power"></div> +<div class="yellow seat_of_power"></div> +<div class="green seat_of_power"></div> +<div class="red breakaway"></div> +<div class="blue breakaway"></div> +<div class="yellow breakaway"></div> +<div class="green breakaway"></div> +<div class="castra"></div> +<div class="quaestor"></div> +<div class="mob"></div> +<div class="mob_x2"></div> +<div class="legion" id="legion_1"></div> +<div class="legion" id="legion_2"></div> +<div class="legion" id="legion_3"></div> +<div class="legion" id="legion_4"></div> +<div class="legion" id="legion_5"></div> +<div class="legion" id="legion_6"></div> +<div class="legion" id="legion_7"></div> +<div class="legion" id="legion_8"></div> +<div class="legion" id="legion_9"></div> +<div class="legion" id="legion_10"></div> +<div class="legion" id="legion_11"></div> +<div class="legion" id="legion_12"></div> +<div class="legion" id="legion_13"></div> +<div class="legion" id="legion_14"></div> +<div class="legion" id="legion_15"></div> +<div class="legion" id="legion_16"></div> +<div class="legion" id="legion_17"></div> +<div class="legion" id="legion_18"></div> +<div class="legion" id="legion_19"></div> +<div class="legion" id="legion_20"></div> +<div class="legion" id="legion_21"></div> +<div class="legion" id="legion_22"></div> +<div class="legion" id="legion_23"></div> +<div class="legion" id="legion_24"></div> +<div class="legion" id="legion_25"></div> +<div class="legion" id="legion_26"></div> +<div class="legion" id="legion_27"></div> +<div class="legion" id="legion_28"></div> +<div class="legion" id="legion_29"></div> +<div class="legion" id="legion_30"></div> +<div class="legion" id="legion_31"></div> +<div class="legion" id="legion_32"></div> +<div class="legion reduced" id="legion_33"></div> + +</div> + +<div id="pieces"> + +<div id="red_emperor_turns" class="red emperor_turns" style="top:10px;left:47px;"></div> +<div id="blue_emperor_turns" class="blue emperor_turns" style="top:30px;left:41px;"></div> +<div id="green_emperor_turns" class="green emperor_turns" style="top:50px;left:38px;"></div> +<div id="yellow_emperor_turns" class="yellow emperor_turns" style="top:70px;left:35px;"></div> +<div id="red_legacy" class="red legacy" style="top:12px;left:50px;"></div> +<div id="blue_legacy" class="blue legacy" style="top:32px;left:47px;"></div> +<div id="green_legacy" class="green legacy" style="top:52px;left:44px;"></div> +<div id="yellow_legacy" class="yellow legacy" style="top:72px;left:41px;"></div> + +<div id=""Aegyptus_Support" class="neutral governor" style="left:1700px;top:1468px"></div> +<div id=""Africa_Support" class="neutral governor" style="left:647px;top:1290px"></div> +<div id=""Asia_Support" class="neutral governor" style="left:1679px;top:1000px"></div> +<div id=""Britannia_Support" class="neutral governor" style="left:231px;top:260px"></div> +<div id=""Galatia_Support" class="neutral governor" style="left:1954px;top:931px"></div> +<div id=""Gallia_Support" class="neutral governor" style="left:460px;top:507px"></div> +<div id=""Hispania_Support" class="neutral governor" style="left:154px;top:980px"></div> +<div id=""Italia_Support" class="neutral governor" style="left:1028px;top:835px"></div> +<div id=""Macedonia_Support" class="neutral governor" style="left:1384px;top:936px"></div> +<div id=""Pannonia_Support" class="neutral governor" style="left:1154px;top:626px"></div> +<div id=""Syria_Support" class="neutral governor" style="left:2034px;top:1280px"></div> +<div id=""Thracia_Support" class="neutral governor" style="left:1502px;top:720px"></div> + +<div id="Aegyptus_NPG" class="no_place_governor" style="left:1793px;top:1380px"></div> +<div id="Africa_NPG" class="no_place_governor" style="left:741px;top:1204px"></div> +<div id="Asia_NPG" class="no_place_governor" style="left:1790px;top:908px"></div> +<div id="Britannia_NPG" class="no_place_governor" style="left:325px;top:177px"></div> +<div id="Galatia_NPG" class="no_place_governor" style="left:2048px;top:842px"></div> +<div id="Gallia_NPG" class="no_place_governor" style="left:554px;top:418px"></div> +<div id="Hispania_NPG" class="no_place_governor" style="left:249px;top:892px"></div> +<div id="Italia_NPG" class="no_place_governor" style="left:1038px;top:743px"></div> +<div id="Macedonia_NPG" class="no_place_governor" style="left:1477px;top:850px"></div> +<div id="Pannonia_NPG" class="no_place_governor" style="left:1214px;top:536px"></div> +<div id="Syria_NPG" class="no_place_governor" style="left:2174px;top:1193px"></div> +<div id="Thracia_NPG" class="no_place_governor" style="left:1594px;top:631px"></div> + +<!-- +<div id="Aegyptus_Militia" class="militia" style="left:1793px;top:1380px"></div> +<div id="Africa_Militia" class="militia" style="left:741px;top:1204px"></div> +<div id="Asia_Militia" class="militia" style="left:1790px;top:908px"></div> +<div id="Britannia_Militia" class="militia" style="left:325px;top:177px"></div> +<div id="Galatia_Militia" class="militia" style="left:2048px;top:842px"></div> +<div id="Gallia_Militia" class="militia" style="left:554px;top:418px"></div> +<div id="Hispania_Militia" class="militia" style="left:249px;top:892px"></div> +<div id="Italia_Militia" class="militia" style="left:1038px;top:743px"></div> +<div id="Macedonia_Militia" class="militia" style="left:1477px;top:850px"></div> +<div id="Pannonia_Militia" class="militia" style="left:1214px;top:536px"></div> +<div id="Syria_Militia" class="militia" style="left:2174px;top:1193px"></div> +<div id="Thracia_Militia" class="militia" style="left:1594px;top:631px"></div> +--> + +<div class="neutral governor" style="top:259px;left:230px;"></div> +<div class="quaestor" style="top:220px;left:258px;"></div> +<div class="militia" style="top:192px;left:320px;"></div> +<div class="blue general" style="top:172px;left:340px;"></div> +<div class="castra" style="top:172px;left:344px;"></div> +<div class="franks inactive" style="top:172px;left:420px;"></div> +<div class="limes" style="top:320px;left:260px;"></div> + +<div class="legion hide" id="legion_1"></div> +<div class="legion hide" id="legion_2"></div> +<div class="legion hide" id="legion_3"></div> +<div class="legion hide" id="legion_4"></div> +<div class="legion hide" id="legion_5"></div> +<div class="legion hide" id="legion_6"></div> +<div class="legion hide" id="legion_7"></div> +<div class="legion hide" id="legion_8"></div> +<div class="legion hide" id="legion_9"></div> +<div class="legion hide" id="legion_10"></div> +<div class="legion hide" id="legion_11"></div> +<div class="legion hide" id="legion_12"></div> +<div class="legion hide" id="legion_13"></div> +<div class="legion hide" id="legion_14"></div> +<div class="legion hide" id="legion_15"></div> +<div class="legion hide" id="legion_16"></div> +<div class="legion hide" id="legion_17"></div> +<div class="legion hide" id="legion_18"></div> +<div class="legion hide" id="legion_19"></div> +<div class="legion hide" id="legion_20"></div> +<div class="legion hide" id="legion_21"></div> +<div class="legion hide" id="legion_22"></div> +<div class="legion hide" id="legion_23"></div> +<div class="legion hide" id="legion_24"></div> +<div class="legion hide" id="legion_25"></div> +<div class="legion hide" id="legion_26"></div> +<div class="legion hide" id="legion_27"></div> +<div class="legion hide" id="legion_28"></div> +<div class="legion hide" id="legion_29"></div> +<div class="legion hide" id="legion_30"></div> +<div class="legion hide" id="legion_31"></div> +<div class="legion hide" id="legion_32"></div> +<div class="legion hide" id="legion_33"></div> + +</div> + +</div> +</div> +</div> + +<div id="action_panel" class="panel"> +<div id="action_header" class="panel_header">Actions</div> +<div id="action_body" class="panel_body"> + +<div class="action_row"> +<button>Recruit General 1</button> +<button>Recruit General 2</button> +<button>Recruit General 3</button> +<button>Recruit General 4</button> +<button>Recruit General 5</button> +</div> +<div class="action_row"> +<button>Add Legion to Army</button> +<button>Create Army</button> +<button>Train Legions</button> +<button>Move Army</button> +<button>Initiate Battle</button> +<button>Disperse Mob</button> +</div> + +<div class="action_row"> +<button>Recruit Governor 1</button> +<button>Recruit Governor 2</button> +<button>Recruit Governor 3</button> +<button>Recruit Governor 4</button> +<button>Recruit Governor 5</button> +</div> +<div class="action_row"> +<button>Place Governor</button> +<button>Recall Governor</button> +</div> + +<div class="action_row"> +<button>Increase Support Level</button> +<button>Place Militia</button> +<button>Hold Games</button> +<button id="build_limes">Build Limes</button> +<button id="build_amphitheater">Build Amphitheater</button> +<button id="build_basilica">Build Basilica</button> +</div> + +<div class="action_row"> + +<button>Castra</button> +<button>Flanking Maneuver</button> +<button>Praetorian Guard</button> +<button>Tribute</button> +<button>Foederati</button> +<button>Damnatio Memoriae</button> +<button>Quaestor</button> +<button>Mob</button> +<button>Pretender</button> +</div> + +</div> +</div> + +<div id="played_panel" class="panel"> +<div id="played_header" class="panel_header">Played / Events</div> +<div id="played" class="panel_body"> + <div class="card event_back"></div> +</div> +</div> + +<div id="hand_panel" class="panel"> +<div id="hand_header" class="panel_header">Hand</div> +<div id="hand" class="panel_body"> + <div class="card influence_m1"></div> + <div class="card influence_m1"></div> + <div class="card influence_m1"></div> + <div class="card influence_s1"></div> + <div class="card influence_s1"></div> +</div> +</div> + +<div id="draw_panel" class="panel"> +<div id="draw_header" class="panel_header">Draw</div> +<div id="draw" class="panel_body"> + <div class="card influence_s1"></div> + <div class="card influence_p1"></div> + <div class="card influence_p1"></div> + <div class="card influence_p1"></div> +</div> +</div> + +<div id="discard_panel" class="panel"> +<div id="discard_header" class="panel_header">Discard</div> +<div id="discard" class="panel_body"> + <div class="card influence_back"></div> +</div> +</div> + +<div id="market_panel" class="panel"> +<div id="market_header" class="panel_header">Market</div> +<div id="market" class="panel_body"> + <div class="card influence_m2"></div> + <div class="card influence_s2"></div> + <div class="card influence_p2"></div> + <div class="card influence_m3"></div> + <div class="card influence_s3"></div> + <div class="card influence_p3"></div> + <div class="card influence_m4"></div> + <div class="card influence_s4"></div> + <div class="card influence_p4"></div> +</div> +</div> + +</main> + +<footer id="status"></footer> + +</body> |