Skip to content

feat(status-effect-indicator): add status effect indicator component #454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Railly wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(status-effect-indicator): add status effect indicator component #454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions app/blocks/gaming/gaming.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import PauseMenu from "@/components/ui/8bit/blocks/pause-menu";
import EnemyHealthDisplay from "@/components/ui/8bit/enemy-health-display";
import HealthBar from "@/components/ui/8bit/health-bar";
import ManaBar from "@/components/ui/8bit/mana-bar";
import StatusEffectIndicator from "@/components/ui/8bit/status-effect-indicator";

import AudioSettings from "../../../components/ui/8bit/blocks/audio-settings";
import Leaderboard from "../../../components/ui/8bit/leaderboard";
Expand Down Expand Up @@ -356,6 +357,105 @@ export default function GamingBlocks() {
</div>
</div>
</div>

<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
<h2 className="text-sm text-muted-foreground sm:pl-3">Status Effects</h2>
<div className="flex flex-col md:flex-row items-center gap-2">
<CopyCommandButton
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" />
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

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.

Suggested change
<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.

</div>
</div>
<div className="py-14 flex flex-col gap-6">
<div className="flex flex-col gap-6 w-full md:w-[600px] mx-auto space-y-8">
<div className="space-y-4">
<p className="text-sm text-muted-foreground text-center">Player Status Effects</p>
<StatusEffectIndicator
effects={[
{
id: "poison-1",
type: "poison",
duration: 15,
stacks: 2,
intensity: "normal",
},
{
id: "shield-1",
type: "shield",
duration: 30,
intensity: "strong",
},
{
id: "speed-1",
type: "speed",
duration: 12,
intensity: "normal",
},
]}
showDuration={true}
showStacks={true}
size="lg"
className="flex-row justify-center"
/>
</div>

<div className="space-y-4">
<p className="text-sm text-muted-foreground text-center">Boss Debuffs</p>
<StatusEffectIndicator
effects={[
{
id: "freeze-1",
type: "freeze",
duration: 8,
intensity: "strong",
},
{
id: "burn-1",
type: "burn",
duration: 6,
stacks: 3,
intensity: "strong",
},
{
id: "stun-1",
type: "stun",
duration: 2,
intensity: "normal",
},
]}
showDuration={true}
showStacks={true}
size="md"
className="flex-row justify-center"
/>
</div>

<div className="space-y-4">
<p className="text-sm text-muted-foreground text-center">All Effect Types</p>
<StatusEffectIndicator
effects={[
{ id: "poison-demo", type: "poison", duration: 10, intensity: "normal" },
{ id: "freeze-demo", type: "freeze", duration: 5, intensity: "strong" },
{ id: "burn-demo", type: "burn", duration: 8, stacks: 2, intensity: "normal" },
{ id: "stun-demo", type: "stun", duration: 3, intensity: "weak" },
{ id: "heal-demo", type: "heal", duration: 15, intensity: "strong" },
{ id: "shield-demo", type: "shield", duration: 20, intensity: "normal" },
{ id: "speed-demo", type: "speed", duration: 12, intensity: "strong" },
{ id: "slow-demo", type: "slow", duration: 6, stacks: 1, intensity: "normal" },
]}
showDuration={true}
showStacks={true}
size="sm"
maxEffects={8}
className="flex-row justify-center"
/>
</div>
</div>
</div>
</div>
</div>
);
}
26 changes: 26 additions & 0 deletions app/blocks/status-effects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import CopyCommandButton from "@/app/docs/components/copy-command-button";
import { OpenInV0Button } from "@/app/docs/components/open-in-v0-button";

import StatusEffectsBlock from "./status-effects";

export default function StatusEffectsPage() {
return (
<div className="flex flex-col gap-10">
<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[600px]">
<div className="flex flex-col md:flex-row gap-2 items-center justify-between">
<h2 className="text-sm text-muted-foreground sm:pl-3">
Status Effect Indicator Component
</h2>
<div className="flex flex-col md:flex-row items-center gap-2">
<CopyCommandButton
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" />
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Nov 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

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.

Suggested change
<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.

Copy link
Copy Markdown
Owner

@TheOrcDev TheOrcDev Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Railly is the rabbit confused? :D

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

</div>
</div>
<StatusEffectsBlock />
</div>
</div>
);
}
Loading