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

machine.js

const fetchMachine = Machine({
    id: 'basketball',
    type: 'parallel',
    context: {
        shot_clock: 24,        
        shot_clock_stop: true,
        game_clock_stop: true,
        game_time: 600,
        is_game_begin: false,
        teams: [
            {
                name: 'GoRental',
                score: 0,
                timeouts: 3
            },
            {
                name: '23point5',
                score: 0,
                timeouts: 3
            }
        ],
        on_play_team: {}
    },
    states: {
        SHOT_CLOCK_TICKER: {
            id: 'shot_clock',
            initial: 'SHOT_CLOCK_STOP',
            states: {
                SHOT_CLOCK_STOP: {
                },
                SHOT_CLOCK_TICKING: { 
                    invoke: {
                        src: () => {
                            return new Promise((resolve) => {
                                setTimeout(() => {
                                    resolve('done')
                                }, 1000)
                            })
                        },
                        onDone: [
                            {
                                target: 'SHOT_CLOCK_CHECKER',
                                actions: assign({ shot_clock: (ctx) => ctx.shot_clock - 1 }),
                                cond: (ctx) => ctx.shot_clock_stop === false 
                            },
                            {
                                target: 'SHOT_CLOCK_STOP'                                
                            }                            
                        ]
                    }
                },
                SHOT_CLOCK_CHECKER: {
                    on: {
                        "": [
                            {
                                cond: (ctx) => ctx.shot_clock < 0,
                                target: ['SHOT_CLOCK_STOP', '#game_start.IDLE'],
                                actions: 'changeTeam',
                            },
                            {
                                target: 'SHOT_CLOCK_TICKING'
                            }                            
                        ]
                    }
                },
                GAME_END: {
                    type: 'final'
                }         
            }
        },
        GAME_START: {
            id: 'game_start',
            initial: 'IDLE',
            states: {                
                IDLE: {
                    on: {
                        JUMP_BALL: {
                            cond: (ctx) => ctx.is_game_begin === false,
                            target: ['PLAY_ON', '#shot_clock.SHOT_CLOCK_TICKING', '#game_clock.GAME_CLOCK_TICKING'],
                            actions: 'playOn'
                        },
                        IN_BOUND: {
                            target: ['PLAY_ON', '#shot_clock.SHOT_CLOCK_TICKING', '#game_clock.GAME_CLOCK_TICKING'],
                            cond: (ctx) => ctx.is_game_begin === true,
                            actions: 'playOn'                            
                        }
                    }
                },
                PLAY_ON: {
                    on: {
                        TEAM_TIMEOUT: {
                            target: 'IDLE',
                            actions: 'teamTimeout',
                            cond: ({ on_play_team }) => on_play_team.timeouts !== 0
                        },
                        OUT_OF_BOUNDS: {
                            target: 'IDLE',
                            actions: 'clockStop'
                        },
                        SHOT_2POINTS: {
                            target: 'IDLE',
                            actions: [
                                assign((ctx) => {
                                    const team = {
                                        ...ctx.on_play_team,
                                        score: ctx.on_play_team.score + 2
                                    }

                                    return {
                                        on_play_team: team,
                                        teams: [
                                            ...ctx.teams.filter(e => e.name !== team.name),
                                            team
                                        ],
                                    }
                                }),
                                'changeTeam'
                            ]
                        },
                        SHOT_3POINTS: {
                            target: 'IDLE',
                            actions: [
                                assign((ctx) => {
                                    const team = {
                                        ...ctx.on_play_team,
                                        score: ctx.on_play_team.score + 3
                                    }

                                    return {
                                        on_play_team: team,
                                        teams: [
                                            ...ctx.teams.filter(e => e.name !== team.name),
                                            team
                                        ],
                                    }
                                }),
                                'changeTeam'
                            ]
                        },                
                        SHOT_MISSED: {
                            actions: assign({ shot_clock: ({ shot_clock }) => {
                                return shot_clock > 14 ? shot_clock : 14
                            }})
                        }
                    }
                },
                GAME_END: {
                    type: 'final'
                }
            }
        },
        GAME_CLOCK_TICKER: {
            id: 'game_clock',
            initial: 'GAME_CLOCK_STOP',
            states: {
                GAME_CLOCK_STOP: {
                },
                GAME_CLOCK_TICKING: { 
                    invoke: {
                        src: () => {
                            return new Promise((resolve) => {
                                setTimeout(() => {
                                    resolve('done')
                                }, 1000)
                            })
                        },
                        onDone: [
                            {
                                target: 'GAME_CLOCK_CHECKER',
                                actions: assign({ game_time: (ctx) => ctx.game_time - 1 }),
                                cond: (ctx) => ctx.game_clock_stop === false 
                            },   
                            {
                                target: 'GAME_CLOCK_STOP'
                            }
                        ]
                    }
                },
                GAME_CLOCK_CHECKER: {
                    on: {
                        "": [
                            {
                                cond: (ctx) => ctx.game_time <= 0,
                                target: ['GAME_END', '#game_start.GAME_END', '#shot_clock.GAME_END']
                            },
                            {
                                target: 'GAME_CLOCK_TICKING'
                            }                            
                        ]
                    }
                },
                GAME_END: {
                    id: 'game_end',
                    type: 'final',
                    entry: ({ teams }) => {
                        const [winning_team] = teams.sort((a, b) => a.score - b.score).reverse()
                        
                        alert(`${winning_team.name} Win!!!`)
                    }
                }                
            }
        }
    }
}, {
    actions: {
        clockStop: assign({
            shot_clock_stop: true,
            game_clock_stop: true
        }),
        teamTimeout: assign((ctx) => { 
            const team = {
                ...ctx.on_play_team,
                timeouts: ctx.on_play_team.timeouts - 1
            }
            return {
                shot_clock_stop: true,
                game_clock_stop: true,
                teams: [
                    ...ctx.teams.filter(e => e.name !== team.name),
                    team
                ],
                on_play_team: team           
            }
        }),
        changeTeam: assign((ctx) => {
            return {
                shot_clock: 24,
                shot_clock_stop: true,
                game_clock_stop: true,
                on_play_team: ctx.teams.find(e => e.name !== ctx.on_play_team.name)             
            }
        }),
        playOn: assign((ctx) => {
            let data = {
                game_clock_stop: false,
                shot_clock_stop: false
            }

            if (!ctx.is_game_begin) {
                data = {
                    ...data,
                    is_game_begin: true,
                    on_play_team: ctx.teams[Math.floor(Math.random() * 2)]
                }
            }

            return data
        })
    }
})