Live Demo 🌍

Data structure

In order to illustrate the problem, I used zeros based 2d array (m*n matrix) to simulate a grid. Where every 2d array value could be 0,1, or 2.

• 0 indicates an empty cell.
• 1 indicates the current position (there's only a 1 value in the grid).
• 2 indicates an obstacle (obstacles are generated randomly at the initial global state).

Example: 7*7 matrix, with the initial position at (0,0).

[
    [0,  0,  0,  0,  0,  0,  0,  0],
    [0,  0,  0,  0,  0,  0,  0,  0],
    [0,  0,  0,  0,  0,  0,  0,  0],
    [0,  0,  0,  0,  0,  0,  0,  0],
    [0,  0,  0,  0,  0,  0,  0,  0],
    [0,  0,  0,  0,  0,  0,  0,  0],
    [0,  0,  0,  0,  0,  0,  0,  0],
    [1,  0,  0,  0,  0,  0,  0,  0],
]

Project structure

src
 ┣ components
 ┃ ┣ buttons
 ┃ ┃ ┗ controlButton.jsx
 ┃ ┣ layout
 ┃ ┃ ┣ container.jsx
 ┃ ┃ ┗ mainWrapper.jsx
 ┃ ┣ map
 ┃ ┃ ┣ map.jsx
 ┃ ┃ ┗ mapCell.jsx
 ┃ ┣ obstacleReporter
 ┃ ┃ ┗ index.jsx
 ┃ ┗ positionViewer
 ┃ ┃ ┗ index.jsx
 ┣ features
 ┃ ┣ control
 ┃ ┃ ┣ buttonsControl.jsx
 ┃ ┃ ┗ index.jsx
 ┃ ┣ KF96
 ┃ ┃ ┗ KF96Slice.js
 ┣ utils
 ┃ ┣ constants
 ┃ ┃ ┗ mapConstants.js
 ┃ ┗ helpers
 ┃ ┃ ┗ planetGridSchema.js
 ┣ App.jsx
 ┣ globalStyle.js
 ┣ main.jsx
 ┗ store.js

Requirements

Make sure you're using 16.13.1 node version. if you're using nvm (node version manager), fire up nvm use or nvm install 16.13.1 && nvm use 16.13.1 to switch to 16.13.1. Otherwise, you could edit the engine attribute in package.json file to unlock the engine version (isn't recommended!).

How to run the app

After cloning the repo. Using your preferred package manager (I use Yarn).

To install dependencies:

git clone https://github.com/momosetti/a-spaceship-to-another-dimension
cd a-spaceship-to-another-dimension
yarn / npm install

For starting the dev server:

yarn dev

For building:

yarn build

For serving static files (after build the project):

yarn perview

Tech Stack used

• SPA library: React.js.

• State management (Redux.js, utility: Redux ToolKit).

• Build tool: Vite.js

• Style: Styled-components.

• Source control version: GIT

• Linting & Formatting: Eslint and Prettier (local Prettier Vscode configuration).

API

Constans

The constants value are stored in /src/utils/constants/mapConstants.js. The following constants are defined:

Constant	Type	Description
INITIAL_POSITION	Object	Initial position {x:0,y:0,cardinalCompassPoint:'N'}.
INITIAL_MAP_DIMENSION	Object	Initial map dimension.
OBSTACLES_NUMBER	Number	Number of obstacle will be generated on the grid.

Functions

The functions are defined in /src/utils/helpers/planetGridSchema.js.

createPlanetGridSchema ⇒ Object

Create a planet grid schema.

createPosition ⇒ Object

Create a planet grid schema position.

insertPosition ⇒ void

Insert a new position in the planet grid schema.

createRandomPosition ⇒ Object

Create a random point on specific gridMatrix dimension.

moveForwardEast(planetSchema, currentPosition, obstacle) ⇒ Object

Move a vehicle forward to the East.

moveForwardWest(planetSchema, currentPosition, obstacle) ⇒ Object

Move a vehicle forward to the West.

moveForwardNorth(planetSchema, currentPosition, obstacle) ⇒ Object

Move a vehicle forward to the North.

moveForwardSouth(planetSchema, currentPosition, obstacle) ⇒ Object

Move a vehicle forward to the South.

createPlanetGridSchema ⇒ Object

Create a planet grid schema.

Returns: Object - Return a grid schema object with gridMatrix, m, and n as object keys.

Param	Type	Description
N	Number	Grid rows number.
M	Number	Grid columns number.
initialPosition	Object	inital position on the grid.
obstacleNumber	Number	Number of obstacle will be created in the grid, default is 0.

createPosition ⇒ Object

Create a planet grid schema position.

Returns: Object - Return object with x,y, and cardinalCompassPoint keys.

Param	Type	Description
x	Number	X axis point.
y	Number	Y axis point.
cardinalCompassPoint	String	Cardinal compass direction, default is 'N'.

insertPosition ⇒ void

Insert a new position in the planet grid schema.

Param	Type	Description
planetGridSchema	Object	Planet grid schema object created by createPlanetGridSchema function.
position	Object	The insertde position.
positionType	Number	The type of point will be inserted. 0 for empty cell, 1 for current position, and 2 for an obstacle.

createRandomPosition ⇒ Object

Create a random point on specific gridMatrix dimension.

Returns: Object - Return new position Object.

Param	Type	Description
n	Number	Grid rows number + 1.
m	Number	Grid columns number +1.
excludedPosition	Object	An excluded point, idealy it's the initial position.

moveForwardEast(planetSchema, currentPosition, obstacle) ⇒ Object

Move a vehicle forward to the East.

Returns: Object - Return object with step and obstacle keys, step stands for how step should the vehicle make, obstacle stands for how many obstacle the vehicle faced.

Param	Type	Description
planetSchema	Object	Planet grid schema.
currentPosition	Object	Current vehicle position.
obstacle	Number	Obstacle counter, it uses for counting the obstacles faced. (don't invoke the function with obstacle parameter).

moveForwardWest(planetSchema, currentPosition, obstacle) ⇒ Object

Move a vehicle forward to the West.

Returns: Object - Return object with step and obstacle keys, step stands for how step should the vehicle make, obstacle stands for how many obstacle the vehicle faced.

Param	Type	Description
planetSchema	Object	Planet grid schema.
currentPosition	Object	Current vehicle position.
obstacle	Number	Obstacle counter, it uses for counting the obstacles faced. (don't invoke the function with obstacle parameter)

moveForwardNorth(planetSchema, currentPosition, obstacle) ⇒ Object

Move a vehicle forward to the North.

Returns: Object - Return object with step and obstacle keys, step stands for how step should the vehicle make, obstacle stands for how many obstacle the vehicle faced.

Param	Type	Description
planetSchema	Object	Planet grid schema.
currentPosition	Object	Current vehicle position.
obstacle	Number	Obstacle counter, it uses for counting the obstacles faced. (don't invoke the function with obstacle parameter)

moveForwardSouth(planetSchema, currentPosition, obstacle) ⇒ Object

Move a vehicle forward to the South.

Returns: Object - Return object with step and obstacle keys, step stands for how step should the vehicle make, obstacle stands for how many obstacle the vehicle faced.

Param	Type	Description
planetSchema	Object	Planet grid schema.
currentPosition	Object	Current vehicle position.
obstacle	Number	Obstacle counter, it uses for counting the obstacles faced. (don't invoke the function with obstacle parameter)