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

machine.js

const timermachine = Machine({
    id: "timer",
    initial: "inactive",
    context: {
        breakLength: 10,
        breakRemaining: 0,
        sessionLength: 10,
        sessionRemaining: 0,
        cooldownLength: 1,
        cooldownRemaining: 0,
    },
    states: {
        inactive: {
            on: {
                START: {
                    target: "sessionCountdown",
                    actions: "setSession"
                },
                ADJUST_BREAK_LENGTH: {
                    target: "inactive",
                    actions: "modifyBreakLength"
                },
                ADJUST_SESSION_LENGTH: {
                    target: "inactive",
                    actions: "modifySessionLength"
                },
            }
        },
        paused: {
            on: {
                RESUME: [{
                    target: "sessionCountdown",
                    cond: "sessionHasTimeRemaining"
                },
                {
                    target: "breakCountdown",
                    cond: "breakHasTimeRemaining",
                }],
                RESET: {
                    target: "inactive",
                    actions: "resetSessionAndBreak",
                },
                ADJUST_SESSION_LENGTH: {
                    target: "paused",
                    actions: ["modifySessionLength", "modifyRemainingSessionLength"],
                },
                ADJUST_BREAK_LENGTH: {
                    target: "paused",
                    actions: ["modifyBreakLength", "modifyRemainingBreakLength"],
                },
            }
        },
        sessionCountdown: {
            on: {
                TICK: [
                    {
                        target: "sessionCountdown",
                        actions: "tickDownSession",
                        cond: "sessionHasTimeRemaining",
                    },
                    {
                        target: "sessionCooldown",
                        actions: "setCooldown",
                        cond: "sessionComplete",
                    }
                ],
                PAUSE: "paused"
            }
        },
        breakCountdown: {
            on: {
                TICK: [
                    {
                        target: "breakCountdown",
                        actions: "tickDownBreak",
                        cond: "breakHasTimeRemaining",
                    },
                    {
                        target: "breakCooldown",
                        actions: "setCooldown",
                        cond: "breakComplete",
                    }
                ],
                PAUSE: "paused"
            }
        },
        sessionCooldown: {
            on: {
                "": {
                    target: "breakCountdown",
                    cond: "cooldownComplete",
                    actions: "setBreak",
                },
                TICK: {
                    target: "sessionCooldown",
                    actions: "tickDownCooldown",
                },
            }
        },
        breakCooldown: {
            on: {
                "": {
                    target: "sessionCountdown",
                    cond: "cooldownComplete",
                    actions: "setSession"
                },
                TICK: {
                    target: "breakCooldown",
                    actions: "tickDownCooldown",
                },
            }
        }
    }
},
{
    actions: {
        resetSessionAndBreak: assign((context) => ({
            breakRemaining: 0,
            sessionRemaining: 0
        })),
        setSession: assign((context) => ({
            sessionRemaining: context.sessionLength,
        })),
        setBreak: assign((context) => ({
            breakRemaining: context.breakLength,
        })),
        setCooldown: assign((context) => ({
            cooldownRemaining: context.cooldownLength,
        })),
        modifySessionLength: assign((context, event) => ({
            sessionLength: context.sessionLength + (("value" in event) ? event.value : 0),
        })),
        modifyRemainingSessionLength: assign((context, event) => ({
            sessionRemaining: (context.sessionRemaining > 0) ? context.sessionRemaining + (("value" in event) ? event.value : 0) : 0,
        })),
        modifyBreakLength: assign((context, event) => ({
            breakLength: context.breakLength + (("value" in event) ? event.value : 0),
        })),
        modifyRemainingBreakLength: assign((context, event) => ({
            breakRemaining: (context.breakRemaining > 0) ? context.breakRemaining + (("value" in event) ? event.value : 0) : 0,
        })),
        tickDownSession: assign((context) => ({
            sessionRemaining: context.sessionRemaining - 1,
        })),
        tickDownBreak: assign((context) => ({
            breakRemaining: context.breakRemaining - 1,
        })),
        tickDownCooldown: assign((context) => ({
            cooldownRemaining: context.cooldownRemaining - 1,
        })),
    },
    guards: {
        sessionHasTimeRemaining: (context) => context.sessionRemaining > 0,
        breakHasTimeRemaining: (context) => context.breakRemaining > 0,
        sessionComplete: (context) => context.sessionRemaining <= 0,
        breakComplete: (context) => context.breakRemaining <= 0,
        cooldownComplete: (context) => context.cooldownRemaining <= 0,
    }
});