SnakeGame component has flattened props

[petertriho]

useSnakeGame has config that is an object:

export type SnakeGameConfig = {
    smoothAnimations: boolean;
    speed: number;
    multiplier: number; // speed mulitplier when key is held
    tileSize: number; // in px
    numOfTiles: { x: number; y: number };
    colors: {
        tile: string;
        border: string;
        snake: string[];
        apple: string;
    };
};

SnakeGame component has flattened props:

export type Props = {
    className?: string;
    numOfTilesX: SnakeGameConfig["numOfTiles"]["x"];
    numOfTilesY: SnakeGameConfig["numOfTiles"]["y"];
    tileColor: SnakeGameConfig["colors"]["tile"];
    borderColor: SnakeGameConfig["colors"]["border"];
    snakeColors: SnakeGameConfig["colors"]["snake"];
    appleColor: SnakeGameConfig["colors"]["apple"];
} & Omit<SnakeGameConfig, "numOfTiles" | "colors">;

Should just make Props the same type as SnakeGameConfig but Storybook does not support nested types (controls) at the moment so we do not get the nice control types like "color" with nested objects