smart-monopoly/src/web/Startup.tsx

import React, {Component} from "react";
import {
    Backdrop,
    Box,
    CircularProgress,
    Fade,
    Modal,
    Stack,
    Typography,
    Button,
    Dialog,
    DialogTitle, DialogContent, DialogContentText, DialogActions
} from "@mui/material";
import {FunctionTest} from "../IPCConstants";


interface StartupState {
    statusTxt: string,
    open: boolean,
    nextStep: boolean,
    cloudConnect: boolean,
    connectionIssue: boolean,
    openWifiQuestion: boolean,
}

export default class Startup extends Component<{}, StartupState> {
    constructor(props: {}) {
        super(props);
        this.state = {
            statusTxt: "Smart-Monopoly wird gestartet...",
            open: false,
            nextStep: false,
            cloudConnect: false,
            connectionIssue: false,
            openWifiQuestion: false
        };
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState((prevState) => ({
                ...prevState,
                open: true,
                statusTxt: "Möchten Sie CloudConnect+ nutzen?"
            }));
            this.cloudDecision(true).then();
        }, 1)
    }

    componentWillUnmount() {

    }

    connectToCloud = () => {

    }

    checkForNext = () => {
        if(this.state.cloudConnect)
        {
            // Connect to cloud
        }
        else
        {
            // Just start
        }
    }

    handleClose = () => this.setState((prevState) => ({
        ...prevState,
        open: false
    }));

    style = {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: 600,
        bgcolor: 'background.paper',
        border: '2px solid #0000',
        boxShadow: 24,
        p: 4,
    };

    async cloudDecision(decision: boolean) {
        this.handleClose();
        this.setState((prevState) => ({
            ...prevState,
            cloudConnect: decision,
            openWifiQuestion: false
        }));


        if(decision) {
            this.setState((prevState) => ({
                ...prevState,
                statusTxt: "WiFi-Verbindung wird hergestellt..."
            }));

            let status = (await window.api.request("FUNCTION_TEST", {})).data as FunctionTest;
            if(!status.hasInternet)
            {
                this.setState((prevState) => ({
                    ...prevState,
                    openWifiQuestion: true
                }));
            }
            else
            {
                this.checkForNext();
            }
        }
        else {
            this.setState((prevState) => ({
                ...prevState,
                statusTxt: "Ready to go!"
            }));
            this.checkForNext();
        }
    }

    render() {
        return <div className="startup">
            <Dialog
                open={this.state.openWifiQuestion}
                onClose={null}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
            >
                <DialogTitle id="alert-dialog-title">
                    Keine Internetverbindung!
                </DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                        Es wurde keine Internetverbindung erkannt.<br/><br/>
                        <strong>Möchten Sie eine WLAN-Verbindung einrichten?</strong>
                        <br/><i>Andernfalls können Sie SmartMonopoly offline nutzen.</i>
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => this.cloudDecision(false)}>
                        Offline nutzen
                    </Button>
                    <Button onClick={() => {window.app.toggleWiFiSettings(true)}} autoFocus>Einrichten</Button>
                </DialogActions>
            </Dialog>

            <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.cloudDecision(true)}>Ja</Button>
                            <Button variant="contained" onClick={() => this.cloudDecision(false)}
                                    color="error">Nein</Button>
                        </Typography>
                    </Box>
                </Fade>
            </Modal>
            <Stack alignItems="center">
                <h1>Willkommen!</h1>
                <br/>
                <p>{this.state.statusTxt}</p>
                <br/>
                <CircularProgress/>
            </Stack>
        </div>

    }

}