ayos / web / src / components / mascot / Rambi.tsx

import { keyframes } from '@emotion/react';
import Box from '@mui/material/Box';

export type Mood = 'idle' | 'happy' | 'sad' | 'celebrate' | 'peek' | 'wave' | 'encourage';

interface RambiProps {
  mood?: Mood;
  size?: number;
}

const bounce = keyframes`
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
`;

const jump = keyframes`
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-18px) scale(1.05); }
  50% { transform: translateY(-20px) scale(1.05); }
  70% { transform: translateY(-10px) scale(1); }
`;

const droop = keyframes`
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(4px) rotate(-3deg); }
`;

const celebrate = keyframes`
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(10deg) scale(1.1); }
  50% { transform: rotate(-10deg) scale(1.1); }
  75% { transform: rotate(5deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
`;

const peekUp = keyframes`
  0% { transform: translateY(60%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
`;

const waveArm = keyframes`
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-20deg); }
  50% { transform: rotate(20deg); }
  75% { transform: rotate(-10deg); }
`;

const nod = keyframes`
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(3px) rotate(5deg); }
  60% { transform: translateY(1px) rotate(-3deg); }
`;

function getAnimation(mood: Mood) {
  switch (mood) {
    case 'idle':
      return `${bounce} 2s ease-in-out infinite`;
    case 'happy':
      return `${jump} 0.8s ease-in-out infinite`;
    case 'sad':
      return `${droop} 2s ease-in-out infinite`;
    case 'celebrate':
      return `${celebrate} 0.6s ease-in-out infinite`;
    case 'peek':
      return `${peekUp} 0.5s ease-out forwards`;
    case 'wave':
      return `${bounce} 2s ease-in-out infinite`;
    case 'encourage':
      return `${nod} 1.2s ease-in-out infinite`;
    default:
      return 'none';
  }
}

function getEyes(mood: Mood): [string, string] {
  switch (mood) {
    case 'happy':
    case 'celebrate':
      return ['\u2303', '\u2303']; // ^ ^
    case 'sad':
      return [';', ';'];
    case 'peek':
      return ['\u25CF', '\u25CF']; // big round eyes
    case 'encourage':
      return ['\u25CF', '\u25CF'];
    case 'wave':
      return ['\u25CF', '\u2012']; // wink
    default:
      return ['\u25CF', '\u25CF'];
  }
}

function getMouth(mood: Mood): string {
  switch (mood) {
    case 'happy':
    case 'celebrate':
    case 'wave':
      return 'D';
    case 'sad':
      return '\u2323'; // frown
    case 'encourage':
      return '\u25E1'; // warm smile
    default:
      return '\u25E1'; // smile
  }
}

export function Rambi({ mood = 'idle', size = 120 }: RambiProps) {
  const [leftEye, rightEye] = getEyes(mood);
  const mouth = getMouth(mood);
  const s = size;
  const cx = s / 2;
  const cy = s / 2;
  const r = s * 0.3;

  // Spike positions around the circle
  const spikeCount = 12;
  const spikes = Array.from({ length: spikeCount }, (_, i) => {
    const angle = (i / spikeCount) * Math.PI * 2 - Math.PI / 2;
    const innerR = r + 2;
    const outerR = r + s * 0.13;
    const x1 = cx + Math.cos(angle - 0.15) * innerR;
    const y1 = cy + Math.sin(angle - 0.15) * innerR;
    const x2 = cx + Math.cos(angle) * outerR;
    const y2 = cy + Math.sin(angle) * outerR;
    const x3 = cx + Math.cos(angle + 0.15) * innerR;
    const y3 = cy + Math.sin(angle + 0.15) * innerR;
    return `M${x1},${y1} Q${x2},${y2} ${x3},${y3}`;
  });

  // Arm positions
  const armLength = s * 0.15;
  const leftArmStart = { x: cx - r * 0.8, y: cy + r * 0.4 };
  const rightArmStart = { x: cx + r * 0.8, y: cy + r * 0.4 };

  // Leg positions
  const legLength = s * 0.13;
  const leftLegStart = { x: cx - r * 0.35, y: cy + r };
  const rightLegStart = { x: cx + r * 0.35, y: cy + r };

  const isWaving = mood === 'wave';

  return (
    <Box
      sx={{
        display: 'inline-flex',
        animation: getAnimation(mood),
      }}
    >
      <svg
        width={s}
        height={s}
        viewBox={`0 0 ${s} ${s}`}
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* Spikes / hair */}
        {spikes.map((d, i) => (
          <path
            key={i}
            d={d}
            fill="none"
            stroke={i % 2 === 0 ? '#E03030' : '#FF6B35'}
            strokeWidth={s * 0.035}
            strokeLinecap="round"
          />
        ))}

        {/* Body */}
        <circle cx={cx} cy={cy} r={r} fill="#E03030" />

        {/* Highlight */}
        <circle
          cx={cx - r * 0.25}
          cy={cy - r * 0.3}
          r={r * 0.15}
          fill="rgba(255,255,255,0.25)"
        />

        {/* Eyes */}
        <text
          x={cx - r * 0.3}
          y={cy - r * 0.05}
          textAnchor="middle"
          fontSize={s * 0.1}
          fill="white"
          fontFamily="sans-serif"
        >
          {leftEye}
        </text>
        <text
          x={cx + r * 0.3}
          y={cy - r * 0.05}
          textAnchor="middle"
          fontSize={s * 0.1}
          fill="white"
          fontFamily="sans-serif"
        >
          {rightEye}
        </text>

        {/* Eye pupils (for non-kaomoji eyes) */}
        {mood !== 'happy' && mood !== 'celebrate' && mood !== 'sad' && (
          <>
            <circle
              cx={cx - r * 0.3}
              cy={cy - r * 0.1}
              r={s * 0.025}
              fill="white"
            />
            <circle
              cx={cx + r * 0.3}
              cy={cy - r * 0.1}
              r={s * 0.025}
              fill="white"
            />
          </>
        )}

        {/* Mouth */}
        <text
          x={cx}
          y={cy + r * 0.4}
          textAnchor="middle"
          fontSize={s * 0.12}
          fill="white"
          fontFamily="sans-serif"
        >
          {mouth}
        </text>

        {/* Cheeks (blush) */}
        <circle
          cx={cx - r * 0.6}
          cy={cy + r * 0.15}
          r={s * 0.04}
          fill="rgba(255,150,150,0.5)"
        />
        <circle
          cx={cx + r * 0.6}
          cy={cy + r * 0.15}
          r={s * 0.04}
          fill="rgba(255,150,150,0.5)"
        />

        {/* Left arm */}
        <line
          x1={leftArmStart.x}
          y1={leftArmStart.y}
          x2={leftArmStart.x - armLength}
          y2={leftArmStart.y + armLength * 0.6}
          stroke="#E03030"
          strokeWidth={s * 0.03}
          strokeLinecap="round"
        />

        {/* Right arm (waves when mood is 'wave') */}
        <line
          x1={rightArmStart.x}
          y1={rightArmStart.y}
          x2={rightArmStart.x + armLength}
          y2={
            isWaving
              ? rightArmStart.y - armLength
              : rightArmStart.y + armLength * 0.6
          }
          stroke="#E03030"
          strokeWidth={s * 0.03}
          strokeLinecap="round"
          style={
            isWaving
              ? {
                  transformOrigin: `${rightArmStart.x}px ${rightArmStart.y}px`,
                  animation: `${waveArm} 0.6s ease-in-out infinite`,
                }
              : undefined
          }
        />

        {/* Left leg */}
        <line
          x1={leftLegStart.x}
          y1={leftLegStart.y}
          x2={leftLegStart.x - s * 0.03}
          y2={leftLegStart.y + legLength}
          stroke="#E03030"
          strokeWidth={s * 0.03}
          strokeLinecap="round"
        />

        {/* Right leg */}
        <line
          x1={rightLegStart.x}
          y1={rightLegStart.y}
          x2={rightLegStart.x + s * 0.03}
          y2={rightLegStart.y + legLength}
          stroke="#E03030"
          strokeWidth={s * 0.03}
          strokeLinecap="round"
        />

        {/* Confetti for celebrate mood */}
        {mood === 'celebrate' && (
          <>
            <circle cx={cx - r * 1.2} cy={cy - r * 0.8} r={3} fill="#FFC800">
              <animate
                attributeName="cy"
                values={`${cy - r * 0.8};${cy + r * 1.2}`}
                dur="1s"
                repeatCount="indefinite"
              />
              <animate
                attributeName="opacity"
                values="1;0"
                dur="1s"
                repeatCount="indefinite"
              />
            </circle>
            <circle cx={cx + r * 1.1} cy={cy - r} r={3} fill="#CE82FF">
              <animate
                attributeName="cy"
                values={`${cy - r};${cy + r * 1.3}`}
                dur="1.2s"
                repeatCount="indefinite"
              />
              <animate
                attributeName="opacity"
                values="1;0"
                dur="1.2s"
                repeatCount="indefinite"
              />
            </circle>
            <circle cx={cx} cy={cy - r * 1.3} r={2.5} fill="#4CAF50">
              <animate
                attributeName="cy"
                values={`${cy - r * 1.3};${cy + r}`}
                dur="0.9s"
                repeatCount="indefinite"
              />
              <animate
                attributeName="opacity"
                values="1;0"
                dur="0.9s"
                repeatCount="indefinite"
              />
            </circle>
            <rect
              x={cx - r * 0.9}
              y={cy - r * 1.1}
              width={4}
              height={4}
              fill="#FF4B4B"
              transform={`rotate(45 ${cx - r * 0.9} ${cy - r * 1.1})`}
            >
              <animate
                attributeName="y"
                values={`${cy - r * 1.1};${cy + r * 1.2}`}
                dur="1.1s"
                repeatCount="indefinite"
              />
              <animate
                attributeName="opacity"
                values="1;0"
                dur="1.1s"
                repeatCount="indefinite"
              />
            </rect>
          </>
        )}
      </svg>
    </Box>
  );
}