diff --git a/src/App.tsx b/src/App.tsx index e09d74b..fdecb18 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,6 +11,7 @@ import { Analytics } from "@vercel/analytics/react" interface Terminal { id: string; position: { x: number; y: number }; + zIndex: number; } function AppContent() { @@ -29,10 +30,13 @@ function AppContent() { }; // Hold all terminals directly in state so changes trigger re-renders + const [highestZIndex, setHighestZIndex] = useState(1); + const [terminals, setTerminals] = useState(() => [ { id: 'terminal-0', position: generateRandomPosition(), + zIndex: 1, }, ]); @@ -41,13 +45,16 @@ function AppContent() { const handleTerminalCountChange = (count: number) => { setTerminals((prev) => { let updated = [...prev]; + let newZ = highestZIndex; // Add new terminals if needed if (count > prev.length) { for (let i = prev.length; i < count; i++) { + newZ += 1; updated.push({ id: `terminal-${i}`, position: generateRandomPosition(), + zIndex: newZ, }); } } else if (count < prev.length) { @@ -55,6 +62,7 @@ function AppContent() { updated = updated.slice(0, count); } + setHighestZIndex(newZ); return updated; }); }; @@ -64,15 +72,25 @@ function AppContent() { }; const handlePositionChange = (terminalId: string, position: { x: number; y: number }) => { - setTerminals((prev) => - prev.map((terminal) => - terminal.id === terminalId + setTerminals((prev) => + prev.map((terminal) => + terminal.id === terminalId ? { ...terminal, position } : terminal ) ); }; + const handleFocus = (terminalId: string) => { + const newZ = highestZIndex + 1; + setHighestZIndex(newZ); + setTerminals((prev) => + prev.map((terminal) => + terminal.id === terminalId ? { ...terminal, zIndex: newZ } : terminal + ) + ); + }; + const handleArrangeTerminals = () => { setTerminals((prev) => { const terminalWidth = 320; // Default terminal width + some padding @@ -154,6 +172,8 @@ function AppContent() { id={terminal.id} title={`Terminal ${index + 1}`} initialPosition={terminal.position} + zIndex={terminal.zIndex} + onFocus={handleFocus} onClose={() => handleTerminalClose(terminal.id)} onPositionChange={handlePositionChange} /> diff --git a/src/components/TerminalWindow/TerminalWindow.tsx b/src/components/TerminalWindow/TerminalWindow.tsx index 88e6657..79690df 100644 --- a/src/components/TerminalWindow/TerminalWindow.tsx +++ b/src/components/TerminalWindow/TerminalWindow.tsx @@ -8,24 +8,28 @@ import { useTheme } from '../../contexts/ThemeContext'; import { generateMultiLineAsciiArt } from '../../utils/asciiArt'; interface TerminalWindowProps { - id: string; + id: string; initialPosition?: { x: number; y: number }; initialSize?: { width?: number; height?: number }; title?: string; onClose?: () => void; onPositionChange?: (id: string, position: { x: number; y: number }) => void; + zIndex?: number; + onFocus?: (id: string) => void; } const DEFAULT_WIDTH = 650; const DEFAULT_HEIGHT = 450; -export function TerminalWindow({ +export function TerminalWindow({ id, initialPosition = { x: 0, y: 0 }, initialSize = {}, title = 'Terminal', onClose, - onPositionChange + onPositionChange, + zIndex = 10, + onFocus }: TerminalWindowProps) { const { currentTheme, getColorForRole } = useTheme(); const nodeRef = useRef(null); @@ -89,7 +93,11 @@ export function TerminalWindow({ } }} > -
+
onFocus && onFocus(id)} + >