marius/floppy-venture
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix modal open logic and placement

Browse Source
This commit is contained in:
Marius Unsel 2026-02-23 00:55:15 +01:00
parent 795c4ffa63
commit 33876d44d5
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/GameScreen.tsx
View File

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