All files Tile.js

40.74% Statements 11/27
47.83% Branches 11/23
50% Functions 1/2
40.74% Lines 11/27
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 1111x     1x     1x     1x                                                                                   17x   1x     1x 1x 1x 1x                                                                           1x                          
import {
    Events
} from './Events.js';
import {
    Helper
} from './Helper.js';
import {
    StateHandler
} from './StateHandler.js';
import {
    Drawable
} from './Drawable.js';
 
/**
 * @author Michael Duve <mduve@designmail.net>
 * @file Represents a part of the background map
 * @extends Rectangle
 * @copyright Michael Duve 2016
 */
export class Tile extends Drawable {
 
    /**
     * transform original tile to a distorted tile
     * @return {Tile} distorted tile
     */
    get distortedTile() {
        return this.clone.scale(this.zoomFactor)
            .translate(this.view.x, this.view.y)
            .scaleX(this.distortionFactor)
            .translate(this.offsetToCenter, 0);
    }
 
    /**
     * @constructor
     * @param  {String} path = null - path to image
     * @param  {Number} x = 0 - position x of tile
     * @param  {Number} y = 0 - position y of tile
     * @param  {Number} w = 0 - tile width
     * @param  {Number} h = 0 - tile height
     * @param  {CanvasRenderingContext2D} context = null - context of canvas
     * @param  {Number} id = 0 - id of parent instance
     * @return {Tile} instance of Tile for chaining
     */
    constructor({
        path = null,
        x = 0,
        y = 0,
        w = 0,
        h = 0,
        context = null,
        id = 0
    }) {
        super(id, x, y, w, h);
        Iif (!path || typeof path !== "string" || path.length === 0) {
            throw new TypeError(`Path ${path} needs to be of type string and should not be empty`);
        }
        this.state = new StateHandler(Tile.STATES);
        this.context = context;
        this.path = path;
        return this;
    }
 
    /**
     * initializes tile and starts loading image
     * @return {Tile} instance of Tile for chaining
     */
    initialize() {
        this.state.next();
        Helper.loadImage(this.path, (img) => {
            this.img = img;
            this.state.next();
            this.eventManager.publish(Events.TileMap.DRAW);
        });
        return this;
    }
 
    /**
     * draws image data of tile on context
     * @return {Tile} instance of Tile for chaining
     */
    draw() {
        if (this.state.current.value >= 2) {
            const t = this.distortedTile;
            this.state.next();
            this.context.drawImage(this.img, t.x, t.y, t.width, t.height);
        } else if (this.state.current.value === 0) {
            this.initialize();
        }
        return this;
    }
 
}
 
/**
 * States of a tile
 * @type {Array}
 */
Tile.STATES = [{
    value: 0,
    description: 'Starting'
}, {
    value: 1,
    description: 'Initialized'
}, {
    value: 2,
    description: 'Loaded'
}, {
    value: 3,
    description: 'Drawn'
}];