Integrates Codef Library

* Adds StarField & 3D Lines
* Style fixes to accommodate canvas
* Adds Canvas container

Signed-off-by: Indrajith K L <mac91112@gmail.com>

player.js

@@ -10,6 +10,11 @@
     // const uploadInfoEl = document.getElementById("upload-info");
     const fileUploadEl = document.getElementById("file-upload");
     let volume = 1;
+    let effectCanvas;
+    let starField;
+    let line3D;
+    const synthwaveColor = 0xff2975;
+
     openDialog();
     getMusic();
     listenUploadFileChange();
@@ -49,6 +54,7 @@
     document.getElementById("initButton")?.addEventListener("click", () => {
         modalEl.classList.remove("open");
         playMusic();
+        initCodef();
     });
 
     document.getElementById("history").addEventListener("click", () => {
@@ -223,4 +229,25 @@ https://retrowave.ru/${musicData.streamUrl}
 
         document.body.removeChild(element);
     }
+
+    function initCodef() {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        effectCanvas = new canvas(width, height, 'codef-canvas');
+        starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0);
+        line3D = new codef3D(effectCanvas, 320, 75, 1, 1500 );
+        line3D.line({x:-320, y:0, z:0},{x:320, y:0, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
+        line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
+        renderCodeFx();
+    }
+
+    function renderCodeFx() {
+        effectCanvas.fill('#000000');
+        line3D.group.rotation.x+=0.01;
+        line3D.group.rotation.y+=0.02;
+        line3D.group.rotation.z+=0.04;
+        starField.draw();
+        line3D.draw();
+        requestAnimationFrame(renderCodeFx);
+    }
 })();