Introduce the progress bar for emote rendering

TODO.org

@@ -1,5 +1,6 @@
 - [-] Alpha
-  - [ ] GIF rendering progress is not reported
+  - [ ] Smooth progress report on the first phase of the emote
+    rendering (the OpenGL one)
   - [X] Preview window is upside down (the actual problem is
     gl.readPixel returns upside down image (because thank you OpenGL
     coordinate system) so we render upside down)

index.html

@@ -28,6 +28,10 @@ <h2>Select a Filter</h2>
     <h2>Render</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
     <div class="widget">
+      <div class="widget-element progress-bar">
+        <div class="progress" id="render-progress">
+        </div>
+      </div>
       <img id="render-preview" class="widget-element" />
       <div class="widget-element"><input id="render" type="submit" value="Render" /></div>
     </div>

index.js

@@ -188,10 +188,12 @@ function render(gl, canvas, program) {
         height: canvas.height,
     });
 
-    let fps = 30;
-    let dt = 1.0 / fps;
-    let duration = Math.PI / 3.0;
-    let frameCount = 100;
+    const fps = 30;
+    const dt = 1.0 / fps;
+    const duration = Math.PI / 3.0;
+    const frameCount = 100;
+
+    const renderProgress = document.getElementById("render-progress");
 
     let t = 0.0;
     while (t <= duration) {
@@ -218,11 +220,13 @@ function render(gl, canvas, program) {
             }
         }
 
-        console.log(canvas.width);
         gif.addFrame(new ImageData(pixels, canvas.width, canvas.height), {
             delay: dt * 1000,
             dispose: 2,
         });
+
+        renderProgress.style.width = `${(t / duration) * 50}%`;
+
         t += dt;
     }
 
@@ -232,7 +236,7 @@ function render(gl, canvas, program) {
     });
 
     gif.on('progress', (p) => {
-        console.log(`progress ${p}`);
+        renderProgress.style.width = `${50 + p * 50}%`;
     });
 
     gif.render();

main.css

@@ -29,3 +29,13 @@ h2 {
     margin: 0 auto;
     padding-top: 10px;
 }
+
+.progress-bar {
+    width: 100%;
+}
+
+.progress {
+    width: 0%;
+    height: 20px;
+    background: #07a;
+}