Lekcja 4 (chyba)

assets/js/2137.js

@@ -24,10 +24,14 @@ class Barka extends HTMLElement {
             }
             
             canvas {
-                width: 40rem;
-                height: 25rem;
+                position: fixed;
+                left: 0;
+                right: 0;
+                bottom: 0rem;
+                width: 100svw;
+                height: 12rem;
                 margin: auto;
-                border: .3rem solid #ffffff;
+                /* border: .3rem solid #ffffff; */
             }
         `;
         this.shadow.append(styl)
@@ -44,9 +48,9 @@ class Barka extends HTMLElement {
         const akceptowalneSpoznienie = 600;
 
 
-        console.log("dev");
-        barka.start();
-        return;
+        // console.log("dev");
+        // barka.start();
+        // return;
         if (sekundyDo2137 >= 0) {
             await new Promise(resolve => setTimeout(resolve, sekundyDo2137 * 1000));
             console.log("już czas.");
@@ -130,10 +134,11 @@ class Barka extends HTMLElement {
         }
         this.analyser.getByteTimeDomainData(this.dataArray);
 
-        this.ctx2D.fillStyle = "rgb(13, 13, 24)";
+        this.canvas.width = this.canvas.clientWidth;
+        this.canvas.height = this.canvas.clientHeight;
         this.ctx2D.clearRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
         
-        this.ctx2D.lineWidth = 2;
+        this.ctx2D.lineWidth = 5;
         this.ctx2D.strokeStyle = "rgb(203, 166, 247)";
         this.ctx2D.beginPath();
         
@@ -149,14 +154,14 @@ class Barka extends HTMLElement {
             if (peak < v) {
                 peak = v;
             }
-            const y = v * 2 * middle + middle / 4;
+            const y = v * 4 * middle + middle;
 
             if (i == 0) {
                 this.ctx2D.moveTo(x, y);
             } else {
                 this.ctx2D.lineTo(x, y);
             }
-
+        
             x += sliceWidth;
         }
 
@@ -164,9 +169,11 @@ class Barka extends HTMLElement {
         this.ctx2D.lineTo(this.canvas.clientWidth, this.canvas.clientHeight / 2);
         this.ctx2D.stroke();
 
-        if (this.audio.currentTime >= 39) {
+        if (this.audio.currentTime > 39) {
+            this.canvas.style.backgroundColor = "#1e1e2e";
             this.style.backgroundColor = `rgb(${88 + 255 * peak}, ${137 + 255 * peak}, ${194 + 255 * peak}`;
         } else {
+            this.canvas.style.backgroundColor = "";
             this.style.backgroundColor = `rgb(${255 * peak}, ${255 * peak}, ${255 * peak}`;
         }
         this.style.scale = 1 + peak / (peak > 0.1 ? 5 : 10);
@@ -191,4 +198,6 @@ const barka = document.createElement("barka-comp");
 document.body.appendChild(barka);
 document.addEventListener("DOMContentLoaded", () => {
     barka.kontroler();
-});
+});
+
+window.barka = barka;

assets/js/nawigacja.js

@@ -1,6 +1,6 @@
 const nawigacjaLinki = [
     { nazwa: "Tabele", link: "/tabele.html" },
-    { nazwa: "Liczby", link: "/liczby.html" },
+    { nazwa: "Grafika", link: "/grafika.html" },
 ];
 const stopkaLinki = [
     [
@@ -18,6 +18,7 @@ const stopkaLinki = [
     [
         "HTML",
         { nazwa: "Tabele", link: "/tabele.html" },
+        { nazwa: "Grafika", link: "/grafika.html" },
     ],
     [
         "Wszystko",