Easy GUI module to use for your defend the base logic

How to use ?

3 easy steps

Copy the complete gui module from here or bottom of the page

To initialize the library do this

var boardSize = 10;
var missileCount = 8;

Radar.init(boardSize, missileCount);

To draw your friend, enemy and missile objects, pass them all as an array of objects to draw function thats it.

var boardSize = 10;
var missileCount = 8;

Radar.init(boardSize, missileCount);

// Assemble all the objects in a single array
// and pass that array to draw function

function myAnimationLoop(){
  Radar.draw(objectsArray);
}

A sample demo code

Customization

This GUI module is really flexible and customisable

To customise the created canvas we have to pass an optional 3rd argument to the Radar.init() method as an object with similar property names

Radar.init(boardSize, missileCount, {
  "parent": document.getElementById('canvasDiv'),
  "backgroundColor": "white",
  "textColor": "brown",
  "gridColor": "red",
  "width": 800,
  "height": 800,
});

parent:-

In parent set the container element object where you want this canvas to fit, it ll automatically take the width and height of the container, so no need to pass width and height additionally
If parent property is left out then it ll make document.body as the parent by default and create a canvas of current screen size

backgroundColor, textColor and gridColor:-

These properties are self explanatory, pass them any valid color string

width and height:-

Set your own width and height for the canvas in pixels
Can be useful if you want to work with large boardSize value and do not want small cells

Conventions used ?

All the objects(missiles, enemy, friend) in passed array to Radar.draw() must have atleast these properties, or else they wont show up in grid and might throw errors, so conform your objects to these property names before passing.

{
  "id":"E1",
  "currentSize": 2,
  "type": "enemy",
  "start":{
    "x":1,
    "y":1
  },
  "end": {
    "x":2,
    "y":2
  }
}

id (optional):-

E1, E2, E3 ... and so on for enemy objects in the array
F1, F2, F3 ... and so on for friend objects in the array
M1, M2, M3 ... and so on for missile objects in the array
They ll show up in the object in their first cell, so they can be anything else as well but making them more than 2 characters will not look good in single cell and will overflow.
They help for better visualizations and are optional

currentSize (mandatory for enemy and friends):-

This property is mandatory for friend and enemy objects but not for missile objects.
These is a pretty neat feature of this GUI, coz we know that ships have fixed number of cells, so currentSize denotes their current active cells that are not destroyed, for example

if we have a ship (1,1) to (2,2)
then they occupy 4 cells, (1,1), (1,2), (2,1) and (2,2),
so totat size is 4

But if it got hit by a missile of strength 3 , then it ll loose its
3 cells but still alive coz one cell active

so currentSize would be 4 - 3 = 1

Note that the damaged cells would be shown in grey color,
for both enemy and friends(if it got hit).

If the currentSize <= 0, then it means object destroyed
so they wont show up in grid.

type (mandatory):-

There will be only 3 types of object in the screen, so use
type:"friend" for friend objects
type:"enemy" for enemy objects
type:"missile" for missile objects

start (mandatory):-

It must be present in all 3 types, it denotes the first coordinate of the object in the grid

end (mandatory for enemy and friends):-

Since missiles need only one coordinate hence end coordinates can be avoided here or could be same as start coordinate, but it is mandatory for enemy and friend objects coz they can occupy multiple cells.

Note that End coordinates must always be greater than or
equal to start coordinates, or else it would be invalid
and wont show up in grid.

start.x <= end.x
start.y <= end.y

BUGs known

None at the moment, I have tested it rigorously and it shall work on any screen size without distorting or breaking with variety of data sets, (It wont work for Non ES6 supported browsers and I will add a transpiled version in future if somebody requests)

GUI library [Defend the base]