gaming-ui-state-management

ゲーム風 UI の状態管理

体力、XP、マナなどのゲーム指標を状態に応じて表示する、ゲーム風のインターフェースを作成します。

プログレスバーのパターン

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>
  );
}

主な原則

1. ベースコンポーネント - Progress を拡張し、再実装しないでください
2. 色分け - 赤（体力）、青（マナ）、黄色（XP）、緑（スタミナ）
3. レトロなテキスト - ピクセルフォントの数字には .retro クラスを使用します
4. 状態アニメーション - フィードバックには animate-pulse、animate-blink を使用します
5. テキストシャドウ - 色付きの背景でも読みやすいよう、白いテキストシャドウを使用します
6. コンパクトなサイズ - ゲーム UI では小さめのテキスト（text-xs、text-[0.625rem]）を使用します

参考コンポーネント

• components/ui/8bit/health-bar.tsx - 体力バーの実装
• components/ui/8bit/xp-bar.tsx - レベルアップ通知付きの XP バー
• components/ui/8bit/mana-bar.tsx - マナバーの実装