gaming-ui-state-management

Name: gaming-ui-state-management
Author: theorcdev

github.com/theorcdev设计与 UI2.1k79 次安装2 天前更新

代码仓库

关于 gaming-ui-state-management

用于构建游戏风格界面的技能，以状态驱动生命值、经验值、魔法值等指标的显示。它建议扩展 Progress 组件，并通过颜色和动画表达数值变化。

主要功能

01扩展 Progress 组件
02为生命值、魔法值、经验值和耐力配色
03显示紧凑的敌方生命值
04用动画反馈状态变化
05应用复古文字与文字阴影

适用场景

01创建生命值和魔法值条
02显示经验值与升级反馈
03在战斗中展示敌方生命值

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill gaming-ui-state-management

安装后在 Claude Code 中输入/gaming-ui-state-management确认已加载。

详细介绍

游戏 UI 状态管理

创建游戏风格的界面，通过状态驱动的视觉效果展示生命值、经验值、法力值和其他游戏指标。

进度条模式

基于 Progress 组件构建游戏专用变体：

import { Progress } from "@/components/ui/8bit/progress";

function HealthBar({ value = 100, ...props }: BitProgressProps) {
  return (
    <Progress
      {...props}
      value={value}
      variant="retro"
      progressBg="bg-red-500"
    />
  );
}

function ManaBar({ value = 100, ...props }: BitProgressProps) {
  return (
    <Progress
      {...props}
      value={value}
      variant="retro"
      progressBg="bg-blue-500"
    />
  );
}

function XpBar({ value = 0, ...props }: BitProgressProps) {
  return (
    <Progress
      {...props}
      value={value}
      variant="retro"
      progressBg="bg-yellow-500"
    />
  );
}

升级通知

达到阈值时显示动画消息：

function XpBar({
  value,
  levelUpMessage = "LEVEL UP!",
  ...props
}: XpBarProps) {
  const isLevelUp = value === 100;

  return (
    <div className="relative">
      <Progress
        {...props}
        value={value}
        progressBg="bg-yellow-500"
        className={cn(isLevelUp && "animate-pulse")}
      />

      {isLevelUp && (
        <div
          className={cn(
            "retro",
            "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
            "text-[0.625rem] text-black",
            "pointer-events-none whitespace-nowrap z-10",
            "drop-shadow-[1px_1px_0_#fff] [text-shadow:1px_1px_0_#fff,-1px_-1px_0_#fff,1px_-1px_0_#fff,-1px_1px_0_#fff]",
            "animate-[blink_0.5s_step-end_infinite]"
          )}
        >
          {levelUpMessage}
        </div>
      )}
    </div>
  );
}

条件动画

使用条件类反馈游戏状态：

<div
  className={cn(
    "transition-colors duration-300",
    health <= 25 ? "animate-pulse bg-red-500/20" : "bg-green-500",
    health > 25 && health <= 50 && "bg-yellow-500/20"
  )}
/>

敌人生命值显示

用于战斗场景的紧凑显示：

function EnemyHealth({ health, maxHealth }: EnemyHealthProps) {
  const percentage = (health / maxHealth) * 100;

  return (
    <div className="retro text-xs">
      <div className="flex justify-between mb-1">
        <span>ENEMY</span>
        <span>{health}/{maxHealth}</span>
      </div>
      <HealthBar value={percentage} className="h-2" />
    </div>
  );
}

核心原则

基础组件 - 扩展 Progress，而不是重新实现
颜色编码 - 红色（生命值）、蓝色（法力值）、黄色（经验值）、绿色（体力）
复古文字 - 使用 .retro 类显示像素字体数字
状态动画 - 使用 animate-pulse、animate-blink 提供反馈
文字阴影 - 添加白色文字阴影，确保在彩色背景上的可读性
紧凑尺寸 - 游戏 UI 使用较小的文字（text-xs、text-[0.625rem]）

参考组件

components/ui/8bit/health-bar.tsx - 生命值条实现
components/ui/8bit/xp-bar.tsx - 带升级通知的经验值条
components/ui/8bit/mana-bar.tsx - 法力值条实现

支持 Markdown

登录后评论