light-novel.js

A lightweight JavaScript library for creating novel games that run directly in the browser.

Getting Started

To get started, run the command

# Install the library
npm i light-novel.js

Initializing the game

To start writing your novella in the main.js file, you need:

1. import the library ``js import LightNovel from 'light-novel.js'

2. Create a new instance of the class:

   const novel = new LightNovel();

3. In the class constructor, pass where the library should be mounted:

   // Mount the library in #app
   const novel = new LightNovel("#app");

4. Pass the novel's data to:

   const novel = new LightNovel('#app', { // Novel data })

Novel Data:

The novellas in question include:

1. Characters
2. Scenes
3. Settings

Now let's go over it in more detail:

Characters

Characters is an object with persanage objects. Example:

const novel = new LightNovel("#app", {
	characters: {
		MrN: {
			name: "Mr. Something", // Character name
			color: "#FF0000", // How the character's name will be colored
		},
	},
});

Scenes

A scene is the amount of text on one background

Example:

const novel = new LightNovel('#app', {
    characters: {
        MrN: {
            name: 'Mr. Something',
            color: '#FF0000'
        }
    },
    audio: 'Music file path' }
    scenes: [
        {
            text: [
                {
                    id: "mrN", // Character id
                    line: "Some text" // Text that the character says
                }
            ],
            imgSrc: 'Image path'
        }
    ]
})

Settings

Settings is the back end of the blog that allows you to customize the styles of the novel's components, music, and text typing speeds

Example:

const novel = new LightNovel("#app", {
	settings: {
		// Customize the block with text output
		blockText: {
			speed: 20, // Text writing speed
			background: "green", // Background of the block with text output
			colorBorder: "black", // Text block frame color
			volume: 10, //Loudness of music
		},
		// Customize the loader
		loader: {
			background: "green", // Background of the loader
			colorRing: "black", // Color of the loading ring
		},
		end: {
			text: "Thank you", // Text in bite block,
			developer: "Developer Names",
		},
	},
});