доделан адаптив

src/App.tsx

@@ -19,6 +19,8 @@ function App() {
   // const [isSessionCreated, setIsSessionCreated] = useState(false);
   const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
   const [wsEvent, setWsEvent] = useState<MessageEvent>(null);
+  const [showConnectPopup, setShowConnectPopup] = useState<boolean>(false);
+  const [currWs, setCurrWs] = useState<WebSocket>(null);
   const portAndId = useRef<{port: string, id:string}>()
   let WS: Ws;
   let ws: WebSocket;
@@ -27,12 +29,17 @@ function App() {
   useEffect(() => {
     WS = new Ws();
     ws = WS.ws;
+    setCurrWs(ws)
     WS.WebSokets();
     ws.onmessage = (e) => {
       setWsEvent(e);
       let messages = JSON.parse(e.data)
 
-      switch(messages.message) {        
+      switch(messages.message) {
+        case "SESS_CONNECT":
+            console.log(messages)
+            connectSess(messages.content)
+            break        
         case "EXIS_SESS":
           console.log(`connecting to ${messages.content}`)
           break;
@@ -63,27 +70,47 @@ function App() {
     }
   }, []);
 
-  function createSess() {
-    // if(!isSessionCreated) {
-      // setIsSessionCreated(true);
+  function createSess() {   
       ws.send('{ "message" : "NEW_SESS" }');
-    // } else {
-
-    // }
-    
   }
 
-  function connectSess() {
-    window.open('http://' + ConnectData.pixelIp + ":" + portAndId.current.port, '_blank');
+  function connectSess(port?: string) {
+    if(port) {
+      window.open('http://' + ConnectData.pixelIp + ":" + port, '_blank');
+    } else {
+      window.open('http://' + ConnectData.pixelIp + ":" + portAndId.current.port, '_blank');
+    }    
+  }
+  
+  function openConnectPopup(accessCode: string) {
+    console.log(accessCode);
+    setShowConnectPopup(true);
+  }
+  
+  function connectToExistSess(accessCode: string) {
+    // window.open(ConnectData.url + `:${accessCode}`, "_self");
+    currWs.send(`{ "message" : "SESS_CONNECT", "content" : "${accessCode}" }`)
   }
 
   return (
     <div className="App">
       <ContextWs.Provider value={{ws: ws, wsEvent: wsEvent}}>
         <ContextLang.Provider value={{lang: currentLang, setLang: setCurrentLang}} >
-          {/* <MainPart createSess={createSess} connectSess={connectSess}/>
-          <Footer /> */}
-          <ConnectWindow />
+          {
+            !showConnectPopup
+            ? <>
+              <MainPart 
+                createSess={createSess} 
+                // connectSess={connectSess}
+                connectSess={openConnectPopup}
+              />
+              <Footer />
+            </>
+            : <ConnectWindow
+              startNewDemo={connectSess}
+              connectToExistDemo={connectToExistSess}
+            />
+          }
         </ContextLang.Provider>
       </ContextWs.Provider>
     </div>

src/components/connectWindow/connectWindow.css

@@ -7,7 +7,7 @@
     justify-content: center;
 }
 
-.background-image {
+.background-image-popup {
     z-index: -1;
     top: 0;
     left: 0;
@@ -18,7 +18,7 @@
     background-color: #B196AF;
 }
 
-.background-image::after {
+.background-image-popup::after {
     content: '';
     position: absolute;
     width: 100%;

src/components/connectWindow/connectWindow.tsx

@@ -3,35 +3,47 @@ import './connectWindow.css';
 import { Popup } from "./popup/popup";
 import logo from './LogoFull.svg';
 
-export const ConnectWindow:React.FC = React.memo(() => {
+type TProps = {
+    startNewDemo: () => void
+    connectToExistDemo: (accessCode: string) => void
+}
+
+export const ConnectWindow:React.FC<TProps> = React.memo((props) => {
     const [currentView, setCurrentView] = useState<number>(0);
+    const [accessCode, setAccessCode] = useState<string>('');
 
     function connectToNew() {
-
+        props.startNewDemo();
     }
 
-    function connectToExisting() {
+    function openPopupToConnectExistSess() {
         setCurrentView(1)
     }
 
+    function connectToExistSess() {
+        props.connectToExistDemo(accessCode);
+    }
+
     function backToSelect() {
         setCurrentView(currentView - 1)
     }
 
     return <div className="connect-window-container">
-        <div className="background-image"></div>
+        <div className="background-image-popup"></div>
         {
             currentView === 0
             ? <Popup 
                 logo={logo}
                 type="title-button"
                 onClickFirst={connectToNew}
-                onClickSecond={connectToExisting}
+                onClickSecond={openPopupToConnectExistSess}
             />
             : <Popup 
-                onClickFirst={connectToNew}
+                onClickFirst={connectToExistSess}
                 onClickChange={backToSelect}
-                type='title-input-button'                
+                type='title-input-button'
+                accessCode={accessCode}
+                setAccessCode={setAccessCode}
             />
         }
         

src/components/connectWindow/popup/popup.tsx

@@ -8,6 +8,8 @@ type TProps = {
     onClickSecond?: () => void
     onClickChange?: () => void
     type: 'title-button' | 'title-input-button'
+    accessCode?: string
+    setAccessCode?: React.Dispatch<React.SetStateAction<string>>
 }
 
 export const Popup:React.FC<TProps> = React.memo((props) => {
@@ -31,9 +33,9 @@ export const Popup:React.FC<TProps> = React.memo((props) => {
                 </div>
             </div>
             : <div className="popup-title-input-container">
-                <span className="popup-title-input-title">Укажите код подключения или вставьте ссылку</span>
+                <span className="popup-title-input-title">Укажите код подключения <br/> или вставьте ссылку</span>
                 <div className="popup-title-input-input-container">
-                    <input type={'text'} className='popup-title-input-input' />
+                    <input type={'text'} className='popup-title-input-input' value={props.accessCode} onChange={e => props.setAccessCode(e.target.value)} />
                     <PinkButton textButton="Продолжить" onClick={props.onClickFirst} width='100%' />
                     <span className="popup-line"></span>
                 </div>

src/components/mainPart/mainPart.tsx

@@ -15,7 +15,8 @@ import { ContextWs } from "../../ContextWs";
 
 type TProps = {
     createSess: () => void,
-    connectSess: () => void
+    // connectSess: () => void
+    connectSess: (accessCode: string) => void
 }
 
 type FormData = {
@@ -133,8 +134,8 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
     }
 
     function onClickConnect(accessCode: string) {
-        console.log(accessCode)
-        // props.connectSess()
+        // console.log(accessCode)
+        props.connectSess(accessCode)
         // ws.send('{ "message" : "NEW_SESS" }');
     }