asciitorium
Version:
an ASCII CLUI framework
39 lines (38 loc) • 2.65 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Art, Line, Column, Text, Keybind, State, } from '../index.js';
import { BaseStyle } from './constants.js';
/**
* Keybindings Basics
*
* Guide to using global keybindings and component hotkeys in asciitorium.
*/
export const KeybindingsBasics = () => {
const message = new State('Press X on the keyboard');
const setMessage = (msg) => {
message.value = msg;
setTimeout(() => {
message.value =
'Press X on the keyboard';
}, 2000);
};
const spawnFirework = () => {
// Random position within a reasonable range
const x = Math.floor(Math.random() * 60) + 10;
const y = Math.floor(Math.random() * 20) + 5;
const firework = new Art({
sprite: 'firework',
position: { x, y },
});
container.addChild(firework);
// Remove firework after animation completes (~800ms for 8 frames at 100ms each)
setTimeout(() => {
container.removeChild(firework);
}, 800);
};
const handleXButton = () => {
setMessage('X pressed - Firework launched!');
spawnFirework();
};
const container = (_jsxs(Column, { style: BaseStyle, label: "Keybindings & Mobile Basics", children: [_jsx(Text, { width: "90%", gap: { top: 1 }, children: "Keybindings" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 4, bottom: 1 }, children: "The Keybind component creates global single key shortcuts that execute custom logic anywhere in your app." }), _jsx(Keybind, { keyBinding: "x", action: handleXButton }), _jsx(Column, { width: "90%", align: "center", border: true, gap: { bottom: 1 }, children: _jsx(Text, { align: "center", textAlign: "center", width: "80%", gap: { top: 1, bottom: 1 }, children: message }) }), _jsx(Text, { width: "90%", children: "Keybind Properties" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 6 }, children: "\u2022 keyBinding \u2014 Key to bind (e.g., \"F12\", \"j\", \"Escape\") \u00B6 \u2022 action \u2014 Function to execute when key is pressed \u00B6 \u2022 description \u2014 Optional description for documentation \u00B6 \u2022 disabled \u2014 Disable keybinding (supports State for reactive control) \u00B6" }), _jsx(Text, { width: "90%", children: "Tip: Keybindings are always global and work as long as the Keybind component is part of the app tree and not disabled. They automatically deactivate when their parent component is removed from the tree or when visibility is turned off." })] }));
return container;
};