Windows 98 Simulator

\n openWindow('my-computer')} />\n openWindow('notepad')} />\n openWindow('paint')} />\n {windows.map(window => (\n closeWindow(window.id)}\n onMinimize={() => minimizeWindow(window.id)}\n isMinimized={minimizedWindows.includes(window.id)}\n onFocus={() => bringToFront(window.id)}\n updatePosition={(newPosition) => updateWindowPosition(window.id, newPosition)}\n />\n ))}\n

\n setStartMenuOpen(!startMenuOpen)}\n openWindow={openWindow}\n onInstagramClick={handleInstagramRedirect}\n time={time}\n windows={windows}\n minimizedWindows={minimizedWindows}\n restoreWindow={restoreWindow}\n />\n {showRedirectPrompt && (\n

External Link

You are about to leave the Windows 98 simulator and go to Instagram.com. Do you want to continue?

\n \n \n

\n )}\n

\n View Source\n

\n );\n}\n\nfunction DesktopIcon({ icon, label, onClick }) {\n return (\n

\n {icon}\n {label}\n

\n );\n}\n\nfunction Window({ window, isActive, onClose, onMinimize, isMinimized, onFocus, updatePosition }) {\n const [isDragging, setIsDragging] = useState(false);\n const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });\n const windowRef = useRef(null);\n\n const handleMouseDown = (e) => {\n setIsDragging(true);\n const rect = windowRef.current.getBoundingClientRect();\n setDragOffset({\n x: e.clientX - rect.left,\n y: e.clientY - rect.top\n });\n onFocus();\n };\n\n const handleMouseMove = (e) => {\n if (isDragging) {\n updatePosition({\n x: e.clientX - dragOffset.x,\n y: e.clientY - dragOffset.y\n });\n }\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n };\n\n useEffect(() => {\n if (isDragging) {\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n } else {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n }\n return () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n };\n }, [isDragging]);\n\n return (\n isMinimized ? null : (\n \n

{window.title}

\n \n \n \n

\n {window.type === 'notepad' && (\n window.content = e.target.value}\n style={{ width: '100%', height: 'calc(100% - 20px)', resize: 'none', border: 'none' }}\n />\n )}\n {window.type === 'paint' && (\n \n )}\n {window.type === 'my-computer' && (\n

\n \n \n \n

\n )}\n

\n \n )\n );\n}\n\nfunction Taskbar({ startMenuOpen, toggleStartMenu, openWindow, onInstagramClick, time, windows, minimizedWindows, restoreWindow }) {\n return (\n

\n \n {startMenuOpen && (\n

openWindow('my-computer')}>🖥️ My Computer

openWindow('notepad')}>📝 Notepad

openWindow('paint')}>🎨 Paint

📸 Instagram

\n )}\n

\n {windows.map(window => (\n restoreWindow(window.id)}\n >\n {window.type === 'my-computer' ? '🖥️' : window.type === 'notepad' ? '📝' : '🎨'} {window.title}\n \n ))}\n

\n {time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n Windows 98 Simulator\n \n \n \n \n

\n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" },\n });\n}\n\nconst css = `\nbody, html {\n margin: 0;\n padding: 0;\n height: 100%;\n overflow: hidden;\n}\n\n.windows-98 {\n background-color: #008080;\n height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.desktop {\n flex-grow: 1;\n position: relative;\n padding: 20px;\n overflow: hidden;\n}\n\n.desktop-icon {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 64px;\n margin-bottom: 20px;\n color: white;\n text-shadow: 1px 1px 1px black;\n cursor: pointer;\n}\n\n.desktop-icon .icon {\n font-size: 32px;\n}\n\n.desktop-icon .label {\n text-align: center;\n word-wrap: break-word;\n max-width: 64px;\n}\n\n.taskbar {\n height: 28px;\n background-color: #c0c0c0;\n border-top: 1px solid #ffffff;\n display: flex;\n align-items: center;\n padding: 0 2px;\n}\n\n.start-button {\n font-weight: bold;\n padding: 2px 5px;\n margin-right: 10px;\n}\n\n.start-menu {\n position: absolute;\n bottom: 28px;\n left: 0;\n background-color: #c0c0c0;\n border: 1px solid #000000;\n border-bottom: none;\n}\n\n.menu-item {\n padding: 5px 10px;\n cursor: pointer;\n}\n\n.menu-item:hover {\n background-color: #000080;\n color: white;\n}\n\n.taskbar-time {\n margin-left: auto;\n padding: 0 10px;\n border-left: 1px solid #808080;\n border-right: 1px solid #ffffff;\n}\n\n.taskbar-windows {\n display: flex;\n flex-grow: 1;\n overflow-x: auto;\n margin: 0 10px;\n}\n\n.taskbar-window {\n background-color: #c0c0c0;\n border: 1px solid #808080;\n margin-right: 2px;\n padding: 2px 5px;\n min-width: 100px;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.taskbar-window.minimized {\n background-color: #d4d0c8;\n}\n\n.window {\n position: absolute;\n background-color: #c0c0c0;\n border: 1px solid #000000;\n box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;\n}\n\n.window.active {\n z-index: 10;\n}\n\n.window-content {\n padding: 5px;\n height: calc(100% - 33px);\n overflow: auto;\n}\n\n.my-computer-content {\n display: flex;\n flex-wrap: wrap;\n}\n\n.my-computer-content .desktop-icon {\n color: black;\n text-shadow: none;\n margin: 10px;\n}\n\n.modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n\n.modal-content {\n background-color: #c0c0c0;\n border: 1px solid #000000;\n box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;\n padding: 20px;\n max-width: 400px;\n}\n\n.modal-buttons {\n display: flex;\n justify-content: flex-end;\n margin-top: 20px;\n}\n\n.modal-buttons button {\n margin-left: 10px;\n}\n\n.view-source {\n position: fixed;\n bottom: 40px;\n right: 10px;\n background-color: #c0c0c0;\n padding: 5px 10px;\n border: 1px solid #000000;\n box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;\n font-size: 12px;\n z-index: 1000;\n}\n`;\n\nexport default server;","deleted","label",[98],"permalink","https://www.val.town/x/xpapla/windowsXpSimulator/code/main.tsx","extension","actionData","errors"]