feat: Add theme system with 7 themes including Otaku and Pink Pink
- Implement ThemeContext with CSS variables for dynamic theming - Add theme presets: Cyberpunk, Windows Classic, Dark Modern, Matrix, Industrial, Otaku Mode, Pink Pink - Add theme selector UI in Footer with color preview - Theme persists to localStorage - Each theme has unique background effects, colors, and styling - Otaku Mode: anime-style dark purple with pink/purple glow and star effects - Pink Pink: cute pastel pink with heart pattern overlay 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,8 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { Palette, ChevronUp } from 'lucide-react';
|
||||
import { RobotTarget } from '../../types';
|
||||
import { comms } from '../../communication';
|
||||
import { useTheme, themes, ThemeName } from '../../contexts/ThemeContext';
|
||||
|
||||
// HW 상태 타입 (윈폼 HWState와 동일)
|
||||
// status: 0=SET(미설정/회색), 1=ON(연결/녹색), 2=TRIG(트리거/노란색), 3=OFF(연결안됨/빨간색)
|
||||
@@ -38,6 +40,8 @@ const getStatusColor = (status: number): { bg: string; shadow: string; text: str
|
||||
|
||||
export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget }) => {
|
||||
const [hwStatus, setHwStatus] = useState<HWItem[]>([]);
|
||||
const [showThemeSelector, setShowThemeSelector] = useState(false);
|
||||
const { theme, themeName, setTheme, availableThemes } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
// HW_STATUS_UPDATE 이벤트 구독
|
||||
@@ -75,6 +79,44 @@ export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget })
|
||||
return errors.sort((a, b) => a.priority - b.priority)[0];
|
||||
}, [hwStatus]);
|
||||
|
||||
// 테마 선택 팝업을 닫기 위한 외부 클릭 감지
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest('.theme-selector')) {
|
||||
setShowThemeSelector(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (showThemeSelector) {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
};
|
||||
}, [showThemeSelector]);
|
||||
|
||||
// 테마별 배경색 스타일 (Windows Classic은 특별 처리)
|
||||
const getFooterBgClass = () => {
|
||||
switch (themeName) {
|
||||
case 'windows-classic':
|
||||
return 'bg-[#c0c0c0] border-t-2 border-white shadow-[inset_0_-1px_0_#808080]';
|
||||
case 'dark-modern':
|
||||
return 'bg-zinc-900/90 border-t border-zinc-700/50';
|
||||
case 'matrix':
|
||||
return 'bg-black/95 border-t border-green-500/30';
|
||||
case 'industrial':
|
||||
return 'bg-stone-900/95 border-t border-orange-500/30';
|
||||
case 'otaku':
|
||||
return 'bg-[#1a1025]/95 border-t border-pink-500/30 shadow-[0_-2px_20px_rgba(255,107,157,0.1)]';
|
||||
case 'pink-pink':
|
||||
return 'bg-[#ffe4e9]/95 border-t-2 border-pink-300 shadow-[0_-2px_10px_rgba(255,105,180,0.2)]';
|
||||
default:
|
||||
return 'bg-black/80 border-t border-neon-blue/30';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 하드웨어 오류 표시 배너 - 화면 중앙 상단에 크게 표시 */}
|
||||
@@ -94,8 +136,8 @@ export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget })
|
||||
</div>
|
||||
)}
|
||||
|
||||
<footer className="absolute bottom-0 left-0 right-0 h-10 bg-black/80 border-t border-neon-blue/30 flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono text-slate-400">
|
||||
<div className="flex gap-4">
|
||||
<footer className={`absolute bottom-0 left-0 right-0 h-10 ${getFooterBgClass()} flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono`}>
|
||||
<div className="flex gap-4 items-center">
|
||||
{/* H/W 상태 표시 (윈폼 HWState와 동일) */}
|
||||
{hwStatus.map((hw) => {
|
||||
const colors = getStatusColor(hw.status);
|
||||
@@ -112,7 +154,83 @@ export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget })
|
||||
<span className={`font-bold ${isHostConnected ? 'text-green-400' : 'text-red-400'}`}>HOST</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-8 text-neon-blue">
|
||||
|
||||
{/* 중앙: 테마 선택 버튼 */}
|
||||
<div className="relative theme-selector">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowThemeSelector(!showThemeSelector);
|
||||
}}
|
||||
className={`flex items-center gap-2 px-3 py-1 rounded transition-all ${
|
||||
themeName === 'windows-classic'
|
||||
? 'bg-[#c0c0c0] border-2 border-outset hover:bg-[#d0d0d0]'
|
||||
: 'hover:bg-white/10 text-slate-400 hover:text-white'
|
||||
}`}
|
||||
style={{ color: themeName !== 'windows-classic' ? theme.colors.primary : undefined }}
|
||||
title="Change Theme"
|
||||
>
|
||||
<Palette className="w-4 h-4" />
|
||||
<span className="text-[11px] font-bold">{theme.displayName}</span>
|
||||
<ChevronUp className={`w-3 h-3 transition-transform ${showThemeSelector ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{/* 테마 선택 팝업 */}
|
||||
{showThemeSelector && (
|
||||
<div className={`absolute bottom-full left-1/2 -translate-x-1/2 mb-2 min-w-[200px] rounded-lg shadow-2xl overflow-hidden animate-fadeIn ${
|
||||
themeName === 'windows-classic'
|
||||
? 'bg-[#c0c0c0] border-2 border-outset'
|
||||
: 'bg-slate-900/95 border border-slate-700 backdrop-blur'
|
||||
}`}>
|
||||
<div className={`px-3 py-2 text-xs font-bold ${
|
||||
themeName === 'windows-classic'
|
||||
? 'bg-gradient-to-r from-[#000080] to-[#1084d0] text-white'
|
||||
: 'border-b border-slate-700 text-slate-400'
|
||||
}`}>
|
||||
SELECT THEME
|
||||
</div>
|
||||
<div className="p-2 space-y-1">
|
||||
{availableThemes.map((name) => {
|
||||
const t = themes[name];
|
||||
const isActive = name === themeName;
|
||||
return (
|
||||
<button
|
||||
key={name}
|
||||
onClick={() => {
|
||||
setTheme(name);
|
||||
setShowThemeSelector(false);
|
||||
}}
|
||||
className={`w-full flex items-center gap-3 px-3 py-2 rounded text-left transition-all ${
|
||||
themeName === 'windows-classic'
|
||||
? `${isActive ? 'bg-[#000080] text-white' : 'hover:bg-[#d0d0d0] text-black'}`
|
||||
: `${isActive ? 'bg-white/10 text-white' : 'hover:bg-white/5 text-slate-400 hover:text-white'}`
|
||||
}`}
|
||||
>
|
||||
{/* 테마 미리보기 색상 */}
|
||||
<div className="flex gap-1">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: t.colors.primary }}
|
||||
></div>
|
||||
<div
|
||||
className="w-3 h-3 rounded-full"
|
||||
style={{ backgroundColor: t.colors.secondary }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="text-xs font-medium">{t.displayName}</span>
|
||||
{isActive && (
|
||||
<span className="ml-auto text-[10px]" style={{ color: t.colors.primary }}>●</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 우측: 로봇 위치 */}
|
||||
<div className="flex gap-8" style={{ color: theme.colors.primary }}>
|
||||
<span>POS.X: {robotTarget.x.toFixed(3)}</span>
|
||||
<span>POS.Y: {robotTarget.y.toFixed(3)}</span>
|
||||
<span>POS.Z: {robotTarget.z.toFixed(3)}</span>
|
||||
|
||||
@@ -2,6 +2,7 @@ import React from 'react';
|
||||
import { Header } from './Header';
|
||||
import { Footer } from './Footer';
|
||||
import { RobotTarget } from '../../types';
|
||||
import { useTheme } from '../../contexts/ThemeContext';
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
@@ -22,24 +23,108 @@ export const Layout: React.FC<LayoutProps> = ({
|
||||
activeTab,
|
||||
isLoading
|
||||
}) => {
|
||||
const { theme, themeName } = useTheme();
|
||||
|
||||
// Theme-specific background classes
|
||||
const getBackgroundClass = () => {
|
||||
switch (themeName) {
|
||||
case 'windows-classic':
|
||||
return 'bg-[#008080]'; // Classic teal desktop
|
||||
case 'dark-modern':
|
||||
return 'bg-zinc-950';
|
||||
case 'matrix':
|
||||
return 'bg-black';
|
||||
case 'industrial':
|
||||
return 'bg-stone-950';
|
||||
case 'otaku':
|
||||
return 'bg-[#1a1025]'; // Dark purple
|
||||
case 'pink-pink':
|
||||
return 'bg-[#fff0f5]'; // Lavender blush
|
||||
default:
|
||||
return 'bg-slate-950';
|
||||
}
|
||||
};
|
||||
|
||||
const getTextClass = () => {
|
||||
switch (themeName) {
|
||||
case 'windows-classic':
|
||||
return 'text-black';
|
||||
case 'pink-pink':
|
||||
return 'text-[#8b008b]'; // Dark magenta
|
||||
default:
|
||||
return 'text-slate-100';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-screen h-screen bg-slate-950 text-slate-100 overflow-hidden font-sans">
|
||||
{/* Animated Nebula Background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-[#050a15] to-[#0a0f20] animate-gradient bg-[length:400%_400%] z-0"></div>
|
||||
<div className="absolute inset-0 grid-bg opacity-30 z-0"></div>
|
||||
<div className="absolute inset-0 scanlines z-50 pointer-events-none"></div>
|
||||
<div className={`relative w-screen h-screen ${getBackgroundClass()} ${getTextClass()} overflow-hidden font-sans`}>
|
||||
{/* Animated Background - only for themes with effects */}
|
||||
{theme.effects.gridBg && (
|
||||
<>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-[#050a15] to-[#0a0f20] animate-gradient bg-[length:400%_400%] z-0"></div>
|
||||
<div className="absolute inset-0 grid-bg opacity-30 z-0"></div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Matrix theme special background */}
|
||||
{themeName === 'matrix' && (
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black via-[#001100] to-black z-0"></div>
|
||||
)}
|
||||
|
||||
{/* Industrial theme background */}
|
||||
{themeName === 'industrial' && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-stone-950 via-stone-900 to-stone-950 z-0"></div>
|
||||
)}
|
||||
|
||||
{/* Dark Modern gradient */}
|
||||
{themeName === 'dark-modern' && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 z-0"></div>
|
||||
)}
|
||||
|
||||
{/* Otaku theme background - 다크 퍼플 그라데이션 + 별 효과 */}
|
||||
{themeName === 'otaku' && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#1a1025] via-[#2d1f3d] to-[#1a1025] z-0">
|
||||
{/* 별빛 효과 */}
|
||||
<div className="absolute inset-0 opacity-30" style={{
|
||||
backgroundImage: `
|
||||
radial-gradient(2px 2px at 20px 30px, #ff6b9d, transparent),
|
||||
radial-gradient(2px 2px at 40px 70px, #c084fc, transparent),
|
||||
radial-gradient(1px 1px at 90px 40px, #fbbf24, transparent),
|
||||
radial-gradient(2px 2px at 130px 80px, #ff6b9d, transparent),
|
||||
radial-gradient(1px 1px at 160px 30px, #c084fc, transparent)
|
||||
`,
|
||||
backgroundSize: '200px 100px'
|
||||
}}></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pink Pink theme background - 파스텔 핑크 그라데이션 */}
|
||||
{themeName === 'pink-pink' && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#fff0f5] via-[#ffe4e9] to-[#ffccd5] z-0">
|
||||
{/* 하트 패턴 오버레이 */}
|
||||
<div className="absolute inset-0 opacity-20" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23ff69b4' d='M20 8c3-4 8-4 11 0s3 11-11 20C6 19 6 12 9 8s8-4 11 0z'/%3E%3C/svg%3E")`,
|
||||
backgroundSize: '80px 80px'
|
||||
}}></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scanlines - only for themes with the effect */}
|
||||
{theme.effects.scanlines && (
|
||||
<div className="absolute inset-0 scanlines z-50 pointer-events-none"></div>
|
||||
)}
|
||||
|
||||
{/* LOADING OVERLAY */}
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 z-[100] bg-black flex flex-col items-center justify-center gap-6">
|
||||
<div className="relative">
|
||||
<div className="w-24 h-24 border-4 border-neon-blue/30 rounded-full animate-spin"></div>
|
||||
<div className="absolute inset-0 border-t-4 border-neon-blue rounded-full animate-spin"></div>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-neon-blue text-2xl font-tech font-bold">●</div>
|
||||
<div className="w-24 h-24 border-4 border-current/30 rounded-full animate-spin" style={{ borderColor: `${theme.colors.primary}30` }}></div>
|
||||
<div className="absolute inset-0 border-t-4 rounded-full animate-spin" style={{ borderTopColor: theme.colors.primary }}></div>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl font-tech font-bold" style={{ color: theme.colors.primary }}>●</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-tech font-bold text-white tracking-widest mb-2">SYSTEM INITIALIZING</h2>
|
||||
<p className="font-mono text-neon-blue text-sm animate-pulse">ESTABLISHING CONNECTION...</p>
|
||||
<p className="font-mono text-sm animate-pulse" style={{ color: theme.colors.primary }}>ESTABLISHING CONNECTION...</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user