Lightsaber colors per Force user
- 主要语言
- TypeScript
- 星标
- 0
- 派生
- 1
- PR 合并指标
- 30 天内没有已合并 PR
描述
> **Skills:** TypeScript · Three.js shader-material basics · OKLCH color tokens
> **Time:** ~4 hours
> **Good for:** R3F beginners · Star Wars lore fans who know their crystal colors
> **Difficulty:** Beginner-friendly
---
## Context
The galaxy view's `` colors lightsaber blades hardcoded:
accent-blue for Jedi, alarm-red for Sith. But canonically, Force users wield
many crystal colors — green (Yoda, Luke post-RoTJ, Qui-Gon), purple (Mace
Windu's Hurrikaine crystal), white (Ahsoka after redeeming captured Inquisitor
sabers), yellow (Jedi temple guards, Rey's hilt at the end of TROS).
## Goal
Move lightsaber color from a hardcoded prop to a per-entity field, so each
Force user's hologram is correctly tinted.
## Where to start
- `components/galaxy/HolographicFigure.tsx` — the saber blade material is set
conditionally on the `side` prop today
- `lib/schema.ts` — extend `Entity` with an optional `traits.lightsaberColor`
(OKLCH string or one of `blue | green | purple | white | yellow | red`)
- Wire a small lookup table in `lib/data/lightsaber-colors.ts` keyed by entity id
- `data/build/kb.json` is regenerated by `npm run build:kb` — merge the lookup
into the build output
## Acceptance criteria
- Yoda's blade renders green, Mace Windu's purple, Ahsoka's white
- Default fallback to side classification (Jedi blue, Sith red) for unspecified
- Reduced motion path preserved
- A note in the schema documenting the field
## Lore reference
https://starwars.fandom.com/wiki/Lightsaber_color_crystal
贡献指南
调研方向
Start with components/galaxy/HolographicFigure.tsx and lib/schema.ts to trace the current side-based color and Entity shape. Add the lookup in lib/data/lightsaber-colors.ts, then run npm run build:kb to update the generated data/build/kb.json. Done means the named characters render with their specified colors, unspecified entities retain the side fallback, reduced motion remains intact, and the schema documents the field.
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, three.js, typescript
- 领域
- build-system, computer-graphics, data-visualization, frontend
- Issue 类型
- 功能
- 难度
- 3/5
- 预计耗时
- 半天
- 活跃度
- 冷清
- 描述清晰度
- 描述清楚
- 新手友好度
- 68/100