Project Structure

Project Structure (For Developers)

Kinexus is a "single-file application". All of its HTML, CSS, and JavaScript logic is contained within one .html file.

Core Architecture: The App Object

All application logic is encapsulated within a global JavaScript object named App. This object acts as a namespace for the entire application, preventing pollution of the global scope.

The App object is organized into several sub-objects, each with a distinct responsibility:

• App.state: Holds the application's current state, including the loaded storyData, the ID of the currently selected scene (currentSceneId), and the handle to the project directory on the user's file system.

• App.io: Manages all Input/Output operations. This is where the File System Access API is used to open, save, and export projects. It also contains the crucial validateProjectData function for migrating and cleaning up story data from older versions.

• App.tree & App.sceneList: These two objects control the rendering and logic for the left-hand navigation panel, handling both the hierarchical Tree View and the flat Scene List View.

• App.editor: The controller for the central Scene Editor panel. It manages loading scene data into the UI fields and saving it back to the App.state.storyData object. It contains nested objects for managing choice UI and variables.

• App.player: Controls the in-app game player. It has its own lightweight game state and is responsible for rendering scenes for interactive testing.

• App.styles: Manages the Style Editor modal. It reads and writes to the meta.styles object in the story data and generates the final CSS for exported projects.

• App.assets: Handles all logic related to media assets (images, video, sound), including file selection, drag-and-drop, and the API calls to Pollinations.ai for content generation.

• App.batch: Implements the logic for the Batch Image Generation feature.

• App.modals: A simple utility for showing and hiding modal dialogs.

• App.debug: A hidden debug mode (toggled with Ctrl+Alt+D) that provides more verbose logging to the console and an in-app log viewer.

Player Template

The application contains an HTML <template id="player-template">. When exporting a standalone game, the App.io module injects the current storyData (as a JSON object) and custom styles into this template to create the final index.html file for the player. The player's JavaScript is self-contained and does not include any of the editor logic.