function MainComponent() { const [activePanel, setActivePanel] = React.useState(null); const [scale, setScale] = React.useState(1); const [rotation, setRotation] = React.useState({ x: 0, y: 0 }); const [panels, setPanels] = React.useState([ { id: 1, icon: 'circle', title: 'HUD大', size: 'large', type: 'hud' }, { id: 2, icon: 'circle', title: 'HUD中', size: 'medium', type: 'hud' }, { id: 3, icon: 'circle', title: 'HUD小', size: 'small', type: 'hud' }, { id: 4, icon: 'chart-bar', title: 'データ大', size: 'large', type: 'data' }, { id: 5, icon: 'chart-line', title: 'データ中', size: 'medium', type: 'data' }, { id: 6, icon: 'chart-pie', title: 'データ小', size: 'small', type: 'data' }, { id: 7, icon: 'font', title: 'テキスト大', size: 'large', type: 'text' }, { id: 8, icon: 'font', title: 'テキスト中', size: 'medium', type: 'text' }, { id: 9, icon: 'font', title: 'テキスト小', size: 'small', type: 'text' } ]); const videoRef = React.useRef(); const containerRef = React.useRef(); const [isDragging, setIsDragging] = React.useState(false); React.useEffect(()=>{ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true }).then((stream)=>{ videoRef.current.srcObject = stream; videoRef.current.play(); }).catch((error)=>{ console.error("Error accessing the webcam", error); }); } }, []); const handlePanelClick = (id)=>{ setActivePanel(activePanel === id ? null : id); }; const handleMouseDown = ()=>{ setIsDragging(true); }; const handleMouseUp = ()=>{ setIsDragging(false); }; const handleMouseMove = (e)=>{ if (isDragging) { const deltaX = e.movementX; const deltaY = e.movementY; setRotation((prev)=>({ x: prev.x + deltaY * 0.5, y: prev.y + deltaX * 0.5 })); } }; const handleWheel = (e)=>{ e.preventDefault(); const newScale = scale + e.deltaY * -0.001; setScale(Math.min(Math.max(0.5, newScale), 2)); }; const getPanelSize = (size)=>{ switch(size){ case 'large': return 'w-[400px] h-[300px]'; case 'medium': return 'w-[300px] h-[200px]'; case 'small': return 'w-[200px] h-[150px]'; default: return 'w-[300px] h-[200px]'; } }; const renderPanelContent = (panel)=>{ switch(panel.type){ case 'hud': return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-3/4 h-3/4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 border-4 border-[#00ffff] rounded-full animate-spin-slow opacity-70", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-4 border-2 border-[#00ffff] rounded-full animate-spin-reverse opacity-70", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-8 bg-[#00ffff] rounded-full opacity-30 animate-pulse", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }))); case 'data': return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3/4 h-3/4 bg-[#00ffff] bg-opacity-20 rounded-lg flex flex-col justify-around p-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-[#00ffff] opacity-70 rounded", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-[#00ffff] opacity-70 rounded", style: { width: '60%' }, __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-2 bg-[#00ffff] opacity-70 rounded", style: { width: '80%' }, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }))); case 'text': return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3/4 h-4 bg-[#00ffff] bg-opacity-20 rounded mb-2", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 h-4 bg-[#00ffff] bg-opacity-20 rounded", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-[#000814] overflow-hidden relative", onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove, onMouseLeave: handleMouseUp, onWheel: handleWheel, __source: { fileName: "", lineNumber: 107, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, className: "absolute inset-0 w-full h-full object-cover opacity-50", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[url('/background-grid.png')] opacity-20", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { ref: containerRef, className: "relative w-full h-full transform-3d transition-transform duration-300 ease-out", style: { transform: `perspective(1000px) rotateX(${rotation.x}deg) rotateY(${rotation.y}deg) scale3d(${scale}, ${scale}, ${scale})` }, __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, panels.map((panel, index)=>/*#__PURE__*/ React.createElement("div", { key: panel.id, className: `absolute ${getPanelSize(panel.size)} bg-[#003566] bg-opacity-20 border border-[#00ffff] rounded-lg shadow-lg cursor-pointer transition-all duration-500 ease-out transform-gpu hover:scale-110 ${activePanel === panel.id ? 'active-panel z-10' : ''}`, style: { left: `${Math.cos(index * Math.PI / 4.5) * 40 + 50}%`, top: `${Math.sin(index * Math.PI / 4.5) * 40 + 50}%`, transform: `translateZ(${100 + index * 50}px) rotateX(${15 + index * 10}deg) rotateY(${index * 10}deg)`, boxShadow: '0 0 20px rgba(0, 255, 255, 0.5)' }, onClick: ()=>handlePanelClick(panel.id), __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, renderPanelContent(panel), /*#__PURE__*/ React.createElement("h2", { className: "absolute bottom-2 left-2 text-lg font-bold text-[#00ffff] font-roboto glow-text", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, panel.title)))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 text-[#00ffff] font-roboto", __source: { fileName: "", lineNumber: 141, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "glow-text", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, "システムステータス: オンライン"), /*#__PURE__*/ React.createElement("p", { className: "glow-text", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, "処理中のタスク: 5")), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 flex space-x-2", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, panels.map((panel)=>/*#__PURE__*/ React.createElement("button", { key: panel.id, className: `px-3 py-1 rounded-full text-xs font-bold ${activePanel === panel.id ? 'bg-[#00ffff] text-[#000814]' : 'bg-[#003566] text-[#00ffff]'} hover:bg-[#00ffff] hover:text-[#000814] transition-colors duration-300`, onClick: ()=>handlePanelClick(panel.id), __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, panel.title))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, ` @keyframes float { 0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); } 50% { transform: translateY(-20px) rotateX(10deg) rotateY(10deg); } } .transform-3d { transform-style: preserve-3d; perspective: 1000px; } .active-panel { box-shadow: 0 0 50px 20px rgba(0, 255, 255, 0.7) !important; } .glow-text { text-shadow: 0 0 15px rgba(0, 255, 255, 0.9); } @keyframes pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .glow-text { animation: pulse 3s infinite; } @keyframes spin-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .animate-spin-slow { animation: spin-slow 30s linear infinite; } .animate-spin-reverse { animation: spin-reverse 25s linear infinite; } `)); }