@sharpee/devkit 1.0.4 → 1.0.6

package/templates/browser/decorations.css

@@ -0,0 +1,152 @@
+/*
+ * decorations.css — platform prose decoration vocabulary.
+ *
+ * Per ADR-174, every in-prose decoration on the wire is an
+ * IDecoration { className, content }. Platform-vocabulary names are
+ * resolved at parse time to `sharpee-{name}`; author names pass
+ * through verbatim. This file ships the default style for every
+ * platform name. Stories override by re-declaring `.sharpee-*` rules
+ * in their own theme CSS, or by attaching their own author classes
+ * (which the platform never styles).
+ *
+ * Loaded after base.css and before styles.css (theme), so theme rules
+ * can adjust decoration colors as desired.
+ *
+ * Closed enumeration matches
+ * `packages/engine/src/prose-pipeline/decorations/platform-vocabulary.ts`.
+ *
+ * @see ADR-174 §Closed platform vocabulary
+ */
+
+/* ----- Switches ----- */
+
+.sharpee-em {
+  font-style: italic;
+}
+
+.sharpee-strong {
+  font-weight: bold;
+}
+
+.sharpee-u {
+  text-decoration: underline;
+}
+
+.sharpee-st {
+  text-decoration: line-through;
+}
+
+.sharpee-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.sharpee-super {
+  vertical-align: super;
+  font-size: 0.83em;
+}
+
+.sharpee-sub {
+  vertical-align: sub;
+  font-size: 0.83em;
+}
+
+/* ----- IF-semantic classes ----- */
+/* Subtle defaults — themes should override colors to match. */
+
+.sharpee-item {
+  font-style: italic;
+}
+
+.sharpee-npc {
+  font-style: italic;
+}
+
+.sharpee-room {
+  font-weight: bold;
+}
+
+.sharpee-direction {
+  text-transform: lowercase;
+  font-variant: small-caps;
+}
+
+.sharpee-command {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.sharpee-quote {
+  font-style: italic;
+}
+
+/* ----- Color palette (foreground) ----- */
+
+.sharpee-color-red     { color: #c0392b; }
+.sharpee-color-blue    { color: #2980b9; }
+.sharpee-color-green   { color: #27ae60; }
+.sharpee-color-yellow  { color: #b58900; }
+.sharpee-color-magenta { color: #9b59b6; }
+.sharpee-color-cyan    { color: #16a2a8; }
+.sharpee-color-white   { color: #fefefe; }
+.sharpee-color-grey    { color: #7f8c8d; }
+.sharpee-color-black   { color: #111111; }
+
+/* ----- Color palette (background) ----- */
+
+/* Background colors paired with text color that meets WCAG AA (4.5:1).
+   Lighter hues use #111 text; darker hues use #fff. */
+.sharpee-bgcolor-red     { background-color: #c0392b; color: #fff; }
+.sharpee-bgcolor-blue    { background-color: #1f5f8b; color: #fff; }
+.sharpee-bgcolor-green   { background-color: #1a7c44; color: #fff; }
+.sharpee-bgcolor-yellow  { background-color: #b58900; color: #111; }
+.sharpee-bgcolor-magenta { background-color: #9b59b6; color: #fff; }
+.sharpee-bgcolor-cyan    { background-color: #0e6b6f; color: #fff; }
+.sharpee-bgcolor-white   { background-color: #fefefe; color: #111; }
+.sharpee-bgcolor-grey    { background-color: #5a6166; color: #fff; }
+.sharpee-bgcolor-black   { background-color: #111111; color: #fff; }
+
+/* ----- Sizes ----- */
+
+.sharpee-size-small { font-size: 0.85em; }
+.sharpee-size-large { font-size: 1.15em; }
+
+/* ----- Fonts ----- */
+
+.sharpee-font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+/* ----- Layout macros (ADR-183) ----- */
+/* All block-level; the void br/p render as empty spans. Presentation lives
+   here so authors override en masse by re-declaring these classes. */
+
+/* An empty block between inline runs collapses to a single line break. */
+.sharpee-br {
+  display: block;
+}
+
+/* An empty block with height gives a blank-line (paragraph) gap. */
+.sharpee-p {
+  display: block;
+  height: 1em;
+}
+
+.sharpee-center {
+  display: block;
+  text-align: center;
+}
+
+.sharpee-right {
+  display: block;
+  text-align: right;
+}
+
+.sharpee-indent {
+  display: block;
+  margin-left: 2em;
+}
+
+/* `[center=N:…]` and `[indent=N:…]` carry N as `data-value`. The platform
+   default applies the unparameterized behavior (center / one indent level) so
+   markup degrades gracefully; honoring an arbitrary value (width %, indent
+   level) is left to author CSS or a client pass — the value is present on the
+   element either way. */

package/templates/browser/index.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dos-classic">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sharpee</title>
+  <link rel="stylesheet" href="base.css">
+  <link rel="stylesheet" href="decorations.css">
+  <link rel="stylesheet" href="styles.css">
+  <!-- Author override: edit browser/{{STORY_ID}}.css. Loaded last so it wins the cascade. -->
+  <link rel="stylesheet" href="{{STORY_ID}}.css">
+</head>
+<body>
+  <div class="sharpee-window">
+    <div class="sharpee-window-title-bar">
+      <span id="menu-title" class="sharpee-window-title">Sharpee</span>
+      <div class="sharpee-window-title-bar-controls" aria-hidden="true"></div>
+    </div>
+
+    <menu role="menubar" id="menu-bar" class="sharpee-menu-bar">
+      <li role="none" class="sharpee-menu-bar-item">
+        <button role="menuitem" id="file-menu-btn" class="sharpee-menu-bar-trigger" aria-haspopup="menu" aria-expanded="false">File</button>
+        <ul role="menu" id="file-menu" class="sharpee-menu-dropdown">
+          <li role="menuitem" id="menu-save" class="sharpee-menu-option">Save Game...</li>
+          <li role="menuitem" id="menu-restore" class="sharpee-menu-option">Restore Game...</li>
+          <li role="separator" class="sharpee-menu-separator"></li>
+          <li role="menuitem" id="menu-restart" class="sharpee-menu-option">Restart</li>
+          <li role="menuitem" id="menu-quit" class="sharpee-menu-option">Quit</li>
+        </ul>
+      </li>
+      <li role="none" class="sharpee-menu-bar-item">
+        <button role="menuitem" id="settings-menu-btn" class="sharpee-menu-bar-trigger" aria-haspopup="menu" aria-expanded="false">Settings</button>
+        <ul role="menu" id="settings-menu" class="sharpee-menu-dropdown">
+          <li role="menuitem" class="sharpee-menu-option" aria-haspopup="menu">
+            <span>Theme</span>
+            <span class="sharpee-menu-submenu-indicator" aria-hidden="true">&#9656;</span>
+            <ul role="menu" id="theme-menu" class="sharpee-menu-dropdown">
+              <li role="menuitemradio" class="sharpee-menu-option" data-theme="dos-classic">DOS Classic</li>
+              <li role="menuitemradio" class="sharpee-menu-option" data-theme="modern-dark">Modern Dark</li>
+              <li role="menuitemradio" class="sharpee-menu-option" data-theme="retro-terminal">Retro Terminal</li>
+              <li role="menuitemradio" class="sharpee-menu-option" data-theme="paper">Paper</li>
+              <li role="menuitemradio" class="sharpee-menu-option" data-theme="system-6">System 6</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li role="none" class="sharpee-menu-bar-item">
+        <button role="menuitem" id="help-menu-btn" class="sharpee-menu-bar-trigger" aria-haspopup="menu" aria-expanded="false">Help</button>
+        <ul role="menu" id="help-menu" class="sharpee-menu-dropdown">
+          <li role="menuitem" id="menu-help" class="sharpee-menu-option">Commands...</li>
+          <li role="separator" class="sharpee-menu-separator"></li>
+          <li role="menuitem" id="menu-about" class="sharpee-menu-option">About...</li>
+        </ul>
+      </li>
+    </menu>
+
+    <div id="status-line" class="sharpee-status-bar">
+      <span id="location-name"></span>
+      <span id="score-turns">Score: 0 | Turns: 0</span>
+    </div>
+
+    <div id="main-window" class="sharpee-prose-pane">
+      <div id="text-content"></div>
+      <div class="sharpee-prose-overlay" aria-hidden="true"></div>
+    </div>
+
+    <div id="input-area" class="sharpee-input-bar">
+      <span class="sharpee-input-prompt">&gt;</span>
+      <input id="command-input" class="sharpee-input-field" type="text"
+             autocomplete="off" autocapitalize="none"
+             spellcheck="false" autofocus>
+    </div>
+  </div>
+
+  <dialog id="save-dialog" class="sharpee-dialog">
+    <h2 class="sharpee-dialog-title">SAVE GAME</h2>
+    <div class="sharpee-dialog-body">
+      <div class="save-input-row">
+        <label for="save-name-input">Save name:</label>
+        <input type="text" id="save-name-input" class="sharpee-input-field" maxlength="30"
+               autocomplete="off" spellcheck="false">
+      </div>
+      <div class="saves-list-label">Existing saves (click to overwrite):</div>
+      <div id="save-slots-list" class="saves-list"></div>
+    </div>
+    <div class="sharpee-dialog-buttons">
+      <button id="save-confirm-btn" class="sharpee-dialog-button">Save</button>
+      <button id="save-cancel-btn" class="sharpee-dialog-button">Cancel</button>
+    </div>
+  </dialog>
+
+  <dialog id="restore-dialog" class="sharpee-dialog">
+    <h2 class="sharpee-dialog-title">RESTORE GAME</h2>
+    <div class="sharpee-dialog-body">
+      <div class="saves-list-label">Select a saved game:</div>
+      <div id="restore-slots-list" class="saves-list"></div>
+      <div id="no-saves-message" class="no-saves-message" hidden>No saved games found.</div>
+    </div>
+    <div class="sharpee-dialog-buttons">
+      <button id="restore-confirm-btn" class="sharpee-dialog-button" disabled>Restore</button>
+      <button id="restore-cancel-btn" class="sharpee-dialog-button">Cancel</button>
+    </div>
+  </dialog>
+
+  <dialog id="startup-dialog" class="sharpee-dialog">
+    <h2 class="sharpee-dialog-title">CONTINUE GAME?</h2>
+    <div class="sharpee-dialog-body">
+      <p id="startup-save-info" class="startup-info"></p>
+      <p class="startup-question">Continue where you left off?</p>
+    </div>
+    <div class="sharpee-dialog-buttons">
+      <button id="startup-continue-btn" class="sharpee-dialog-button">Continue</button>
+      <button id="startup-new-btn" class="sharpee-dialog-button">New Game</button>
+    </div>
+  </dialog>
+
+  <script src="game.js"></script>
+</body>
+</html>