@sharpee/sharpee 0.9.61-beta

package/templates/browser/browser-entry.ts.template

@@ -0,0 +1,274 @@
+/**
+ * Browser Entry Point for {{STORY_TITLE}}
+ *
+ * This file connects your story to the browser UI.
+ * Generated by: npx sharpee init-browser
+ */
+
+import { GameEngine } from '@sharpee/engine';
+import { WorldModel, EntityType } from '@sharpee/world-model';
+import { Parser } from '@sharpee/parser-en-us';
+import { LanguageProvider } from '@sharpee/lang-en-us';
+import { PerceptionService } from '@sharpee/stdlib';
+import { story, config } from './index';
+
+// DOM elements
+let statusLocation: HTMLElement | null;
+let statusScore: HTMLElement | null;
+let textContent: HTMLElement | null;
+let mainWindow: HTMLElement | null;
+let commandInput: HTMLInputElement | null;
+
+// Game state
+let engine: GameEngine;
+let world: WorldModel;
+let commandHistory: string[] = [];
+let historyIndex = -1;
+let currentTurn = 0;
+let currentScore = 0;
+
+/**
+ * Initialize the game
+ */
+function initializeGame(): void {
+  // Create world and player
+  world = new WorldModel();
+  const player = world.createEntity('player', EntityType.ACTOR);
+  world.setPlayer(player.id);
+
+  // Create parser and language
+  const language = new LanguageProvider();
+  const parser = new Parser(language);
+
+  // Extend parser and language with story-specific vocabulary
+  if (story.extendParser) {
+    story.extendParser(parser);
+  }
+  if (story.extendLanguage) {
+    story.extendLanguage(language);
+  }
+
+  // Create perception service
+  const perceptionService = new PerceptionService();
+
+  // Create engine
+  engine = new GameEngine({
+    world,
+    player,
+    parser,
+    language,
+    perceptionService,
+  });
+
+  // Set up event handlers
+  engine.on('text:output', (text: string, turn: number) => {
+    displayText(text);
+    currentTurn = turn;
+    updateStatusLine();
+  });
+
+  engine.on('event', (event: any) => {
+    // Track score changes
+    if (event.type === 'game.score_changed' && event.data) {
+      currentScore = event.data.newScore ?? currentScore;
+      updateStatusLine();
+    }
+  });
+
+  // Set the story
+  engine.setStory(story);
+}
+
+/**
+ * Set up DOM elements and event handlers
+ */
+function setupDOM(): void {
+  statusLocation = document.getElementById('location-name');
+  statusScore = document.getElementById('score-turns');
+  textContent = document.getElementById('text-content');
+  mainWindow = document.getElementById('main-window');
+  commandInput = document.getElementById('command-input') as HTMLInputElement;
+
+  if (!commandInput) {
+    console.error('Command input element not found');
+    return;
+  }
+
+  // Handle keyboard input
+  commandInput.addEventListener('keydown', (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleCommand();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      navigateHistory(-1);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      navigateHistory(1);
+    }
+  });
+
+  // Keep focus on input
+  document.addEventListener('click', () => {
+    if (commandInput && !commandInput.disabled) {
+      commandInput.focus();
+    }
+  });
+}
+
+/**
+ * Handle command submission
+ */
+async function handleCommand(): Promise<void> {
+  if (!commandInput) return;
+
+  const command = commandInput.value.trim();
+  if (!command) return;
+
+  // Add to history
+  commandHistory.push(command);
+  historyIndex = commandHistory.length;
+
+  // Clear input
+  commandInput.value = '';
+
+  // Display command echo
+  displayCommand(command);
+
+  // Execute command
+  try {
+    await engine.executeTurn(command);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    displayText(`[Error: ${message}]`);
+  }
+}
+
+/**
+ * Navigate command history
+ */
+function navigateHistory(direction: number): void {
+  if (!commandInput) return;
+
+  const newIndex = historyIndex + direction;
+
+  if (newIndex < 0) return;
+
+  if (newIndex >= commandHistory.length) {
+    historyIndex = commandHistory.length;
+    commandInput.value = '';
+    return;
+  }
+
+  historyIndex = newIndex;
+  commandInput.value = commandHistory[historyIndex];
+
+  // Move cursor to end
+  commandInput.setSelectionRange(
+    commandInput.value.length,
+    commandInput.value.length
+  );
+}
+
+/**
+ * Display text in the main window
+ */
+function displayText(text: string): void {
+  if (!textContent) return;
+
+  // Split on double newlines to get paragraphs
+  const paragraphs = text.split(/\n\n+/);
+
+  for (const para of paragraphs) {
+    const trimmed = para.trim();
+    if (trimmed) {
+      const p = document.createElement('p');
+      p.style.whiteSpace = 'pre-line';
+      p.textContent = trimmed;
+      textContent.appendChild(p);
+    }
+  }
+
+  scrollToBottom();
+}
+
+/**
+ * Display command echo
+ */
+function displayCommand(command: string): void {
+  if (!textContent) return;
+
+  const div = document.createElement('div');
+  div.className = 'command-echo';
+  div.textContent = `> ${command}`;
+  textContent.appendChild(div);
+
+  scrollToBottom();
+}
+
+/**
+ * Update the status line
+ */
+function updateStatusLine(): void {
+  const player = world.getPlayer();
+  let locationName = '';
+
+  if (player) {
+    const locationId = world.getLocation(player.id);
+    if (locationId) {
+      const room = world.getEntity(locationId);
+      if (room) {
+        locationName = room.name || 'Unknown';
+      }
+    }
+  }
+
+  if (statusLocation) {
+    statusLocation.textContent = locationName;
+  }
+
+  if (statusScore) {
+    statusScore.textContent = `Score: ${currentScore} | Turns: ${currentTurn}`;
+  }
+}
+
+/**
+ * Scroll main window to bottom
+ */
+function scrollToBottom(): void {
+  if (mainWindow) {
+    mainWindow.scrollTop = mainWindow.scrollHeight;
+  }
+}
+
+/**
+ * Start the game
+ */
+async function start(): Promise<void> {
+  console.log('=== {{STORY_TITLE}} BROWSER START ===');
+
+  try {
+    setupDOM();
+    initializeGame();
+
+    // Start the engine
+    await engine.start();
+
+    // Initial look
+    await engine.executeTurn('look');
+
+    // Focus input
+    if (commandInput) {
+      commandInput.focus();
+    }
+  } catch (error) {
+    console.error('=== STARTUP ERROR ===', error);
+    displayText(`[Startup Error: ${error}]`);
+  }
+}
+
+// Start when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', start);
+} else {
+  start();
+}

package/templates/browser/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{STORY_TITLE}}</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div id="game-container">
+    <div id="status-line">
+      <span id="location-name"></span>
+      <span id="score-turns">Score: 0 | Turns: 0</span>
+    </div>
+    <div id="main-window">
+      <div id="text-content"></div>
+    </div>
+    <div id="input-area">
+      <span class="prompt">&gt;</span>
+      <input id="command-input" type="text"
+             autocomplete="off" autocapitalize="none"
+             spellcheck="false" autofocus>
+    </div>
+  </div>
+
+  <!-- Save/Restore Modal Dialogs -->
+  <div id="modal-overlay" class="modal-hidden">
+    <!-- Save Dialog -->
+    <div id="save-dialog" class="modal-dialog modal-hidden">
+      <div class="modal-title">SAVE GAME</div>
+      <div class="modal-content">
+        <div class="save-input-row">
+          <label for="save-name-input">Save name:</label>
+          <input type="text" id="save-name-input" 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="modal-buttons">
+        <button id="save-confirm-btn" class="modal-btn">Save</button>
+        <button id="save-cancel-btn" class="modal-btn">Cancel</button>
+      </div>
+    </div>
+
+    <!-- Restore Dialog -->
+    <div id="restore-dialog" class="modal-dialog modal-hidden">
+      <div class="modal-title">RESTORE GAME</div>
+      <div class="modal-content">
+        <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 modal-hidden">No saved games found.</div>
+      </div>
+      <div class="modal-buttons">
+        <button id="restore-confirm-btn" class="modal-btn">Restore</button>
+        <button id="restore-cancel-btn" class="modal-btn">Cancel</button>
+      </div>
+    </div>
+
+    <!-- Startup Dialog (continue saved game?) -->
+    <div id="startup-dialog" class="modal-dialog modal-hidden">
+      <div class="modal-title">CONTINUE GAME?</div>
+      <div class="modal-content">
+        <p id="startup-save-info" class="startup-info"></p>
+        <p class="startup-question">Continue where you left off?</p>
+      </div>
+      <div class="modal-buttons">
+        <button id="startup-continue-btn" class="modal-btn">Continue</button>
+        <button id="startup-new-btn" class="modal-btn">New Game</button>
+      </div>
+    </div>
+  </div>
+  <script src="{{STORY_ID}}.js"></script>
+</body>
+</html>