asciitorium/dist/examples/FPVBasics.js

an ASCII CLUI framework

import { jsx as _jsx, jsxs as _jsxs } from "asciitorium/jsx-runtime";
import { Line, Column, Text, FirstPersonView, 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: 2,
    y: 1,
    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());
/**
 * First Person View Basics
 *
 * Guide to using first-person perspective rendering in asciitorium games.
 */
export const FPVBasics = () => {
    return (_jsxs(Column, { style: BaseStyle, label: "First Person View 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: { bottom: 2, top: 1 }, children: "First Person View (FPV) provides immersive ASCII-based 3D perspective rendering for dungeon crawlers and exploration games." }), _jsx(Text, { width: "90%", children: "Interactive First Person Example" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { bottom: 1 }, children: "Controls: [W] forward \u2022 [S] backward \u2022 [A] turn left \u2022 [D] turn right" }), _jsx(FirstPersonView, { align: "center", gap: { bottom: 2 }, mapAsset: map, player: player }), _jsx(Text, { width: "90%", children: "Raycasting System" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 4 }, children: "FirstPersonView uses raycasting with predefined offset cubes to determine what the player can see in each direction:" }), _jsx(Text, { width: "90%", gap: { left: 6 }, children: "\u2022 Casts rays at multiple depths (here, near, middle, far) \u00B6 \u2022 Uses GameWorld.isSolid() for wall detection \u00B6 \u2022 Composites materials based on distance and position" }), _jsx(Text, { width: "90%", gap: { top: 2 }, children: "Scene Switching" }), _jsx(Line, { width: "90%" }), _jsx(Text, { width: "90%", gap: { left: 4, bottom: 2 }, children: "FirstPersonView supports different visual styles through the scene property, allowing you to switch between wireframe, brick-wall, and other material sets for varied aesthetics." })] }));
};