diff options
| -rw-r--r-- | play.css | 80 | ||||
| -rw-r--r-- | play.html | 110 | ||||
| -rw-r--r-- | play.js | 19 | ||||
| -rw-r--r-- | rules.js | 17 |
4 files changed, 226 insertions, 0 deletions
diff --git a/play.css b/play.css new file mode 100644 index 0000000..72819b0 --- /dev/null +++ b/play.css @@ -0,0 +1,80 @@ + +#mapwrap { + width: 2485px; + height: 1654px; + margin-bottom: 30px; +} + +#map { + position: absolute; + width: 2485px; + height: 1654px; + background-size: cover; + background-image: url(Maria.Gameboard.075.jpg); + background-color: #ece1a9; +} + +#political_display { + position: relative; + margin: 0 auto; + width: 1169px; + height: 827px; + background-size: cover; + background-image: url(Maria.Political.Display.100.jpg); + background-color: #ece1a9; +} + +body { + background-color: slategray; +} + +.panel { + background-color: #444; + width: clamp(824px, calc(100% - 30px), 1636px); + margin: 12px auto 36px auto; + box-shadow: 1px 2px 6px #0004; + border: 1px solid #0008; +} + +.panel_header { + color: white; + font-weight: bold; + text-align: center; + padding: 3px 1em; + border-bottom: 1px solid #0008; +} + +.panel_body { + background-color: #555; + display: flex; + justify-content: start; + flex-wrap: wrap; + padding: 18px; + gap: 18px; + min-height: 350px; +} + +.city { + position: absolute; + width: 18px; + height: 18px; + border-radius: 100%; + background-color: green; +} + +.minor_fortress { + position: absolute; + width: 26px; + height: 26px; + border-radius: 0%; + background-color: green; +} + +.major_fortress { + position: absolute; + width: 26px; + height: 26px; + border-radius: 50%; + background-color: green; +} + diff --git a/play.html b/play.html new file mode 100644 index 0000000..84933cc --- /dev/null +++ b/play.html @@ -0,0 +1,110 @@ +<!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>MARIA</title> +<link rel="icon" href="favicon.png"> +<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="play.js"></script> +</head> +<body> + +<header> + <div id="toolbar"> + <details> + <summary><img src="/images/cog.svg"></summary> + <menu> + <li><a target="_blank" href="/maria/info/MariaRules.pdf">Rules</a> + <li><a target="_blank" href="/maria/info/cards.html">Cards</a> + </menu> + </details> + </div> +</header> + +<aside> + <div id="roles"></div> + <div id="log"></div> +</aside> + +<main> + +<div id="mapwrap"> +<div id="map"> +<div id="map_pieces"> + + + +</div> +</div> +</div> + +<div id="political_display"> +<div id="display_track_saxony"></div> +<div id="display_track_russia"></div> +<div id="display_track_italy"></div> +<div id="display_prussia"></div> +<div id="display_france"></div> +<div id="display_pragmatic_army"></div> +<div id="display_austria"></div> +</div> + +<div id="defend_panel" class="panel"> +<div id="defend_header" class="panel_header">Defend</div> +<div id="defend" class="panel_body"> +</div> +</div> + +<div id="attack_panel" class="panel"> +<div id="attack_header" class="panel_header">Attack</div> +<div id="attack" class="panel_body"> +</div> +</div> + +<div id="hand_prussia_panel" class="panel"> +<div id="hand_prussia_header" class="panel_header">Prussia</div> +<div id="hand_prussia" class="panel_body"> +</div> +</div> + +<div id="hand_bavaria_panel" class="panel"> +<div id="hand_bavaria_header" class="panel_header">Bavaria</div> +<div id="hand_bavaria" class="panel_body"> +</div> +</div> + +<div id="hand_france_panel" class="panel"> +<div id="hand_france_header" class="panel_header">France</div> +<div id="hand_france" class="panel_body"> +</div> +</div> + +<div id="hand_saxony_panel" class="panel"> +<div id="hand_saxony_header" class="panel_header">Saxony</div> +<div id="hand_saxony" class="panel_body"> +</div> +</div> + +<div id="hand_pragmatic_army_panel" class="panel"> +<div id="hand_pragmatic_army_header" class="panel_header">Pragmatic Army</div> +<div id="hand_pragmatic_army" class="panel_body"> +</div> +</div> + +<div id="hand_austria_panel" class="panel"> +<div id="hand_austria_header" class="panel_header">Austria</div> +<div id="hand_austria" class="panel_body"> +</div> +</div> + +</main> + +<footer id="status"></footer> + +</body> @@ -0,0 +1,19 @@ +const cities = data.cities +const last_city = cities.name.length - 1 + +const ui = { + map_pieces: document.getElementById("pieces"), + cities: [], +} + +function on_init() { + for (let s = 0; s <= last_city; ++s) { + let e = ui.cities[s] = document.createElement("div") + e.className = "city" + e.style.left = (cities.x[s] - 9) + "px" + e.style.top = (cities.y[s] - 9) + "px" + map_pieces.appendChild(e) + } +} + +on_init() @@ -1,2 +1,19 @@ exports.roles = [ "Maria Theresa", "Frederick", "Louis XV" ] exports.scenarios = [ "Standard", "Introductory" ] + +exports.setup = function (seed, scenario, options) { + return { + seed: seed, + log: [], + undo: [], + active: 0, // player + power: 0, // power + state: "setup", + } +} + +exports.view = function (state) { + return { + log: state.log + } +} |