Roomba Grid

gistfile1.tsx

import React, { useState } from 'react';

import './RoombaGrid.css';

// 90 right | 180 down | 270 left | 0 up
enum Direction {
  'up' = 0,
  'right' = 90,
  'down' = 180,
  'left' = 270,
}

//  direction iteration
// right + 1 | down + 10 | left - 1 | up - 10
// had to give this obj key a type of number
const iteratorMap: { [key: number]: number } = {
  [Direction.right]: 1,
  [Direction.down]: 10,
  [Direction.left]: -1,
  [Direction.up]: -10,
};

const nintyDegrees = 90;
const startingCell = 0;

const Roomba = ({ direction = nintyDegrees }: any) => (
  <div style={{ transform: `rotate(${direction}deg)` }}>👆</div>
);

const roombaGrid = [...new Array(100)].map((_, index) => index);

const getDirection = (direction: number) => {
  direction =
    direction === Direction.left ? Direction.up : direction + nintyDegrees;

  return direction;
};

const getIterator = (direction: number) => iteratorMap[direction];

const hasNumber = (match: number) => (intiger: number) =>
  intiger
    .toString()
    .split('')
    .some((number) => Number(number) === match);

const hasNine = hasNumber(9);
const hasZero = hasNumber(0);

const checkBounds = (
  position: number,
  prevPosition: number,
  direction: number
) => {
  const upperLowerBounds =
    position < startingCell || position > roombaGrid.length - 1;

  const rightSideBounds =
    hasNine(prevPosition) && direction === Direction.right;
  const leftSideBounds = hasZero(prevPosition) && direction === Direction.left;

  return upperLowerBounds || rightSideBounds || leftSideBounds;
};

const RoombaGrid = () => {
  const [roombaPosition, setRoombaPosition] = useState(startingCell);
  const [roombaDirection, setRoombaDirection] = useState(nintyDegrees);

  const handleMoveForward = (direction: number, position: number) => {
    const iterator = getIterator(direction);
    const newPosition = position + iterator;
    const isOutOfBounds = checkBounds(newPosition, position, direction);

    if (isOutOfBounds) {
      handleTurnRight();
    } else {
      setRoombaPosition(newPosition);
    }
  };

  const handleTurnRight = () => {
    setRoombaDirection(getDirection(roombaDirection));
  };

  return (
    <>
      <button
        onClick={() => handleMoveForward(roombaDirection, roombaPosition)}
      >
        Move Forward
      </button>
      <button onClick={() => handleTurnRight()}>Turn Right</button>
      <ul className="RoombaGrid">
        {roombaGrid.map((cell) => (
          <li key={cell}>
            {cell === roombaPosition ? (
              <Roomba direction={roombaDirection} />
            ) : null}
            {cell}
          </li>
        ))}
      </ul>
    </>
  );
};

export default RoombaGrid;