Custom HP and SP Bars.js

on('ready',function(){
  "use strict";


  var leftOffset = 20,
      topOffset = 30,
      hpleftOffset = 20,
      hptopOffset = 24,
      spleftOffset = 23,
      sptopOffset = 34,


  // creates a background object and adds relationship to the state
  addBar = function(obj){
    if(!_.has(state.maneater.tokens,obj.id)){
      let sinN15=Math.sin(-15*(Math.PI/180));
      let cosN15=Math.cos(-15*(Math.PI/180));
      let bg=createObj('graphic',{
        pageid: obj.get('pageid'),
        imgsrc: 'https://s3.amazonaws.com/files.d20.io/images/18365129/ouWda8s3smxFGrIMd3GenA/thumb.png?1461339104',
        left: obj.get('left')+leftOffset,
        top: obj.get('top')+topOffset,
        width: 120,
        height: 30,
        rotation: -15,
        layer: 'objects'
      });
      let hpScale = ( (parseInt(obj.get('bar1_value'),10)||0) / (parseInt(obj.get('bar1_max'),10)||1) )*100;
      let spScale = ( (parseInt(obj.get('bar2_value'),10)||0) / (parseInt(obj.get('bar2_max'),10)||1) )*100;

      let hp=createObj('graphic',{
        pageid: obj.get('pageid'),
        imgsrc: 'https://s3.amazonaws.com/files.d20.io/images/18365199/qV_JEvOF6C8Zx1FJCEGbsw/thumb.png?1461339342',
        height: 10,
        width: hpScale,
        left: obj.get('left')+hpleftOffset - ( cosN15*(100-hpScale))/2,
        top: obj.get('top')+hptopOffset - (sinN15*(100-hpScale))/2,
        rotation: -15,
        layer: 'objects'
      });
      let sp=createObj('graphic',{
        pageid: obj.get('pageid'),
        imgsrc: 'https://s3.amazonaws.com/files.d20.io/images/18365209/DnbjiCaANIFZ9lC-IIItRg/thumb.png?1461339385',
        left: obj.get('left')+spleftOffset - ( cosN15*(100-spScale))/2,
        top: obj.get('top')+sptopOffset - (sinN15*(100-spScale))/2,
        height: 10,
        width: ( (parseInt(obj.get('bar2_value'),10)||0) / (parseInt(obj.get('bar2_max'),10)||1) )*100,
        rotation: -15,
        layer: 'objects'
      });


      state.maneater.tokens[obj.id]={  /* indexed by the token id for easy lookup */
        tokenID: obj.id,  /* token's id, useful to store here as well as the index */
        bgID: bg.id,  /* id of the background image created for this token */
        hpID: hp.id,
        spID: sp.id
      };
    }
  },  /* <=== that has to be a comma as the function is defined as a chain of variables */


  /* updated the background image for this token */
  updateBar = function(obj){


    // checks to see if there is a relationship in the state (eventually, you won't want to add these to everything...)
    if(_.has(state.maneater.tokens,obj.id)){
      // gets the associated background image
      let bg=getObj('graphic',state.maneater.tokens[obj.id].bgID);
      let hp=getObj('graphic',state.maneater.tokens[obj.id].hpID);
      let sp=getObj('graphic',state.maneater.tokens[obj.id].spID);
      let hpScale = ( (parseInt(obj.get('bar1_value'),10)||0) / (parseInt(obj.get('bar1_max'),10)||1) )*100;
      let spScale = ( (parseInt(obj.get('bar2_value'),10)||0) / (parseInt(obj.get('bar2_max'),10)||1) )*100;
      let sinN15=Math.sin(-15*(Math.PI/180));
      let cosN15=Math.cos(-15*(Math.PI/180));
      // repositions it relative to the token
      bg.set({
        left: obj.get('left')+leftOffset,
        top: obj.get('top')+topOffset
      });
      log(`Left: ${(cosN15*(100-hpScale))}`);
      log(`Top:  ${(sinN15*(100-hpScale))}`);
      hp.set({
        left: obj.get('left')+hpleftOffset - ( cosN15*(100-hpScale))/2,
        top: obj.get('top')+hptopOffset - (sinN15*(100-hpScale))/2,
        width: ( (parseInt(obj.get('bar1_value'),10)||0) / (parseInt(obj.get('bar1_max'),10)||1) )*100
      });
      sp.set({
        left: obj.get('left')+spleftOffset - ( cosN15*(100-spScale))/2,
        top: obj.get('top')+sptopOffset - (sinN15*(100-spScale))/2,
        width: ( (parseInt(obj.get('bar2_value'),10)||0) / (parseInt(obj.get('bar2_max'),10)||1) )*100
      });
    }
  };
  
  // initializer for the state property maneater
  if(!_.has(state,'maneater')){
    state.maneater={
      tokens: {}
    };
  }


  // catch the creation of graphics
  on('add:graphic', addBar );


  // catch the changing of graphics
  on('change:graphic', updateBar );
});