asciitorium
Version:
an ASCII CLUI framework
13 lines (12 loc) • 1.26 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Art, Line, Column, Text } from '../index.js';
import { BaseStyle } from './constants.js';
/**
* Sprites Basics
*
* Guide to using animated ASCII sprites in asciitorium.
*/
export const SpritesBasics = () => {
const container = (_jsxs(Column, { style: BaseStyle, label: "Sprites Basics", children: [_jsx(Text, { width: "90%", gap: { top: 1 }, children: "Sprites" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 2 }, children: "Sprites are stored in the art/sprites/ directory and can be loaded using the Art component or referenced in map legends via the asset property." }), _jsx(Art, { sprite: "beating-heart" }), _jsx(Text, { width: "90%", children: "Using Sprites" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 4 }, children: "Display sprites using the Art component:" }), _jsx(Text, { width: 56, textAlign: "center", border: true, align: "center", gap: { left: 4, top: 1, bottom: 1 }, children: `<Art sprite="beating-heart" />` }), _jsx(Text, { width: "90%", children: "Tip: To learn how to create your own sprites, check out the documentation in the public/art/sprites directory." })] }));
return container;
};