import React, { useEffect, useMemo, useRef, useState } from 'react'
import { TopBar } from './TopBar'
import { VNViewport } from './VNViewport'
import { DialogueBox } from './DialogueBox'
import { ChoiceMenu } from './ChoiceMenu'
import { BottomBar } from './BottomBar'
import { LoadingScreen } from './LoadingScreen'
import { ConfigModal } from './ConfigModal'
import { VNWebSocket } from '../services/ws'
import { ChatMessage, Choice } from '../types'
// Using direct PNG logo in VN header
const DEFAULT_CHOICES: Choice[] = [
{ id: 'greet', label: '"Hello?"' },
{ id: 'who', label: '"Who are you?"' },
{ id: 'silence', label: '(Stay silent)' },
]
export function VNApp() {
const [loading, setLoading] = useState(true)
const [loadingComplete, setLoadingComplete] = useState(false)
const [messages, setMessages] = useState<ChatMessage[]>([
{ id: 'm1', role: 'assistant', content: 'A warm CRT glow fills the room. A figure turns towards you...' },
])
const [choices, setChoices] = useState<Choice[]>(DEFAULT_CHOICES)
const [status, setStatus] = useState('OFFLINE')
const [name, setName] = useState('???')
const [bg, setBg] = useState('/__gaogao__56242cbde8f18ac64522e410bad04e68_waifu2x_art_noise2.png')
const [money, setMoney] = useState(15000)
const [currentTime, setCurrentTime] = useState(new Date())
const [location, setLocation] = useState('Tokyo')
const [weather, setWeather] = useState('Sunny 22°C')
const [configModalOpen, setConfigModalOpen] = useState(false)
const [skipIntro, setSkipIntro] = useState(() => {
const saved = localStorage.getItem('skipIntro')
return saved === 'true'
})
const ws = useMemo(() => new VNWebSocket('ws://localhost:8080/ws'), [])
const lastId = useRef(2)
// Check if intro should be skipped on initial load
useEffect(() => {
if (skipIntro) {
setLoading(false)
setLoadingComplete(true)
// Set skip intro to true after first time loading screen is shown
localStorage.setItem('skipIntro', 'true')
}
}, [])
// Handle skip intro toggle
const handleSkipIntroChange = (skip: boolean) => {
setSkipIntro(skip)
localStorage.setItem('skipIntro', skip.toString())
}
// Handle loading screen completion
const handleLoadingComplete = () => {
setLoading(false)
setLoadingComplete(true)
// Set skip intro to true after first time loading screen is shown
if (!skipIntro) {
setSkipIntro(true)
localStorage.setItem('skipIntro', 'true')
}
}
useEffect(() => {
ws.on('open', () => setStatus('ONLINE'))
ws.on('close', () => setStatus('OFFLINE'))
ws.on('message', (data) => {
// Expecting { type: 'assistant'|'choices'|'bg'|'name'|'system', ... }
if (data?.type === 'assistant') {
pushMessage('assistant', data.content || '')
} else if (data?.type === 'choices') {
setChoices((data.items || []).map((it: any, idx: number) => ({ id: it.id ?? String(idx), label: it.label ?? String(it) })))
} else if (data?.type === 'bg') {
setBg(data.src || '/bg.jpg')
} else if (data?.type === 'name') {
setName(data.value || name)
} else if (data?.type === 'system') {
pushMessage('system', data.content || '')
}
})
ws.connect()
return () => ws.close()
}, [ws])
// Update clock every second
useEffect(() => {
const timer = setInterval(() => {
setCurrentTime(new Date())
}, 1000)
return () => clearInterval(timer)
}, [])
function pushMessage(role: 'user' | 'assistant' | 'system', content: string) {
lastId.current += 1
setMessages((prev) => [...prev, { id: 'm' + lastId.current, role, content }])
}
function handleChoice(id: string) {
const choice = choices.find(c => c.id === id)
const content = choice?.label || id
pushMessage('user', content)
ws.send({ type: 'user_choice', id, label: content })
setChoices([])
setTimeout(() => {
pushMessage('assistant', `The figure nods: "${content}"...`)
setChoices(DEFAULT_CHOICES)
setName('Guide')
}, 600)
}
const lastAssistant = messages.slice().reverse().find(m => m.role !== 'user')
return (
<div>
{!loadingComplete && (
<LoadingScreen
onComplete={handleLoadingComplete}
/>
)}
<div className={`main-interface ${loadingComplete ? 'visible' : 'hidden'}`}>
<div className="screen" role="application">
<div className="left-pillar">
<div className="pillar-image">
Character A
</div>
<div className="pillar-bottom-section">
<div className="pillar-buttons">
<button className="pillar-btn" onClick={() => {}}>SAVE</button>
<button className="pillar-btn" onClick={() => {}}>LOAD</button>
<button className="pillar-btn" onClick={() => setConfigModalOpen(true)}>CONFIG</button>
<button className="pillar-btn" onClick={() => {}}>EXIT</button>
</div>
</div>
</div>
<div className="screen-content">
<div className="screen-header header-footer-border">
<div className="brand">
<img
src="/logo/crane-logo-transparent.png"
alt="Soryu"
height={24}
className="brand-mark"
onError={(e) => { const img = (e.currentTarget as HTMLImageElement); img.onerror = null; img.src = '/logo/crane-logo.png'; }}
/>
</div>
</div>
<VNViewport bgSrc={bg}>
<div className="ui-layer">
<div className="weather-display">
{location} - {weather}
</div>
</div>
</VNViewport>
<DialogueBox name={name} text={lastAssistant?.content || ''} />
<div className="text-input-area">
<input
type="text"
className="text-input"
placeholder="Type your response..."
onKeyPress={(e) => {
if (e.key === 'Enter') {
const target = e.target as HTMLInputElement;
if (target.value.trim()) {
pushMessage('user', target.value);
target.value = '';
}
}
}}
/>
</div>
<div className="screen-footer header-footer-border">
<div className="desktop-time">{new Date().toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric' })} {new Date().toLocaleTimeString('ja-JP', { hour12: false })}</div>
<div className="mobile-time-money">
<div className="mobile-clock">
{currentTime.toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric' })} {currentTime.toLocaleTimeString('ja-JP', { hour12: false })}
</div>
<div className="mobile-money">
{money.toLocaleString()}
</div>
</div>
<div className="mobile-buttons">
<button className="mobile-btn" onClick={() => {}}>SAVE</button>
<button className="mobile-btn" onClick={() => {}}>LOAD</button>
<button className="mobile-btn" onClick={() => setConfigModalOpen(true)}>CONFIG</button>
<button className="mobile-btn" onClick={() => {}}>EXIT</button>
</div>
</div>
<BottomBar
onSkip={() => {}}
onAuto={() => {}}
onLog={() => {}}
location={location}
/>
</div>
<div className="right-pillar">
<div className="pillar-image">
Character B
</div>
<div className="pillar-bottom-section">
<div className="pillar-display digital-clock">
{currentTime.toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric' })}
<br />
{currentTime.toLocaleTimeString('ja-JP', { hour12: false })}
</div>
<div className="pillar-display yen-counter">
{money.toLocaleString()}
</div>
</div>
</div>
</div>
</div>
<ConfigModal
isOpen={configModalOpen}
onClose={() => setConfigModalOpen(false)}
skipIntro={skipIntro}
onSkipIntroChange={handleSkipIntroChange}
/>
</div>
)
}
