summaryrefslogtreecommitdiff
path: root/play.html
diff options
context:
space:
mode:
authorTor Andersson <tor@ccxvii.net>2023-04-23 01:44:54 +0200
committerTor Andersson <tor@ccxvii.net>2023-07-07 18:39:22 +0200
commitbb449ea7ce9224284c2b60698cf0b0c7d70f9c71 (patch)
tree63569033b59d2180660bcebca71a98e4dede9ccf /play.html
parent4936b1e7ff063e4d5d888d467f553d87a4a49abf (diff)
downloadtime-of-crisis-bb449ea7ce9224284c2b60698cf0b0c7d70f9c71.tar.gz
Asset scripts and start of client.
Diffstat (limited to 'play.html')
-rw-r--r--play.html354
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()">&#x1F41E; Save</div>
+ <div class="debug menu_item" onclick="send_restore()">&#x1F41E; Restore</div>
+ <div class="debug menu_item" onclick="send_restart('Standard')">&#x26a0; 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>