Eventemitter3-timer sample

by Shen Yiming

HTML

<script src="https://pixijs.download/v4.7.0/pixi.min.js"></script>
<script src="https://github.com/soimy/eventemitter3-timer/releases/download/1.0.1/eventemitter3-timer.min.js"></script>

CSS

body { margin: 0px; padding: 0px; }
canvas { display: block; width: 100%; height: 100%; }

TypeScript

const app = new PIXI.Application({
	width: window.innerWidth,
  height: window.innerHeight,
  resolution: window.devicePixelRatio
});
document.body.appendChild(app.view);

let countdown = 15;

const rect = new PIXI.Graphics();
rect.beginFill(0xff1010).drawRect(0, 0, 200, 30).endFill();
rect.position.set(app.screen.width / 2 - 100, app.screen.height / 2 - 15);
app.stage.addChild(rect);

const txt = new PIXI.Text('15', {fontFamily : 'Arial', fontSize: 24, fill : 0xffffff, align : 'center'});
txt.anchor.set(0.5);
app.stage.addChild(txt);
txt.position.set(app.screen.width / 2, app.screen.height / 2);

const timer = new EE3Timer.Timer(1000);
timer.repeat = countdown;
timer.on('start', elapsed => { console.log('start'); });
timer.on('end', elapsed => {
	console.log('end', elapsed);
  txt.text = 'Countdown End';
});
timer.on('repeat', (elapsed, repeat) => {
	console.log('repeat', repeat);
  countdown --;
  txt.text = countdown;
  rect.scale.x = countdown / 15;
});
timer.on('stop', elapsed => { console.log('stop'); });

timer.start();
app.ticker.add(() => {
  timer.timerManager.update(app.ticker.elapsedMS);
}, this);
window.onresize = () => {
	app.renderer.resize(window.innerWidth, window.innerHeight);
}