Update

src/web/Startup.tsx

@@ -1,34 +1,120 @@
-import {Component} from "react";
+import React, {Component} from "react";
 import GameSetup from "./GameSetup";
+import {Backdrop, Box, CircularProgress, Fade, Modal, Stack, Typography, Button} from "@mui/material";
 
 
 interface StartupState {
-    started: boolean,
+    statusTxt: string,
+    open: boolean,
 }
 
 export default class Startup extends Component<{}, StartupState> {
     constructor(props: {}) {
         super(props);
-        this.state = {started: false};
+        this.state = {
+            statusTxt: "Smart-Monopoly wird gestartet...",
+            open: false,
+
+        };
     }
 
     componentDidMount() {
-
+        setTimeout(() => {
+            this.setState((prevState) => ({
+                ...prevState,
+                open: true,
+                statusTxt: "Möchten Sie CloudConnect+ nutzen?"
+            }))
+        }, 2000)
     }
 
     componentWillUnmount() {
 
     }
 
+    handleOpen = () => this.setState((prevState) => ({
+        ...prevState,
+        open: true
+    }));
+
+    handleClose = () => this.setState((prevState) => ({
+        ...prevState,
+        open: false
+    }));
+
+    style = {
+        position: 'absolute' as 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 400,
+        bgcolor: 'background.paper',
+        border: '2px solid #000',
+        boxShadow: 24,
+        p: 4,
+    };
+
+    wifiDecision(decision: boolean) {
+        this.handleClose();
+
+
+        if(decision) {
+            this.setState((prevState) => ({
+                ...prevState,
+                statusTxt: "WiFi-Verbindung wird hergestellt..."
+            }));
+            window.app.showWiFiSettings();
+        }
+        else {
+            this.setState((prevState) => ({
+                ...prevState,
+                statusTxt: "Ready to go!"
+            }));
+        }
+    }
+
     render() {
-        if(!this.state.started)
-            return <div className="startup">
+        return <div className="startup">
+            <Modal
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                open={this.state.open}
+                onClose={null}
+                closeAfterTransition
+                slots={{backdrop: Backdrop}}
+                slotProps={{
+                    backdrop: {
+                        timeout: 500,
+                    },
+                }}
+            >
+                <Fade in={this.state.open}>
+                    <Box sx={this.style}>
+                        <Typography id="transition-modal-title" variant="h6" component="h2">
+                            CloudConnect+ nutzen?
+                        </Typography>
+                        <Typography id="transition-modal-description" sx={{mt: 2}}>
+                            Möchten Sie für diese Sitzung CloudConnect+ aktivieren, um das mitspielen mit Mobilen
+                            Endgeräten zu ermöglichen?
+                            <br/>
+                            <i>Dafür wird eine WiFi-Verbindung hergestellt</i>
+                            <br/>
+                            <br/>
+                            <Button variant="contained" onClick={() => this.wifiDecision(true)}>Ja</Button>
+                            <Button variant="contained" onClick={() => this.wifiDecision(false)}
+                                    color="error">Nein</Button>
+                        </Typography>
+                    </Box>
+                </Fade>
+            </Modal>
+            <Stack alignItems="center">
                 <h1>Willkommen!</h1>
-                <p>Smart Monopoly wird gestartet...</p>
-                {!this.state.started ? <span className="loader"></span> : null}
-            </div>
-        else
-            return <h1>Willkommen!</h1>
+                <br/>
+                <p>{this.state.statusTxt}</p>
+                <br/>
+                <CircularProgress/>
+            </Stack>
+        </div>
 
     }