diff --git a/src/images/poland ascii border b/src/assets/poland ascii border similarity index 100% rename from src/images/poland ascii border rename to src/assets/poland ascii border diff --git a/src/images/russian ascii border b/src/assets/russian ascii border similarity index 100% rename from src/images/russian ascii border rename to src/assets/russian ascii border diff --git a/src/assets/alphabeth.js b/src/components/alphabeth.js similarity index 99% rename from src/assets/alphabeth.js rename to src/components/alphabeth.js index 166dea6..f5e4757 100644 --- a/src/assets/alphabeth.js +++ b/src/components/alphabeth.js @@ -43,10 +43,10 @@ export const alphabeth = { 'D': "===-=- \n" -+ "=--=-=-= \n" ++ "=-- -=-= \n" + "=-= =-=\n" + "=-= =-=\n" -+ "==-=-=-= \n" ++ "==- -=-= \n" + "==--=- \n", 'E': diff --git a/src/pages/index/indexInterface.js b/src/pages/index/indexInterface.js new file mode 100644 index 0000000..b5e5d2a --- /dev/null +++ b/src/pages/index/indexInterface.js @@ -0,0 +1,14 @@ +import React from 'react' + +import AudioPlayer from './playerInterface/audioPlayer' +import IndexPanel from './indexPanel/indexPanel' + +const IndexInterface = () => { + return ( +
+ + +
+ ) +} +export default IndexInterface \ No newline at end of file diff --git a/src/pages/index/indexPanel/indexPanel.js b/src/pages/index/indexPanel/indexPanel.js new file mode 100644 index 0000000..915706f --- /dev/null +++ b/src/pages/index/indexPanel/indexPanel.js @@ -0,0 +1,23 @@ +import React from 'react' + +import SongPanel from './panels/songPanel' +import AlbumPanel from './panels/albumPanel' + +import '../../../styles/general.scss' + +const IndexPanel = () => { + + if ( 1 === 1 ) + return ( +
+ +
+ ) + else + return ( +
+ +
+ ) +} +export default IndexPanel \ No newline at end of file diff --git a/src/pages/index/indexPanel/panels/albumPanel.js b/src/pages/index/indexPanel/panels/albumPanel.js new file mode 100644 index 0000000..93a0e10 --- /dev/null +++ b/src/pages/index/indexPanel/panels/albumPanel.js @@ -0,0 +1,9 @@ +import React from 'react' + +const AlbumPanel = () => { + return ( +
+
+ ) +} +export default AlbumPanel \ No newline at end of file diff --git a/src/pages/index/indexPanel/panels/songPanel.js b/src/pages/index/indexPanel/panels/songPanel.js new file mode 100644 index 0000000..5b7c355 --- /dev/null +++ b/src/pages/index/indexPanel/panels/songPanel.js @@ -0,0 +1,69 @@ +import React, { useEffect } from 'react' + +import '../../../../styles/songPanel.scss' + +const SongPanel = () => { + + useEffect( () => generateTitleCode()) + + let title = 'rzukk x bragga bad' + let address = '/op?song=aQ2ed#!WkL#csd435fk' + let code = '' + + const generateTitleCode = () => { + //let randomChars = '▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏░▒▓▐▔▕▖▗▘▙▚▛▜▝▞▟' + let randomChars = '░▒' + let charInRowCount = parseInt((document.getElementById('songCode').clientWidth) / 10) - 6 + for (let i = 0; i < 3; i++) { + for (let j = 0; j < charInRowCount; j++) { + if (j === 0) + code += ' ▎▍▏▍▏' + else + code += randomChars[parseInt(Math.random() * randomChars.length)] + } + code += '
' + } + document.getElementById('songCode').innerHTML = code + } + + let exampleText = 'Znam wielu co robią zajebistą muzykę, kolego,\n' + + 'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n' + + 'Ludzie płyną z nurtem, bo fajne, bo modne,\n' + + 'Leczą swe komplexy, rozmieniają się na drobne,\n' + + return ( +
+
+
+
+
+
+
+ {title} +
+
+ {address} +
+
+
+
+
+ 
+                            { exampleText }
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ ) +} +export default SongPanel \ No newline at end of file diff --git a/src/pages/indexInterface.js b/src/pages/index/playerInterface/audioPlayer.js similarity index 96% rename from src/pages/indexInterface.js rename to src/pages/index/playerInterface/audioPlayer.js index ee9111c..ced5210 100644 --- a/src/pages/indexInterface.js +++ b/src/pages/index/playerInterface/audioPlayer.js @@ -1,11 +1,11 @@ import React, { useState, useEffect } from 'react' -import '../styles/audioVisualizer.scss' -import { alphabeth } from '../assets/alphabeth' -import audioTest from '../images/audioTest.mp3' +import '../../../styles/audioVisualizer.scss' +import { alphabeth } from '../../../components/alphabeth' +import audioTest from '../../../images/audioTest.mp3' -const IndexInterface = () => { +const AudioPlayer = () => { const [play, setPlay] = useState(false) const [pause, setPause] = useState(false) @@ -74,7 +74,7 @@ const IndexInterface = () => { let WIDTH = canvas.width; let HEIGHT = canvas.height; - let barWidth = (WIDTH / bufferLength) * 2.5; + //let barWidth = (WIDTH / bufferLength) * 2.5; let barHeight; let x = 0; @@ -118,7 +118,6 @@ const IndexInterface = () => { ctx.font = '15px Ubuntu' frame = frameString.slice(0, barHeight / 10) + '=' ctx.fillText(frame, 0, x); - x += window.innerHeight / (bufferLength - 34); } @@ -267,4 +266,4 @@ const IndexInterface = () => { ) } -export default IndexInterface \ No newline at end of file +export default AudioPlayer \ No newline at end of file diff --git a/src/styles/audioVisualizer.scss b/src/styles/audioVisualizer.scss index dd50534..de45bb2 100644 --- a/src/styles/audioVisualizer.scss +++ b/src/styles/audioVisualizer.scss @@ -2,6 +2,7 @@ height: 100%; width: 100%; overflow: hidden; + z-index: 0; #audioMenu { height: 500px; diff --git a/src/styles/general.scss b/src/styles/general.scss index 7673e4f..7b88223 100644 --- a/src/styles/general.scss +++ b/src/styles/general.scss @@ -7,6 +7,20 @@ body { margin: 0 auto; } +// index interface + + // index panel + + #panelDiv { + position: absolute; + height: 100%; + width: 80%; + left: 400px; + z-index: 1; + } + +// index console + #consoleDiv { margin: 50px; diff --git a/src/styles/songPanel.scss b/src/styles/songPanel.scss new file mode 100644 index 0000000..e0f10e6 --- /dev/null +++ b/src/styles/songPanel.scss @@ -0,0 +1,72 @@ +#songPanel { + width: 100%; + height: 100%; + display: flex; + + .songPanelColumn { + width: 50%; + height: 100%; + //border-left: 1px solid rgba(172,36,36,1); + + #songDetails { + width: 90%; + height: 85px; + padding: 5%; + + #songCode { + text-align: left; + overflow: hidden; + } + + #songThings { + + #songAddress { + text-align: right; + padding-top: 10px; + width: 50%; + float: left; + } + + #songTitle { + text-align: left; + padding-top: 10px; + width: 50%; + float: left; + } + } + } + + #songText { + width: 90%; + height: auto; + padding: 5%; + padding-top: 0; + + .textSection { + width: 100%; + height: auto; + padding-top: 2.5%; + + .generalText { + width: 100%; + } + + .rowDetails { + width: 0%; + } + } + } + + #songComments { + width: 90%; + height: auto; + padding: 5%; + } + + #albumSongs { + width: 90%; + height: auto; + padding: 5%; + } + } +} \ No newline at end of file