/jsfoo-frontend

Primary LanguageJavaScript

JSFOO FRONTEND ASSIGNMENT

SUPER EFFICIENT DRAWING BOARD

Why should I do it?

  1. The best solution will receive an Amazon Kindle

  1. The second best solution will receive a Sony Headphone

Ok... But what am I supposed to do?

COOL DRAW

  1. Implement a basic canvas
  2. Implement the logic to draw lines on this canvas

DISTANCE CALCULATOR

  1. Implement a logic to calculate the amount of distance covered while drawing on the canvas.
  2. Consider each pixel to be 1 meter.

REPLAY

  1. Implement a logic to replay the drawing events.
  2. This should be time based. Supposed the second pixel was drawn on the canvas after 1 second of the first pixel drawn, then this should also be reflected in the replay as well.
  3. Store the events in a way that you require the least amount of data to replay the whole drawing.
  4. This data should be as compressed as possible.
  5. The data should be as minimal as possible.

Ex: Suppose to draw a line, you used events in the following order

1. mouseDown
2. drag(s)
3. mouseUp

Example:

[
  {
    type: 'down',
    x-point: 0,
    y-point: 0
  },
  {
    type: 'drag',
    x-point: 1,
    y-point: 0
  },
  {
    type: 'drag',
    x-point: 2,
    y-point: 0
  },
  {
    type: 'up',
    x-point: 2,
    y-point: 0
  }
]

Then you need to reduce the overall size of the array, and the size of the individual objects.

Hmm... And how will you evaluate it?

  1. The code quality.
  2. The accuracy of the various logics involved.
  3. The optimization of the logic to compress the data required to replay the session.

But how will I submit my solution?

  1. Raise a pull request (PR) for this repository

How will you guys contact me?

  1. Mention your details here:
    1. Name:
    2. Email:
    3. Contact Number:
    4. Company Name: