example1 ui

example1-ui.tsx

function App() {

  const [state, send] = useMachine(machine)

  return (
    < div
      style={{
        display: 'grid',
        gridTemplateColumns: '36px 36px 36px',
        gridTemplateRows: '36px 36px 36px 36px 36px',
        width: 108,
        height: 180,
        margin: 'auto auto',
      }
      }
    >
      <p
        children={
          pipe(
            state.context.result,
            fold(
              () => `${state.matches('X') ? 'X' : 'O'} Turn`,
              r => (r.type === 'Draw')
                ? 'Draw'
                : `${r.player} Won`
            )
          )
        }
        style={{
          gridArea: '1/1/1/-1',
          justifySelf: 'center',
          alignSelf: 'center',
          margin: 0,
          fontWeight: 700,
        }}
      />
      <img
        src={grid}
        height={108}
        width={108}
        alt="grid"
        draggable={false}
        style={{
          gridColumn: '1/3',
          gridRow: '2/4',
          zIndex: 0,
        }}
      />
      {
        state.context.board.map(
          (cell) => (
            <div
              key={cell.row.toString().concat(cell.column.toString())}
              style={{
                gridColumnStart: cell.row,
                gridColumnEnd: cell.row,
                gridRowStart: cell.column + 1,
                gridRowEnd: cell.column + 1,
                zIndex: 2,
                backgroundImage:
                  (cell.state.kind === 'Played')
                    ? `url(${(cell.state.player === 'X') ? playerX : playerO})`
                    : 'none',
                backgroundSize: '80%',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center',
              }}
              onClick={() => {
                send({ type: 'PLAYED', payload: { row: cell.row, column: cell.column } })
              }}
            />
          )
        )
      }
      {
        pipe(
          state.context.result,
          chain(
            x => x.type === 'Draw'
              ? none
              : some(x)
          ),
          fold(
            () => null,
            res => (
              <img
                src={RESULT_TO_FIGURE[res.type]}
                height={108}
                width={108}
                alt="grid"
                draggable={false}
                style={{
                  gridArea: '2/1/4/3',
                  zIndex: 0,
                }}
              />
            )
          )
        )
      }
      {
        pipe(
          state.context.result,
          fold(
            () => null,
            () =>
              (
                <button
                  className="btn-restart-game"
                  style={{
                    gridArea: '5/1/6/4',
                  }}
                  children="Restart Game"
                  onClick={() => {
                    send({ type: 'RESTARTED' })
                  }}
                />
              )
          )
        )
      }
    </div >
  );
}