diff --git a/web/emotewall/index.js b/web/emotewall/index.js index 07ce88c..bf34151 100644 --- a/web/emotewall/index.js +++ b/web/emotewall/index.js @@ -1,3 +1,7 @@ +const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + + + $(function () { const SEVENTV_GLOBAL_URL = "https://api.7tv.app/v2/emotes/global"; @@ -22,8 +26,8 @@ $(function () { const canvas = document.getElementById('wall'); const ctx = canvas.getContext('2d'); const resizeCanvas = () => { - canvas.width = window.innerWidth-8; - canvas.height = window.innerHeight-8; + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; } window.addEventListener('resize', resizeCanvas, false); resizeCanvas(); @@ -96,13 +100,18 @@ $(function () { constructor(emote,data) { super(emote,data) this.setPhysics(randRange(0, canvas.width), - randRange(0, canvas.height-this.size), - 0,15, + randRange(0, -this.size), + 0,randRange(10,15), 0,0) + this.size = randRange(this.size/2,this.size) this.time = 5.5+this.y/canvas.height*2; } - update(tick){ - super.update(tick) + + draw(){ + ctx.globalAlpha = tWave(this.time); + if(img_map[this.emote]) + ctx.drawImage(img_map[this.emote], this.x, this.y, + this.size, this.size); } } @@ -150,17 +159,18 @@ $(function () { } } - class ExplosionP extends Particle { + class ExplosionP extends RainP { constructor(emote,data,args){ super(emote,data) - let speed = randRange(0,6) + 7; + let speed = randRange(5,15); let fang = 2*Math.PI* (args.angle/360) let ang = randRange(-fang/2, +fang/2)+Math.PI/2 ;//+ 2*(angle/360)*Math.PI; this.setPhysics(args.x,args.y, Math.cos(ang)*speed, -Math.sin(ang)*speed, 0,10); - this.time = drt - fdt*1.5; + this.time = drt - fdt*2; + this.size = randRange(this.size/2,this.size) } } @@ -210,23 +220,42 @@ $(function () { } const genExplosion = (x,y,ang) =>{ - for(let i=0; i<50; ++i) new ExplosionP('nod', {},x,y,ang); + for(let i=0; i<100; ++i) createParticule(ExplosionP, 'nod', {},{x:x,y:y,angle:ang}); } const genRain = () => { - for(let i = 0; i<50; ++i) new RainP('nod', {}); + let xpos = randRange(0, canvas.width); + let time = 0; + const interval = setInterval(()=>{ + for(let i=0; i<10; ++i) createParticule(RainP, 'nod', {},{}); + ++time; + if(time > 50) clearInterval(interval); + }, 100); + } + + const genVolcano = () => { + let xpos = randRange(0, canvas.width); + let time = 0; + const interval = setInterval(()=>{ + for(let i=0; i<10; ++i) createParticule(ExplosionP, 'nod', {},{x:xpos,y:canvas.height,angle:30}); + ++time; + if(time > 50) clearInterval(interval); + }, 100); } - function init() { + async function init() { + main(0); + sleep(1000).then(()=>{ createParticule(BounceGP, "nod", {}, {}) createParticule(BounceP, "nod", {}, {}) createParticule(BounceP, "nod", {}, {}) createParticule(BombP, "nod", {}, {}) createParticule(FireworkP, "nod", {}, {}) - //genRain(); - main(0); + genRain(); + genVolcano(); + }) } function main(tframe) {