68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
|
|
interface BackgroundProps {
|
|
background: string;
|
|
}
|
|
|
|
export function Background({ background }: BackgroundProps) {
|
|
const getBackgroundStyle = () => {
|
|
switch (background) {
|
|
case 'rainbow':
|
|
return {
|
|
background: 'linear-gradient(45deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080)',
|
|
backgroundSize: '400% 400%',
|
|
animation: 'rainbow 10s ease infinite'
|
|
};
|
|
case 'matrix':
|
|
return {
|
|
background: 'linear-gradient(135deg, #000000 0%, #0d4a0d 50%, #000000 100%)',
|
|
backgroundImage: 'radial-gradient(circle at 20% 50%, #00ff00 1px, transparent 1px), radial-gradient(circle at 80% 50%, #00ff00 1px, transparent 1px)',
|
|
backgroundSize: '20px 20px',
|
|
animation: 'matrix 20s linear infinite'
|
|
};
|
|
case 'cyberpunk':
|
|
return {
|
|
background: 'linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 25%, #16213e 50%, #e94560 75%, #0f3460 100%)',
|
|
backgroundSize: '400% 400%',
|
|
animation: 'cyberpunk 15s ease infinite'
|
|
};
|
|
case 'space':
|
|
return {
|
|
background: 'radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%)',
|
|
backgroundImage: 'radial-gradient(2px 2px at 20px 30px, #eee, transparent), radial-gradient(2px 2px at 40px 70px, #fff, transparent), radial-gradient(1px 1px at 90px 40px, #fff, transparent)',
|
|
backgroundSize: '200px 100px',
|
|
animation: 'stars 50s linear infinite'
|
|
};
|
|
case 'musume':
|
|
return {
|
|
background: 'url("/special/umamusume.gif") no-repeat center center fixed',
|
|
backgroundSize: 'cover',
|
|
animation: 'none'
|
|
};
|
|
case 'ultimate':
|
|
return {
|
|
background: 'conic-gradient(from 0deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000)',
|
|
backgroundSize: '400% 400%',
|
|
animation: 'ultimate 5s linear infinite'
|
|
};
|
|
case 'god-tier':
|
|
return {
|
|
background: 'url("/special/bathtub.png") no-repeat center center fixed',
|
|
backgroundSize: 'contain',
|
|
animation: 'none'
|
|
};
|
|
|
|
default:
|
|
return {
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
|
};
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 -z-10"
|
|
style={getBackgroundStyle()}
|
|
/>
|
|
);
|
|
} |