2.0.2 β’ Published 1 year ago
typesgine-ascii v2.0.2
:notebook: About
Typesgine is engine render, controll FPS and I/O into Terminal or Browser. This project can use to create games, menus or beautiful cli programs and MORE
Use
NPM - Backend
npm i typesgine-ascii
Static - Frontend
<script src="https://unpkg.com/typesgine-ascii@2.0.2/dist/main.js"></script>
technologies π±βππ
- Node - Nodejs
- typescript - Super Javascript
Features
- Render
- FPS
- IO
- CrossPlatform -> Use in Terminal or Browser
Exemple
See Folder Exemple in the root of the project to see how to use the engine.
Simplest example using Array
import typesgine from "typesgine-ascii";
console.clear();
const render = () => {
let final = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
for (let i = 0; i < 8; i++) {
for (let j = 0; j < 24; j++) {
final[i][j] = Math.round(Math.random() * (0 - 9) + 9);
}
final[i][final[i].length - 1] = "\n";
}
return final;
};
const frameHandler = (engineIo) => {
engineIo.render(render(), 24, 16);
};
const inputHandler = (keyPress) => {
console.log("KeyPress: ", keyPress);
};
new typesgine.EngineIo({
fps: 60,
frameHandler: frameHandler,
callBackInput: inputHandler,
});
Simplest example using String
import typesgine from "typesgine-ascii";
console.clear();
const render = () => {
let final = "";
for (let i = 0; i < 16; i++) {
for (let j = 0; j < 24; j++) {
final += `${Math.round(Math.random() * (0 - 9) + 9)}`;
}
}
return final;
};
const frameHandler = (engineIo) => {
engineIo.render(render(), 24, 16);
};
const inputHandler = (keyPress) => {
console.log("KeyPress: ", keyPress);
};
new typesgine.EngineIo({
fps: 60,
frameHandler: frameHandler,
callBackInput: inputHandler,
});
Html Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Typesgine</title>
</head>
<body>
<h1>Clique no "A" para mudar a renderizaçao</h1>
<h1>Clique no "B" para mudar a renderizaçao</h1>
<script src="https://unpkg.com/typesgine-ascii@2.0.0/dist/main.js"></script>
<script>
console.clear();
let controllerToRender = false;
const render = () => {
let final = [
[
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
[
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
[
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
[
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
[
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
[
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
[
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
[
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0,
],
];
for (let i = 0; i < 8; i++) {
for (let j = 0; j < 24; j++) {
final[i][j] = Math.round(Math.random() * (0 - 9) + 9);
}
final[i][final[i].length - 1] = "\n";
}
let Graph = [
["~", "2", "γ", "γ", "\n"],
["γ", "γ", "γ", "γ", "\n"],
["γ", "γ", "γ", "γ", "\n"],
];
return final;
};
const frameHandler = (engineIo) => {
engineIo.render(
controllerToRender ? render() : "γ2γγγγ3γγ4γγ",
3,
4
);
};
const inputHandler = (keyPress) => {
if (keyPress == "a") {
console.clear();
controllerToRender = true;
}
if (keyPress == "b") {
console.clear();
controllerToRender = false;
}
console.log("KeyPress: ", keyPress);
};
new TypesgineAscii.EngineIo({
fps: 60,
frameHandler: frameHandler,
callBackInput: inputHandler,
});
</script>
</body>
</html>
Use with typescript
import typesgine from "typesgine-ascii";
console.clear();
const render = () => {
let final = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
for (let i = 0; i < 8; i++) {
for (let j = 0; j < 24; j++) {
final[i][j] = Math.round(Math.random() * (0 - 9) + 9);
}
final[i][final[i].length - 1] = "\n";
}
return final;
};
const frameHandler = typesgine.FrameHandler.Handler((engineIo) => {
engineIo.render(render(), 24, 16);
});
const inputHandler = typesgine.InputHandler.Handler((keyPress) => {
console.log("KeyPress: ", keyPress);
});
new typesgine.EngineIo({
fps: 60,
frameHandler: frameHandler,
callBackInput: inputHandler,
});
Functions
- EngineIo
Main function, with which rendering, fps control and I/O are started
new typesgine.EngineIo({
fps: 60, // Frame per second
frameHandler: frameHandler, // - FrameHandler.Handler
callBackInput: inputHandler, // - InputHandler.Handler
});
- FrameHandler.Handler
This function is called every frame. It's used to render. It must execute the render function that needs to receive an Array / [[]] or a String containing the ASCII to be rendered.
If Array / [[]] dont set the width and height of the screen, the engine will set it automatically.
If String set the width and height of the screen.
/// FrameHandler.Handler(callback(engineIo))
const frameHandler = (engineIo) => {
engineIo.render("1234", 1, 4);
};
let Graph = [
["γ", "2", "γ", "γ", "\n"],
["γ", "γ", "3", "γ", "\n"],
["γ", "4", "γ", "γ", "\n"],
];
const frameHandler = (engineIo) => {
engineIo.render(Graph);
};
- InputHandler.Handler
It's used to handle the input. this functions get a keypress into keyboard
/// InputHandler.Handler(callback(keyPress))
const inputHandler = (keyPress) => {
console.log("KeyPress: ", keyPress);
if (keyPress === "a") console.log("Moving player");
if (keyPress === "Escape") process.exit();
};
License
MIT LICENSE