1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// This approach creates a Windows 98-style simulator using React for the UI and CSS for styling.
// We'll implement a desktop with icons, a start menu, and multiple application windows including
// My Computer, Notepad, and Paint (using jspaint.app).
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useRef, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
const [startMenuOpen, setStartMenuOpen] = useState(false);
const [windows, setWindows] = useState([]);
const [showRedirectPrompt, setShowRedirectPrompt] = useState(false);
const [activeWindow, setActiveWindow] = useState(null);
const [minimizedWindows, setMinimizedWindows] = useState([]);
const [time, setTime] = useState(new Date());
const openWindow = (type) => {
const newWindow = {
id: Date.now(),
type,
title: type === 'notepad' ? 'Untitled - Notepad' : type === 'paint' ? 'Untitled - Paint' : 'My Computer',
content: type === 'notepad' ? '' : null,
position: { x: 50 + windows.length * 20, y: 50 + windows.length * 20 },
size: type === 'paint' ? { width: 800, height: 600 } : { width: 400, height: 300 },
};
setWindows([...windows, newWindow]);
setActiveWindow(newWindow.id);
setStartMenuOpen(false);
};
const closeWindow = (id) => {
setWindows(windows.filter(w => w.id !== id));
if (activeWindow === id) {
setActiveWindow(null);
}
};
const minimizeWindow = (id) => {
setMinimizedWindows([...minimizedWindows, id]);
setActiveWindow(null);
};
const restoreWindow = (id) => {
setMinimizedWindows(minimizedWindows.filter(winId => winId !== id));
setActiveWindow(id);
};
const bringToFront = (id) => {
setActiveWindow(id);
setMinimizedWindows(minimizedWindows.filter(winId => winId !== id));
};
const updateWindowPosition = (id, newPosition) => {
setWindows(windows.map(w => w.id === id ? { ...w, position: newPosition } : w));
};
useEffect(() => {
const timer = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(timer);
}, []);
const handleInstagramRedirect = () => {
setShowRedirectPrompt(true);
setStartMenuOpen(false);
};
const confirmRedirect = () => {
setShowRedirectPrompt(false);
window.location.href = 'https://www.instagram.com';
};
return (
<div className="windows-98">
<div className="desktop">
<DesktopIcon icon="🖥️" label="My Computer" onClick={() => openWindow('my-computer')} />
<DesktopIcon icon="📝" label="Notepad" onClick={() => openWindow('notepad')} />
<DesktopIcon icon="🎨" label="Paint" onClick={() => openWindow('paint')} />
{windows.map(window => (
<Window
key={window.id}
window={window}
isActive={activeWindow === window.id}
onClose={() => closeWindow(window.id)}
onMinimize={() => minimizeWindow(window.id)}
isMinimized={minimizedWindows.includes(window.id)}
onFocus={() => bringToFront(window.id)}
updatePosition={(newPosition) => updateWindowPosition(window.id, newPosition)}
/>
))}
</div>
<Taskbar
startMenuOpen={startMenuOpen}
toggleStartMenu={() => setStartMenuOpen(!startMenuOpen)}
openWindow={openWindow}
onInstagramClick={handleInstagramRedirect}
time={time}
windows={windows}
minimizedWindows={minimizedWindows}
restoreWindow={restoreWindow}