function MacStyleUiWithIFrame({ url, width = 800, height = 700 }) { const [isVisible, setIsVisible] = React.useState(true); const [windowSize, setWindowSize] = React.useState({ width, height }); const [position, setPosition] = React.useState({ x: 0, y: 0 }); const windowRef = React.useRef(); const handleCloseClick = ()=>{ setIsVisible(false); }; const handleMouseDown = (event)=>{ const startX = event.clientX - position.x; const startY = event.clientY - position.y; const handleMouseMove = (event)=>{ setPosition({ x: event.clientX - startX, y: event.clientY - startY }); }; const handleMouseUp = ()=>{ document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; const handleResizeMouseDown = (event)=>{ event.preventDefault(); event.stopPropagation(); const startX = event.clientX; const startY = event.clientY; const startWidth = windowSize.width; const startHeight = windowSize.height; const handleMouseMove = (event)=>{ const newWidth = startWidth + event.clientX - startX; const newHeight = startHeight + event.clientY - startY; setWindowSize({ width: newWidth, height: newHeight }); }; const handleMouseUp = ()=>{ document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseup', handleMouseUp); }; document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); }; return /*#__PURE__*/ React.createElement("div", { ref: windowRef, className: `fixed bg-white rounded shadow-lg border border-gray-300 ${isVisible ? '' : 'hidden'}`, style: { width: windowSize.width, height: windowSize.height, top: position.y, left: position.x }, __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between px-4 py-2 bg-gray-200 rounded-t cursor-move", onMouseDown: handleMouseDown, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-3 h-3 bg-red-500 rounded-full mr-2", onClick: handleCloseClick, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 bg-yellow-500 rounded-full mr-2", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 bg-green-500 rounded-full", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[calc(100%-32px)]", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: url, width: "100%", height: "100%", frameBorder: "0", className: isVisible ? '' : 'pointer-events-none', __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 right-0 w-4 h-4 bg-gray-300 rounded-bl cursor-se-resize", onMouseDown: handleResizeMouseDown, __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this })); } function MacStyleUiWithIFrameStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-screen h-screen", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MacStyleUiWithIFrame, { url: "https://example.com", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this })); } function MainComponent() { const [visibleWindows, setVisibleWindows] = React.useState({}); const icons = [ { emoji: '🧱', title: 'ブロック崩し', url: 'https://block-breaker-game.created.app' }, { emoji: '📖', title: 'QuantumLinks', url: 'https://satokoyo-games.created.app/Novel-QuantumLinks' }, { emoji: '🍉', title: 'ほぼスイカ', url: 'https://satokoyo-games.created.app/suika' }, { emoji: '👽', title: 'シューティング', url: 'https://satokoyo-games.created.app/InvaderGame' }, { emoji: '❌', title: 'マルバツゲーム', url: 'https://satokoyo-games.created.app/Tic-Tac-Toe' } ]; const toggleWindow = (title, url)=>{ setVisibleWindows((prevState)=>({ ...prevState, [title]: !prevState[title] ? { url } : null })); }; return /*#__PURE__*/ React.createElement("div", { className: "w-screen h-screen bg-cover bg-center", style: { backgroundImage: `url('https://ucarecdn.com/21547ba6-26dd-47a8-b2f9-3381e20a4a9f/-/format/auto/')` }, __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, icons.map(({ emoji, title, url })=>/*#__PURE__*/ React.createElement("div", { key: title, className: "flex flex-col items-center cursor-pointer", onClick: ()=>toggleWindow(title, url), __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[64px] mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, emoji), /*#__PURE__*/ React.createElement("div", { className: "text-white font-bold", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, title))))), Object.entries(visibleWindows).map(([title, window])=>window && /*#__PURE__*/ React.createElement(MacStyleUiWithIFrame, { key: title, url: window.url, onClose: ()=>toggleWindow(title, null), __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }))); }