WIP

web/emotewall/index.js

@@ -1,54 +1,110 @@
 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
+const STV_GLOBAL_URL = () => "https://api.7tv.app/v2/emotes/global";
+const STV_CHANNEL_URL = (user) => "https://api.7tv.app/v2/users/" + user + "/emotes";
+const FFZ_GLOBAL_URL = () => "https://api.frankerfacez.com/v1/set/global";
+const FFZ_CHANNEL_URL = (user) => "https://api.frankerfacez.com/v1/room/" + user;
+const BTT_GLOBAL_URL = () => "https://api.betterttv.net/3/cached/emotes/global";
+const BTT_CHANNEL_URL = (id) => "https://api.betterttv.net/3/cached/users/twitch/" + id;
 
+function getData(ajaxurl) { 
+    return $.ajax({
+      url: ajaxurl,
+      type: 'GET',
+    });
+  };
 
-$(function () {
+const get_g7TV = async() => {
+    const req = await getData(STV_GLOBAL_URL())
+    return req.map((v,i)=> ({str:v.name, url: (v.urls['2']||v.urls['2']||v.urls['1'])[1]}));
+}
+const get_p7TV = async(user) => {
+    try{
+        const req = await getData(STV_CHANNEL_URL(user))
+        return req.map((v,i)=> ({str:v.name, url: (v.urls['2']||v.urls['2']||v.urls['1'])[1]}));
+    }catch(e){return []}
+}
+const get_gFFZ = async() => {
+    const req = await getData(FFZ_GLOBAL_URL())
+    return req.sets['3'].emoticons.map((v,i)=> ({str:v.name, url: 'https:'+(v.urls['2']||v.urls['2']||v.urls['1'])}))
+}
+const get_pFFZ = async(user) => {
+    try{
+        const req = await getData(FFZ_CHANNEL_URL(user))
+        return req.sets[req.room.set].emoticons.map((v,i)=> ({str:v.name, url: 'https:'+(v.urls['2']||v.urls['2']||v.urls['1'])}))
+    }catch(e){return []}
+}
 
-    const SEVENTV_GLOBAL_URL = "https://api.7tv.app/v2/emotes/global";
+const get_gBTT = async() => {
-    const SEVENTV_CHANNEL_URL = "https://api.7tv.app/v2/users/" + "..." + "/emotes";
+    const req = await getData(BTT_GLOBAL_URL())
-    const FFZ_GLOBAL_URL = "https://api.frankerfacez.com/v1/set/global";
+    return req.map((v,i) => ({str:v.code, url: 'https://cdn.betterttv.net/emote/'+v.id+'/2x'}))
-    const FFZ_CHANNEL_URL = "https://api.frankerfacez.com/v1/room/" + "...";
+}
-    const BTTV_GLOBAL_URL = "https://api.betterttv.net/3/cached/emotes/global";
+const get_pBTT = async(id) => {
-    const BTTV_CHANNEL_URL = "https://api.betterttv.net/3/cached/users/twitch/" + "...";
+    try{
+        id = '486183840'
+        const req = await getData(BTT_CHANNEL_URL(id))
+        return req.sharedEmotes.map((v,i) => ({str:v.code, url: 'https://cdn.betterttv.net/emote/'+v.id+'/2x'}))
+    }catch(e){return []}
+}
 
-    const webSocket = window.socket;
+const get_emotes = async(username, userid) => {
-    const emote_str = ["peepo", 'nod']
+    return [].concat(await get_g7TV(), await get_p7TV(username),
-    const emote_url = ['https://cdn.7tv.app/emote/603cac391cd55c0014d989be/4x', 'https://cdn.7tv.app/emote/60ae4bb30e35477634610fda/4x']
+              await get_gFFZ(), await get_pFFZ(username),
-    var img_map = {};
+              await get_gBTT(), await get_pBTT(userid))
+}
 
-    var lastframe = 0;
+const canvasSizing = (cnv) => {
-    var preloaded = false, initialized = false;
-    var mode = "rain" || "bounce" || "explosion" || "firework" || "...";
-
-    var particles = [];
-    
-
-    const canvas = document.getElementById('wall');
-    const ctx = canvas.getContext('2d');
     const resizeCanvas = () => {
-        canvas.width = window.innerWidth;
+        cnv.width = window.innerWidth;
-        canvas.height = window.innerHeight;
+        cnv.height = window.innerHeight;
     }
     window.addEventListener('resize', resizeCanvas, false);
     resizeCanvas();
+}
 
-    function loadImages(strs, urls) {
+
-        let loadcount = 0, loadtotal = urls.length;
+
+
+
+
+$(async function () {
+    const webSocket = window.socket;
+    
+    var img_map = {}, static_emotes = {};
+    var lastframe = 0;
+    var preloaded = false, initialized = false;
+    var particles = [];
+
+    const canvas = document.getElementById('wall');
+    const ctx = canvas.getContext('2d');
+    canvasSizing(canvas);
+
+    const loadImages = (emotes) => {
+        let loadcount = 0, loadtotal = emotes.length;
         preloaded = false;
         var loadedimages = {};
-        for (let i=0; i<urls.length; i++) {
+        for (let i=0; i<emotes.length; i++) {
             var image = new Image();
             image.onload = function () {
                 loadcount++;
                 if (loadcount == loadtotal) preloaded = true;
             };
-            image.src = urls[i];
+            image.src = emotes[i].url;
-            loadedimages[strs[i]] = image;
+            loadedimages[emotes[i].str] = image;
         }
         return loadedimages;
     }
-    img_map = loadImages(emote_str, emote_url)
 
+    const randEmote = (set) => {
+        if(!Array.isArray(set))  
+            set = Object.keys(img_map) || []
+        return set[parseInt(set.length* Math.random())]
+    }
+
+    const username = "soraefir"
+    const userid = "486204587"
+    static_emotes = await get_emotes(username,userid)
+    img_map = loadImages(static_emotes)
 
     const part_speed = 50;
     const part_bounce_el = 0.9
@@ -56,7 +112,6 @@ $(function () {
     const drt = 8;
     const tWave = (t) => (t<0 || t>drt )? 0 : (t<fdt ? t/fdt : (t>(drt-fdt) ? (drt-t)/fdt : 1))
     const sWave = (t, s) => (t<0 || t>drt) ? 1 : (t<fdt ? t*s/fdt : (t>(drt-fdt) ? (drt-t)*s/fdt : s))
-
     const randRange = (min,max) => (Math.random()* (max-min) + min)
 
     class Particle {
@@ -66,7 +121,8 @@ $(function () {
             this.setPhysics(randRange(0,canvas.width),
                             randRange(0,canvas.height),
                             0,0,0,0);
-            this.emote = emote;
+            this.sete = emote ? emote:null
+            this.emote = emote || randEmote(this.sete)
             this.time = 0;
         }
 
@@ -220,14 +276,14 @@ $(function () {
     }
 
     const genExplosion = (x,y,ang) =>{
-        for(let i=0; i<100; ++i) createParticule(ExplosionP, 'nod', {},{x:x,y:y,angle:ang});
+        for(let i=0; i<100; ++i) createParticule(ExplosionP, randEmote(), {},{x:x,y:y,angle:ang});
     }
 
     const genRain = () => {
         let xpos = randRange(0, canvas.width);
         let time = 0;
         const interval = setInterval(()=>{
-            for(let i=0; i<10; ++i) createParticule(RainP, 'nod', {},{});
+            for(let i=0; i<10; ++i) createParticule(RainP, randEmote(), {},{});
             ++time;
             if(time > 50) clearInterval(interval);
           }, 100);
@@ -237,7 +293,7 @@ $(function () {
         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});
+            for(let i=0; i<10; ++i) createParticule(ExplosionP, randEmote(), {},{x:xpos,y:canvas.height,angle:30});
             ++time;
             if(time > 50) clearInterval(interval);
           }, 100);
@@ -248,11 +304,11 @@ $(function () {
     async function init() {
         main(0);
         sleep(1000).then(()=>{
-        createParticule(BounceGP, "nod", {}, {})
+        createParticule(BounceGP, randEmote(), {}, {})
-        createParticule(BounceP, "nod", {}, {})
+        createParticule(BounceP, randEmote(), {}, {})
-        createParticule(BounceP, "nod", {}, {})
+        createParticule(BounceP, randEmote(), {}, {})
-        createParticule(BombP, "nod", {}, {})
+        createParticule(BombP, randEmote(), {}, {})
-        createParticule(FireworkP, "nod", {}, {})
+        createParticule(FireworkP, randEmote(), {}, {})
         genRain();
         genVolcano();
         })