diff --git a/apps/editor/components/editor/index.tsx b/apps/editor/components/editor/index.tsx index 07bc825c..e0280f34 100644 --- a/apps/editor/components/editor/index.tsx +++ b/apps/editor/components/editor/index.tsx @@ -9,6 +9,7 @@ import { ZoneSystem } from '../systems/zone/zone-system' import { ToolManager } from '../tools/tool-manager' import { ActionMenu } from '../ui/action-menu' import { CloudSaveButton } from '@/features/community/components/cloud-save-button' +import { PascalRadio } from '../pascal-radio' import { PanelManager } from '../ui/panels/panel-manager' import { SidebarProvider } from '../ui/primitives/sidebar' import { AppSidebar } from '../ui/sidebar/app-sidebar' @@ -16,12 +17,16 @@ import { CustomCameraControls } from './custom-camera-controls' import { ExportManager } from './export-manager' import { Grid } from './grid' import { SelectionManager } from './selection-manager' +import { initSFXBus } from '@/lib/sfx-bus' // Load default scene initially (will be replaced when property loads) useScene.getState().loadScene() initSpatialGridSync() initSpaceDetectionSync(useScene, useEditor) +// Initialize SFX bus to connect events to sound effects +initSFXBus() + export default function Editor() { useKeyboard() @@ -29,7 +34,16 @@ export default function Editor() {
- + + {/* Top-right controls */} +
+
+ +
+
+ +
+
diff --git a/apps/editor/components/pascal-radio.tsx b/apps/editor/components/pascal-radio.tsx new file mode 100644 index 00000000..25bfaeac --- /dev/null +++ b/apps/editor/components/pascal-radio.tsx @@ -0,0 +1,245 @@ +'use client' + +import { Howl } from 'howler' +import { Disc3, Pause, Play, Settings2, SkipBack, SkipForward, Volume2 } from 'lucide-react' +import { useCallback, useEffect, useRef, useState } from 'react' +import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/primitives/popover' +import { Switch } from '@/components/ui/primitives/switch' +import { Slider } from '@/components/ui/slider' +import { cn } from '@/lib/utils' +import useAudio from '@/store/use-audio' + +const PLAYLIST = [ + { + title: 'Ballroom in Miniature', + file: '/audios/radios/classic/Ballroom in Miniature.mp3', + }, + { + title: 'Blueprints in Springtime', + file: '/audios/radios/classic/Blueprints in Springtime.mp3', + }, + { + title: 'Clockwork Tea Party', + file: '/audios/radios/classic/Clockwork Tea Party.mp3', + }, + { + title: 'Clockwork Tea Party (Alternate)', + file: '/audios/radios/classic/Clockwork Tea Party (Alternate).mp3', + }, + { + title: 'Clockwork Teacups', + file: '/audios/radios/classic/Clockwork Teacups.mp3', + }, + { + title: 'Evening in the Parlor', + file: '/audios/radios/classic/Evening in the Parlor.mp3', + }, + { + title: 'Glass Atrium', + file: '/audios/radios/classic/Glass Atrium.mp3', + }, + { + title: 'Moonlight On The Drafting Table', + file: '/audios/radios/classic/Moonlight On The Drafting Table.mp3', + }, + { + title: 'Sunlit Garden Reverie', + file: '/audios/radios/classic/Sunlit Garden Reverie.mp3', + }, + { + title: 'Sunlit Waltz in Pastel Hues', + file: '/audios/radios/classic/Sunlit Waltz in Pastel Hues.mp3', + }, +] + +// Shuffle array helper +function shuffleArray(array: T[]): T[] { + const shuffled = [...array] + for (let i = shuffled.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)) + ;[shuffled[i], shuffled[j]] = [shuffled[j]!, shuffled[i]!] + } + return shuffled +} + +export function PascalRadio() { + const [shuffledPlaylist] = useState(() => shuffleArray(PLAYLIST)) + const [isPlaying, setIsPlaying] = useState(false) + const [currentTrackIndex, setCurrentTrackIndex] = useState(0) + const { masterVolume, radioVolume, muted, autoplay, setAutoplay } = useAudio() + const soundRef = useRef(null) + const hasAutoplayedRef = useRef(false) + + const currentTrack = shuffledPlaylist[currentTrackIndex]! + + // Calculate effective volume (masterVolume * radioVolume, both are 0-100) + const effectiveVolume = (masterVolume / 100) * (radioVolume / 100) + + const handleNext = useCallback(() => { + setCurrentTrackIndex((prev) => (prev + 1) % shuffledPlaylist.length) + }, [shuffledPlaylist.length]) + + const handlePrevious = useCallback(() => { + setCurrentTrackIndex((prev) => (prev - 1 + shuffledPlaylist.length) % shuffledPlaylist.length) + }, [shuffledPlaylist.length]) + + // Initialize Howler when track changes + useEffect(() => { + // Clean up previous sound + if (soundRef.current) { + soundRef.current.unload() + } + + const wasPlaying = isPlaying + + // Create new sound + soundRef.current = new Howl({ + src: [currentTrack.file], + volume: muted ? 0 : effectiveVolume, + onend: handleNext, + }) + + // If was playing, play new track + if (wasPlaying && !muted) { + soundRef.current?.play() + } + + return () => { + soundRef.current?.unload() + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [handleNext, currentTrack.file]) + + // Update volume when settings change + useEffect(() => { + if (soundRef.current) { + soundRef.current.volume(muted ? 0 : effectiveVolume) + + // Pause if muted, resume if unmuted and was playing + if (muted && isPlaying) { + soundRef.current.pause() + } else if (!muted && isPlaying && !soundRef.current.playing()) { + soundRef.current.play() + } + } + }, [effectiveVolume, muted, isPlaying]) + + // Autoplay on first user click + useEffect(() => { + if (!autoplay || hasAutoplayedRef.current || muted) return + + const handleFirstClick = () => { + if (!soundRef.current || hasAutoplayedRef.current) return + + hasAutoplayedRef.current = true + soundRef.current.play() + setIsPlaying(true) + + // Remove listener after first click + document.removeEventListener('click', handleFirstClick) + } + + document.addEventListener('click', handleFirstClick) + return () => { + document.removeEventListener('click', handleFirstClick) + } + }, [autoplay, muted]) + + const handlePlayPause = () => { + if (!soundRef.current || muted) return + + if (isPlaying) { + soundRef.current.pause() + } else { + soundRef.current.play() + } + setIsPlaying(!isPlaying) + } + + const handleVolumeChange = (value: number[]) => { + useAudio.setState({ radioVolume: value[0] }) + } + + return ( +
+ + Pascal Radio +
{ + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault() + handlePlayPause() + } + }} + > + {isPlaying ? : } +
+ + + + + +
+ {/* Current song info with prev/next */} +
+

Now Playing

+
+ +

{currentTrack.title}

+ +
+
+ + {/* Volume control */} +
+ + + {radioVolume}% +
+ + {/* Autoplay setting */} +
+ + +
+
+ + +
+ ) +} diff --git a/apps/editor/components/tools/ceiling/ceiling-tool.tsx b/apps/editor/components/tools/ceiling/ceiling-tool.tsx index 24f909dc..0621208d 100644 --- a/apps/editor/components/tools/ceiling/ceiling-tool.tsx +++ b/apps/editor/components/tools/ceiling/ceiling-tool.tsx @@ -3,6 +3,7 @@ import { useViewer } from '@pascal-app/viewer' import { useEffect, useMemo, useRef, useState } from 'react' import { BufferGeometry, DoubleSide, type Line, type Mesh, Shape, Vector3 } from 'three' import useEditor from '@/store/use-editor' +import { sfxEmitter } from '@/lib/sfx-bus' const CEILING_HEIGHT = 2.52 const GRID_OFFSET = 0.02 @@ -59,6 +60,7 @@ const commitCeilingDrawing = (levelId: LevelNode['id'], points: Array<[number, n }) createNode(ceiling, levelId) + sfxEmitter.emit('sfx:structure-build') } export const CeilingTool: React.FC = () => { @@ -72,6 +74,7 @@ export const CeilingTool: React.FC = () => { const [points, setPoints] = useState>([]) const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0]) const [levelY, setLevelY] = useState(0) + const previousSnappedPointRef = useRef<[number, number] | null>(null) // Update cursor position and lines on grid move useEffect(() => { @@ -94,6 +97,13 @@ export const CeilingTool: React.FC = () => { const lastPoint = points[points.length - 1] const displayPoint = lastPoint ? calculateSnapPoint(lastPoint, gridPosition) : gridPosition + // Play snap sound when the snapped position actually changes (only when drawing) + if (points.length > 0 && previousSnappedPointRef.current && + (displayPoint[0] !== previousSnappedPointRef.current[0] || displayPoint[1] !== previousSnappedPointRef.current[1])) { + sfxEmitter.emit('sfx:grid-snap') + } + + previousSnappedPointRef.current = displayPoint cursorRef.current.position.set(displayPoint[0], ceilingY, displayPoint[1]) gridCursorRef.current.position.set(displayPoint[0], gridY, displayPoint[1]) } diff --git a/apps/editor/components/tools/item/item-tool.tsx b/apps/editor/components/tools/item/item-tool.tsx index f2884345..777730fc 100644 --- a/apps/editor/components/tools/item/item-tool.tsx +++ b/apps/editor/components/tools/item/item-tool.tsx @@ -1,3 +1,4 @@ +import { sfxEmitter } from '@/lib/sfx-bus' import useEditor from '@/store/use-editor' import { useDraftNode } from './use-draft-node' import { usePlacementCoordinator } from './use-placement-coordinator' @@ -14,7 +15,10 @@ export const ItemTool: React.FC = () => { draftNode.create(gridPosition, selectedItem!) } }, - onCommitted: () => true, + onCommitted: () => { + sfxEmitter.emit('sfx:item-place') + return true + }, }) if (!selectedItem) return null diff --git a/apps/editor/components/tools/item/move-tool.tsx b/apps/editor/components/tools/item/move-tool.tsx index 77634d2e..65d3b85f 100644 --- a/apps/editor/components/tools/item/move-tool.tsx +++ b/apps/editor/components/tools/item/move-tool.tsx @@ -1,10 +1,14 @@ -import useEditor from '@/store/use-editor' import { Vector3 } from 'three' +import { sfxEmitter } from '@/lib/sfx-bus' +import useEditor from '@/store/use-editor' +import type { PlacementState } from './placement-types' import { useDraftNode } from './use-draft-node' import { usePlacementCoordinator } from './use-placement-coordinator' -import type { PlacementState } from './placement-types' -function getInitialState(node: { asset: { attachTo?: string }; parentId: string | null }): PlacementState { +function getInitialState(node: { + asset: { attachTo?: string } + parentId: string | null +}): PlacementState { const attachTo = node.asset.attachTo if (attachTo === 'wall' || attachTo === 'wall-side') { return { surface: 'wall', wallId: node.parentId, ceilingId: null } @@ -33,6 +37,7 @@ export const MoveTool: React.FC = () => { gridPosition.copy(new Vector3(...movingNode.position)) }, onCommitted: () => { + sfxEmitter.emit('sfx:item-place') exitMoveMode() return false }, diff --git a/apps/editor/components/tools/item/use-placement-coordinator.tsx b/apps/editor/components/tools/item/use-placement-coordinator.tsx index 892ef50d..457b4fdf 100644 --- a/apps/editor/components/tools/item/use-placement-coordinator.tsx +++ b/apps/editor/components/tools/item/use-placement-coordinator.tsx @@ -23,6 +23,7 @@ import { Quaternion, Vector3, } from 'three' +import { sfxEmitter } from '@/lib/sfx-bus' import { ceilingStrategy, checkCanPlace, floorStrategy, wallStrategy } from './placement-strategies' import type { PlacementState, TransitionResult } from './placement-types' import type { DraftNodeHandle } from './use-draft-node' @@ -83,6 +84,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea const applyTransition = (result: TransitionResult) => { Object.assign(placementState.current, result.stateUpdate) gridPosition.current.set(...result.gridPosition) + cursorRef.current.position.set(...result.cursorPosition) cursorRef.current.rotation.y = result.cursorRotationY @@ -135,10 +137,20 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea // ---- Floor Handlers ---- + let previousGridPos: [number, number, number] | null = null + const onGridMove = (event: GridEvent) => { const result = floorStrategy.move(getContext(), event) if (!result) return + // Play snap sound when grid position changes + if (previousGridPos && + (result.gridPosition[0] !== previousGridPos[0] || + result.gridPosition[2] !== previousGridPos[2])) { + sfxEmitter.emit('sfx:grid-snap') + } + + previousGridPos = [...result.gridPosition] gridPosition.current.set(...result.gridPosition) // Only update X and Z for cursor - useFrame will handle Y (slab elevation) cursorRef.current.position.x = result.cursorPosition[0] diff --git a/apps/editor/components/tools/roof/roof-tool.tsx b/apps/editor/components/tools/roof/roof-tool.tsx index 3c7cfc1c..5c5bb52e 100644 --- a/apps/editor/components/tools/roof/roof-tool.tsx +++ b/apps/editor/components/tools/roof/roof-tool.tsx @@ -3,6 +3,7 @@ import { useViewer } from "@pascal-app/viewer"; import { useEffect, useMemo, useRef, useState } from "react"; import { BufferGeometry, DoubleSide, type Line, Vector3 } from "three"; import useEditor from "@/store/use-editor"; +import { sfxEmitter } from '@/lib/sfx-bus'; // Default roof dimensions const DEFAULT_HEIGHT = 1.5; @@ -42,6 +43,7 @@ const commitRoofPlacement = ( }); createNode(roof, levelId); + sfxEmitter.emit('sfx:structure-build'); return roof.id; }; @@ -59,6 +61,7 @@ export const RoofTool: React.FC = () => { const setMode = useEditor((state) => state.setMode); const corner1Ref = useRef<[number, number, number] | null>(null); + const previousGridPosRef = useRef<[number, number] | null>(null); const [preview, setPreview] = useState({ corner1: null, cursorPosition: [0, 0, 0], @@ -93,6 +96,14 @@ export const RoofTool: React.FC = () => { const cursorPosition: [number, number, number] = [gridX, y, gridZ]; + // Play snap sound when grid position changes (only when placing) + if (corner1Ref.current && previousGridPosRef.current && + (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])) { + sfxEmitter.emit('sfx:grid-snap'); + } + + previousGridPosRef.current = [gridX, gridZ]; + setPreview({ corner1: corner1Ref.current, cursorPosition, diff --git a/apps/editor/components/tools/shared/polygon-editor.tsx b/apps/editor/components/tools/shared/polygon-editor.tsx index 6e57a3e1..dc038d10 100644 --- a/apps/editor/components/tools/shared/polygon-editor.tsx +++ b/apps/editor/components/tools/shared/polygon-editor.tsx @@ -2,6 +2,7 @@ import { emitter, type GridEvent, sceneRegistry } from '@pascal-app/core' import { createPortal } from '@react-three/fiber' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { BufferGeometry, Float32BufferAttribute, type Mesh } from 'three' +import { sfxEmitter } from '@/lib/sfx-bus' const Y_OFFSET = 0.02 @@ -52,6 +53,7 @@ export const PolygonEditor: React.FC = ({ const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0]) const lineRef = useRef(null!) + const previousPositionRef = useRef<[number, number] | null>(null) // Track the last polygon prop to detect external changes (undo/redo) const lastPolygonRef = useRef(polygon) @@ -129,7 +131,16 @@ export const PolygonEditor: React.FC = ({ const onGridMove = (event: GridEvent) => { const gridX = Math.round(event.position[0] * 2) / 2 const gridZ = Math.round(event.position[2] * 2) / 2 - setCursorPosition([gridX, gridZ]) + const newPosition: [number, number] = [gridX, gridZ] + + // Play snap sound when cursor moves to a new grid cell during drag + if (dragState?.isDragging && previousPositionRef.current && + (newPosition[0] !== previousPositionRef.current[0] || newPosition[1] !== previousPositionRef.current[1])) { + sfxEmitter.emit('sfx:grid-snap') + } + + previousPositionRef.current = newPosition + setCursorPosition(newPosition) // Update vertex position during drag if (dragState?.isDragging) { diff --git a/apps/editor/components/tools/slab/slab-tool.tsx b/apps/editor/components/tools/slab/slab-tool.tsx index 7f887c36..3022cb2d 100644 --- a/apps/editor/components/tools/slab/slab-tool.tsx +++ b/apps/editor/components/tools/slab/slab-tool.tsx @@ -2,6 +2,7 @@ import { emitter, type GridEvent, type LevelNode, SlabNode, useScene } from '@pa import { useViewer } from '@pascal-app/viewer' import { useEffect, useMemo, useRef, useState } from 'react' import { BufferGeometry, DoubleSide, type Line, type Mesh, Shape, Vector3 } from 'three' +import { sfxEmitter } from '@/lib/sfx-bus' const Y_OFFSET = 0.02 @@ -57,6 +58,7 @@ const commitSlabDrawing = (levelId: LevelNode['id'], points: Array<[number, numb }) createNode(slab, levelId) + sfxEmitter.emit('sfx:structure-build') return slab.id } @@ -70,6 +72,7 @@ export const SlabTool: React.FC = () => { const [points, setPoints] = useState>([]) const [cursorPosition, setCursorPosition] = useState<[number, number]>([0, 0]) const [levelY, setLevelY] = useState(0) + const previousSnappedPointRef = useRef<[number, number] | null>(null) // Update cursor position and lines on grid move useEffect(() => { @@ -89,6 +92,13 @@ export const SlabTool: React.FC = () => { const lastPoint = points[points.length - 1] const displayPoint = lastPoint ? calculateSnapPoint(lastPoint, gridPosition) : gridPosition + // Play snap sound when the snapped position actually changes (only when drawing) + if (points.length > 0 && previousSnappedPointRef.current && + (displayPoint[0] !== previousSnappedPointRef.current[0] || displayPoint[1] !== previousSnappedPointRef.current[1])) { + sfxEmitter.emit('sfx:grid-snap') + } + + previousSnappedPointRef.current = displayPoint cursorRef.current.position.set(displayPoint[0], event.position[1], displayPoint[1]) } diff --git a/apps/editor/components/tools/wall/wall-tool.tsx b/apps/editor/components/tools/wall/wall-tool.tsx index 935dea97..adf08431 100644 --- a/apps/editor/components/tools/wall/wall-tool.tsx +++ b/apps/editor/components/tools/wall/wall-tool.tsx @@ -1,7 +1,8 @@ import { emitter, type GridEvent, useScene, WallNode } from '@pascal-app/core' import { useViewer } from '@pascal-app/viewer' -import { useEffect, useRef, useMemo } from 'react' -import { DoubleSide, type Mesh, Vector3, Shape, ShapeGeometry } from 'three' +import { useEffect, useRef } from 'react' +import { DoubleSide, type Mesh, Shape, ShapeGeometry, Vector3 } from 'three' +import { sfxEmitter } from '@/lib/sfx-bus' const WALL_HEIGHT = 2.5 const WALL_THICKNESS = 0.15 @@ -88,6 +89,7 @@ const commitWallDrawing = (start: [number, number], end: [number, number]) => { const wall = WallNode.parse({ start, end }) createNode(wall, currentLevelId) + sfxEmitter.emit('sfx:structure-build') } export const WallTool: React.FC = () => { @@ -99,6 +101,7 @@ export const WallTool: React.FC = () => { useEffect(() => { let gridPosition: [number, number] = [0, 0] + let previousWallEnd: [number, number] | null = null const onGridMove = (event: GridEvent) => { if (!cursorRef.current || !wallPreviewRef.current) return @@ -112,6 +115,14 @@ export const WallTool: React.FC = () => { const snapped = snapTo45Degrees(startingPoint.current, cursorPosition) endingPoint.current.copy(snapped) + // Play snap sound only when the actual wall end position changes + const currentWallEnd: [number, number] = [endingPoint.current.x, endingPoint.current.z] + if (previousWallEnd && + (currentWallEnd[0] !== previousWallEnd[0] || currentWallEnd[1] !== previousWallEnd[1])) { + sfxEmitter.emit('sfx:grid-snap') + } + previousWallEnd = currentWallEnd + // Update wall preview geometry updateWallPreview(wallPreviewRef.current, startingPoint.current, endingPoint.current) } @@ -125,7 +136,7 @@ export const WallTool: React.FC = () => { } else if (buildingState.current === 1) { commitWallDrawing( [startingPoint.current.x, startingPoint.current.z], - [endingPoint.current.x, endingPoint.current.z] + [endingPoint.current.x, endingPoint.current.z], ) wallPreviewRef.current.visible = false buildingState.current = 0 diff --git a/apps/editor/components/ui/panels/item-panel.tsx b/apps/editor/components/ui/panels/item-panel.tsx index bed39a58..79ee38e5 100644 --- a/apps/editor/components/ui/panels/item-panel.tsx +++ b/apps/editor/components/ui/panels/item-panel.tsx @@ -7,6 +7,7 @@ import Image from 'next/image' import { useCallback } from 'react' import useEditor from '@/store/use-editor' import { NumberInput } from '@/components/ui/primitives/number-input' +import { sfxEmitter } from '@/lib/sfx-bus' export function ItemPanel() { const selectedIds = useViewer((s) => s.selection.selectedIds) @@ -43,6 +44,7 @@ export function ItemPanel() { const handleMove = useCallback(() => { if (node) { + sfxEmitter.emit('sfx:item-pick') setMovingNode(node) // Deselect so the panel closes setSelection({ selectedIds: [] }) diff --git a/apps/editor/components/ui/sidebar/panels/settings-panel/audio-settings-dialog.tsx b/apps/editor/components/ui/sidebar/panels/settings-panel/audio-settings-dialog.tsx new file mode 100644 index 00000000..62bd94d6 --- /dev/null +++ b/apps/editor/components/ui/sidebar/panels/settings-panel/audio-settings-dialog.tsx @@ -0,0 +1,89 @@ +import { Volume2, VolumeX } from 'lucide-react' +import { Button } from '@/components/ui/primitives/button' +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/primitives/dialog' +import { Slider } from '@/components/ui/slider' +import useAudio from '@/store/use-audio' + +export function AudioSettingsDialog() { + const { masterVolume, sfxVolume, radioVolume, muted, setMasterVolume, setSfxVolume, setRadioVolume, toggleMute } = useAudio() + + return ( + + + + + + + Audio Settings + + Adjust volume levels and mute settings + + +
+ {/* Master Volume */} +
+
+ + {masterVolume}% +
+ setMasterVolume(value[0])} + max={100} + step={1} + disabled={muted} + /> +
+ + {/* Radio Volume */} +
+
+ + {radioVolume}% +
+ setRadioVolume(value[0])} + max={100} + step={1} + disabled={muted} + /> +
+ + {/* SFX Volume */} +
+
+ + {sfxVolume}% +
+ setSfxVolume(value[0])} + max={100} + step={1} + disabled={muted} + /> +
+ + {/* Mute Toggle */} +
+ +
+
+ + + ) +} diff --git a/apps/editor/components/ui/sidebar/panels/settings-panel/index.tsx b/apps/editor/components/ui/sidebar/panels/settings-panel/index.tsx index 17e50228..7009d558 100644 --- a/apps/editor/components/ui/sidebar/panels/settings-panel/index.tsx +++ b/apps/editor/components/ui/sidebar/panels/settings-panel/index.tsx @@ -4,6 +4,7 @@ import { Download, Save, Trash2, Upload } from "lucide-react"; import { useRef } from "react"; import { Button } from "@/components/ui/primitives/button"; import useEditor from "@/store/use-editor"; +import { AudioSettingsDialog } from "./audio-settings-dialog"; export function SettingsPanel() { const fileInputRef = useRef(null); @@ -113,6 +114,14 @@ export function SettingsPanel() { />
+ {/* Audio Section */} +
+ + +
+ {/* Danger Zone */}