asciitorium
Version:
an ASCII CLUI framework
34 lines (33 loc) • 2.04 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Art, Line, Column, Text, State, } from '../index.js';
import { BaseStyle } from './constants.js';
export const ControllerBasics = () => {
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: "Mobile Controller", children: [_jsx(Text, { width: "90%", align: "center", gap: { top: 1 }, children: "Mobile Controller" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 4, bottom: 1 }, children: "The MobileController component lets you handle virtual D-pad and button events, making it possible to support touch devices. You can map D-pad directions and buttons (A/B/X/Y/Menu) to any actions in your app, just like with keybindings." }), _jsx(Text, { width: "90%", gap: { left: 6 }, children: "\u2022 dpad \u2014 up/down/left/right handlers \u00B6 \u2022 action buttons \u2014 a/b/x/y handlers \u00B6 \u2022 menu \u2014 Handler for the menu button \u00B6 \u2022 enabled \u2014 Enable/disable the controller (can be reactive) \u00B6 \u2022 priority \u2014 which input takes priority if multiple are present" })] }));
return container;
};