asciitorium/dist/examples/MapsBasics.js

an ASCII CLUI framework

import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Line, Column, Text, MapView, State, Keybind, GridMovement, AssetManager, } from '../index.js';
import { BaseStyle } from './constants.js';
// Initialize state containers
const map = new State(null);
const player = new State({
    x: 15,
    y: 5,
    direction: 'east',
});
// Load map asset asynchronously
AssetManager.getMap('example')
    .then((mapAsset) => {
    map.value = mapAsset;
})
    .catch((error) => {
    console.error('Failed to load map:', error);
});
// Create GridMovement controller
const gridMovement = new GridMovement({
    mapAsset: map,
    player: player,
});
// Fog of war tracking
const exploredTiles = new State(new Set());
/**
 * Maps Basics
 *
 * Guide to creating and using maps in asciitorium games.
 */
export const MapsBasics = () => {
    return (_jsxs(Column, { style: BaseStyle, label: "Maps Basics", children: [_jsx(Keybind, { keyBinding: "w", action: () => gridMovement.moveForward() }), _jsx(Keybind, { keyBinding: "s", action: () => gridMovement.moveBackward() }), _jsx(Keybind, { keyBinding: "a", action: () => gridMovement.turnLeft() }), _jsx(Keybind, { keyBinding: "d", action: () => gridMovement.turnRight() }), _jsx(Text, { width: "90%", gap: { top: 1 }, children: "Maps" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", children: "Maps are ASCII layouts that define game environments, combining visual representation with legend files that specify gameplay properties." }), _jsxs(Column, { width: "90%", align: "center", gap: { top: 1, bottom: 1 }, children: [_jsx(MapView, { mapAsset: map, player: player, fogOfWar: false, exploredTiles: exploredTiles, width: "fill", height: 15 }), _jsx(Text, { children: "[W] forward \u2022 [S] backward \u2022 [A] turn left \u2022 [D] turn right" })] }), _jsx(Text, { gap: { left: 4, top: 1, bottom: 2 }, children: "TIP: Use the map-builder.js script to quickly generate maze-like dungeon layouts that you can customize. Maps are stored in art/maps/ with each map in its own directory containing map.art and legend.json files." })] }));
};