clean directory tree && add audio indexPanel primary functionality

src/components/alphabeth.js

@@ -43,10 +43,10 @@ export const alphabeth = {
 
 'D':
   "===-=-   \n"
-+ "=--=-=-= \n"
++ "=-- -=-= \n"
 + "=-=   =-=\n"
 + "=-=   =-=\n"
-+ "==-=-=-= \n"
++ "==- -=-= \n"
 + "==--=-   \n",
 
 'E':

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 (
+        <div>
+            <AudioPlayer />
+            <IndexPanel />
+        </div>
+    )
+}
+export default IndexInterface

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 (
+        <div id='panelDiv'>
+            <SongPanel />
+        </div>
+    )
+    else
+    return (
+        <div id='panelDiv'>
+            <AlbumPanel />
+        </div>
+    )
+}
+export default IndexPanel

src/pages/index/indexPanel/panels/albumPanel.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AlbumPanel = () => {
+    return (
+        <div>
+        </div>
+    )
+}
+export default AlbumPanel

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 += '<br />'
+        }
+        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 (
+        <div id='songPanel'>
+            <div className='songPanelColumn'>
+                <div id='songDetails'>
+                    <div id='songCode'>
+                    </div>
+                    <div id='songThings'>
+                        <div id='songTitle'>
+                            {title}
+                        </div>
+                        <div id='songAddress'>
+                            {address}
+                        </div>
+                    </div>
+                </div>
+                <div id='songText'>
+                    <div className='textSection'>
+                        <pre className='generalText'>
+                            { exampleText }
+                        </pre>
+                        <div className='rowDetails'>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className='songPanelColumn'>
+                <div id='songComments'>
+                </div>
+                <div id='albumSongs'>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default SongPanel

src/pages/index/playerInterface/audioPlayer.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react'
 
-import '../styles/audioVisualizer.scss'
+import '../../../styles/audioVisualizer.scss'
-import { alphabeth } from '../assets/alphabeth'
+import { alphabeth } from '../../../components/alphabeth'
-import audioTest from '../images/audioTest.mp3'
+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;
 
@@ -119,7 +119,6 @@ const IndexInterface = () => {
                 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
+export default AudioPlayer

src/styles/audioVisualizer.scss

@@ -2,6 +2,7 @@
     height: 100%;
     width: 100%;
     overflow: hidden;
+    z-index: 0;
 
     #audioMenu {
         height: 500px;

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;
 

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%;
+        }
+    }
+}