@sharpee/sharpee 1.0.0 → 1.1.0

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

@@ -1,275 +0,0 @@
-/**
- * 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 { renderToString } from '@sharpee/text-service';
-import { story, config } from './index.js';
-
-// 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', (blocks, turn) => {
-    displayText(renderToString(blocks));
-    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

@@ -1,75 +0,0 @@
-<!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>