make order of frames deterministic

index.js

@@ -1,16 +1,23 @@
 const fs = require('mz/fs');
+const path = require('path');
 const http = require('http');
 const {Readable} = require('stream');
 const colors = require('colors/safe');
 
-const frames = [];
-
 // Setup frames in memory
-fs.readdir('./frames').then(data => { 
-  data.forEach(async frame => {
-    const f = await fs.readFile(`./frames/${frame}`);
-    frames.push(f.toString());
-  })
+let frames;
+
+(async () => {
+  const framesPath = 'frames';
+  const files = await fs.readdir(framesPath);
+
+  frames = await Promise.all(files.map(async (file) => {
+    const frame = await fs.readFile(path.join(framesPath, file));
+    return frame.toString();
+  }));
+})().catch((err) => {
+  console.log('Error loading frames');
+  console.log(err);
 });
 
 const colorsOptions = ['red', 'yellow', 'green', 'blue', 'magenta', 'cyan', 'white'];
@@ -21,7 +28,10 @@ const streamer = stream => {
   let lastColor = -1;
   let newColor = 0;
   return setInterval(() => {
-    if (index >= frames.length) index = 0; stream.push('\033[2J\033[H');
+    if (index >= frames.length) index = 0;
+
+    // clear the screen
+    stream.push('\033[2J\033[H');
 
     newColor = Math.floor(Math.random() * numColors);