Sprite - With HP

by black strings

HTML

<!-- 
There is a main canvas used for drawing the overall shapes.

There is a sub canvas used strictly just for drawing the shape's 2d.
Which creates the image and then is brought into the main canvas.
-->

CSS

#playerStatusCon {
  border: thin solid black;
}
body {
  background-color:#122;
}
#mainCanvas {
   /*border: thin solid black;
}

JavaScript

class GO{
	constructor(name){
  	this.name = name;
  }
}

class Vector{
	constructor(x,y){
  	this.x = x;
    this.y = y;
  }
  set(x,y){
  	this.x = x;
    this.y = y;
  }
  setX(x){
  	this.x = x;
  }
  setY(y){
  	this.y = y;
  }
}

// Contains the image to be drawn and position.
class Sprite extends GO {
	constructor(id,name, img, position, width, height, isBG){
  	super(name);
  	if(id === undefined 
    		|| !name 
        || !img 
        || position === undefined
        || width === undefined
        || height === undefined
        || isBG === undefined){ 
    	console.log('must provide all params'); 
      return;
    }
    this.id = id;
  	this.position = position
    this.width = width;
    this.height = height;
    this.image = img;
    this.isBG = isBG;
  }
  setPosition(pos){
  	this.position.set(pos.x, pos.y);
  }
}

class Player extends GO {
	constructor(name, maxHP, img){
  	super(name);
  	this.hp = new HP(maxHP);
    this.position = new Vector(0,0);
    // the img should be supplied to the player as we don't want player to create its own canvas/ctx
    this.sprite = new Sprite(name + '_id', name, img, this.position, 50,50, false);
  }
  setPosition(pos){
  	this.position.set(pos.x,pos.y);
  	this.sprite.setPosition(this.position);
  }
  react(component){
  	if (component instanceof HPMod){
    	this.hp.react(component);
    }
  }
  heal(){
  	this.react(new HPMod('Heal(sm)', 5));
  }
}

class Component extends GO{
	constructor(name){
  	super(name);
  }
}

class HP extends Component{
	constructor(maxHP){
  	super('HP');
  	this.max = maxHP;
    this.current = maxHP;
  }
  react(component){
  	if(component instanceof HPMod){
    	this.current += component.value;
    }
    console.log(component.name + ':' + component.value);
  }
  isDeplete(){
  	return this.current <= 0;
  }
}

class HPMod extends Component{
	constructor(hpModName, value){
  	super(hpModName);
    this.value = value;
  }
  
}

class UI{
	static createBtn(id){
  	var btn =...