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

machine.js

// https://xstate.js.org/viz/?gist=0954f3bbb0b4cb2c98d486540a7f4ef2
// import {assign, Machine} from 'xstate';

// interface DraftContext {
//   currentUser: string;
//   users: string[];
//   elapsed: number;
//   duration: number;
//   round: number;
//   interval: number;
// }


// interface DraftStateSchema {
//   states: {
//     active: {
//       states: {
//         selecting: {};
//         saving: {};
//         waiting: {};
//       }
//     }
//     closed: {};
//   };
// }

// type DraftEvents =
//   | { type: 'SELECT'; value: { user: string, queen: string } }
//   | { type: 'TICK' };


const addQueenToUser = assign({
  users: (ctx, event) => {
    return ctx.users;
  }
});

const timerMachine = Machine({
  initial: 'selecting',
  context: {
    elapsed: 0,
    duration: 30,
    interval: 1
  },
  states: {
    selecting: {
      invoke: {
        src: context => cb => {
          const interval = setInterval(() => {
            cb('TICK');
          }, 1000 * context.interval);

          return () => {
            clearInterval(interval);
          };
        }
      },
      on: {
        '': {
          target: 'done',
          cond: context => {
            return context.elapsed >= context.duration;
          }
        },
        TICK: {
          actions: assign({
            elapsed: context => +(context.elapsed + context.interval).toFixed(2)
          })
        }, 
        SELECTED: {
          target: 'done',
          actions: assign({
            elapsed: ctx => ctx.duration
          })
        }
      }
    },
    done: {
      on: {
        '': {
          cond: context => context.elapsed < context.duration
        }
      }
    }
  },
  on: {
    'DURATION.UPDATE': {
      actions: assign({
        duration: (_, event) => event.value
      })
    },
    RESET: {
      actions: assign({
        elapsed: 0
      })
    }
  }
});