feat(status-effect-indicator): add status effect indicator component#454
feat(status-effect-indicator): add status effect indicator component#454Railly wants to merge 1 commit intoTheOrcDev:mainfrom
Conversation
- Add StatusEffectIndicator component with 8 effect types - Include poison, freeze, burn, stun, heal, shield, speed, slow - Support for duration, stacks, and intensity variants - Add status effects block page and examples - Update registry with new component Closes TheOrcDev#290
|
@Railly is attempting to deploy a commit to the 8bitcn Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis PR introduces a new StatusEffectIndicator component for displaying pixel-art styled status effect badges. It includes the core UI component with multiple size and intensity variants, a demonstration block showcasing configurations, a dedicated page, integration into gaming blocks, and registry updates for component discovery. Changes
Sequence DiagramsequenceDiagram
participant User as User
participant Page as StatusEffectsPage
participant Block as StatusEffectsBlock
participant Indicator as StatusEffectIndicator
participant Badge as StatusEffectBadge
User->>Page: Visits /blocks/status-effects
Page->>Block: Renders StatusEffectsBlock
Block->>Block: Initializes state (size, showDuration, showStacks, etc.)
Block->>User: Displays global controls & demo sections
User->>Block: Toggles size/duration/stacks/animation
Block->>Block: Updates internal state
Block->>Indicator: Re-renders with new props
Indicator->>Indicator: Trims effects to maxEffects
Indicator->>Badge: Renders StatusEffectBadge per effect
Badge->>Badge: Computes icon & color from effect.type & intensity
Badge->>User: Displays colored badge with optional indicators
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Tip 📝 Customizable high-level summaries are now available in beta!You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.
Example instruction:
Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
components/ui/8bit/status-effect-indicator.tsx (1)
686-701: Consider refactoring nested ternaries for better readability.The nested ternary operators for
indicatorSizeandtextSizecould be replaced with a cleaner approach.Consider this refactor:
- const indicatorSize = - size === "sm" - ? "w-5 h-5" - : size === "md" - ? "w-6 h-6" - : size === "lg" - ? "w-7 h-7" - : "w-8 h-8"; - const textSize = - size === "sm" - ? "text-[10px]" - : size === "md" - ? "text-xs" - : size === "lg" - ? "text-sm" - : "text-base"; + const sizeMap = { + sm: { indicator: "w-5 h-5", text: "text-[10px]" }, + md: { indicator: "w-6 h-6", text: "text-xs" }, + lg: { indicator: "w-7 h-7", text: "text-sm" }, + xl: { indicator: "w-8 h-8", text: "text-base" }, + } as const; + + const { indicator: indicatorSize, text: textSize } = sizeMap[size ?? "md"];
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
app/blocks/gaming/gaming.tsx(2 hunks)app/blocks/status-effects/page.tsx(1 hunks)app/blocks/status-effects/status-effects.tsx(1 hunks)components/ui/8bit/status-effect-indicator.tsx(1 hunks)public/r/registry.json(1 hunks)public/r/status-effect-indicator.json(1 hunks)registry.json(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-05-26T15:29:11.988Z
Learnt from: BIT-zhaoyang
Repo: TheOrcDev/8bitcn-ui PR: 203
File: components/ui/8bit/navigation-menu.tsx:170-189
Timestamp: 2025-05-26T15:29:11.988Z
Learning: In components/ui/8bit/navigation-menu.tsx, the NavigationMenuIndicator component uses Radix Indicator directly instead of the ShadcnNavigationMenuIndicator wrapper because it needs to apply custom styling (`dark:bg-ring`) to the inner div element, which the shadcn wrapper doesn't provide an interface for.
Applied to files:
components/ui/8bit/status-effect-indicator.tsxpublic/r/status-effect-indicator.json
🧬 Code graph analysis (4)
app/blocks/status-effects/status-effects.tsx (1)
components/ui/8bit/status-effect-indicator.tsx (2)
StatusEffect(10-24)StatusEffectIndicator(759-826)
components/ui/8bit/status-effect-indicator.tsx (1)
lib/utils.ts (1)
cn(4-6)
app/blocks/status-effects/page.tsx (3)
app/docs/components/copy-command-button.tsx (1)
CopyCommandButton(13-37)app/docs/components/open-in-v0-button.tsx (1)
OpenInV0Button(5-39)app/blocks/status-effects/status-effects.tsx (1)
StatusEffectsBlock(75-346)
app/blocks/gaming/gaming.tsx (3)
app/docs/components/copy-command-button.tsx (1)
CopyCommandButton(13-37)app/docs/components/open-in-v0-button.tsx (1)
OpenInV0Button(5-39)components/ui/8bit/status-effect-indicator.tsx (1)
StatusEffectIndicator(759-826)
🔇 Additional comments (14)
registry.json (1)
1490-1509: LGTM! Registry entry follows the established pattern.The new status-effect-indicator entry is well-structured with appropriate metadata and file references.
app/blocks/gaming/gaming.tsx (1)
376-454: LGTM! Comprehensive demo coverage.The three demo sections effectively showcase player buffs, boss debuffs, and all effect types with appropriate configurations.
app/blocks/status-effects/status-effects.tsx (3)
12-73: LGTM! Sample data is comprehensive and well-organized.The sample effects cover all 8 types with appropriate durations, stacks, and intensities. The debuff/buff filtering logic correctly categorizes effects.
75-95: LGTM! State management is clean and appropriate.The interactive controls provide a good demonstration of the component's flexibility.
97-345: LGTM! Excellent demonstration structure.The demo sections comprehensively cover all features: sizes, intensities, individual types, and edge cases like empty state.
public/r/registry.json (1)
1490-1509: LGTM! Public registry entry matches the root registry.The entry is correctly structured and consistent with the root registry.json.
public/r/status-effect-indicator.json (1)
1-21: LGTM! Registry manifest is correctly structured.The metadata file properly embeds the component code and stylesheet for registry consumption.
components/ui/8bit/status-effect-indicator.tsx (7)
32-37: Verify that icon sizes are appropriate for the use case.The sizes are quite large:
sm: 64px (w-16)md: 80px (w-20)lg: 96px (w-24)xl: 112px (w-28)For typical status effect indicators in games, these might be too large. Consider if sizes like
w-8/10/12/14(32px/40px/48px/56px) would be more appropriate for most UI contexts.Please verify with the design requirements whether these dimensions match the intended visual design.
57-616: LGTM! Excellent pixel art icons.The custom SVG icons are well-crafted and fit the 8-bit aesthetic perfectly. The note on line 614 about intensity being unused is appropriate for future extensibility.
619-667: LGTM! Color scheme provides excellent contrast.The strong background colors with white text ensure readability, and the intensity progression (600→700→800) is intuitive.
703-728: LGTM! Border styling correctly matches the 8-bit pattern.The border implementation using
border-y-4andborder-x-4with separate divs correctly creates the 8-bit aesthetic, consistent with other components in the library.Based on learnings
770-778: LGTM! Efficient memoization and early return.The
useMemooptimization for slicing effects and the early return for empty arrays are appropriate performance optimizations.
801-822: LGTM! Overflow indicator matches the 8-bit styling pattern.The "+N" indicator correctly uses the same border approach and appropriately uses muted colors to distinguish it from actual effects.
10-24: LGTM! Exports are well-structured.The component appropriately exports:
StatusEffectinterface for type definitionsstatusEffectVariantsfor customizationStatusEffectIndicatorPropsfor prop types- Main component as both named and default export
Keeping
StatusEffectBadgeinternal is the correct design choice.Also applies to: 759-759, 828-828
| command="pnpm dlx shadcn@latest add @8bitcn/status-effect-indicator" | ||
| copyCommand="pnpm dlx shadcn@latest add @8bitcn/status-effect-indicator" | ||
| /> | ||
| <OpenInV0Button name="8bit-status-effects" className="w-fit" /> |
There was a problem hiding this comment.
Fix the OpenInV0Button name to match the registry entry.
Same issue as in the status-effects page. The name should be "status-effect-indicator" to match the registry entry.
Apply this diff:
- <OpenInV0Button name="8bit-status-effects" className="w-fit" />
+ <OpenInV0Button name="status-effect-indicator" className="w-fit" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <OpenInV0Button name="8bit-status-effects" className="w-fit" /> | |
| <OpenInV0Button name="status-effect-indicator" className="w-fit" /> |
🤖 Prompt for AI Agents
In app/blocks/gaming/gaming.tsx around line 369, the OpenInV0Button name prop is
incorrect; change the name from "8bit-status-effects" to
"status-effect-indicator" so it matches the registry entry, keeping the existing
className="w-fit" and other props unchanged.
| command="pnpm dlx shadcn@latest add @8bitcn/status-effect-indicator" | ||
| copyCommand="pnpm dlx shadcn@latest add @8bitcn/status-effect-indicator" | ||
| /> | ||
| <OpenInV0Button name="8bit-status-effects" className="w-fit" /> |
There was a problem hiding this comment.
Fix the OpenInV0Button name to match the registry entry.
The name prop should be "status-effect-indicator" to match the registry entry at line 1492 in registry.json, not "8bit-status-effects".
Apply this diff:
- <OpenInV0Button name="8bit-status-effects" className="w-fit" />
+ <OpenInV0Button name="status-effect-indicator" className="w-fit" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <OpenInV0Button name="8bit-status-effects" className="w-fit" /> | |
| <OpenInV0Button name="status-effect-indicator" className="w-fit" /> |
🤖 Prompt for AI Agents
In app/blocks/status-effects/page.tsx around line 19 the OpenInV0Button is using
the wrong name prop ("8bit-status-effects"); update the name prop to
"status-effect-indicator" so it matches the registry entry (registry.json line
~1492), ensuring the component opens the correct registered block.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
|
@Railly solve please conflicts so we can merge this thing! |
2 participants
Summary
Implements the Status Effect Indicator component as requested in #290.
This component displays pixel art icons for various status effects (poison, freeze, burn, stun, heal, shield, speed, slow) with support for:
Changes
Screenshots
The component includes examples for all effect types, sizes, and intensities as shown in the issue discussion.
Closes #290
Summary by CodeRabbit
New Features
✏️ Tip: You can customize this high-level summary in your review settings.