Source: animation.js

/**
 * @fileoverview Generic animation functions that handle sprite sheets, draw pieces, tiles etc. Functions return or get passed arrays of sprites
 * @author Robert Laing
 * @module animation
 */

import * as gm from "/js/modules/gm.js";

/**
  * Each "sprite" (sourced from either an image file or drawn) has these common properties needed by drawImage, translate and rotate
  * @namespace module:animation.sprite
  * @property {Image} image - any format acceptable to drawImage
  * @property {boolean} loaded - guards drawImage from crashing because image isn't loaded
  * @property {pixels} sx - the left hand side of the source image, 0 if not taken from a sprite sheet
  * @property {pixels} sy - the top side of the source image, 0 if not taken from a sprite sheet
  * @property {pixels} sWidth - width of the source image
  * @property {pixels} sHeight - height of the source image
  * @property {pixels} dWidth - width of the drawn image, modified by screen size
  * @property {pixels} dHeight - height of the drawn image, modified by screen size
  * @property {pixels} x1 - sprite's current center X, used by ctx.translate
  * @property {pixels} y1 - sprite's current center Y, used by ctx.translate
  * @property {radians} angle1 - direction in radians the sprite is currently facing, converted to radians for ctx.rotate
  * @property {pixels} x2 - sprite's destination center X, same as x1 if not moving
  * @property {pixels} y2 - sprite's destination center Y
  * @property {radians} angle2 - sprite's destination direction, same as angle1 if it's not rotating 
  * @property {pixels} velocity - 0.0 if the sprite is stationary
  * @property {pixels} deltaX - added to x1 each tick, Math.cos(angle1 in radians) * velocity
  * @property {pixels} deltaY - added to y1 each tick, Math.sin(angle1 in radians) * velocity
  * @property {degrees} deltaAngle -- added to angle1 each tick, controls how fast sprites
  * @property {boolean} live - if false, gets removed from sprites array
  * @property {Array} base - the element in state the sprite was created from
  * @property {Array} attacking - base of a sprite in the destination cell, otherwise undefined
  * @property {Array} defending - base of a sprite moving on to this sprite's cell, othewise undefined
  */




/**
 *
 */
function drawSprite(sprite) {
  if (sprite.loaded) {
    window.ctx.save();
    window.ctx.translate(sprite.x1, sprite.y1);
    window.ctx.rotate(sprite.angle1);
    window.ctx.drawImage(sprite.image, 
      sprite.sx, sprite.sy, sprite.sWidth, sprite.sHeight, 
      -sprite.dWidth/2, -sprite.dHeight/2, sprite.dWidth, sprite.dHeight);
    window.ctx.restore();
  }
}

export function drawSprites() {
  spriteArray.forEach((sprite) => drawSprite(sprite));
}

export function resize(scale, sprites) {
  sprites.forEach(function(sprite) {
    sprite.x1 *= scale;
    sprite.y1 *= scale;
    sprite.x2 *= scale;
    sprite.y2 *= scale;
    sprite.dWidth *= scale;
    sprite.dHeight *= scale;
    sprite.velocity *= scale;
    sprite.deltaX *= Math.cos(sprite.angle1) * sprite.velocity;
    sprite.deltaY *= Math.sin(sprite.angle1) * sprite.velocity;
  });
}