bp-prism-game/esm2020/lib/prism/prism-blast-icon/test-component/prism-blast-icon.component.mjs

The BP Prism Game

import { Component, ViewChild } from '@angular/core';
import { PrismBlastIconClass } from '../prism-blast-icon.class';
import { AssetAlignEnum } from '../../../asset/enum/asset-align.enum';
import { AssetAlignVerticalEnum } from '../../../asset/enum/asset-align-vertical.enum';
import * as i0 from "@angular/core";
import * as i1 from "../../../service/game.service";
/**
 * The Prism Blast Icon Component
 */
export class PrismBlastIconComponent {
    /**
     * The Constructor
     * @param gameService The GameService from DI
     */
    constructor(gameService) {
        this.gameService = gameService;
        this.assets = [
            {
                key: 'prismBlast',
                name: 'Blast'
            }
        ];
    }
    /**
     * On Init
     */
    ngOnInit() {
        const rows = 20;
        const columns = 20;
        const gameBoard = Array.from({ length: rows }, () => Array(columns).fill(0));
        gameBoard[1][1] = 14;
        this.ctx = this.gameService.initBoard(this.canvas, rows, columns, 25, gameBoard);
        this.addPrismBlasts();
        this.animate();
    }
    /**
     * Add the aliens
     */
    addPrismBlasts() {
        this.prismBlast = new PrismBlastIconClass(this.gameService, this.ctx);
        this.prismBlast.isDestroyed = false;
        this.prismBlast.move(this.prismBlast.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.middle));
    }
    /**
     * Animate the object once
     */
    animateAsset() {
        this.prismBlast.move(this.prismBlast.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.middle));
        this.prismBlast.isDestroyed = false;
        cancelAnimationFrame(this.requestId);
        this.animate();
    }
    /**
     * Draw the board
     */
    draw() {
        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
        this.gameService.addOutlines(this.ctx, 1, 0.1);
    }
    /**
     * Animate
     */
    animate() {
        this.draw();
        this.prismBlast.animate();
        this.requestId = requestAnimationFrame(this.animate.bind(this));
    }
}
PrismBlastIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: PrismBlastIconComponent, deps: [{ token: i1.GameService }], target: i0.ɵɵFactoryTarget.Component });
PrismBlastIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: PrismBlastIconComponent, selector: "bp-prism-blast-icon", viewQueries: [{ propertyName: "canvas", first: true, predicate: ["board"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"game-container\">\n  <div class=\"asset-title\">Prism Blast Icon</div>\n  <div class=\"game-board-container\">\n    <canvas #board class=\"game-board\"></canvas>\n  </div>\n  <div class=\"button-container\">\n    <button (click)=\"animateAsset()\" class=\"animation-button button\">Animate</button>\n  </div>\n</div>\n", styles: [".game-container .asset-title{margin-bottom:25px;width:100%;text-align:center}.game-container .game-board-container{display:flex;flex-direction:row;justify-content:center}.game-container .game-board-container .game-board{border:solid 2px grey;background-color:#000}.game-container .button-container{position:relative;margin-top:25px;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-evenly}.game-container .button-container .animation-button{background-color:#4caf50}.game-container .button-container .button{flex-wrap:wrap;font-size:16px;margin-top:10px;padding:15px 30px;cursor:pointer;width:165px;border:1px solid black}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: PrismBlastIconComponent, decorators: [{
            type: Component,
            args: [{ selector: 'bp-prism-blast-icon', template: "<div class=\"game-container\">\n  <div class=\"asset-title\">Prism Blast Icon</div>\n  <div class=\"game-board-container\">\n    <canvas #board class=\"game-board\"></canvas>\n  </div>\n  <div class=\"button-container\">\n    <button (click)=\"animateAsset()\" class=\"animation-button button\">Animate</button>\n  </div>\n</div>\n", styles: [".game-container .asset-title{margin-bottom:25px;width:100%;text-align:center}.game-container .game-board-container{display:flex;flex-direction:row;justify-content:center}.game-container .game-board-container .game-board{border:solid 2px grey;background-color:#000}.game-container .button-container{position:relative;margin-top:25px;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-evenly}.game-container .button-container .animation-button{background-color:#4caf50}.game-container .button-container .button{flex-wrap:wrap;font-size:16px;margin-top:10px;padding:15px 30px;cursor:pointer;width:165px;border:1px solid black}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.GameService }]; }, propDecorators: { canvas: [{
                type: ViewChild,
                args: ['board', { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJpc20tYmxhc3QtaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9wcmlzbS9zcmMvbGliL3ByaXNtL3ByaXNtLWJsYXN0LWljb24vdGVzdC1jb21wb25lbnQvcHJpc20tYmxhc3QtaWNvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9wcmlzbS9zcmMvbGliL3ByaXNtL3ByaXNtLWJsYXN0LWljb24vdGVzdC1jb21wb25lbnQvcHJpc20tYmxhc3QtaWNvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFzQixTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFJekUsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDaEUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDOzs7QUFFdkY7O0dBRUc7QUFNSCxNQUFNLE9BQU8sdUJBQXVCO0lBMkJsQzs7O09BR0c7SUFDSCxZQUFvQixXQUF3QjtRQUF4QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUMxQyxJQUFJLENBQUMsTUFBTSxHQUFHO1lBQ1o7Z0JBQ0UsR0FBRyxFQUFFLFlBQVk7Z0JBQ2pCLElBQUksRUFBRSxPQUFPO2FBQ2E7U0FDN0IsQ0FBQztJQUNKLENBQUM7SUFFRDs7T0FFRztJQUNILFFBQVE7UUFDTixNQUFNLElBQUksR0FBRyxFQUFFLENBQUM7UUFDaEIsTUFBTSxPQUFPLEdBQUcsRUFBRSxDQUFDO1FBQ25CLE1BQU0sU0FBUyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLEVBQUUsR0FBRyxFQUFFLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQWEsQ0FBQyxDQUFDO1FBQ3pGLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsR0FBRyxFQUFFLENBQUM7UUFFckIsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLFNBQVMsQ0FBQyxDQUFDO1FBRWpGLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVEOztPQUVHO0lBQ0ssY0FBYztRQUNwQixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksbUJBQW1CLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDdEUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3BDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQyxNQUFNLEVBQUUsc0JBQXNCLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztJQUM1RyxDQUFDO0lBRUQ7O09BRUc7SUFDSCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLE1BQU0sRUFBRSxzQkFBc0IsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO1FBQzFHLElBQUksQ0FBQyxVQUFVLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztRQUNwQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFFRDs7T0FFRztJQUNLLElBQUk7UUFDVixJQUFJLENBQUMsR0FBRyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUN4RSxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQ7O09BRUc7SUFDSSxPQUFPO1FBQ1osSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ1osSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUMxQixJQUFJLENBQUMsU0FBUyxHQUFHLHFCQUFxQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBeUIsQ0FBQyxDQUFDO0lBQzFGLENBQUM7O29IQXpGVSx1QkFBdUI7d0dBQXZCLHVCQUF1QiwwS0NoQnBDLDZVQVNBOzJGRE9hLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxxQkFBcUI7a0dBUy9CLE1BQU07c0JBREwsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIEVsZW1lbnRSZWYsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBHYW1lU2VydmljZSB9IGZyb20gJy4uLy4uLy4uL3NlcnZpY2UvZ2FtZS5zZXJ2aWNlJztcbmltcG9ydCB7IEFzc2V0Q29uZmlndXJhdGlvbk1vZGVsIH0gZnJvbSAnLi4vLi4vLi4vbW9kZWwvYXNzZXQtY29uZmlndXJhdGlvbi5tb2RlbCc7XG5pbXBvcnQgeyBQcmlzbUJsYXN0SWNvbkNsYXNzIH0gZnJvbSAnLi4vcHJpc20tYmxhc3QtaWNvbi5jbGFzcyc7XG5pbXBvcnQgeyBBc3NldEFsaWduRW51bSB9IGZyb20gJy4uLy4uLy4uL2Fzc2V0L2VudW0vYXNzZXQtYWxpZ24uZW51bSc7XG5pbXBvcnQgeyBBc3NldEFsaWduVmVydGljYWxFbnVtIH0gZnJvbSAnLi4vLi4vLi4vYXNzZXQvZW51bS9hc3NldC1hbGlnbi12ZXJ0aWNhbC5lbnVtJztcblxuLyoqXG4gKiBUaGUgUHJpc20gQmxhc3QgSWNvbiBDb21wb25lbnRcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYnAtcHJpc20tYmxhc3QtaWNvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcmlzbS1ibGFzdC1pY29uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcHJpc20tYmxhc3QtaWNvbi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFByaXNtQmxhc3RJY29uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgLyoqXG4gICAqIFRoZSBjYW52YXNcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ2JvYXJkJywgeyBzdGF0aWM6IHRydWUgfSlcbiAgY2FudmFzOiBFbGVtZW50UmVmPEhUTUxDYW52YXNFbGVtZW50PjtcblxuICAvKipcbiAgICogQ1RTXG4gICAqL1xuICBwcml2YXRlIGN0eDogQ2FudmFzUmVuZGVyaW5nQ29udGV4dDJEO1xuXG4gIC8qKlxuICAgKiByZXF1ZXN0IElkXG4gICAqL1xuICBwcml2YXRlIHJlcXVlc3RJZDogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBUaGUgcHJpc21CbGFzdFxuICAgKi9cbiAgcHJpdmF0ZSBwcmlzbUJsYXN0OiBQcmlzbUJsYXN0SWNvbkNsYXNzO1xuXG4gIC8qKlxuICAgKiBEZWJ1ZyBBc3NldHNcbiAgICovXG4gIHB1YmxpYyBhc3NldHM6IEFzc2V0Q29uZmlndXJhdGlvbk1vZGVsW107XG5cbiAgLyoqXG4gICAqIFRoZSBDb25zdHJ1Y3RvclxuICAgKiBAcGFyYW0gZ2FtZVNlcnZpY2UgVGhlIEdhbWVTZXJ2aWNlIGZyb20gRElcbiAgICovXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZ2FtZVNlcnZpY2U6IEdhbWVTZXJ2aWNlKSB7XG4gICAgdGhpcy5hc3NldHMgPSBbXG4gICAgICB7XG4gICAgICAgIGtleTogJ3ByaXNtQmxhc3QnLFxuICAgICAgICBuYW1lOiAnQmxhc3QnXG4gICAgICB9IGFzIEFzc2V0Q29uZmlndXJhdGlvbk1vZGVsXG4gICAgXTtcbiAgfVxuXG4gIC8qKlxuICAgKiBPbiBJbml0XG4gICAqL1xuICBuZ09uSW5pdCgpIHtcbiAgICBjb25zdCByb3dzID0gMjA7XG4gICAgY29uc3QgY29sdW1ucyA9IDIwO1xuICAgIGNvbnN0IGdhbWVCb2FyZCA9IEFycmF5LmZyb20oeyBsZW5ndGg6IHJvd3MgfSwgKCkgPT4gQXJyYXkoY29sdW1ucykuZmlsbCgwKSBhcyBudW1iZXJbXSk7XG4gICAgZ2FtZUJvYXJkWzFdWzFdID0gMTQ7XG5cbiAgICB0aGlzLmN0eCA9IHRoaXMuZ2FtZVNlcnZpY2UuaW5pdEJvYXJkKHRoaXMuY2FudmFzLCByb3dzLCBjb2x1bW5zLCAyNSwgZ2FtZUJvYXJkKTtcblxuICAgIHRoaXMuYWRkUHJpc21CbGFzdHMoKTtcbiAgICB0aGlzLmFuaW1hdGUoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBBZGQgdGhlIGFsaWVuc1xuICAgKi9cbiAgcHJpdmF0ZSBhZGRQcmlzbUJsYXN0cygpOiB2b2lkIHtcbiAgICB0aGlzLnByaXNtQmxhc3QgPSBuZXcgUHJpc21CbGFzdEljb25DbGFzcyh0aGlzLmdhbWVTZXJ2aWNlLCB0aGlzLmN0eCk7XG4gICAgdGhpcy5wcmlzbUJsYXN0LmlzRGVzdHJveWVkID0gZmFsc2U7XG4gICAgdGhpcy5wcmlzbUJsYXN0Lm1vdmUodGhpcy5wcmlzbUJsYXN0LnBvc2l0aW9uQXNzZXQoQXNzZXRBbGlnbkVudW0uY2VudGVyLCBBc3NldEFsaWduVmVydGljYWxFbnVtLm1pZGRsZSkpO1xuICB9XG5cbiAgLyoqXG4gICAqIEFuaW1hdGUgdGhlIG9iamVjdCBvbmNlXG4gICAqL1xuICBhbmltYXRlQXNzZXQoKTogdm9pZCB7XG4gICAgdGhpcy5wcmlzbUJsYXN0Lm1vdmUodGhpcy5wcmlzbUJsYXN0LnBvc2l0aW9uQXNzZXQoQXNzZXRBbGlnbkVudW0uY2VudGVyLCBBc3NldEFsaWduVmVydGljYWxFbnVtLm1pZGRsZSkpO1xuICAgIHRoaXMucHJpc21CbGFzdC5pc0Rlc3Ryb3llZCA9IGZhbHNlO1xuICAgIGNhbmNlbEFuaW1hdGlvbkZyYW1lKHRoaXMucmVxdWVzdElkKTtcbiAgICB0aGlzLmFuaW1hdGUoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBEcmF3IHRoZSBib2FyZFxuICAgKi9cbiAgcHJpdmF0ZSBkcmF3KCkge1xuICAgIHRoaXMuY3R4LmNsZWFyUmVjdCgwLCAwLCB0aGlzLmN0eC5jYW52YXMud2lkdGgsIHRoaXMuY3R4LmNhbnZhcy5oZWlnaHQpO1xuICAgIHRoaXMuZ2FtZVNlcnZpY2UuYWRkT3V0bGluZXModGhpcy5jdHgsIDEsIDAuMSk7XG4gIH1cblxuICAvKipcbiAgICogQW5pbWF0ZVxuICAgKi9cbiAgcHVibGljIGFuaW1hdGUoKTogdm9pZCB7XG4gICAgdGhpcy5kcmF3KCk7XG4gICAgdGhpcy5wcmlzbUJsYXN0LmFuaW1hdGUoKTtcbiAgICB0aGlzLnJlcXVlc3RJZCA9IHJlcXVlc3RBbmltYXRpb25GcmFtZSh0aGlzLmFuaW1hdGUuYmluZCh0aGlzKSBhcyBGcmFtZVJlcXVlc3RDYWxsYmFjayk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJnYW1lLWNvbnRhaW5lclwiPlxuICA8ZGl2IGNsYXNzPVwiYXNzZXQtdGl0bGVcIj5QcmlzbSBCbGFzdCBJY29uPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJnYW1lLWJvYXJkLWNvbnRhaW5lclwiPlxuICAgIDxjYW52YXMgI2JvYXJkIGNsYXNzPVwiZ2FtZS1ib2FyZFwiPjwvY2FudmFzPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImJ1dHRvbi1jb250YWluZXJcIj5cbiAgICA8YnV0dG9uIChjbGljayk9XCJhbmltYXRlQXNzZXQoKVwiIGNsYXNzPVwiYW5pbWF0aW9uLWJ1dHRvbiBidXR0b25cIj5BbmltYXRlPC9idXR0b24+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=