Engine for text games

How to use

Full documentation

import { TextGameEngine, Titles } from "./TextGameEngine.js";
const tge = new TextGameEngine();
tge.init();

const mainDiv = tge.init(titles: Titles, appendToBody: boolean);

• titles - default: new Titles()
• appendToBody - default: true
• Returns main element.

Print text.

tge.print(text: string, newParagraph: boolean);

Ask player for a number

const num = await tge.num(min: number | null, max: number | null, useChoose: boolean);

Ask player for a text

const num = await tge.text(min: number, max: number, allowSpaces: boolean, trimSpaces: boolean);

Ask player to choose one of the options

Returns index of chosen option

const index = await tge.choose(options: string[], everyAtNewLine: boolean, removeNotChosen: boolean);

Pause the game for a while.

await tge.wait(seconds: number);

Remove lines.

tge.clear(lineCount: number);

Class that contain all titles. Used in TextGameEngine.init()

const titles = new Titles();
titles.title = "Name of your game";
//or
const titles = new Titles(title, tapToCon);

You can use special symbols in text to add colors and styles to your game.

Set your own styles and colors:

TextGameEngine.setStyles(styles: string[], useStyles: boolean)

Call before TextGameEngine.init if you want to use formatting in headers.

useStyles - default true, set to false to disable text formatting

Strings in styles can contain:

• c - Clear style
• b - Bold style
• i - Italic style
• u - Underline style
• color in single quotes

Style string examples:

• ui'red' - Underline, Italic, red
• 'blue'i - Italic, blue
• 'rgb(50, 220, 120)' - rgb(50, 220, 120) color
• cb'#ffff00' - Clear privious styles, bold, #ffff00 color

Text without formating:

TextGameEngine.print("Hello world!");

Text with formating:

TextGameEngine.setStyles(["'lightgreen'", "cu'red'"]);
TextGameEngine.print("&0He^yellow^&ullo&c &b&iworld&1!");

TextGameEngine.print("&0Hello &uworld!");

All colors are in the first lines of the css file.

/* TextGameEngine-styles.css */
.theme-light {
	--color-back--: antiquewhite;
	--color-input--: white;
	--color-main--: #b5f392;
	--color-text--: black;
	--color-link--: blue;
	--color-choosen-option--: lightgreen;
}
.theme-dark {
	--color-back--: #0d1418;
	--color-input--: #0b2a3d;
	--color-main--: #0f9e38;
	--color-text--: white;
	--color-link--: #00ffff;
	--color-choosen-option--: darkgreen;
}

You can add any html element to the info popup

Get element where you can add yours

const infDiv = tge.getInfDiv();

Open info popup, for example on start

tge.openInf();