diff --git a/src/components/alphabeth.js b/src/components/alphabeth.js index f5e4757..ec966b5 100644 --- a/src/components/alphabeth.js +++ b/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", diff --git a/src/images/audioTest3.mp3 b/src/images/audioTest3.mp3 new file mode 100644 index 0000000..13e6570 Binary files /dev/null and b/src/images/audioTest3.mp3 differ diff --git a/src/pages/index/indexPanel/panels/songPanel.js b/src/pages/index/indexPanel/panels/songPanel.js index 5b7c355..053838c 100644 --- a/src/pages/index/indexPanel/panels/songPanel.js +++ b/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' - + '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' + const setTextHeight = () => { + let titleDivHeight = document.getElementById('songDetails').clientHeight + let textDivHeight = window.innerHeight - titleDivHeight + 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 (
@@ -48,12 +133,72 @@ const SongPanel = () => {
- 
-                            { exampleText }
-
-
- -
+ { exampleText.map( (row, key) => { + + const textHighlight = (text, mark) => { + let markRow = text.replace(RegExp(mark, 'g'), '
' + mark + '
') + return { __html: markRow } + } + if(exampleRowDetails[key] !== undefined) { + if (exampleRowDetails[key].group === false && exampleRowDetails[key].leader === true){ + return ( +
+ 
 setOpen( -1 ) : () => setOpen( key )}
+                                                        dangerouslySetInnerHTML={ textHighlight(row, exampleRowDetails[key].text) }>
+
+ 
+                                                            {exampleRowDetails[key].description}
+
+
+ ) + } + else if (exampleRowDetails[key].group === true && exampleRowDetails[key].leader === false) { + let link = exampleRowDetails[key].link + let text = exampleRowDetails[key].text + return ( +
+ 
 setOpen( -1 ) : () => setOpen( link )}
+                                                        dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
+
+
+ ) + } + else if (exampleRowDetails[key].group === true && exampleRowDetails[key].leader === true) { + let text = exampleRowDetails[key].text + return ( +
+ 
 setOpen( -1 ) : () => setOpen( key )}
+                                                        dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
+
+ 
+                                                            {exampleRowDetails[key].description}
+
+
+ ) + } + } + else + return ( + 
+                                                {row}
+
+ ) + } + ) + }
diff --git a/src/pages/index/playerInterface/audioPlayer.js b/src/pages/index/playerInterface/audioPlayer.js index ced5210..7788b43 100644 --- a/src/pages/index/playerInterface/audioPlayer.js +++ b/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 diff --git a/src/styles/songPanel.scss b/src/styles/songPanel.scss index e0f10e6..7aafecb 100644 --- a/src/styles/songPanel.scss +++ b/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%; - float: left; + width: auto; + float: right; } #songTitle { text-align: left; padding-top: 10px; - width: 50%; + width: auto; float: left; } } } #songText { - width: 90%; - height: auto; - padding: 5%; - padding-top: 0; + width: 95%; + overflow: hidden; + overflow-y: scroll; + 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; } } }