From 3e7b2beca1136a42700a7e1aebfe4c0fb2861a00 Mon Sep 17 00:00:00 2001 From: soryu Date: Sat, 15 Nov 2025 18:00:09 +0000 Subject: Initial commit --- frontend/src/App.tsx | 19 + frontend/src/components/BottomBar.tsx | 19 + frontend/src/components/ChoiceMenu.tsx | 20 + frontend/src/components/CityscapeBackground.tsx | 310 ++ frontend/src/components/ConfigModal.tsx | 44 + frontend/src/components/DialogueBox.tsx | 15 + frontend/src/components/HeartLogo.tsx | 270 ++ frontend/src/components/LandingPage.tsx | 219 ++ frontend/src/components/LoadingScreen.tsx | 129 + frontend/src/components/OrigamiDragonLogo.tsx | 180 + frontend/src/components/TopBar.tsx | 24 + frontend/src/components/VNApp.tsx | 228 ++ frontend/src/components/VNInterface.tsx | 208 ++ frontend/src/components/VNViewport.tsx | 22 + frontend/src/main.tsx | 10 + frontend/src/services/ws.ts | 69 + frontend/src/stores/index.ts | 94 + frontend/src/styles/pc98.css | 4353 +++++++++++++++++++++++ frontend/src/types.ts | 11 + 19 files changed, 6244 insertions(+) create mode 100644 frontend/src/App.tsx create mode 100644 frontend/src/components/BottomBar.tsx create mode 100644 frontend/src/components/ChoiceMenu.tsx create mode 100644 frontend/src/components/CityscapeBackground.tsx create mode 100644 frontend/src/components/ConfigModal.tsx create mode 100644 frontend/src/components/DialogueBox.tsx create mode 100644 frontend/src/components/HeartLogo.tsx create mode 100644 frontend/src/components/LandingPage.tsx create mode 100644 frontend/src/components/LoadingScreen.tsx create mode 100644 frontend/src/components/OrigamiDragonLogo.tsx create mode 100644 frontend/src/components/TopBar.tsx create mode 100644 frontend/src/components/VNApp.tsx create mode 100644 frontend/src/components/VNInterface.tsx create mode 100644 frontend/src/components/VNViewport.tsx create mode 100644 frontend/src/main.tsx create mode 100644 frontend/src/services/ws.ts create mode 100644 frontend/src/stores/index.ts create mode 100644 frontend/src/styles/pc98.css create mode 100644 frontend/src/types.ts (limited to 'frontend/src') diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx new file mode 100644 index 0000000..0a0e008 --- /dev/null +++ b/frontend/src/App.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import { useStore } from '@nanostores/react' +import { LandingPage } from './components/LandingPage' +import { VNInterface } from './components/VNInterface' +import { isLoggedInStore, login, logout } from './stores' + +export default function App() { + const isLoggedIn = useStore(isLoggedInStore) + + return ( + <> + {isLoggedIn ? ( + + ) : ( + + )} + + ) +} diff --git a/frontend/src/components/BottomBar.tsx b/frontend/src/components/BottomBar.tsx new file mode 100644 index 0000000..b9f19ed --- /dev/null +++ b/frontend/src/components/BottomBar.tsx @@ -0,0 +1,19 @@ +import React from 'react' + +type Props = { + onSkip?: () => void + onAuto?: () => void + onLog?: () => void + location?: string +} + +export const BottomBar: React.FC = ({ onSkip, onAuto, onLog, location = 'Tokyo' }) => { + return ( +
+ + + +
+
+ ) +} diff --git a/frontend/src/components/ChoiceMenu.tsx b/frontend/src/components/ChoiceMenu.tsx new file mode 100644 index 0000000..0de86f6 --- /dev/null +++ b/frontend/src/components/ChoiceMenu.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import { Choice } from '../types' + +type Props = { + choices: Choice[] + onSelect: (id: string) => void +} + +export const ChoiceMenu: React.FC = ({ choices, onSelect }) => { + if (!choices.length) return null + return ( +
+ {choices.map((c) => ( + + ))} +
+ ) +} diff --git a/frontend/src/components/CityscapeBackground.tsx b/frontend/src/components/CityscapeBackground.tsx new file mode 100644 index 0000000..82a679d --- /dev/null +++ b/frontend/src/components/CityscapeBackground.tsx @@ -0,0 +1,310 @@ +import React, { useRef, useEffect } from 'react' +import * as THREE from 'three' + +interface CityscapeBackgroundProps { + className?: string +} + +export function CityscapeBackground({ className }: CityscapeBackgroundProps) { + const canvasRef = useRef(null) + const sceneRef = useRef() + const rendererRef = useRef() + const cameraRef = useRef() + const animationIdRef = useRef() + const speedLinesRef = useRef() + const mouseRef = useRef(new THREE.Vector2()) + const startTimeRef = useRef(Date.now()) + + useEffect(() => { + if (!canvasRef.current) { + console.log('CityscapeBackground: Canvas ref not available') + return + } + + console.log('FuturistBackground: Initializing 3D futurist scene') + + // Scene setup with futurist art movement atmosphere + const scene = new THREE.Scene() + scene.background = new THREE.Color(0x000000) // Black background + scene.fog = new THREE.Fog(0x000000, 30, 120) // Black fog for depth + + // Camera setup for isometric view + const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 200) + camera.position.set(30, 25, 30) + camera.lookAt(0, 0, 0) + + // Renderer setup + const renderer = new THREE.WebGLRenderer({ + canvas: canvasRef.current, + antialias: false, // Disable for better performance + alpha: false // Disable alpha for opaque background + }) + renderer.setSize(window.innerWidth, window.innerHeight) + renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5)) // Limit pixel ratio for performance + + // Store references + sceneRef.current = scene + rendererRef.current = renderer + cameraRef.current = camera + + // Futurist art movement lighting - dramatic contrasts inspired by paintings + const ambientLight = new THREE.AmbientLight(0x1a1a1a, 0.4) // Warm grey ambient + scene.add(ambientLight) + + // Bold primary light - warm like industrial sunlight + const primaryLight = new THREE.DirectionalLight(0xffaa33, 1.8) // Golden orange + primaryLight.position.set(-25, 35, 20) + scene.add(primaryLight) + + // Dynamic red light for energy and motion + const dynamicLight = new THREE.DirectionalLight(0xdd2222, 1.2) // Bold red + dynamicLight.position.set(20, 10, -15) + scene.add(dynamicLight) + + // Contrasting blue for depth and drama + const contrastLight = new THREE.PointLight(0x2244bb, 0.8, 50) // Deep blue + contrastLight.position.set(-30, 5, 0) + scene.add(contrastLight) + + // Yellow accent for vibrant highlights + const accentLight = new THREE.PointLight(0xdddd22, 0.7, 40) // Yellow + accentLight.position.set(25, 20, -5) + scene.add(accentLight) + + // Green industrial light + const industrialLight = new THREE.PointLight(0x22aa22, 0.6, 45) // Industrial green + industrialLight.position.set(0, -5, 30) + scene.add(industrialLight) + + // Create speed lines + createSpeedLines() + + console.log('FuturistBackground: Dynamic futurist art created, starting animation') + + // Reset start time + startTimeRef.current = Date.now() + + // Animation loop + const animate = () => { + animationIdRef.current = requestAnimationFrame(animate) + + const time = Date.now() * 0.001 // Convert to seconds for smoother animation + + // Animate speed lines + animateSpeedLines(time) + + // Apply interactive effects + applyFuturistInteractions() + + // Dramatic camera movement inspired by futurist dynamism + const cameraSpeed = time * 0.2 + camera.position.x = 20 + Math.sin(cameraSpeed * 1.3) * 12 + Math.cos(cameraSpeed * 0.7) * 6 + camera.position.y = 15 + Math.cos(cameraSpeed * 0.9) * 8 + Math.sin(cameraSpeed * 1.1) * 4 + camera.position.z = 25 + Math.sin(cameraSpeed * 0.6) * 15 + Math.cos(cameraSpeed * 1.4) * 8 + + // Dynamic look-at point for more dramatic perspective shifts + const lookAtTarget = new THREE.Vector3( + Math.sin(cameraSpeed * 0.8) * 5, + Math.cos(cameraSpeed * 0.5) * 3, + Math.sin(cameraSpeed * 1.2) * 8 + ) + camera.lookAt(lookAtTarget) + + renderer.render(scene, camera) + } + + animate() + + // Mouse tracking for interactive effects + const handleMouseMove = (event: MouseEvent) => { + // Convert screen coordinates to normalized device coordinates (-1 to +1) + mouseRef.current.set( + (event.clientX / window.innerWidth) * 2 - 1, + -(event.clientY / window.innerHeight) * 2 + 1 + ) + } + + // Handle window resize + const handleResize = () => { + if (camera && renderer) { + camera.aspect = window.innerWidth / window.innerHeight + camera.updateProjectionMatrix() + renderer.setSize(window.innerWidth, window.innerHeight) + } + } + + window.addEventListener('mousemove', handleMouseMove) + window.addEventListener('resize', handleResize) + + // Cleanup + return () => { + if (animationIdRef.current) { + cancelAnimationFrame(animationIdRef.current) + } + window.removeEventListener('mousemove', handleMouseMove) + window.removeEventListener('resize', handleResize) + + // Dispose of Three.js objects + scene.clear() + renderer.dispose() + } + }, []) + + const applyFuturistInteractions = () => { + const camera = cameraRef.current! + const raycaster = new THREE.Raycaster() + + // Convert mouse coordinates to world position + raycaster.setFromCamera(mouseRef.current, camera) + + // Interactive speed line distortion + if (speedLinesRef.current) { + const positions = speedLinesRef.current.geometry.attributes.position.array as Float32Array + + for (let i = 0; i < positions.length; i += 6) { // Step by 6 for line pairs + const linePos = new THREE.Vector3(positions[i], positions[i + 1], positions[i + 2]) + const mouseWorldPos = new THREE.Vector3() + raycaster.ray.at(linePos.z, mouseWorldPos) + + const distance = linePos.distanceTo(mouseWorldPos) + const distortRadius = 15 + + if (distance < distortRadius) { + const distortStrength = (distortRadius - distance) / distortRadius + + // Create dramatic wave distortion around mouse + const waveX = Math.sin(Date.now() * 0.02 + i) * distortStrength * 2.0 + const waveY = Math.cos(Date.now() * 0.025 + i) * distortStrength * 1.5 + + positions[i] += waveX + positions[i + 1] += waveY + positions[i + 3] += waveX * 0.8 // End point follows with slight lag + positions[i + 4] += waveY * 0.8 + } + } + + speedLinesRef.current.geometry.attributes.position.needsUpdate = true + } + } + + + const createSpeedLines = () => { + const scene = sceneRef.current! + + // Create sharp, dramatic speed lines + const motionVertices = [] + const motionColors = [] + + // High-contrast speed colors + const speedColors = [ + { r: 1.0, g: 1.0, b: 1.0 }, // Brilliant white + { r: 1.0, g: 0.1, b: 0.1 }, // Sharp red + { r: 1.0, g: 0.8, b: 0.0 }, // Electric yellow + { r: 0.0, g: 1.0, b: 1.0 }, // Cyan + { r: 1.0, g: 0.0, b: 1.0 }, // Magenta + ] + + // Create 300 sharp speed lines for intense motion + for (let i = 0; i < 300; i++) { + // Start point - spread across space + const startX = (Math.random() - 0.5) * 100 + const startY = (Math.random() - 0.5) * 40 + const startZ = Math.random() * -200 + + // End point - long streaks suggesting extreme speed + const endX = startX + (Math.random() - 0.5) * 20 + const endY = startY + (Math.random() - 0.5) * 8 + const endZ = startZ + 20 + Math.random() * 40 // Longer streaks + + motionVertices.push(startX, startY, startZ) + motionVertices.push(endX, endY, endZ) + + // High-contrast colors for sharp appearance + const colorIndex = Math.floor(Math.random() * speedColors.length) + const color = speedColors[colorIndex] + + motionColors.push(color.r, color.g, color.b) + motionColors.push(color.r, color.g, color.b) + } + + const motionGeometry = new THREE.BufferGeometry() + motionGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(motionVertices), 3)) + motionGeometry.setAttribute('color', new THREE.BufferAttribute(new Float32Array(motionColors), 3)) + + const motionMaterial = new THREE.LineBasicMaterial({ + vertexColors: true, + transparent: true, + opacity: 0.9, + linewidth: 2 + }) + + const speedLines = new THREE.LineSegments(motionGeometry, motionMaterial) + speedLinesRef.current = speedLines + scene.add(speedLines) + } + + + + + + + const animateSpeedLines = (time: number) => { + if (!speedLinesRef.current) return + + const positions = speedLinesRef.current.geometry.attributes.position.array as Float32Array + + for (let i = 0; i < positions.length; i += 6) { // Step by 6 since we have line pairs + // Extreme speed effect - lines blazing toward camera + positions[i + 2] += 6.0 + Math.sin(time * 2 + i) * 3.0 // High variable speed + positions[i + 5] += 6.0 + Math.sin(time * 2 + i) * 3.0 // End point matches + + // Intense lateral movement for speed blur + const lateralMotion = Math.sin(time * 1.5 + i * 0.15) * 0.8 + positions[i] += lateralMotion + positions[i + 3] += lateralMotion + + // Sharp vertical oscillation for dynamic energy + const verticalMotion = Math.cos(time * 2.2 + i * 0.12) * 0.6 + positions[i + 1] += verticalMotion + positions[i + 4] += verticalMotion + + // Reset lines that have blazed past camera + if (positions[i + 2] > 100) { + positions[i + 2] = -250 - Math.random() * 100 + positions[i + 5] = positions[i + 2] + 20 + Math.random() * 40 + + positions[i] = (Math.random() - 0.5) * 100 + positions[i + 1] = (Math.random() - 0.5) * 40 + positions[i + 3] = positions[i] + (Math.random() - 0.5) * 20 + positions[i + 4] = positions[i + 1] + (Math.random() - 0.5) * 8 + } + } + + speedLinesRef.current.geometry.attributes.position.needsUpdate = true + + // Rapid rotation for intense motion blur + speedLinesRef.current.rotation.x += 0.008 + speedLinesRef.current.rotation.y += 0.012 + speedLinesRef.current.rotation.z += 0.025 + } + + + + return ( + + ) +} \ No newline at end of file diff --git a/frontend/src/components/ConfigModal.tsx b/frontend/src/components/ConfigModal.tsx new file mode 100644 index 0000000..e7b1f9f --- /dev/null +++ b/frontend/src/components/ConfigModal.tsx @@ -0,0 +1,44 @@ +import React from 'react' + +type Props = { + isOpen: boolean + onClose: () => void + skipIntro: boolean + onSkipIntroChange: (skip: boolean) => void +} + +export const ConfigModal: React.FC = ({ isOpen, onClose, skipIntro, onSkipIntroChange }) => { + if (!isOpen) return null + + return ( +
+
e.stopPropagation()}> +
+

Configuration

+ +
+ +
+
+ +
+ Skip the loading screen animation on startup +
+
+
+ +
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/frontend/src/components/DialogueBox.tsx b/frontend/src/components/DialogueBox.tsx new file mode 100644 index 0000000..ad5975a --- /dev/null +++ b/frontend/src/components/DialogueBox.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +type Props = { + name?: string + text: string +} + +export const DialogueBox: React.FC = ({ name = 'You', text }) => { + return ( +
+
{name}
+
{text}
+
+ ) +} diff --git a/frontend/src/components/HeartLogo.tsx b/frontend/src/components/HeartLogo.tsx new file mode 100644 index 0000000..2d407f7 --- /dev/null +++ b/frontend/src/components/HeartLogo.tsx @@ -0,0 +1,270 @@ +import React, { useState, useEffect } from 'react' + +interface HeartLogoProps { + size?: 'small' | 'medium' | 'large' | 'header' | 'header-no-rays' + className?: string + onClick?: () => void +} + +export function HeartLogo({ size = 'small', className = '', onClick }: HeartLogoProps) { + const [animationOffset, setAnimationOffset] = useState(0) + const [isAnimating, setIsAnimating] = useState(false) + + // Click handler to toggle animation + const handleClick = () => { + setIsAnimating(!isAnimating) + if (onClick) { + onClick() + } + } + + // Animation for header beams + useEffect(() => { + if (size !== 'header-no-rays' || !isAnimating) return + + let animationId: number + let startTime = Date.now() + + const animate = () => { + const elapsed = Date.now() - startTime + const rotationSpeed = 0.02 // Slow rotation speed + const offset = (elapsed * rotationSpeed) % 360 + setAnimationOffset(offset) + animationId = requestAnimationFrame(animate) + } + + animationId = requestAnimationFrame(animate) + + return () => { + if (animationId) { + cancelAnimationFrame(animationId) + } + } + }, [size, isAnimating]) + if (size === 'header') { + // Header version with rays filling the entire header rectangle + return ( +
+
+
+
+ + {/* Header rays matching loading screen exactly */} + + {[...Array(16)].map((_, i) => { + const angle = (i * 22.5); + const rayWidth = 2; // Much thinner rays + + // Create triangular ray path - thin rays extending to header edges + const startAngle = angle - rayWidth; + const endAngle = angle + rayWidth; + + const innerRadius = 0; // Start from center (heart center) + const outerRadius = 200; // Extend far beyond to reach all header edges + + const x1 = Math.cos(startAngle * Math.PI / 180) * innerRadius; + const y1 = Math.sin(startAngle * Math.PI / 180) * innerRadius; + const x2 = Math.cos(endAngle * Math.PI / 180) * innerRadius; + const y2 = Math.sin(endAngle * Math.PI / 180) * innerRadius; + const x3 = Math.cos(startAngle * Math.PI / 180) * outerRadius; + const y3 = Math.sin(startAngle * Math.PI / 180) * outerRadius; + const x4 = Math.cos(endAngle * Math.PI / 180) * outerRadius; + const y4 = Math.sin(endAngle * Math.PI / 180) * outerRadius; + + return ( + + ); + })} + + +
+
+ + + +
+
+
+
+ ) + } + + if (size === 'header-no-rays') { + // Header version with small red beams - compact sunlight effect + return ( +
+
+
+ + {/* Red beams extending across entire header rectangle - optimized for wide screens */} + + {[...Array(32)].map((_, i) => { + const angle = (i * 11.25) + animationOffset; // 32 rays, 11.25 degrees apart, animated + const rayWidth = 2; // Much narrower rays to show background between them + + // Create triangular ray path + const startAngle = angle - rayWidth; + const endAngle = angle + rayWidth; + + const innerRadius = 0; // Start from heart center + + // Calculate intersection with rectangle bounds for wide header + const getIntersectionWithRect = (angleInDegrees: number) => { + const rad = angleInDegrees * Math.PI / 180; + const dx = Math.cos(rad); + const dy = Math.sin(rad); + + // Header rectangle bounds (wide format ~3:1 ratio) + const rectBoundsX = 200; // Full width + const rectBoundsY = 67; // Height to match header proportions + + // Calculate intersection with each edge + let t = Infinity; + + // Right edge (x = rectBoundsX) + if (dx > 0) { + t = Math.min(t, rectBoundsX / dx); + } + // Left edge (x = -rectBoundsX) + if (dx < 0) { + t = Math.min(t, -rectBoundsX / dx); + } + // Top edge (y = -rectBoundsY) + if (dy < 0) { + t = Math.min(t, -rectBoundsY / dy); + } + // Bottom edge (y = rectBoundsY) + if (dy > 0) { + t = Math.min(t, rectBoundsY / dy); + } + + return { x: dx * t, y: dy * t }; + }; + + const x1 = Math.cos(startAngle * Math.PI / 180) * innerRadius; + const y1 = Math.sin(startAngle * Math.PI / 180) * innerRadius; + const x2 = Math.cos(endAngle * Math.PI / 180) * innerRadius; + const y2 = Math.sin(endAngle * Math.PI / 180) * innerRadius; + + const edge1 = getIntersectionWithRect(startAngle); + const edge2 = getIntersectionWithRect(endAngle); + + return ( + + ); + })} + + +
+
+ + + +
+
+
+ ) + } + + // Original square version for other sizes + return ( +
+
+
+
+ + {/* Rising Sun flag style rays - triangular rays extending to rectangle edges */} + + {[...Array(16)].map((_, i) => { + const angle = (i * 22.5); + const rayWidth = 11.25; // Half the angle between rays for triangular shape + + // Create triangular ray path + const startAngle = angle - rayWidth; + const endAngle = angle + rayWidth; + + const innerRadius = 0; // Start from center (heart center) + + // Calculate intersection with rectangle bounds + // Rectangle aspect ratio 120:80 = 3:2, so use different bounds for x and y + const getIntersectionWithRect = (angleInDegrees: number) => { + const rad = angleInDegrees * Math.PI / 180; + const dx = Math.cos(rad); + const dy = Math.sin(rad); + + // Rectangle bounds matching the 120x80 aspect ratio (3:2) + const rectBoundsX = 100; // Full width + const rectBoundsY = 67; // 2/3 of width to maintain 3:2 ratio + + // Calculate intersection with each edge + let t = Infinity; + + // Right edge (x = rectBoundsX) + if (dx > 0) { + t = Math.min(t, rectBoundsX / dx); + } + // Left edge (x = -rectBoundsX) + if (dx < 0) { + t = Math.min(t, -rectBoundsX / dx); + } + // Top edge (y = -rectBoundsY) + if (dy < 0) { + t = Math.min(t, -rectBoundsY / dy); + } + // Bottom edge (y = rectBoundsY) + if (dy > 0) { + t = Math.min(t, rectBoundsY / dy); + } + + return { x: dx * t, y: dy * t }; + }; + + const x1 = Math.cos(startAngle * Math.PI / 180) * innerRadius; + const y1 = Math.sin(startAngle * Math.PI / 180) * innerRadius; + const x2 = Math.cos(endAngle * Math.PI / 180) * innerRadius; + const y2 = Math.sin(endAngle * Math.PI / 180) * innerRadius; + + const edge1 = getIntersectionWithRect(startAngle); + const edge2 = getIntersectionWithRect(endAngle); + + return ( + + ); + })} + + +
+
+ + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx new file mode 100644 index 0000000..f5dc55c --- /dev/null +++ b/frontend/src/components/LandingPage.tsx @@ -0,0 +1,219 @@ +import React, { useState, useEffect } from 'react' +import { LoadingScreen } from './LoadingScreen' +import { HeartLogo } from './HeartLogo' +// Using direct PNG logo on landing header + +interface LandingPageProps { + onLogin: () => void +} + +export function LandingPage({ onLogin }: LandingPageProps) { + const [loading, setLoading] = useState(false) + const [showLanding, setShowLanding] = useState(false) + const [isStandby, setIsStandby] = useState(true) // false = LIVE, true = STDBY + const [asciiArt, setAsciiArt] = useState('') + const [isGlitching, setIsGlitching] = useState(false) + // Note: Removed VN preview and ASCII features to focus on an Art Deco/Nouveau landing. + + // Auto-fade in landing page content after component mounts + useEffect(() => { + const timer = setTimeout(() => { + setShowLanding(true) + }, 500) // Delay before fading in content + + return () => clearTimeout(timer) + }, []) + + // Removed VN dialogue preview / typing effect. + + // Load ASCII art for overlay in hero (right/bottom) + useEffect(() => { + fetch('/ascii/ascii1.txt') + .then((res) => res.text()) + .then((txt) => setAsciiArt(txt.replace(/\n+$/, ''))) + .catch(() => setAsciiArt('')) + }, []) + + // Occasionally trigger a brief glitch on the word "futurist" + useEffect(() => { + let armTimer: number | undefined + let activeTimer: number | undefined + let cancelled = false + + const arm = () => { + // Random delay between glitches: 0.8s–2s (slightly punchier) + const delay = 800 + Math.random() * 1200 + armTimer = window.setTimeout(() => { + setIsGlitching(true) + // Glitch duration: 150ms–350ms (snappier) + const dur = 150 + Math.random() * 200 + activeTimer = window.setTimeout(() => { + setIsGlitching(false) + if (!cancelled) arm() + }, dur) + }, delay) + } + + arm() + + return () => { + cancelled = true + if (armTimer) clearTimeout(armTimer) + if (activeTimer) clearTimeout(activeTimer) + } + }, []) + + + // Handle loading screen completion + const handleLoadingComplete = () => { + // Call the original onLogin immediately to transition to VN page + // Don't reset loading states as we're leaving the landing page + onLogin() + } + + // Handle login button click + const handleLogin = () => { + setLoading(true) + } + + // Removed ASCII art effects and rendering. + + return ( +
+ {loading && ( + + )} + + {/* Floating Header Bar - Hidden during loading */} + {!loading && ( +
+
+
+ Soryu { const img = (e.currentTarget as HTMLImageElement); img.onerror = null; img.src = '/logo/crane-logo.png'; }} + /> +
+
+ +
+ +
+
+ System: + setIsStandby(!isStandby)} + title="Click to toggle between LIVE and STANDBY" + > + + {isStandby ? 'STDBY' : 'LIVE'} + +
+
+ Version: + v1.0.0 +
+
+
+
+ )} + +
+ {/* Retro-futuristic page background */} + + {/* Taisho Magazine Cover Backdrop */} +
+ + + {/* Cover Content Grid */} +
+ {/* Vertical Masthead (magazine-style) */} +
+
+ そりゅう + SORYU +
+
かはいい Vol.01
+
+ + {/* Central Hero - full-frame retro-futuristic */} +
+
+
+ {/* Retro-futuristic racing hero content */} + +
+
+
+ + {/* CTA */} +
+ +
+ {/* Visitor Counter */} +
+ visit counter +
+
+
+
+
+ ) +} diff --git a/frontend/src/components/LoadingScreen.tsx b/frontend/src/components/LoadingScreen.tsx new file mode 100644 index 0000000..5f33d00 --- /dev/null +++ b/frontend/src/components/LoadingScreen.tsx @@ -0,0 +1,129 @@ +import React, { useEffect, useState, useRef } from 'react' + +type Props = { + onComplete: () => void +} + +export const LoadingScreen: React.FC = ({ onComplete }) => { + const [fadeOut, setFadeOut] = useState(false) + const [mounted, setMounted] = useState(true) + const [subtitle, setSubtitle] = useState('') + const [animatedText, setAnimatedText] = useState('') + const subtitleLoaded = useRef(false) + + useEffect(() => { + console.log('Loading screen mounted - starting timer...') + + // Set fixed subtitle and animate it + if (!subtitleLoaded.current) { + subtitleLoaded.current = true + + const fixedSubtitle = 'Whisper of the Heart' + setSubtitle(fixedSubtitle) + + // Animate text character by character + let currentIndex = 0 + const animateText = () => { + if (currentIndex <= fixedSubtitle.length) { + setAnimatedText(fixedSubtitle.slice(0, currentIndex)) + currentIndex++ + setTimeout(animateText, 50) // 50ms delay between characters + } + } + + // Start animation after heart appears (1000ms = 0.2s heart delay + 0.8s heart animation) + setTimeout(animateText, 1000) + } + + // Start fade after 4 seconds (longer to show ray spinning) + const fadeTimer = setTimeout(() => { + console.log('4 seconds passed - Starting fade out...') + setFadeOut(true) + }, 4000) + + // Complete after fade finishes (4s show + 1s fade = 5s total) + const completeTimer = setTimeout(() => { + console.log('5 seconds passed - Loading screen completing...') + setMounted(false) + onComplete() + }, 5000) + + return () => { + console.log('Cleaning up timers...') + clearTimeout(fadeTimer) + clearTimeout(completeTimer) + } + }, []) // Empty dependency array - run once on mount + + const handleClick = () => { + console.log('Loading screen clicked, completing early...') + setFadeOut(true) + setTimeout(() => { + setMounted(false) + onComplete() + }, 1000) + } + + console.log('LoadingScreen render - fadeOut:', fadeOut, 'mounted:', mounted) + + if (!mounted) return null + + return ( +
+
+
+
+ + {/* Rising Sun flag style rays - triangular rays extending to edges */} + + {[...Array(16)].map((_, i) => { + const angle = (i * 22.5); + const nextAngle = ((i + 1) * 22.5); + const rayWidth = 11.25; // Half the angle between rays for triangular shape + + // Create triangular ray path + const startAngle = angle - rayWidth; + const endAngle = angle + rayWidth; + + const innerRadius = 0; // Start from center (heart center) + const outerRadius = 70; // Extend to screen edge + + const x1 = Math.cos(startAngle * Math.PI / 180) * innerRadius; + const y1 = Math.sin(startAngle * Math.PI / 180) * innerRadius; + const x2 = Math.cos(endAngle * Math.PI / 180) * innerRadius; + const y2 = Math.sin(endAngle * Math.PI / 180) * innerRadius; + const x3 = Math.cos(startAngle * Math.PI / 180) * outerRadius; + const y3 = Math.sin(startAngle * Math.PI / 180) * outerRadius; + const x4 = Math.cos(endAngle * Math.PI / 180) * outerRadius; + const y4 = Math.sin(endAngle * Math.PI / 180) * outerRadius; + + return ( + + ); + })} + + +
+
+ + + +
+
soryu
+
{animatedText}
+
+ ... +
+
+
+
+ ) +} \ No newline at end of file diff --git a/frontend/src/components/OrigamiDragonLogo.tsx b/frontend/src/components/OrigamiDragonLogo.tsx new file mode 100644 index 0000000..6a7a5fb --- /dev/null +++ b/frontend/src/components/OrigamiDragonLogo.tsx @@ -0,0 +1,180 @@ +import React from 'react' + +type Variant = 'mark' | 'ribbonS' | 'badge' | 'crane' | 'craneOutline' + +type Props = { + variant?: Variant + height?: number + color?: string + className?: string + title?: string + strokeWidth?: number +} + +/** + * Origami-style dragon logo for small header placement. + * - Uses currentColor by default so it adapts to surrounding text color. + * - Keep height around 20–24px in compact headers. + */ +export const OrigamiDragonLogo: React.FC = ({ + variant = 'crane', + height = 20, + color = 'currentColor', + className = '', + title = 'Soryu logo', + strokeWidth = 12, +}) => { + if (variant === 'craneOutline') { + // Outline rendition inspired by provided licensed crane icon + return ( + + {title} + + {/* Left tail → left wing base → body pivot */} + + {/* Left wing upstroke */} + + {/* Left wing inner crease to pivot */} + + {/* Body lower crease */} + + {/* Center mast (rear triangle) */} + + {/* Right wing outer edge */} + + {/* Right wing inner crease */} + + {/* Neck and head */} + + {/* Neck inner crease */} + + + + ) + } + if (variant === 'crane') { + // Origami crane silhouette with a dragon head + return ( + + {title} + {/* Left/up wing */} + + {/* Right/down wing */} + + {/* Body (diamond) */} + + {/* Tail */} + + {/* Neck */} + + {/* Dragon head (top plane) */} + + {/* Dragon jaw plane */} + + {/* Small horn */} + + + ) + } + if (variant === 'mark') { + // Angular origami dragon head/neck, faceted into simple planes + return ( + + {title} + {/* Upper head */} + + {/* Snout / jaw plane */} + + {/* Neck planes */} + + + {/* Small ear/horn suggestion */} + + + ) + } + + if (variant === 'ribbonS') { + // Folded ribbon forming an angular "S" silhouette + return ( + + {title} + {/* Top fold */} + + {/* Middle fold (turning back) */} + + {/* Lower fold */} + + + ) + } + + // badge + return ( + + {title} + {/* Hex container */} + + {/* Mini mark inside */} + + + + + + + ) +} + +export default OrigamiDragonLogo diff --git a/frontend/src/components/TopBar.tsx b/frontend/src/components/TopBar.tsx new file mode 100644 index 0000000..89d7206 --- /dev/null +++ b/frontend/src/components/TopBar.tsx @@ -0,0 +1,24 @@ +import React from 'react' + +type Props = { + title?: string + status?: string +} + +export const TopBar: React.FC = ({ title = 'PC-98 VISUAL NOVEL', status = 'IDLE' }) => { + return ( +
+
+ + FILE + SAVE + LOAD + CONFIG +
+
{title}
+
+ {status} +
+
+ ) +} diff --git a/frontend/src/components/VNApp.tsx b/frontend/src/components/VNApp.tsx new file mode 100644 index 0000000..0f73d2c --- /dev/null +++ b/frontend/src/components/VNApp.tsx @@ -0,0 +1,228 @@ +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([ + { id: 'm1', role: 'assistant', content: 'A warm CRT glow fills the room. A figure turns towards you...' }, + ]) + const [choices, setChoices] = useState(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 ( +
+ {!loadingComplete && ( + + )} +
+
+
+
+ Character A +
+
+
+ + + + +
+
+
+ +
+
+
+ Soryu { const img = (e.currentTarget as HTMLImageElement); img.onerror = null; img.src = '/logo/crane-logo.png'; }} + /> +
+
+ +
+
+ {location} - {weather} +
+
+ + +
+ { + if (e.key === 'Enter') { + const target = e.target as HTMLInputElement; + if (target.value.trim()) { + pushMessage('user', target.value); + target.value = ''; + } + } + }} + /> +
+
+
{new Date().toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric' })} {new Date().toLocaleTimeString('ja-JP', { hour12: false })}
+
+
+ {currentTime.toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric' })} {currentTime.toLocaleTimeString('ja-JP', { hour12: false })} +
+
+ {money.toLocaleString()} +
+
+
+ + + + +
+
+ {}} + onAuto={() => {}} + onLog={() => {}} + location={location} + /> +
+ +
+
+ Character B +
+
+
+ {currentTime.toLocaleDateString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric' })} +
+ {currentTime.toLocaleTimeString('ja-JP', { hour12: false })} +
+
+ {money.toLocaleString()} +
+
+
+
+
+ + setConfigModalOpen(false)} + skipIntro={skipIntro} + onSkipIntroChange={handleSkipIntroChange} + /> +
+ ) +} diff --git a/frontend/src/components/VNInterface.tsx b/frontend/src/components/VNInterface.tsx new file mode 100644 index 0000000..be71d27 --- /dev/null +++ b/frontend/src/components/VNInterface.tsx @@ -0,0 +1,208 @@ +import React, { useEffect } from 'react' +import { useStore } from '@nanostores/react' +import { + isStandbyStore, + currentTimeStore, + weatherStore, + showChoicesStore, + showSettingsModalStore, + isVisibleStore, + yenBalanceStore, + toggleStandby, + toggleShowChoices, + updateTime +} from '../stores' + +interface VNInterfaceProps { + onLogout: () => void +} + +export function VNInterface({ onLogout }: VNInterfaceProps) { + const isStandby = useStore(isStandbyStore) + const currentTime = useStore(currentTimeStore) + const weather = useStore(weatherStore) + const showChoices = useStore(showChoicesStore) + const showSettingsModal = useStore(showSettingsModalStore) + const isVisible = useStore(isVisibleStore) + const yenBalance = useStore(yenBalanceStore) + + // Fade in effect on mount + useEffect(() => { + const timer = setTimeout(() => { + isVisibleStore.set(true) + }, 100) + return () => clearTimeout(timer) + }, []) + + // Update clock every second (Japan Time) + useEffect(() => { + const timer = setInterval(() => { + const now = new Date() + // Convert to Japan Time (UTC+9) + const japanTime = new Date(now.getTime() + (now.getTimezoneOffset() * 60000) + (9 * 3600000)) + updateTime() + }, 1000) + return () => clearInterval(timer) + }, []) + + return ( +
+ {/* Background */} +
+ Background image +
+ + {/* Combined Info Panel (Top Right) */} +
+
+ {/* Weather Section */} +
+
🌤️
+
+
Tokyo
+
22°C Sunny
+
+
+ + {/* Time Section */} +
+
{currentTime.toLocaleDateString('ja-JP', { + year: 'numeric', + month: 'long', + day: 'numeric', + weekday: 'short' + })}
+
{currentTime.toLocaleTimeString('ja-JP', { + hour12: false, + hour: '2-digit', + minute: '2-digit' + })}
+
+ + {/* Status Section */} +
+
+ Balance: + ¥{yenBalance.toLocaleString()} +
+
+ System: + + + {isStandby ? 'STDBY' : 'LIVE'} + +
+
+
+
+ + {/* Main VN Viewport */} +
+
+
+
+ + {/* Dialogue Panel (Bottom) */} +
+
+
???
+
+ A warm CRT glow fills the room. A figure turns towards you... +
+
+
+ + {/* Input/Choice Panel (Bottom) */} +
+
+ {!showChoices ? ( + // Text Input Mode + { + if (e.key === 'Enter') { + const target = e.target as HTMLInputElement; + if (target.value.trim()) { + console.log('User input:', target.value); + target.value = ''; + } + } + }} + /> + ) : ( + // Choice Options Mode +
+ + + +
+ )} + + {/* Toggle Button */} + +
+
+ + {/* Floating Settings Button */} + + + {/* Settings Modal */} + {showSettingsModal && ( +
showSettingsModalStore.set(false)}> +
e.stopPropagation()}> +
+

Settings

+ +
+
+
+

Display Options

+
+ +
+
+
+

Audio

+
+ + +
+
+
+
+ + +
+
+
+ )} +
+ ) +} diff --git a/frontend/src/components/VNViewport.tsx b/frontend/src/components/VNViewport.tsx new file mode 100644 index 0000000..fe01264 --- /dev/null +++ b/frontend/src/components/VNViewport.tsx @@ -0,0 +1,22 @@ +import React from 'react' + +type Props = { + bgSrc?: string + children?: React.ReactNode +} + +export const VNViewport: React.FC = ({ bgSrc = '/bg.jpg', children }) => { + return ( +
+
+
+ {bgSrc && Background} +
+ {children} +
+