Background animation: offset for large screens / cleanup

client/scripts/ui.js

@@ -546,29 +546,24 @@ window.addEventListener('beforeinstallprompt', e => {
 
 // Background Animation
 Events.on('load', () => {
-    var requestAnimFrame = (function() {
-        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
-            function(callback) {
-                window.setTimeout(callback, 1000 / 60);
-            };
-    })();
-    var c = document.createElement('canvas');
+    let c = document.createElement('canvas');
     document.body.appendChild(c);
-    var style = c.style;
+    let style = c.style;
     style.width = '100%';
     style.position = 'absolute';
     style.zIndex = -1;
     style.top = 0;
     style.left = 0;
-    var ctx = c.getContext('2d');
-    var x0, y0, w, h, dw;
+    let ctx = c.getContext('2d');
+    let x0, y0, w, h, dw;
 
     function init() {
         w = window.innerWidth;
         h = window.innerHeight;
         c.width = w;
         c.height = h;
-        var offset = h > 380 ? 100 : 65;
+        let offset = h > 380 ? 100 : 65;
+        offset = h > 800 ? 116 : h;
         x0 = w / 2;
         y0 = h - offset;
         dw = Math.max(w, h, 1000) / 13;
@@ -578,28 +573,28 @@ Events.on('load', () => {
 
     function drawCicrle(radius) {
         ctx.beginPath();
-        var color = Math.round(255 * (1 - radius / Math.max(w, h)));
+        let color = Math.round(255 * (1 - radius / Math.max(w, h)));
         ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)';
         ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
         ctx.stroke();
         ctx.lineWidth = 2;
     }
 
-    var step = 0;
+    let step = 0;
 
     function drawCircles() {
         ctx.clearRect(0, 0, w, h);
-        for (var i = 0; i < 8; i++) {
+        for (let i = 0; i < 8; i++) {
             drawCicrle(dw * i + step % dw);
         }
         step += 1;
     }
 
-    var loading = true;
+    let loading = true;
 
     function animate() {
         if (loading || step % dw < dw - 5) {
-            requestAnimFrame(function() {
+            requestAnimationFrame(function() {
                 drawCircles();
                 animate();
             });