diff --git a/run.sh b/run.sh new file mode 100755 index 0000000..8401988 --- /dev/null +++ b/run.sh @@ -0,0 +1,2 @@ +sudo sysctl fs.inotify.max_user_watches=524288 +gatsby develop diff --git a/src/images/audioTest.mp3 b/src/images/audioTest.mp3 new file mode 100644 index 0000000..805ca97 Binary files /dev/null and b/src/images/audioTest.mp3 differ diff --git a/src/images/audioTest2.mp3 b/src/images/audioTest2.mp3 new file mode 100644 index 0000000..2d9ac2d Binary files /dev/null and b/src/images/audioTest2.mp3 differ diff --git a/src/pages/indexConsole.js b/src/pages/indexConsole.js index 7afd9b9..5630101 100644 --- a/src/pages/indexConsole.js +++ b/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 = () => { -
-
- Ł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 ( +
+
+ загрузка контента с функциональностью сайта
-
- Łączenie z serwerem / подключение к серверу +
+ подключение к серверу
-
- Arłamów ============================ Петропавловск-Камчатский +
+ >> >> Петропавловск-Камчатский
-
+
+
=-¬¬ TF▄
.⌐ , ..,
@@ -41,6 +115,9 @@ const indexConsole = ({ }) => { ` ∩ ─.-^ -, ▐
` `'¬.[¬
`
+
+
+
╓ⁿ`1
@@ -93,8 +170,15 @@ const indexConsole = ({ }) => { ╙w,.═"``"^%,,,..^ ╢
-
- Wczytywanie zasobów [###___________________________] +
+
+ Подключен! +
+
+ загрузка ресурсов +
+
+ [_________________________] 0%
@@ -102,4 +186,4 @@ const indexConsole = ({ }) => { } -export default indexConsole \ No newline at end of file +export default IndexConsole \ No newline at end of file diff --git a/src/pages/indexInterface.js b/src/pages/indexInterface.js new file mode 100644 index 0000000..90e9b5f --- /dev/null +++ b/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 ( +
+
+
+ {play === false || pause === true ? '>' : '||'} +
+
+ 0:0 +
+
===
+
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+ |
+
+
===
+
+ 0:0 +
+
+ + + +
+ ) + +} +export default IndexInterface \ No newline at end of file diff --git a/src/stores/localization/duck/actions.js b/src/stores/localization/duck/actions.js new file mode 100644 index 0000000..e69de29 diff --git a/src/stores/localization/duck/index.js b/src/stores/localization/duck/index.js new file mode 100644 index 0000000..e69de29 diff --git a/src/stores/localization/duck/operations.js b/src/stores/localization/duck/operations.js new file mode 100644 index 0000000..e69de29 diff --git a/src/stores/localization/duck/reducer.js b/src/stores/localization/duck/reducer.js new file mode 100644 index 0000000..e69de29 diff --git a/src/stores/localization/duck/types.js b/src/stores/localization/duck/types.js new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/audioVisualizer.scss b/src/styles/audioVisualizer.scss new file mode 100644 index 0000000..a3ca360 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/styles/general.scss b/src/styles/general.scss index 97e83ab..7673e4f 100644 --- a/src/styles/general.scss +++ b/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); + } } } \ No newline at end of file