add text segment with highlights -> songPanel.js

src/components/alphabeth.js

@@ -273,6 +273,94 @@ export const alphabeth = {
 + " -=-=-=-=\n"
 + "=-=-=--=-\n",
 
+'#':
+  "  =- -=  \n"
++ "-=-=-=-=-\n"
++ "  =- -=  \n"
++ "  =- -=  \n"
++ "-=-=-=-=-\n"
++ "  =- -=  \n",
+
+'0':
+  " =-=-=-= \n"
++ "=-=-*-=-=\n"
++ "=-=   =-=\n"
++ "=-=   =-=\n"
++ "=-=-_-=-=\n"
++ " =-=-=-= \n",
+
+'1':
+  "   =-=   \n"
++ " =-=-=   \n"
++ "   =-=   \n"
++ "   =-=   \n"
++ "   =-=   \n"
++ "   =-=   \n",
+
+'2':
+  " =-=-=-= \n"
++ "=-=-=-=-=\n"
++ "=-=   =-=\n"
++ "    =-=  \n"
++ " -=-=-=-=\n"
++ "-=-=-=-==\n",
+
+'3':
+  " =-=-=-= \n"
++ "=-=   =-=\n"
++ "  ___=-= \n"
++ "  ***=-= \n"
++ "=-=   =-=\n"
++ " =-=-=-= \n",
+
+'4':
+  "   =-=   \n"
++ "  =-=    \n"
++ " =-=_-=--\n"
++ "=-=-==-=-\n"
++ "     =-= \n"
++ "     =-= \n",
+
+'5':
+  "=-=-=-=-=\n"
++ "=-=   *-=\n"
++ "=-=-=-=_ \n"
++ "    ^*=-=\n"
++ "=-,._*=-=\n"
++ "=-=-=-=-=\n",
+
+'6':
+  " =-=-=-= \n"
++ "=-=   =-=\n"
++ "=-=-___  \n"
++ "=-=-=--= \n"
++ "=-=   =-=\n"
++ " =-=-=-= \n",
+
+'7':
+  "=-=-=-=-=\n"
++ "=-=-=-=- \n"
++ "    =-=  \n"
++ "   =-=   \n"
++ "  =-=    \n"
++ " =-=     \n",
+
+'8':
+  " =-=-=-= \n"
++ "=-=   =-=\n"
++ " -=-=-=- \n"
++ "=-=   =-=\n"
++ "=-=-=-=-=\n"
++ " =-=-=-= \n",
+
+'9':
+  " =-=-=-= \n"
++ "=-=   =-=\n"
++ " =-=-=-=-\n"
++ "   ***=-=\n"
++ "=-=   =-=\n"
++ " =-=-=-= \n",
+
 ' ':
  "\n\n\n",
 

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

@@ -1,17 +1,21 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import '../../../../styles/songPanel.scss'
 
 const SongPanel = () => {
 
-    useEffect( () => generateTitleCode())
+    useEffect( () => generateTitleCode() )
+    useEffect( () => setTextHeight() )
+
+    const [openDescription, setOpen] = useState(-1)
+
+    // ANSI: ▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏░▒▓▐▔▕▖▗▘▙▚▛▜▝▞▟
 
     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++) {
@@ -26,10 +30,91 @@ const SongPanel = () => {
         document.getElementById('songCode').innerHTML = code
     }
 
-    let exampleText = 'Znam wielu co robią zajebistą muzykę, kolego,\n'
+    const setTextHeight = () => {
-        + 'Nie znam ani jednego, z kogo zrobiłaby zajebistego,\n'
+        let titleDivHeight = document.getElementById('songDetails').clientHeight
-        + 'Ludzie płyną z nurtem, bo fajne, bo modne,\n'
+        let textDivHeight = window.innerHeight - titleDivHeight
-        + 'Leczą swe komplexy, rozmieniają się na drobne,\n'
+        document.getElementById('songText').style = 'height: ' + (textDivHeight - 50) + 'px;'
+    }
+
+    let exampleText = [
+        '[Zwrotka Rzukk]\n',
+        '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',
+
+        '\nZnam 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',
+
+        '\nZnam 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',
+
+        '\nZnam 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',
+
+        '\n[Zwrotka Rzukk]\n',
+        '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',
+
+        '\nZnam 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',
+
+        '\nZnam 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',
+
+        '\nZnam 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'
+    ]
+
+    let exampleRowDetails = {
+        1: {
+            group: false,
+            leader: true,
+            text: 'Znam wielu co robią',
+            description: 'chodzi o to, że ktoś coś robi, itpchodzi o to, że ktoś coś robi, itpchodzi o to, że ktoś coś robi, itp',
+            image: ''
+        },
+        4: {
+            group: false,
+            leader: true,
+            text: 'rozmieniają się na drobne',
+            description: 'leczą no wszystko jasne leczą no wszystko jasne leczą no wszystko jasne leczą no wszystko jasne leczą no wszystko jasne',
+            image: ''
+        },
+        14: {
+            group: true,
+            leader: false,
+            link: 16,
+            text: ''
+        },
+        15: {
+            group: true,
+            leader: false,
+            link: 16,
+            text: ''
+        },
+        16: {
+            group: true,
+            leader: true,
+            text: '',
+            description: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum',
+            image: ''
+        }
+    }
 
     return (
         <div id='songPanel'>
@@ -48,12 +133,72 @@ const SongPanel = () => {
                 </div>
                 <div id='songText'>
                     <div className='textSection'>
-                        <pre className='generalText'>
+                        { exampleText.map( (row, key) => {
-                            { exampleText }
-                        </pre>
-                        <div className='rowDetails'>
                                     
+                                    const textHighlight = (text, mark) => {
+                                        let markRow = text.replace(RegExp(mark, 'g'), '<pre class="textHighlights">' + mark + '</pre>')
+                                        return { __html: markRow }
+                                    }
+                                    if(exampleRowDetails[key] !== undefined) {
+                                        if (exampleRowDetails[key].group === false && exampleRowDetails[key].leader === true){
+                                            return (
+                                                <div>
+                                                    <pre 
+                                                        id={'row' + key} 
+                                                        className='generalText'
+                                                        onClick={ openDescription === key ? () => setOpen( -1 ) : () => setOpen( key )}
+                                                        dangerouslySetInnerHTML={ textHighlight(row, exampleRowDetails[key].text) }>
+                                                    </pre>
+                                                    <pre 
+                                                        id={'description' + key} 
+                                                        className={ openDescription === key ? 'rowDetails rowDetailsOpen' : 'rowDetails'}>
+                                                            {exampleRowDetails[key].description}
+                                                    </pre>
                                                 </div>
+                                            )
+                                        }
+                                        else if (exampleRowDetails[key].group === true && exampleRowDetails[key].leader === false) {
+                                            let link = exampleRowDetails[key].link
+                                            let text = exampleRowDetails[key].text
+                                            return (
+                                                <div>
+                                                    <pre 
+                                                        id={'row' + key} 
+                                                        className='generalText'
+                                                        onClick={ openDescription === link ? () => setOpen( -1 ) : () => setOpen( link )}
+                                                        dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
+                                                    </pre>
+                                                </div>
+                                            )
+                                        }
+                                        else if (exampleRowDetails[key].group === true && exampleRowDetails[key].leader === true) {
+                                            let text = exampleRowDetails[key].text
+                                            return (
+                                                <div>
+                                                    <pre 
+                                                        id={'row' + key} 
+                                                        className='generalText'
+                                                        onClick={ openDescription === key ? () => setOpen( -1 ) : () => setOpen( key )}
+                                                        dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
+                                                    </pre>
+                                                    <pre 
+                                                        id={'description' + key} 
+                                                        className={ openDescription === key ? 'rowDetails rowDetailsOpen' : 'rowDetails'}>
+                                                            {exampleRowDetails[key].description}
+                                                    </pre>
+                                                </div>
+                                            )
+                                        }
+                                    }
+                                    else
+                                        return (
+                                            <pre id={key} className='generalText'>
+                                                {row}
+                                            </pre>
+                                        )
+                                }
+                            ) 
+                        }
                     </div>
                 </div>
             </div>

src/pages/index/playerInterface/audioPlayer.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 
 import '../../../styles/audioVisualizer.scss'
 import { alphabeth } from '../../../components/alphabeth'
-import audioTest from '../../../images/audioTest.mp3'
+import audioTest from '../../../images/audioTest3.mp3'
 
 
 const AudioPlayer = () => {
@@ -190,7 +190,7 @@ const AudioPlayer = () => {
     }
 
     const viewTitleAudio = async() => {
-        let title = 'rzukk x bragga bad'
+        let title = 'rzukk #hot16chellenge2'
         title = title.toUpperCase()
         let titleASCII = [];
         let i

src/styles/songPanel.scss

@@ -6,12 +6,13 @@
     .songPanelColumn {
         width: 50%;
         height: 100%;
-        //border-left: 1px solid rgba(172,36,36,1);
 
         #songDetails {
-            width: 90%;
+            width: 95%;
             height: 85px;
-            padding: 5%;
+            padding-right: 5%;
+            padding-top: 50px;
+            padding-bottom: 25px;
             
             #songCode {
                 text-align: left;
@@ -23,36 +24,59 @@
                 #songAddress {
                     text-align: right;
                     padding-top: 10px;
-                    width: 50%;
+                    width: auto;
-                    float: left;
+                    float: right;
                 }
 
                 #songTitle {
                     text-align: left;
                     padding-top: 10px;
-                    width: 50%;
+                    width: auto;
                     float: left;
                 }
             }
         }
 
         #songText {
-            width: 90%;
+            width: 95%;
-            height: auto;
+            overflow: hidden;
-            padding: 5%;
+            overflow-y: scroll;
-            padding-top: 0;
+            padding-right: 5%;
+            margin-bottom: 50px;
 
             .textSection {
                 width: 100%;
                 height: auto;
-                padding-top: 2.5%;
 
                 .generalText {
                     width: 100%;
+                    font-size: 13px;
+                    display: flex;
+
+                    .textHighlights {
+                        background-color: rgba(172,36,36,1);
+                        color: black;
+                        margin: 0;
+
+                        cursor: pointer;
+                    }
                 }
 
                 .rowDetails {
-                    width: 0%;
+                    width: 90%;
+                    max-width: 90%;
+                    height: auto;
+                    display: none;
+
+                    white-space: normal;
+
+                    padding-left: 5%;
+                    padding-right: 5%;
+                    padding-top: 10px;
+                    padding-bottom: 10px;
+                }
+                .rowDetailsOpen {
+                    display: block;
                 }
             }
         }