add AudioVirtualizer -> IndexInterface

run.sh

@@ -0,0 +1,2 @@
+sudo sysctl fs.inotify.max_user_watches=524288
+gatsby develop

src/pages/indexConsole.js

@@ -1,22 +1,96 @@
-import React, {useState} from 'react'
+import React, { useState, useEffect } from 'react'
 
 import '../styles/general.scss'
 
-const indexConsole = ({ }) => {
-    
-    return (
+const IndexConsole = () => {
 
-        <div>
-            <div>
-                Ładowanie funkcjonalności / загрузка контента с функциональностью сайта
+    useEffect( () => { loadingDivs() } )
+
+    const sleep = (ms) => {
+        return new Promise(resolve => setTimeout(resolve, ms))
+    }
+
+    const displayNone = {
+        display: 'none'
+    }
+
+    let iterationDivs = 0
+    const loadingDivs = async() => {
+        if (window.innerWidth < 900) {
+            document.body.style.fontSize = '8px'
+            document.getElementById('Poland').style.width = '180px'
+            document.getElementById('Russia').style.width = '310px'
+            document.getElementById('connect').style.width = '390px'
+            document.getElementById('connect').style.marginTop = '170px'
+            document.getElementById('connect').style.marginLeft = '-100px'
+        }
+        if (iterationDivs === 0)
+            while (iterationDivs < 7) {
+                document.getElementById(iterationDivs).style = 'display: block'
+                if (iterationDivs === 2) 
+                    await loadingLocation()
+                if (iterationDivs === 3)
+                    await loadingConnect()
+                if (iterationDivs === 6)
+                    await loadingBar()
+                iterationDivs++
+                await sleep(300)
+            }
+    }
+
+    const loadingLocation = async () => {
+        const response = await fetch('https://ipapi.co/json/')
+        let json = await response.json()
+        document.getElementById('2').innerHTML = json.ip
+            + ' ( '
+            + json.city
+            + ' ) >> Петропавловск-Камчатский'
+    }
+
+    let connectASCII = '$--a-sd--К-=;-/.=--=.-=а-=-=-;м-==-.=ч-=--' 
+    + ';=-а-=-;=т-=;=-;=-с-=;-к-=-=-=и-=-=,.,/.//,/;--=-й-=-=;-=,.'
+    + ',..v,||=-;;=--__+-=-=-='
+    let iterationASCII= 0
+    const loadingConnect = async() => {
+        let popChars = ''
+        while (iterationASCII < connectASCII.length) {
+            popChars = connectASCII.substring(0, iterationASCII)
+            document.getElementById('connect').innerHTML = popChars
+            await sleep(3)
+            iterationASCII++
+        }
+    }
+    
+    let procentage = 0
+    const loadingBar = async() => {
+        let loadingBar = document.getElementById('6').innerHTML
+        let lastProcentage = procentage
+        for (let i = 0; i < loadingBar.length; i++) {
+            loadingBar = document.getElementById('6').innerHTML
+            lastProcentage = procentage
+            if (loadingBar[i] === '_') {
+                procentage += 4
+                document.getElementById('6').innerHTML = loadingBar
+                    .replace('_','#')
+                    .replace(lastProcentage, procentage)
+                await sleep(30)
+            }
+        }
+    }    
+
+    return (
+        <div id='consoleDiv'>
+            <div id='0' style={displayNone}>
+                загрузка контента с функциональностью сайта
             </div>
-            <div>
-                Łączenie z serwerem / подключение к серверу
+            <div id='1' style={displayNone}>
+                подключение к серверу
             </div>
-            <div>
-                Arłamów ============================ Петропавловск-Камчатский
+            <div id='2' style={displayNone}>
+                 >> >> Петропавловск-Камчатский
             </div>
-            <div className='ASCIIview'>
+            <br />
+            <div className='ASCIIview' id='3' style={displayNone}>
                 <div className='ASCIIchars' id='Poland'>
             =-¬¬   TF▄                              <br />
            .⌐          ,   ..,                      <br />
@@ -41,6 +115,9 @@ const indexConsole = ({ }) => {
                       `     ∩ ─.-^ -,    ▐          <br />
                            `         `'¬.[¬         <br />
                                           `         <br />
+                </div>
+                <div className='ASCIIchars' id='connect'>
+
                 </div>
                 <div className='ASCIIchars' id='Russia'>
                                                                 ╓ⁿ`1                            <br />
@@ -93,8 +170,15 @@ const indexConsole = ({ }) => {
            ╙w,.═"``"^%,,,..^                                       ╢                            <br />
                 </div>
             </div>
-            <div>
-                Wczytywanie zasobów [###___________________________]
+            <br />
+            <div id='4' style={displayNone}>
+                Подключен!
+            </div>
+            <div id='5' style={displayNone}>
+                загрузка ресурсов
+            </div>
+            <div id='6' style={displayNone}>
+                [_________________________] 0%
             </div>
         </div>
 
@@ -102,4 +186,4 @@ const indexConsole = ({ }) => {
 
 }
 
-export default indexConsole
+export default IndexConsole

src/pages/indexInterface.js

@@ -0,0 +1,195 @@
+import React, { useState, useEffect } from 'react'
+
+import '../styles/audioVisualizer.scss'
+import audioTest from '../images/audioTest.mp3'
+
+const IndexInterface = () => {
+
+    const [play, setPlay] = useState(false)
+    const [pause, setPause] = useState(false)
+
+    const sleep = (ms) => {
+        return new Promise(resolve => setTimeout(resolve, ms))
+    }
+
+    const controlAudio = () => {
+        if (play === false) {
+            setPlay(!play)
+            playAudio()
+        }
+        else if (play === true && pause === false) {
+            setPause(!pause)
+            pauseAudio()
+        }
+        else if (play === true && pause === true) {
+            setPause(!pause)
+            resumeAudio()
+        }
+    }
+
+    const pauseAudio = () => {
+        let audio = document.getElementById("audio");
+        audio.pause()
+    }
+
+    const resumeAudio = () => {
+        let audio = document.getElementById("audio");
+        audio.play()
+    }
+
+    const playAudio = () => {
+
+        let audio = document.getElementById("audio");
+        audio.src = audioTest;
+        audio.load();
+        audio.play();
+        let context = new AudioContext();
+        let src = context.createMediaElementSource(audio);
+        let analyser = context.createAnalyser();
+
+        let canvas = document.getElementById("canvas");
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        let ctx = canvas.getContext("2d");
+
+        src.connect(analyser);
+        analyser.connect(context.destination);
+
+        analyser.fftSize = 256;
+
+        let bufferLength = analyser.frequencyBinCount;
+        console.log(bufferLength);
+
+        let dataArray = new Uint8Array(bufferLength);
+
+        let WIDTH = canvas.width;
+        let HEIGHT = canvas.height;
+
+        let barWidth = (WIDTH / bufferLength) * 2.5;
+        let barHeight;
+        let x = 0;
+
+        let frameString = '==================================================='
+
+        let frameStrings = [] // 52 chars in row
+
+        for (let i = 0; i <= 200; i++) {
+            frameStrings[i] = Math.random().toString(36)
+                + ""
+                + Math.random().toString(36)
+                + ""
+                + Math.random().toString(36)
+                + ""
+                + Math.random().toString(36);
+        }
+
+        let frame
+
+        const renderFrame = () => {
+            requestAnimationFrame(renderFrame);
+
+            x = 0;
+
+            analyser.getByteFrequencyData(dataArray);
+
+            ctx.fillStyle = "#000";
+            ctx.fillRect(0, 0, WIDTH, HEIGHT);
+
+            timerAudio(audio)
+
+            for (let i = 0; i < bufferLength; i++) {
+
+                barHeight = dataArray[i];
+
+                let r = barHeight + (25 * (i / bufferLength));
+                let g = 36;     //250 * ( i / bufferLength);
+                let b = 36;
+
+                ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
+                ctx.font = '15px Ubuntu'
+                frame = frameString.slice(0, barHeight / 10) + '='
+                ctx.fillText(frame, 0, x);
+
+                x += barWidth - 27;
+            }
+        }
+        const timerAudio = (audio) => {
+            let maxMinutes = parseInt(audio.duration / 60)
+            let maxSeconds = parseInt(audio.duration - (60 * maxMinutes))
+
+            let seconds = parseInt(audio.currentTime);
+            let minutes = parseInt(seconds / 60);
+            if (minutes > 0) {
+                seconds = parseInt(seconds - (60 * minutes))
+            }
+            document.getElementById('audioCurrentTime').innerHTML = minutes
+                + ':'
+                + seconds
+            document.getElementById('audioTime').innerHTML = maxMinutes
+                + ':'
+                + maxSeconds
+        }
+        const progressBarAudio = (audio) => {
+            let maxProgress = audio.duration
+            let onePercent = maxProgress / 100
+            let progress = 1;
+            for(let i = 0; i <= 100; i++) {
+                let bar = document.getElementById('audioProgressBar').innerHTML
+                document.getElementById('audioProgressBar').innerHTML = bar.replace('|', '#')
+                console.log(i)
+                sleep(parseInt((onePercent * 1000) * 5))
+            }
+            
+        }
+
+        audio.play();
+        renderFrame();
+        progressBarAudio(audio)
+    }
+
+    return (
+        <div id='audioVisualizerDiv'>
+            <div id='audioMenu'>
+                <div onClick={controlAudio}>
+                    {play === false || pause === true ? '>' : '||'}
+                </div>
+                <div id='audioCurrentTime' >
+                    0:0
+                </div>
+                <div>===</div>
+                <div id='audioProgressBar'>
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                    | <br />
+                </div>
+                <div>===</div>
+                <div id='audioTime'>
+                    0:0
+                </div>
+            </div>
+            <canvas id='canvas'>
+            </canvas>
+            <audio id='audio' controls>
+            </audio>
+        </div>
+    )
+
+}
+export default IndexInterface

src/styles/audioVisualizer.scss

@@ -0,0 +1,31 @@
+#audioVisualizerDiv {
+    width: 100%;
+    height: 20%;
+    display: flex;
+
+    #audioMenu {
+        height: 500px;
+        width: 50px;
+        left: 230px;
+        top: 50%;
+        transform: translateY(-50%);
+        position: fixed;
+        text-align: center;
+        
+        div {
+            padding-top: 5px;
+        }
+    }
+
+    #canvas {
+        height: 100%;
+        width: 100%;
+    }
+
+    #audio {
+        top: 90%;
+        left: 300px;
+        position: fixed;
+        width: 400px;
+    }
+}

src/styles/general.scss

@@ -4,31 +4,43 @@ body {
     font-family: Ubuntu;
 
     overflow: hidden;
-
-    margin: 50px;
+    margin: 0 auto;
 }
 
-.ASCIIview {
-    width: 100%;
-    height: 70%;
+#consoleDiv {
+    margin: 50px;
 
-    .ASCIIchars {
-        display: inline-block;
-        font-family: monospace;
-        vertical-align: baseline;
-        text-rendering: optimizeLegibility;
-        white-space: pre;
-        word-wrap: break-word;
-        text-align: right;
+    .ASCIIview {
+        width: 100%;
+        height: 70%;
 
-        letter-spacing: -0.2em;
-        line-height: 0.8em;
-    }
+        .ASCIIchars {
+            display: inline-block;
+            font-family: monospace;
+            vertical-align: baseline;
+            text-rendering: optimizeLegibility;
+            white-space: pre;
+            word-wrap: break-word;
+            text-align: right;
 
-    #Poland { 
-        width: 300px;
-    }
-    #Russia {
-        width: 600px;
+            letter-spacing: -0.2em;
+            line-height: 0.8em;
+        }
+
+        #Poland { 
+            width: 300px;
+        }
+        #Russia {
+            width: 600px;
+        }
+        #connect {
+            width: 630px;
+            overflow: hidden;
+            text-align: left;
+            position: absolute;
+            margin-top: 290px;
+            margin-left: -120px;
+            transform: rotate(-14deg);
+        }
     }
 }