Menü
The purpose of existing components and how to use them.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Create and update instructions, skills, and prompts for GitHub Copilot
Create a new feature
How to create a new type of game object
How to create a new type of affect
How to create a new type of affector
How to create a new event
| name | using-existing-components |
| description | The purpose of existing components and how to use them. |
This document describes the existing components in the src/client directory, their intended purposes, and examples of how to use them.
component.modal.ts)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.
<canzeltly-modal>
<button slot="open-button">Open Modal</button>
<div slot="body">
<h2>Modal Title</h2>
<p>Modal content goes here.</p>
<button @click="${()" ="">modal.submit()}>Submit</button>
</div>
</canzeltly-modal>
// Programmatically control the modal
const modal = document.querySelector("canzeltly-modal") as CanzeltlyModal;
await modal.open();
await modal.close();
modal.submit(); // Dispatches submit event and closes
modal-opening: Dispatched when modal starts openingmodal-closing: Dispatched when modal starts closingmodal-submit: Dispatched when submit() is calledcomponent.save-indicator.ts)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.
<canzeltly-save-indicator></canzeltly-save-indicator>
// Trigger the save indicator
const indicator = document.querySelector("canzeltly-save-indicator") as CanzeltlySaveIndicator;
indicator.show();
// Or dispatch the event it listens for
document.dispatchEvent(new CustomEvent("book-saved"));
component.toast.ts)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.
<canzeltly-toast></canzeltly-toast>
const toast = document.querySelector("canzeltly-toast") as CanzeltlyToast;
toast.show("Operation completed successfully!", "success");
toast.show("An error occurred", "error", 3000); // 3 second duration
error: Red background for error messageswarning: Yellow background for warningssuccess: Green background for success messagesinfo: Default styling for informational messagescomponent.tooltip.ts)The Tooltip component displays contextual help text when users hover over an element. It automatically positions itself above the trigger element.
<canzeltly-tooltip content="This is a helpful tooltip message">
<button>Hover me</button>
</canzeltly-tooltip>
// With dynamic content
const tooltip = document.querySelector("canzeltly-tooltip") as CanzeltlyTooltip;
tooltip.content = "Updated tooltip text";
tooltip.offsetY = 10; // Adjust vertical positioning
component.create-game.ts)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.
<canzeltly-create-game @game-created="${handleGameCreated}"></canzeltly-create-game>
const createGame = document.querySelector("canzeltly-create-game") as CanzeltlyCreateGameComponent;
// Listen for game-created event
createGame.addEventListener("game-created", (e) => {
const { id, playerId } = e.detail;
// Navigate to play the game
});
component.game-preview.ts)The Game Preview component displays a summary of a saved game, allowing users to select it, play it, or access options.
<canzeltly-game-preview
.gameState="${gameState}"
.selected="${isSelected}"
@toggle-selection="${handleToggle}"
@open-game-options="${handleOptions}"></canzeltly-game-preview>
component.games-list.ts)The Games List component displays a list of saved games, handles bulk selection and deletion, and provides modals for individual game options like renaming.
<canzeltly-games-list></canzeltly-games-list>
// Consumes gamesContext automatically
// Handles all interactions internally
component.heads-up-display.ts)The Heads Up Display (HUD) component overlays game information and controls on the play screen, including FPS counter and game menu.
<canzeltly-heads-up-display .game="${game}" .fps="${fps}"></canzeltly-heads-up-display>
component.input.ts)The Input component is a versatile form input that supports multiple types: text, number, slider, checkbox, and dropdown.
<canzeltly-input type="slider" label="Volume" .value="${volume}" .min="${0}" .max="${100}" @input-change="${(e)" ="">
setVolume(e.detail.value)}>
</canzeltly-input>
component.play.ts)The Play component renders the game canvas, handles user input, and manages the game loop for playing a game.
<canzeltly-play gameId="${gameId}" playerId="${playerId}"></canzeltly-play>
// Automatically starts game loop on connection
// Handles all game rendering and input