{!allowed &&
diff --git a/src/Components/CountDownTimer/CountDownTimer.tsx b/src/Components/CountDownTimer/CountDownTimer.tsx
index afd5579..8959e4b 100644
--- a/src/Components/CountDownTimer/CountDownTimer.tsx
+++ b/src/Components/CountDownTimer/CountDownTimer.tsx
@@ -1,7 +1,11 @@
-import React,{useEffect,useState} from 'react';
+import React,{ReactElement, useEffect,useState} from 'react';
import './Timer.scss';
-export default function CountDownTimer() {
+interface CountDown_Props{
+ onEnd:Function
+}
+
+export default function CountDownTimer({onEnd}:CountDown_Props):ReactElement {
const [time,setTime] = useState(Date.now());
const [data,setData] = useState({
@@ -32,6 +36,9 @@ export default function CountDownTimer() {
minutes:minutes,
seconds:seconds
})
+ if(distance <= 0){
+ onEnd();
+ }
}, [time])
return (
diff --git a/src/Components/InsideNavigator/InsideNavigator.style.scss b/src/Components/InsideNavigator/InsideNavigator.style.scss
index ad30c60..3579a09 100644
--- a/src/Components/InsideNavigator/InsideNavigator.style.scss
+++ b/src/Components/InsideNavigator/InsideNavigator.style.scss
@@ -51,9 +51,6 @@
transition: 0.4s;
}
}
- .SingleLink:hover{
- // background-color: rgba(128, 128, 128, 0.377);
- }
}
.Component{
padding-top: 80px;
@@ -62,5 +59,87 @@
z-index: 2;
overflow-y:auto;
}
+ .Component::-webkit-scrollbar {
+ width: 10px;
+ }
+ .Component::-webkit-scrollbar-track {
+ background: #f1f1f105;
+ border-radius: 9px;
+ }
+ .Component::-webkit-scrollbar-thumb {
+ background: rgba(136, 136, 136, 0.24);
+ border-radius: 9px;
+ }
+ .Component::-webkit-scrollbar-thumb:hover {
+ background: rgba(85, 85, 85, 0.712);
+ }
+}
+
+@media only screen and (max-width:1000px) {
+ .InsideNavigator{
+ .Links{
+ padding-left: 20px;
+ .SingleLink{
+ width:98%;
+ .SingleLinkText{
+ font-size: 14px;
+ width:90%;
+ }
+ }
+ }
+ }
+}
+
+@media only screen and (max-width:900px) {
+ .InsideNavigator{
+ flex-direction: column;
+ overflow-y: auto;
+ overflow-x: hidden;
+ .Links{
+ width:98%;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ align-items: center;
+ height:100px;
+ padding-left: 10px;
+ padding-right: 10px;
+ .SingleLink{
+ width:fit-content;
+ }
+ }
+ .Component{
+ box-shadow: 0px -2px 6px black;
+ width:100%;
+ z-index: 4;
+ }
+ }
+}
+
+@media only screen and (max-width:550px) {
+ .InsideNavigator{
+ .Links{
+ width:98%;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: flex-start;
+ height:auto;
+ margin-bottom: 0px;
+ .SingleLink{
+ height:fit-content;
+ min-height: 28px;
+ margin: 2px;
+ .SingleLinkText{
+ height:fit-content;
+ }
+ }
+ }
+ .Component{
+ width:100%;
+ }
+ }
}
diff --git a/src/Components/InsideNavigator/InsideNavigator.tsx b/src/Components/InsideNavigator/InsideNavigator.tsx
index 5239bc5..5a80032 100644
--- a/src/Components/InsideNavigator/InsideNavigator.tsx
+++ b/src/Components/InsideNavigator/InsideNavigator.tsx
@@ -46,10 +46,10 @@ export default function InsideNavigator({elements,width,height,proportion,setId,
return (
}
-
+
diff --git a/src/Pages/Main/Main.tsx b/src/Pages/Main/Main.tsx
index 098415f..9b6f800 100644
--- a/src/Pages/Main/Main.tsx
+++ b/src/Pages/Main/Main.tsx
@@ -108,7 +108,11 @@ export default function Main() {
default:
break;
}
- localStorage.setItem('options',JSON.stringify(currentOptions))
+ try{
+ localStorage.setItem('options',JSON.stringify(currentOptions))
+ }catch{
+ alert('this File is probably to big man')
+ }
setOptions(currentOptions);
}
diff --git a/src/Pages/Record/Record.styles.scss b/src/Pages/Record/Record.styles.scss
index c1c1661..9d634a3 100644
--- a/src/Pages/Record/Record.styles.scss
+++ b/src/Pages/Record/Record.styles.scss
@@ -207,3 +207,80 @@
display: flex;
flex-direction: row;
}
+
+@media only screen and (max-width:1650px){
+ .Record{
+ .content{
+ .flex-50{
+ .Canvas_Rec{
+ transform: scale(0.8);
+ }
+ }
+ }
+ }
+}
+
+@media only screen and (max-width:1420px){
+ .Record{
+ .content{
+ .flex-50{
+ .Canvas_Rec{
+ transform: scale(0.6);
+ }
+ }
+ }
+ }
+ #Record_Title{
+ font-size: 24px;
+ }
+ #Record_Description{
+ font-size: 16px;
+ }
+}
+
+@media only screen and (max-width:980px){
+ .Record{
+ overflow-y: auto;
+ .content{
+ height:auto;
+ flex-direction: column;
+ margin-bottom: 0;
+ .devices{
+ .device{
+ h1{
+ font-size: 12px;
+ }
+ }
+ }
+ .flex-50{
+ width:100%;
+ height:auto;
+ z-index: 1;
+ .Canvas_Rec{
+ transform: scale(0.8);
+ }
+ }
+ }
+ }
+ #backgroundRot{
+ display: none;
+ }
+ #Record_Title{
+ width:100%;
+ }
+ #Record_Description{
+ width:90%;
+ }
+}
+
+@media only screen and (max-width:550px){
+ .Record{
+ .content{
+ .flex-50{
+ .Canvas_Rec{
+ width:100%;
+ }
+ }
+ }
+ }
+}
diff --git a/src/Pages/Record/Record.tsx b/src/Pages/Record/Record.tsx
index 841c81e..55152e9 100644
--- a/src/Pages/Record/Record.tsx
+++ b/src/Pages/Record/Record.tsx
@@ -22,7 +22,7 @@ export default function Record():ReactElement {
const [devices,setDevices] = useState
- {setIsallowed(true)}} />
}
{allowed && Piano Blocks App Closed Beta (testing)
-To access insert Password
- -Piano Blocks App
+Final adjustments ... Start 30 Dec 20:00
+
-
-
+ ();
+ const [image,setImage] = useState();
+
+ const handleChange = () =>{
+
+ function convertDataToArray64():Promise {
+
+ if(Myvalue.current){
+ const file = Myvalue.current.files![0];
+
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+
+ reader.onload = (event:any) => {
+ resolve(event.target.result);
+ };
+
+ reader.onerror = (err) => {
+ reject(err);
+ };
+ // reader.readAsArrayBuffer(file);
+ reader.readAsDataURL(file)
+ });
+ }else{
+ return new Promise(resolve =>{resolve('Error')})
+ }
+ }
+ if(checkExtension(Myvalue.current?.files[0],'.jpg') || checkExtension(Myvalue.current?.files[0],'.png') || checkExtension(Myvalue.current?.files[0],'.gif')){
+ convertDataToArray64().then(reading =>{
+ const data = {
+ target:{name:'Image', value:reading}
+ };
+ onChange(data);
+ setImage(reading);
+ })
+ }
+ else{
+ alert('Error, Image Format Not supported');
+ }
+ }
+ return (
+
-}
-
-export default function OptionCard({name,onChange,value,children,title,values}:OptionCardProps):ReactElement {
-
- const [Myvalue,setValue] = useState(value);
-
- const handleChange = (e:any) =>{
- onChange(e)
- if(e.target.type === 'checkbox'){
- setValue(!Myvalue);
- }else if(e.target.type === 'number'){
- setValue(parseInt(e.target.value) < 0 ? 0: parseInt(e.target.value));
- parseInt(e.target.value) >= 0 && onChange(e);
- }
- else{
- setValue(e.target.value)
- }
- }
-
- const RenderOptions = () =>{
- return values.map((element,index) => )
- }
-
- return (
-
Choose How fast will the blocks fall. Remember, blocks are also higher/taller with more speed
+
+ Choose Background. Carefoul ! You can't easily switch back to default image
+
+
diff --git a/src/Components/PlayingManagement/PlayingManagement.scss b/src/Components/PlayingManagement/PlayingManagement.scss
index 016ca18..7fbc36e 100644
--- a/src/Components/PlayingManagement/PlayingManagement.scss
+++ b/src/Components/PlayingManagement/PlayingManagement.scss
@@ -1,4 +1,6 @@
-$background : #001524f3;
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap');
+
+$background : hsla(205, 100%, 7%, 0.953);
$buttons_color : #FF7D00;
.Playing_main{
@@ -46,12 +48,14 @@ $buttons_color : #FF7D00;
}
}
.Timer{
+ font-family: 'Quicksand', sans-serif;
display: block;
- font-size: 16px;
- color:rgba(212, 212, 212, 0.795);
+ width:50px;
+ height:50px;
+ font-weight: 700;
}
.Duration{
- width:60%;
+ width:75%;
justify-self: flex-end;
height:30%;
border:2px solid rgb(0, 0, 0);
@@ -66,4 +70,24 @@ $buttons_color : #FF7D00;
transition: 0.1s linear;
}
}
+}
+
+@media only screen and (max-width:900px) {
+ .Playing_main{
+ .icons{
+ padding-left: 2px;
+ margin-left: 0px;
+ i{
+ font-size: 22px;
+ margin: 4px;
+ }
+ .IconGoBack{
+ width:28px;
+ margin-right: 4px;
+ }
+ }
+ .Duration{
+ width:60%;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/Components/PlayingManagement/PlayingManagement.tsx b/src/Components/PlayingManagement/PlayingManagement.tsx
index d47a489..b211beb 100644
--- a/src/Components/PlayingManagement/PlayingManagement.tsx
+++ b/src/Components/PlayingManagement/PlayingManagement.tsx
@@ -1,5 +1,7 @@
import React, { MouseEvent, ReactElement, useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
+import { buildStyles, CircularProgressbar } from 'react-circular-progressbar';
+import 'react-circular-progressbar/dist/styles.css';
import './PlayingManagement.scss';
import MidiPlayer from '../../Helpers/MidiPlayer';
@@ -59,7 +61,20 @@ export default function PlayingManagement({Player,onStart}:PlayingManagementProp
900 ? {width:width / nav_proportion.current} : {}}>
{RenderLinks()}
-
+
diff --git a/src/Components/NewOptions/NewOptions.styles.scss b/src/Components/NewOptions/NewOptions.styles.scss
index 0634e59..9e477e5 100644
--- a/src/Components/NewOptions/NewOptions.styles.scss
+++ b/src/Components/NewOptions/NewOptions.styles.scss
@@ -45,7 +45,7 @@
text-align: center;
font-size: 24px;
color:white;
- display:block;
+ display:inline-block;
font-weight: 400;
margin: 0;
}
@@ -142,6 +142,16 @@
width:50%;
}
+.Restore{
+ position: absolute;
+ top:20px;
+ border:none;
+ font-size: 10px;
+ border-radius: 5px;
+ cursor: pointer;
+ padding: 2px;
+}
+
@keyframes Enter{
0%{
margin-Top: -50%;
@@ -247,4 +257,7 @@
left:0% !important;
width:100%;
}
+ .Restore{
+ display: none;
+ }
}
diff --git a/src/Components/NewOptions/OptionCard/OptionCard.style.scss b/src/Components/NewOptions/OptionCard/OptionCard.style.scss
index 3bbb41b..b05f790 100644
--- a/src/Components/NewOptions/OptionCard/OptionCard.style.scss
+++ b/src/Components/NewOptions/OptionCard/OptionCard.style.scss
@@ -42,21 +42,46 @@
}
}
-// @media only screen and (max-width: 920px) {
-// .OptionCard{
-// height:150px;
-// width:280px;
-// .Card_Title{
-// margin:0;
-// margin-top: 8px;
-// margin-bottom: 4px;
-// font-size: 18px;
-// }
-// .Card_Description{
-// font-size: 12px !important;
-// }
-// }
-// }
+.inputImageDiv{
+ position: relative;
+ width:80%;
+ height:45px;
+ margin: 0px auto;
+ overflow:hidden;
+ border-radius: 5px;
+ border:2px dashed black;
+ display:flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.inputImage{
+ display: block;
+ position: relative;
+ width:80%;
+ margin: 0px auto;
+ height:50px;
+ border-radius: 10px;
+}
+
+.ImageInput{
+ position: absolute;
+ height:200%;
+ width:100%;
+ top:-50px;
+ border-radius: 10px;
+ cursor: pointer;
+}
+
+.inputImageDiv{
+ h1{
+ font-size: 12px;
+ font-family: 'IM Fell English SC';
+ color:black;
+ font-weight: 100;
+ }
+}
+
@media only screen and (max-width: 550px) {
.OptionCard{
diff --git a/src/Components/NewOptions/OptionCard/OptionCardImage.tsx b/src/Components/NewOptions/OptionCard/OptionCardImage.tsx
new file mode 100644
index 0000000..10b5f13
--- /dev/null
+++ b/src/Components/NewOptions/OptionCard/OptionCardImage.tsx
@@ -0,0 +1,70 @@
+import React, { ReactElement,useRef, useState } from 'react'
+
+import {checkExtension} from '../../../Utils/smallFunctions';
+
+interface CardProps{
+ onChange: Function;
+ name: string;
+ type: string;
+ title?:string;
+ children:JSX.Element | string;
+ value: string|boolean,
+ textColor:string
+}
+
+export default function OptionCard({onChange,name,type,textColor,title,children,value}:CardProps):ReactElement {
+
+ const Myvalue = useRef 900 ? {width:width / nav_proportion.current * (nav_proportion.current - 1)} : {}}>
{elements[component_id].component}
+ 
}
+
+ )
+}
\ No newline at end of file
diff --git a/src/Components/NewOptions/OptionCard/OptionCardList.tsx b/src/Components/NewOptions/OptionCard/OptionCardList.tsx
deleted file mode 100644
index 82a0105..0000000
--- a/src/Components/NewOptions/OptionCard/OptionCardList.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { ReactElement,useState } from 'react'
-import './OptionCard.style.scss';
-import './Input.styles.scss';
-
-interface OptionCardProps{
- name:string,
- onChange: Function;
- Important?:boolean;
- title?:string;
- children:JSX.Element | string;
- value: string|boolean,
- values:Array{title}
+{children}
+ {!image && +
+
+ }
+ {image && Insert Image
+ +
-
- )
-}
diff --git a/src/Components/NewOptions/Options.tsx b/src/Components/NewOptions/Options.tsx
index 0361abd..4b59c5b 100644
--- a/src/Components/NewOptions/Options.tsx
+++ b/src/Components/NewOptions/Options.tsx
@@ -4,6 +4,7 @@ import './NewOptions.styles.scss';
import ChooseButton from './ChooseButtons/ChooseButton';
import { Options as OptionsType } from '../../Utils/TypesForOptions';
+import { restoreDefaults } from '../../Utils/smallFunctions';
import {
Options_Blocks as OptionsBlocks,
@@ -33,6 +34,7 @@ export default function Options({isOpened,onGoBack,options,handleOptionsChange}:
{title}
-{children}
- -Configure Visuals
+ {table === 'blocks' &&{Math.floor(Player.timer / 1000)}/{Math.floor(Player.MidiLength / 1000)} (seconds)
+ {/*{Math.floor(Player.timer / 1000)}/{Math.floor(Player.MidiLength / 1000)} (seconds)
*/} +© Tymoteusz Apriasz
No device Connected
} + const handleResize = () =>{ + setHeight(window.innerHeight); + } + + useEffect(() => { + window.addEventListener('resize',handleResize); + return () => { + window.removeEventListener('resize',handleResize); + } + }, []) + return ( -
+
-
)
}
diff --git a/src/Pages/ToDo/ToDo.tsx b/src/Pages/ToDo/ToDo.tsx
index 98a0671..5862247 100644
--- a/src/Pages/ToDo/ToDo.tsx
+++ b/src/Pages/ToDo/ToDo.tsx
@@ -32,6 +32,7 @@ export default function ToDo() {
-
Record / Play
-Welcome to the Record page! Here you can record your playing and then use PianoBlocksApp to visualize it. It's super simple. Click "Rec" button, then play, then click it again, and click "Play Recorded"
-
-
-
+
-
+
+ Record / Play
+Welcome to the Record page! Here you can record your playing and then use PianoBlocksApp to visualize it. It's super simple. Click "Rec" button, then play, then click it again, and click "Play Recorded"
+
+
+
+
+ Connected MIDI devices :
+
+ {renderDevices()}
+
+
+
- Connected MIDI devices :
-
- {renderDevices()}
-
-
-
- <-- Click to accept