Generated by XState Viz: https://xstate.js.org/viz

machine.js

const machine = Machine({
    id: "menu",
    initial: "initialize",
    states: {
        initialize: {
            on: {
                CONNECTION: [{
                    cond: (ctx, { lan } = false) => lan,
                    actions: assign({
                        lan: true,
                    }),
                    target: "offline",
                }, {
                    target: "booting"
                }]
            }
        },

        booting: {
            initial: "booting",

            on: {
                LOBBY: "online",
            },

            states: {
                booting: {
                    on: {
                        BOOTED: [{
                            cond: (ctx, { ftue } = false) => ftue,
                            target: "ftue"
                        }, {
                            cond: (ctx, { banned } = false) => banned,
                            target: "banned",
                        }, {
                            target: "continue",
                        }]
                    }
                },

                ftue: {},

                banned: {},

                continue: {
                    on: {
                        CLICK: {
                            actions: send("LOBBY"),
                        },
                    },
                },
            },
        },

        offline: {
            initial : "lobby",

            states : {
                lobby : {
                    on: {
                        LOADOUT: "loadout",
                        READY: "connecting",
                    },
                },

                loadout : {
                    on : {
                        CANCEL : "lobby",
                        CONFIRM : "lobby",
                    },
                },

                connecting : {},
            },
        },

        online : {
            initial : "lobby",

            states : {
                lobby : {
                    on : {
                        COLLECTIONS : "collections",
                        BATTLEPASS : "battlepass",
                        STORE : "store",
                    },
                },

                battlepass : {},
        
                collections : {},
        
                store : {},

                matchmaking: {},

                loadout : {
                    on : {
                        CANCEL : "lobby",
                        CONFIRM : "lobby",
                    },
                },
        
                connecting: {},
            }
        },
    },
});