ngAfterViewInit() {
const down = Observable.fromEvent(this.down.nativeElement, 'click')
const up = Observable.fromEvent(this.up.nativeElement, 'click')
this.counter = down
.mapTo(-1)
.merge(up.mapTo(1))
.startWith(0)
.scan<number>((prev, cur) => prev+cur, 0)
down
.buffer(down.debounceTime(250))
.map(clicks => clicks.length)
.filter(length => length == 2)
.subscribe(
(val) => console.log('doubleclick', val),
(err) => console.error(err),
() => console.log('complete')
)
// down
// .bufferTime(250)
// // .filter((clicks:any[]) => clicks.length > 1)
// .subscribe((val) => {
// console.log('buff', val);
// })
}
ngAfterContentInit() {
let el = this.el.nativeElement;
let title = el.querySelector('panel-title');
let content = el.querySelector('panel-content');
title.innerHTML = this.md.toHTML(title.innerHTML);
content.innerHTML = this.md.toHTML(content.innerHTML);
}
/**
* Show active indication.
*/
public showActive(): void {
const line = this.line.nativeElement as StackLayout;
line.opacity = 1;
if (line.ios) {
line.animate({
duration: 1000,
scale: { x: 1.0, y: 1.0 },
curve: AnimationCurve.easeInOut,
});
} else {
line.scaleX = 1;
}
}
myLayout(el:ElementRef) {
let container = el.getClientRects()[0];
let c_width = container.width, //container-height
c_height = container.height,
h_width = 150, //hex size
h_height = 86,
w_dist = 6,
h_dist = 46;
}
ngOnInit() {
let user = this.session.get().user;
let color = 'black';
if (user && user.theme_color && user.theme_color.accent) {
color = user.theme_color.accent;
}
let style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
a:hover, .activeLink { color: ${color} !important; }
a:hover .badge, .activeLink .badge { background: ${color} !important; }
`;
let el = this.el.nativeElement;
el.insertBefore(style, el.firstChild);
}
recalculateDimensionsAndSetMode() {
var el = this.el.nativeElement.getElementsByClassName('view')[0];
var rect = el.getBoundingClientRect();
this.width = rect.width;
this.height = rect.height;
var adjustedMode = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, '');
if (this.mode != adjustedMode) {
this.mode = adjustedMode;
var time = new Date();
this.lastModeChange = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
this.modeChanged();
}
}
myLayout(el:ElementRef) {
let container = el.getClientRects()[0];
let c_width = container.width, //container-height
c_height = container.height,
h_width = 150, //hex size
h_height = 86,
w_dist = 6,
h_dist = 46;
if (c_width>639) {
let pad_left = c_width/2 - (h_width + w_dist) * 4/2,
level_top1 = 55,
level_height = h_height + h_dist + w_dist/2,
row_width = h_width + w_dist;
//layer 1
el.children[0].style.left = pad_left + 1.5*row_width;
el.children[0].style.top = level_top1;
//layer 2
el.children[1].style.left = pad_left + row_width;
el.children[1].style.top = level_top1 + level_height;
el.children[2].style.left = pad_left + 2*row_width;
el.children[2].style.top = level_top1 + level_height;
//layer 3
el.children[3].style.left = pad_left + 0.5*row_width;
el.children[3].style.top = level_top1 + 2*level_height;
el.children[9].style.left = pad_left + 1.5*row_width;
el.children[9].style.top = level_top1 + 2*level_height + 13 ;
el.children[4].style.left = pad_left + 2.5*row_width ;
el.children[4].style.top = level_top1 + 2*level_height ;
//layer 4
el.children[6].style.left = pad_left + 0*row_width;
el.children[6].style.top = level_top1 + 3*level_height ;
el.children[7].style.left = pad_left + 1*row_width ;
el.children[7].style.top = level_top1 + 3 * level_height;
el.children[8].style.left = pad_left + 2 * row_width ;
el.children[8].style.top = level_top1 + 3 * level_height ;
el.children[5].style.left = pad_left + 3*row_width;
el.children[5].style.top = level_top1 + 3 * level_height ;
} else if (c_width > 480 ) {
let pad_left = c_width/2 - (h_width + w_dist) * 3/2,
level_top1 = 55,
level_height = h_height + h_dist + w_dist/2,
row_width = h_width + w_dist;
//layer 1
el.children[0].style.left = pad_left ;
el.children[0].style.top = level_top1;
el.children[1].style.left = pad_left + row_width;
el.children[1].style.top = level_top1;
el.children[2].style.left = pad_left + 2*row_width;
el.children[2].style.top = level_top1;
//layer 2
el.children[3].style.left = pad_left + 0.5*row_width;
el.children[3].style.top = level_top1 + level_height ;
el.children[4].style.left = pad_left + 1.5*row_width ;
el.children[4].style.top = level_top1 + level_height ;
//lay-3
el.children[9].style.left = pad_left + 1*row_width;
el.children[9].style.top = level_top1 + 2 * level_height + 13;
//lay-4
el.children[5].style.left = pad_left + 0.5*row_width;
el.children[5].style.top = level_top1 + 3*level_height ;
el.children[6].style.left = pad_left + 1.5*row_width;
el.children[6].style.top = level_top1 + 3*level_height ;
//layer 5
el.children[7].style.left = pad_left ;
el.children[7].style.top = level_top1 + 4 * level_height;
el.children[8].style.left = pad_left + 1 * row_width ;
el.children[8].style.top = level_top1 + 4 * level_height ;
//lay-4
} else if (c_width>336) {
let pad_left = c_width/2 - (h_width + w_dist) * 2/2,
level_top1 = 55,
level_height = h_height + h_dist + w_dist/2,
row_width = h_width + w_dist;
//layer 1
el.children[0].style.left = pad_left ;
el.children[0].style.top = level_top1;
el.children[1].style.left = pad_left + row_width;
el.children[1].style.top = level_top1;
//lay 2
el.children[2].style.left = pad_left + 0.5*row_width;
el.children[2].style.top = level_top1 + level_height;
//layer 2
el.children[3].style.left = pad_left ;
el.children[3].style.top = level_top1 + 2*level_height ;
el.children[4].style.left = pad_left + 1*row_width ;
el.children[4].style.top = level_top1 +2*level_height ;
//lay-3
el.children[9].style.left = pad_left + 0.5*row_width;
el.children[9].style.top = level_top1 + 3 * level_height + 13;
//lay-4
el.children[5].style.left = pad_left
el.children[5].style.top = level_top1 + 4*level_height ;
el.children[6].style.left = pad_left + 1*row_width;
el.children[6].style.top = level_top1 + 4*level_height ;
//layer 5
el.children[7].style.left = pad_left + 0.5*row_width;
el.children[7].style.top = level_top1 + 5 * level_height;
//level 6
el.children[8].style.left = pad_left ;
el.children[8].style.top = level_top1 + 6 * level_height ;
}
}
animate(playerClass,playerAction){
/* Set up canvas variables */
var canvas = this.canvas.nativeElement;
var character,characterImage;
function gameLoop(){
window.requestAnimationFrame(gameLoop);
character.update();
character.render();
}
/* Animate based on player and action */
switch(playerClass){
// elementalist : piccolo
case ("Elementalist"):
switch(playerAction){
case("strike"):
// Get canvas
canvas.width = 150;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 450,
height: 162,
image: characterImage,
numberOfFrames: 3,
ticksPerFrame: 4
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/piccolo/piccolo-punch.png";
break;
case("special"):
// Get canvas
canvas.width = 190;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 380,
height: 162,
image: characterImage,
numberOfFrames: 2,
ticksPerFrame: 20
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/piccolo/piccolo-magic.png";
break;
case("defend"):
// Get canvas
canvas.width = 120;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 240,
height: 162,
image: characterImage,
numberOfFrames: 2,
ticksPerFrame: 20
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/piccolo/piccolo-defend.png";
break;
default:
this.animateStance(playerClass);
}
break;
// highwayman : trunks
case ("Highwayman"):
switch(playerAction){
case("strike"):
// Get canvas
canvas.width = 185;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 556,
height: 162,
image: characterImage,
numberOfFrames: 3,
ticksPerFrame: 8
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/trunks/trunks-punch.png";
break;
case("special"):
// Get canvas
canvas.width = 190;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 380,
height: 162,
image: characterImage,
numberOfFrames: 2,
ticksPerFrame: 20
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/trunks/trunks-magic.png";
break;
case("defend"):
// Get canvas
canvas.width = 120;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 240,
height: 162,
image: characterImage,
numberOfFrames: 2,
ticksPerFrame: 20
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/trunks/trunks-defend.png";
break;
default:
this.animateStance(playerClass);
}
break;
// paragon : gohan
case ("Paragon"):
switch(playerAction){
case("strike"):
// Get canvas
canvas.width = 154;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 616,
height: 162,
image: characterImage,
numberOfFrames: 4,
ticksPerFrame: 8
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/gohan/gohan-punch.png";
break;
case("special"):
// Get canvas
canvas.width = 140;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 280,
height: 162,
image: characterImage,
numberOfFrames: 2,
ticksPerFrame: 20
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/gohan/gohan-magic.png";
break;
case("defend"):
// Get canvas
canvas.width = 120;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 240,
height: 162,
image: characterImage,
numberOfFrames: 2,
ticksPerFrame: 20
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/gohan/gohan-defend.png";
break;
default:
this.animateStance(playerClass);
}
break;
}
}
animateStance(playerClass){
/* Set up canvas variables */
var canvas = this.canvas.nativeElement;
var character,characterImage;
function gameLoop(){
window.requestAnimationFrame(gameLoop);
character.update();
character.render();
}
switch(playerClass){
case("Elementalist"):
// Get canvas
canvas.width = 125;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 331,
height: 162,
image: characterImage,
numberOfFrames: 3,
ticksPerFrame: 4,
loop: true
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/piccolo/piccolo-standing.png";
break;
case("Highwayman"):
// Get canvas
canvas.width = 99;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 300,
height: 162,
image: characterImage,
numberOfFrames: 3,
ticksPerFrame: 5,
loop: true
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/trunks/trunks-standing.png";
break;
case("Paragon"):
// Get canvas
canvas.width = 125;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: 373,
height: 162,
image: characterImage,
numberOfFrames: 4,
ticksPerFrame: 4,
loop: true
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-2/gohan/gohan-standing.png";
break;
}
}
animateDefeat(playerClass){
/* Set up canvas variables */
var canvas = this.canvas.nativeElement;
var character,characterImage;
function gameLoop(){
window.requestAnimationFrame(gameLoop);
character.update();
character.render();
}
switch(playerClass){
case("Elementalist"):
// Get canvas
canvas.width = 162;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: canvas.width,
height: canvas.height,
image: characterImage,
numberOfFrames: 1,
ticksPerFrame: 10
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-1/piccolo/piccolo-defeat.png";
break;
case("Highwayman"):
// Get canvas
canvas.width = 177;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: canvas.width,
height: canvas.height,
image: characterImage,
numberOfFrames: 1,
ticksPerFrame: 10
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-1/trunks/trunks-defeat.png";
break;
case("Paragon"):
// Get canvas
canvas.width = 162;
canvas.height = 162;
// Create sprite sheet
characterImage = new Image();
// Create sprite
character = this.sprite({
context: canvas.getContext("2d"),
width: canvas.width,
height: canvas.height,
image: characterImage,
numberOfFrames: 1,
ticksPerFrame: 10
});
// Load sprite sheet
characterImage.addEventListener("load", gameLoop);
characterImage.src = "images/sprites/player-1/gohan/gohan-defeat.png";
break;
}
}