# XWUIGameSkillTree

A node-graph skill/talent tree that positions each entry in `data.nodes` by its `position` `{x, y}`, draws SVG prerequisite lines between connected nodes, and tracks per-node `currentRank` against `maxRank`. Nodes render as locked, unlocked, or maxed, and clicking one spends a point from the shared `data.availablePoints` (shown in an "Available Points:" bar) when `canUnlock()` passes. Configure the `layout` (`vertical`/`horizontal`), `nodeSize` (default 56), and `showConnections`, and react to allocation through `onUnlock()` - with `unlock()`, `reset()`, and `getUnlockedNodes()` as the supporting API. Use it for talent and progression screens with prerequisite-gated unlocks.

## Basic Usage

Constructs an `XWUIGameSkillTree` with empty data and default config, so it mounts the points bar reading `Available Points: 0` and an empty tree area in the default vertical layout.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: An XWUIGameSkillTree mounted with the default vertical layout, 56px nodes, and SVG prerequisite connections enabled.
```

## Horizontal Combat Tree

A warrior talent tree in `horizontal` layout with 64px nodes, where a capstone stays locked until both of its feeder branches are taken.

```example
file: examples/HorizontalCombatTree.ts
html: examples/HorizontalCombatTree.html
title: Horizontal Combat Tree
description: A prerequisite-gated warrior tree laid out horizontally with larger nodes and a locked Whirlwind capstone.
```

## Nodes Only, No Lines

A fully-ranked druid cluster with `showConnections: false`, suppressing the SVG line layer so only the maxed skill nodes draw.

```example
file: examples/NodesOnlyNoLines.ts
html: examples/NodesOnlyNoLines.html
title: Nodes Only, No Lines
description: A maxed-out node cluster with connection lines turned off for a compact, line-free build summary.
```

```api
```