fix modal open logic and placement

src/components/GameScreen.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState, useRef, useEffect } from 'react';
-import { createPortal } from 'react-dom';
 import Modal from 'react-responsive-modal';
+import 'react-responsive-modal/styles.css';
 import LevelScene from "./LevelScene";
 import Editor from "./Editor";
 import { levels, LevelInitializer } from "../game/levels";
@@ -17,12 +17,13 @@ import { setLevel, nextLevel } from "../store/level/slice";
 import { RESET_EXECUTION } from "../store/executionState/types";
 
 const MODAL_STYLES = {
-    'overlay': { background: '#11111166' },
+    'overlay': { background: '#11111166', zIndex: 99999 },
     'modal': {
         background: '#555',
         width: '40rem',
         height: '25rem',
-        borderRadius: '1rem'
+        borderRadius: '1rem',
+        zIndex: 99999
     },
     'closeButton': {},
     'closeIcon': {}
@@ -86,6 +87,7 @@ const WonMessage = ({ nextRoute }) => {
 }
 
 const GameScreen = ({ nextLevel, won, open, openModal, closeModal, setLevel, resetState }) => {
+    const modalContainerRef = useRef<HTMLDivElement>(null);
     // first set level to levelname in url params
     const { name } = useParams();
     let levelIdx = levels.findIndex((l) => name == l.name)
@@ -98,39 +100,39 @@ const GameScreen = ({ nextLevel, won, open, openModal, closeModal, setLevel, res
     let nextRoute = levelIdx === levels.length - 1 ? '/won' : '/level/' + levels[levelIdx + 1].name;
 
     let [idxMsgs, setMsgIdx] = useState(level.introMessages && level.introMessages.length > 0 ? 0 : null);
-    console.log("WON:", won)
+    console.log("GameScreen():won=", won)
     
     // Auto-open modal for intro messages when level starts or when won
     useEffect(() => {
       // Auto-open modal for intro messages when level starts
       if (level.introMessages && level.introMessages.length > 0 && idxMsgs !== null && !open && !won) {
         openModal();
+        console.log("GameScreen():autoopen")
       }
       
       // Auto-open modal when won
       if (won && !open) {
         openModal();
+        console.log("GameScreen():autoopen-won")
       }
-    }, [idxMsgs, won, open, level.introMessages]); // Proper dependencies
+    }, [idxMsgs, won, level.introMessages]); // Proper dependencies
     
     useEffect(() => game.init(level), []); // only called at creation
 
     return (
-        <div className="game">
+        <div className="game" ref={modalContainerRef}>
             <LevelScene level={level}></LevelScene>
             <Editor level={level}></Editor>
-            {createPortal(
-                <Modal
-                    open={open}
-                    onClose={() => closeModal()} // Only close, no resetState
-                    styles={MODAL_STYLES}
-                    center>
-                    {won ? <WonMessage nextRoute={nextRoute} />
-                        : (level.introMessages !== null) ? <IntroMessage name={level.name} message={level.introMessages[idxMsgs]} /> : ""
-                    }
-                </Modal>,
-                document.body
-            )}
+            <Modal
+                open={open}
+                onClose={() => closeModal()}
+                styles={MODAL_STYLES}
+                center
+                container={modalContainerRef.current}>
+                {won ? <WonMessage nextRoute={nextRoute} />
+                    : (level.introMessages !== null) ? <IntroMessage name={level.name} message={level.introMessages[idxMsgs]} /> : ""
+                }
+            </Modal>
         </div >
     )
 }