Georg/ai.interactive.fiction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix game server communication by updating ai-fiction.js and adding socket.io script

Browse Source
This commit is contained in:
Georg Tomitsch
2025-04-01 10:28:53 +02:00
parent 39c1b6ff0a
commit b6472aa275
2 changed files with 82 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+62 -40
View File
@@ -1,43 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Interactive Fiction</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
<script src="js/smartypants.js"></script>
<script src="js/tts-handler.js"></script>
<script src="js/ai-fiction.js"></script>
</head>
<body>
<div id="book">
<div id="lighting"></div>
<div id="page_left">
<div class="header">
<h1>AI Interactive Fiction</h1>
<h2 class="byline">A modern take on text adventures</h2>
</div>
<div class="separator">
<double class="separator">&#8902;</double>
</div>
<div id="story"></div>
<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">
<input type="text" id="player_input" placeholder="Enter your command..." autofocus>
<button id="submit_command">Submit</button>
</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="page_right">
<div id="controls">
<a href="#" id="rewind">Restart</a>
<a href="#" id="speech">Speech</a>
<span>Speed <input type="range" id="speed" min="0" max="100" value="50"> <a href="#" id="speed_reset">Reset</a></span>
<a href="#" id="save">Save</a>
<a href="#" id="reload">Load</a>
</div>
<div id="command_history"></div>
<div id="command_input">
<input type="text" id="player_input" placeholder="Enter your command..." autocomplete="off">
<button id="submit_command">▶</button>
</div>
</div>
</div>
<div id="ruler"></div>
</body>
<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>
<script src="js/ai-fiction.js"></script>
<script src="js/tts-handler.js"></script>
</body>
</html>