From 73f0910d91ffa7afaeb0df47a902cb1b4e3a645a Mon Sep 17 00:00:00 2001
From: koplenov <koplenov@gmail.com>
Date: Sun, 5 Apr 2026 05:41:23 +0300
Subject: [PATCH] link menus to windows

---
 src/App.tsx                | 126 +++++++++++++++----------------------
 src/cases/CybersecMenu.tsx |  18 ++++--
 2 files changed, 65 insertions(+), 79 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d33cabe..3629e06 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,91 +1,69 @@
 import React, { useState } from 'react';
-// import Day1Desktop from './Day1Desktop';
-import MainApp from './MainApp';
-import ChatterboxTTS from './components/deepfake/ChatterboxTTS';
+import CybersecMenu from './cases/CybersecMenu';
 import Case1Desktop from './cases/Case1Desktop';
 import Case2Desktop from './cases/Case2Desktop';
 import Case3Desktop from './cases/Case3Desktop';
 import Case4Desktop from './cases/Case4Desktop';
+import ChatterboxTTS from './components/deepfake/ChatterboxTTS';
 import MyQuize from './components/MyQuize';
 import CyberSecurityArticle from './components/CyberSecurityArticle';
 
 export type WallpaperType = 'xp' | 'win7' | 'win10';
 
-
+type OverlayType = 'case1' | 'case2' | 'case3' | 'case4' | 'deepfake' | 'quiz' | 'wiki' | null;
 
 const App: React.FC = () => {
-//   const [day1Complete, setDay1Complete] = useState(false);
-//   if (!day1Complete) {
-//     return <Day1Desktop onComplete={() => setDay1Complete(true)} />;
-//   }
-	// return <ChatterboxTTS/>
+  const [overlay, setOverlay] = useState<OverlayType>(null);
 
-	const [showCase1, setShowCase1] = useState(false);
-	const [showCase2, setShowCase2] = useState(false);
-	const [showCase3, setShowCase3] = useState(false);
-	const [showCase4, setShowCase4] = useState(false);
-	const [showWiki, setShowWiki] = useState(false);
-	const [showQuiz, setShowQuiz] = useState(false);
-	const [showDeepfake, setDeepfake] = useState(false);
+  const close = () => setOverlay(null);
 
-  return (<div>
-	<h1>Хайо</h1>
-	<button onClick={()=> { setShowQuiz(true) }}>Квиз блок</button>
-	<button onClick={()=> { setDeepfake(true) }}>Deepfake блок</button>
-	<button onClick={()=> { setShowWiki(true) }}>Wiki блок</button>
-	<button onClick={()=> { setShowCase1(true) }}>Первый блок</button>
-	<button onClick={()=> { setShowCase2(true) }}>Второй блок</button>
-	<button onClick={()=> { setShowCase3(true) }}>Третий блок</button>
-	<button onClick={()=> { setShowCase4(true) }}>Четвертый блок</button>
-	{showWiki && (
-		<div>
-			<CyberSecurityArticle/>;
-		</div>
-	)}
-	{showCase1 && (
-		<div>
-			<Case1Desktop onComplete={() => setShowCase1(false)} />;
-		</div>
-	)}
-	{showCase2 && (
-		<div>
-			<Case2Desktop onComplete={() => setShowCase2(false)} />;
-		</div>
-	)}
-	{showCase3 && (
-		<div>
-			<Case3Desktop onComplete={() => setShowCase3(false)} />;
-		</div>
-	)}
-	{showCase4 && (
-		<div>
-			<Case4Desktop onComplete={() => setShowCase4(false)} />;
-		</div>
-	)}
-	
-	{showQuiz && (
-		<div>
-			<MyQuize/>;
-		</div>
-	)}
-	{showDeepfake && (
-		<div>
-			<ChatterboxTTS/>;
-		</div>
-	)}
-  </div>);
+  const handleSelectLevel = (level: number | string) => {
+    const map: Record<string | number, OverlayType> = {
+      1: 'case1',
+      2: 'case2',
+      3: 'case3',
+      4: 'case4',
+      'deepfake': 'deepfake',
+    };
+    setTimeout(() => setOverlay(map[level] ?? null), 1200);
+  };
+
+  return (
+    <div style={{ width: '100vw', height: '100vh', overflow: 'hidden', position: 'relative' }}>
+      <CybersecMenu
+        onSelectLevel={handleSelectLevel}
+        onOpenWiki={() => setTimeout(() => setOverlay('wiki'), 1200)}
+        onOpenQuiz={() => setTimeout(() => setOverlay('quiz'), 1200)}
+      />
+
+      {overlay && (
+        <div style={{
+          position: 'fixed', inset: 0, zIndex: 50000,
+          background: 'rgba(0,0,0,0.85)',
+          overflowY: 'auto',
+        }}>
+          <div style={{ position: 'relative', minHeight: '100%' }}>
+            <button onClick={close} style={{
+              position: 'sticky', top: 16, float: 'right', marginRight: 24, zIndex: 1,
+              background: 'rgba(0,0,0,0.8)', border: '1px solid #00FF41',
+              color: '#00FF41', fontFamily: 'Orbitron, monospace',
+              fontSize: 12, letterSpacing: 2, padding: '6px 14px',
+              cursor: 'pointer',
+            }}>✕ ЗАКРЫТЬ</button>
+            <div style={{ clear: 'both' }} />
+
+            {overlay === 'case1' && <Case1Desktop onComplete={close} />}
+            {overlay === 'case2' && <Case2Desktop onComplete={close} />}
+            {overlay === 'case3' && <Case3Desktop onComplete={close} />}
+            {overlay === 'case4' && <Case4Desktop onComplete={close} />}
+            {overlay === 'deepfake' && <ChatterboxTTS />}
+            {overlay === 'quiz' && <MyQuize />}
+            {overlay === 'wiki' && <CyberSecurityArticle />}
+          </div>
+        </div>
+      )}
+    </div>
+  );
 };
 
-/*
-const App: React.FC = () => {
-//   const [day1Complete, setDay1Complete] = useState(false);
-
-//   if (!day1Complete) {
-    // return <Day1Desktop onComplete={() => setDay1Complete(true)} />;
-//   }
-	// return <ChatterboxTTS/>
-//   return <MainApp />;
-  return <MainApp />;
-};*/
-
 export default App;
diff --git a/src/cases/CybersecMenu.tsx b/src/cases/CybersecMenu.tsx
index 73fcfbf..7c985cf 100644
--- a/src/cases/CybersecMenu.tsx
+++ b/src/cases/CybersecMenu.tsx
@@ -8,7 +8,13 @@ interface Notification {
   removing: boolean;
 }
 
-const CybersecMenu: React.FC = () => {
+interface CybersecMenuProps {
+  onSelectLevel?: (level: number | string) => void;
+  onOpenWiki?: () => void;
+  onOpenQuiz?: () => void;
+}
+
+const CybersecMenu: React.FC<CybersecMenuProps> = ({ onSelectLevel, onOpenWiki, onOpenQuiz }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const animFrameRef = useRef<number>(0);
   const smokeOffsetRef = useRef(0);
@@ -36,16 +42,18 @@ const CybersecMenu: React.FC = () => {
       'deepfake': 'Voice deepfake – AI-generated speech',
     };
     showNotification(`>> LEVEL ${level} SELECTED`, levelNames[level]);
-  }, [showNotification]);
+    onSelectLevel?.(level);
+  }, [showNotification, onSelectLevel]);
 
   const openWiki = useCallback(() => {
     showNotification('>> ACCESSING WIKI', 'Security knowledge base loading...');
-  }, [showNotification]);
+    onOpenWiki?.();
+  }, [showNotification, onOpenWiki]);
 
   const openQuiz = useCallback(() => {
     showNotification('>> INITIATING QUIZ', 'Test your skills module loading...');
-	
-  }, [showNotification]);
+    onOpenQuiz?.();
+  }, [showNotification, onOpenQuiz]);
 
   // Keyboard navigation
   useEffect(() => {