bardziej działa

assets/js/2137.js

@@ -1,4 +1,4 @@
-class Barka extends HTMLElement  {
+class Barka extends HTMLElement {
     #odtwarzanie = false;
 
     constructor() {
@@ -31,6 +31,32 @@ class Barka extends HTMLElement  {
             }
         `;
         this.shadow.append(styl)
+        this.style.display = "none";
+    }
+
+    /**
+     * Autozapłon
+     */
+    async kontroler() {
+        let godzina2137 = new Date();
+        godzina2137.setHours(21, 37);
+        let sekundyDo2137 = (godzina2137.getTime() - Date.now()) / 1000;
+        const akceptowalneSpoznienie = 600;
+
+
+        console.log("dev");
+        barka.start();
+        return;
+        if (sekundyDo2137 >= 0) {
+            await new Promise(resolve => setTimeout(resolve, sekundyDo2137 * 1000));
+            console.log("już czas.");
+            barka.start();
+        } else if (sekundyDo2137 + akceptowalneSpoznienie >= 0) {
+            console.log("lekko po czasie");
+            barka.start();
+        } else if (sekundyDo2137 < 0) {
+            alert("zaimplementować");
+        }
     }
 
     /**
@@ -57,6 +83,7 @@ class Barka extends HTMLElement  {
         }
         this.audio.addEventListener("playing", ev => {
             if (this.audio.played == 1) {
+                this.stop();
             }
         })
         try {
@@ -90,8 +117,9 @@ class Barka extends HTMLElement  {
     }
 
     stop() {
-        this.b
+        this.style.display = "none";
         this.#odtwarzanie = false;
+        this.kontroler();
     }
 
     async #ucyucy() {
@@ -117,11 +145,11 @@ class Barka extends HTMLElement  {
         let peak = 0;
 
         for (let i = 0; i < this.bufferLength; i++) {
-            const v = this.dataArray[i] / 128.0;
+            const v = (this.dataArray[i] / 128.0 - 1) * (1 - this.audio.volume);
             if (peak < v) {
                 peak = v;
             }
-            const y = v * middle * (1 - this.audio.volume) / 2;
+            const y = v * 2 * middle + middle / 4;
 
             if (i == 0) {
                 this.ctx2D.moveTo(x, y);
@@ -136,24 +164,18 @@ class Barka extends HTMLElement  {
         this.ctx2D.lineTo(this.canvas.clientWidth, this.canvas.clientHeight / 2);
         this.ctx2D.stroke();
 
-        peak -= 0.5;
-        console.log(peak);
-        this.style.backgroundColor = `rgb(${255 * peak}, ${255 * peak}, ${255 * peak}`;
+        if (this.audio.currentTime >= 39) {
+            this.style.backgroundColor = `rgb(${88 + 255 * peak}, ${137 + 255 * peak}, ${194 + 255 * peak}`;
+        } else {
+            this.style.backgroundColor = `rgb(${255 * peak}, ${255 * peak}, ${255 * peak}`;
+        }
+        this.style.scale = 1 + peak / (peak > 0.1 ? 5 : 10);
     }
 }
 
 customElements.define("barka-comp", Barka);
 
 async function start() {
-    
-    const canvas = document.createElement("canvas");
-    canvas.style.width = "40rem";
-    canvas.style.height = "25rem";
-    root.appendChild(canvas);
-    const cvastx = canvas.getContext("2d");
-    cvastx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
-
-
     await new Promise(resolve => setTimeout(resolve, 38000))
 
     const kreciol = document.createElement("img")
@@ -168,5 +190,5 @@ async function start() {
 const barka = document.createElement("barka-comp");
 document.body.appendChild(barka);
 document.addEventListener("DOMContentLoaded", () => {
-    barka.start();
+    barka.kontroler();
 });