Refactored app to include all the ink.js typography.
This commit is contained in:
+115
-97
@@ -1,97 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
||||
<!-- meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'blob'; style-src 'self' 'unsafe-inline'" -->
|
||||
<title>ai-fiction Book Runtime</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<p id="versions">We are using Node.js <span id="node-version"></span>,
|
||||
Chromium <span id="chrome-version"></span>,
|
||||
and Electron <span id="electron-version"></span>.</p>
|
||||
<div id="book">
|
||||
<div id="page_left">
|
||||
<div class="header">
|
||||
<h2 class="byline l10n-by">powered by Generative AI</h2>
|
||||
<h1 class="title">AI Interactive Fiction</h1>
|
||||
<h3 class="subtitle">An open-world text adventure</h3>
|
||||
<div class="separator"><double>❦</double></div>
|
||||
</div>
|
||||
<div id="controls" class="buttons">
|
||||
<a class="l10n-speech" id="speech" title="Toggle text to speech" disabled="disabled">speech</a>
|
||||
<span><a id="speed_reset"><span class="l10n-speed">speed<sup>*</sup></span></a><input type="range" min="0" max="100" value="50" id="speed" name="speed" /></span>
|
||||
<a class="l10n-restart" id="rewind" title="Restart story from beginning" disabled="disabled">restart</a>
|
||||
<a class="l10n-save" id="save" title="Save progress">save</a>
|
||||
<a class="l10n-load" id="reload" title="Reload from save point" disabled="disabled">load</a>
|
||||
</div>
|
||||
<div id="choices" class="container">
|
||||
<div id="command_history">
|
||||
<!-- Previous commands and responses will be displayed here -->
|
||||
</div>
|
||||
|
||||
<div id="command_input">
|
||||
<div class="input-wrapper">
|
||||
<textarea id="player_input" placeholder="Enter your command..." rows="1" autofocus></textarea>
|
||||
<span id="cursor"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l10n-remark" id="remark"><i><sup>*</sup>click on page or press spacebar to fast forward text animation</i></div>
|
||||
</div>
|
||||
<div id="page_right">
|
||||
<div id="story" class="container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ruler"></div>
|
||||
<div class="l10n-prompt" id="indent">What do you want to do next?</div>
|
||||
<div id="lighting" />
|
||||
|
||||
<!-- Socket.io library for client-server communication -->
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<!-- You can also require other files to run in this process -->
|
||||
<script src="js/smartypants.js"></script>
|
||||
<script src="js/linked-list.js"></script>
|
||||
<script src="js/linebreak.js"></script>
|
||||
<script src="js/knuth-and-plass.js"></script>
|
||||
<script src="js/Hyphenopoly_Loader.js"></script>
|
||||
<script>
|
||||
var locale = "en";
|
||||
</script>
|
||||
|
||||
<!-- TTS implementation scripts - order matters! -->
|
||||
<!-- 1. Kokoro TTS library - load as module -->
|
||||
<script type="module">
|
||||
try {
|
||||
// Import KokoroTTS class from the module
|
||||
const kokoroModule = await import('./js/kokoro-js.js');
|
||||
|
||||
// Expose the KokoroTTS class globally
|
||||
window.KokoroTTS = kokoroModule.KokoroTTS;
|
||||
console.log('KokoroTTS class loaded and exposed to window');
|
||||
|
||||
// Dispatch an event to signal that the class is ready
|
||||
const event = new CustomEvent('kokoro-class-loaded');
|
||||
window.dispatchEvent(event);
|
||||
} catch (error) {
|
||||
console.error('Failed to load KokoroTTS module:', error);
|
||||
// Dispatch an event even on failure so handlers don't wait forever
|
||||
const event = new CustomEvent('kokoro-class-load-failed');
|
||||
window.dispatchEvent(event);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 2. TTS handlers (kokoro-handler needs to wait for KokoroTTS) -->
|
||||
<script src="js/kokoro-handler.js"></script>
|
||||
<script src="js/tts-handler.js"></script>
|
||||
|
||||
<!-- 3. TTS Factory for automatic selection -->
|
||||
<script src="js/tts-factory.js"></script>
|
||||
|
||||
<!-- Main application script -->
|
||||
<script src="js/ai-fiction.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
|
||||
<!-- meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'blob'; style-src 'self' 'unsafe-inline'" -->
|
||||
<title>ai-fiction Book Runtime (Modular Version)</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<p id="versions">We are using Node.js <span id="node-version"></span>,
|
||||
Chromium <span id="chrome-version"></span>,
|
||||
and Electron <span id="electron-version"></span>.</p>
|
||||
<div id="book">
|
||||
<div id="page_left">
|
||||
<div class="header">
|
||||
<h2 class="byline l10n-by">powered by Generative AI</h2>
|
||||
<h1 class="title">AI Interactive Fiction</h1>
|
||||
<h3 class="subtitle">An open-world text adventure</h3>
|
||||
<div class="separator"><double>❦</double></div>
|
||||
</div>
|
||||
<div id="controls" class="buttons">
|
||||
<a class="l10n-speech" id="speech" title="Toggle text to speech" disabled="disabled">speech</a>
|
||||
<span><a id="speed_reset"><span class="l10n-speed">speed<sup>*</sup></span></a><input type="range" min="0" max="100" value="50" id="speed" name="speed" /></span>
|
||||
<a class="l10n-restart" id="rewind" title="Restart story from beginning" disabled="disabled">restart</a>
|
||||
<a class="l10n-save" id="save" title="Save progress">save</a>
|
||||
<a class="l10n-load" id="reload" title="Reload from save point" disabled="disabled">load</a>
|
||||
</div>
|
||||
<div id="choices" class="container">
|
||||
<div id="command_history">
|
||||
<!-- Previous commands and responses will be displayed here -->
|
||||
</div>
|
||||
|
||||
<div id="command_input">
|
||||
<div class="input-wrapper">
|
||||
<textarea id="player_input" placeholder="Enter your command..." rows="1" autofocus></textarea>
|
||||
<span id="cursor"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l10n-remark" id="remark"><i><sup>*</sup>click on page or press spacebar to fast forward text animation</i></div>
|
||||
</div>
|
||||
<div id="page_right">
|
||||
<div id="story" class="container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ruler"></div>
|
||||
<div class="l10n-prompt" id="indent">What do you want to do next?</div>
|
||||
<div id="lighting" />
|
||||
|
||||
<!-- Socket.io library for client-server communication -->
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
|
||||
<!-- Core libraries -->
|
||||
<script src="js/smartypants.js"></script>
|
||||
<script src="js/linked-list.js"></script>
|
||||
<script src="js/linebreak.js"></script>
|
||||
<script src="js/knuth-and-plass.js"></script>
|
||||
<script src="js/Hyphenopoly_Loader.js"></script>
|
||||
|
||||
<script>
|
||||
var locale = "en";
|
||||
// Create global variables needed by the modules
|
||||
window.rstack = [];
|
||||
</script>
|
||||
|
||||
<!-- TTS implementation scripts - order matters! -->
|
||||
<!-- 1. Kokoro TTS library - load as module -->
|
||||
<script type="module">
|
||||
try {
|
||||
// Import KokoroTTS class from the module
|
||||
const kokoroModule = await import('./js/kokoro-js.js');
|
||||
|
||||
// Expose the KokoroTTS class globally
|
||||
window.KokoroTTS = kokoroModule.KokoroTTS;
|
||||
console.log('KokoroTTS class loaded and exposed to window');
|
||||
|
||||
// Dispatch an event to signal that the class is ready
|
||||
const event = new CustomEvent('kokoro-class-loaded');
|
||||
window.dispatchEvent(event);
|
||||
} catch (error) {
|
||||
console.error('Failed to load KokoroTTS module:', error);
|
||||
// Dispatch an event even on failure so handlers don't wait forever
|
||||
const event = new CustomEvent('kokoro-class-load-failed');
|
||||
window.dispatchEvent(event);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 2. TTS handlers (kokoro-handler needs to wait for KokoroTTS) -->
|
||||
<script src="js/kokoro-handler.js"></script>
|
||||
<script src="js/tts-handler.js"></script>
|
||||
|
||||
<!-- 3. TTS Factory for automatic selection -->
|
||||
<script src="js/tts-factory.js"></script>
|
||||
|
||||
<!-- New Modules for Socket-based Interaction -->
|
||||
<script src="js/input-handler.js"></script>
|
||||
<script src="js/socket-client.js"></script>
|
||||
|
||||
<!-- Modular layout and animation components -->
|
||||
<script type="module" src="js/animation-queue.js"></script>
|
||||
<script type="module" src="js/text-processor.js"></script>
|
||||
<script type="module" src="js/paragraph-layout.js"></script>
|
||||
<script type="module" src="js/layout-renderer.js"></script>
|
||||
<script type="module" src="js/persistence-manager.js"></script>
|
||||
<script type="module" src="js/ui-controller.js"></script>
|
||||
<script type="module" src="js/audio-manager.js"></script>
|
||||
<script type="module" src="js/tts-player.js"></script>
|
||||
|
||||
<!-- Main application script - using ES modules -->
|
||||
<script type="module" src="js/ai-fiction.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user