Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
The purpose of existing components and how to use them.
Existing Components
This document describes the existing components in the src/client directory, their intended purposes, and examples of how to use them.
Modal Component (component.modal.ts)
Purpose
The Modal component provides a reusable dialog overlay that can display content in a centered, blurred backdrop. It supports animations for opening and closing, keyboard navigation (Escape to close), and event dispatching for integration with application logic.
// Programmatically control the modalconst modal = document.querySelector("canzeltly-modal") asCanzeltlyModal;
await modal.open();
await modal.close();
modal.submit(); // Dispatches submit event and closes
Events
modal-opening: Dispatched when modal starts opening
modal-closing: Dispatched when modal starts closing
modal-submit: Dispatched when submit() is called
Save Indicator Component (component.save-indicator.ts)
Purpose
The Save Indicator displays a temporary success checkmark in the top-right corner of the screen to provide visual feedback when data has been saved successfully.
// Trigger the save indicatorconst indicator = document.querySelector("canzeltly-save-indicator") asCanzeltlySaveIndicator;
indicator.show();
// Or dispatch the event it listens fordocument.dispatchEvent(newCustomEvent("book-saved"));
Toast Component (component.toast.ts)
Purpose
The Toast component displays temporary notification messages in the top-right corner of the screen. It supports different message types (error, warning, success, info) with appropriate styling.
The Create Game component provides a form for users to create a new game by specifying parameters like game name, world dimensions, and number of circles.
Key Features
Form inputs for game configuration
Generates random game state with player and additional circles
The Games List component displays a list of saved games, handles bulk selection and deletion, and provides modals for individual game options like renaming.
Key Features
Loads and displays saved games
Bulk selection with delete functionality
Modal for game-specific actions (rename, etc.)
Integrates with games context
Usage Example
<canzeltly-games-list></canzeltly-games-list>
// Consumes gamesContext automatically// Handles all interactions internally
Heads Up Display Component (component.heads-up-display.ts)
Purpose
The Heads Up Display (HUD) component overlays game information and controls on the play screen, including FPS counter and game menu.
