not english correct version

tzmcion · Dec 28, 2021 · 2eea01c · 2eea01c
1 parent 1998dc8
commit 2eea01c
Show file tree

Hide file tree

Showing 27 changed files with 618 additions and 137 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,13 +9,13 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "@types/hex-rgba": "^1.0.1",
+    "@types/hex2dec": "^1.0.0",
     "@types/jest": "^26.0.24",
     "@types/node": "^12.20.28",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.3.0",
     "@types/webmidi": "^2.0.6",
-    "@types/hex2dec": "^1.0.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-register": "^6.26.0",
@@ -25,6 +25,7 @@
     "hex2dec": "^1.1.2",
     "midi-json-parser": "^8.0.48",
     "react": "^17.0.2",
+    "react-circular-progressbar": "^2.0.4",
     "react-dom": "^17.0.2",
     "react-paypal-express-checkout": "^1.0.5",
     "react-redux": "^7.2.6",

diff --git a/public/Contribute.txt b/public/Contribute.txt
@@ -4,6 +4,24 @@ SoundFont Player :: https://www.npmjs.com/package/soundfont-player
 Midi-Json-Parser :: https://www.npmjs.com/package/midi-json-parser
 rgb-hex :: https://www.npmjs.com/package/rgb-hex
 hex2dec :: https://www.npmjs.com/package/hex2dec
+circular_progress_bar :: https://www.npmjs.com/package/react-circular-progressbar
 Dancing_Cactus :: https://tenor.com/view/cactus-cool-shades-animated-dancing-gif-17528497
 Sad_Cactus :: https://tenor.com/view/hug-yay-squeeze-bear-hug-hug-tight-gif-15085080
+default_background :: https://unsplash.com/photos/zXwG_60Yo0Q
+Midi_Data_Image :: https://www.npmjs.com/package/midi-parser-js
+
+---------------------------
+Website Designed in Figma  :: https://www.figma.com/
+Writen using Vs Code :: https://code.visualstudio.com/
+Hosted on Heroku :: https://www.heroku.com/
+DNS delivered by Cloudflare :: https://www.cloudflare.com/
+
+Technologies used ::
+
+- React
+- Typescript
+- HTML
+- SCSS (Sass)
+- Redux
+- Npm library
 
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -9,13 +9,13 @@
 
 <url>
   <loc>https://pianoblocksapp.com/</loc>
-  <lastmod>2021-12-27T21:47:20+00:00</lastmod>
+  <lastmod>2021-12-28T21:47:20+00:00</lastmod>
   <loc>https://pianoblocksapp.com/tutorial</loc>
-  <lastmod>2021-12-22T21:47:20+00:00</lastmod>
+  <lastmod>2021-12-28T21:47:20+00:00</lastmod>
   <loc>https://pianoblocksapp.com/info</loc>
-  <lastmod>2021-12-22T21:47:20+00:00</lastmod>
+  <lastmod>2021-12-28T21:47:20+00:00</lastmod>
   <loc>https://pianoblocksapp.com/record</loc>
-  <lastmod>2021-12-22T21:47:20+00:00</lastmod>
+  <lastmod>2021-12-28T21:47:20+00:00</lastmod>
 </url>
 
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -13,7 +13,6 @@ import './App.css';
 function App() {
 
   const [ac,setAc] = useState<any>(null);
-  const [password,setPassword] = useState<string>('');
   const [allowed,setIsallowed] = useState<boolean>(false);
 
   useEffect(()=>{
@@ -28,20 +27,12 @@ function App() {
     window.removeEventListener('drop',ac_add);
   }
 
-  const passwordChange = (e:any) =>{
-      setPassword(e.target.value);
-      if(e.target.value === 'bayo_yayo_03'){
-        setIsallowed(true)
-      }
-  }
-
   return (
     <div className='main'>
       {!allowed && <div className='CheckPassword'>
-        <h1>Piano Blocks App Closed Beta (testing)</h1>
-        <h3>To access insert Password</h3>
-        <input type="text" placeholder='Insert password' value={password} onChange={passwordChange} />
-        <CountDownTimer />
+        <h1>Piano Blocks App</h1>
+        <h3>Final adjustments ... Start 30 Dec 20:00</h3>
+        <CountDownTimer onEnd={()=>{setIsallowed(true)}} />
       </div>}
       {allowed && <Header />}
       {allowed && <Switch>

diff --git 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<any>(Date.now());
     const [data,setData] = useState<any>({
@@ -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
@@ -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
@@ -46,10 +46,10 @@ export default function InsideNavigator({elements,width,height,proportion,setId,
 
     return (
         <div className='InsideNavigator' style={{width:width,height:height}}>
-            <div className='Links' style={{width:width / nav_proportion.current}}>
+            <div className='Links' style={width > 900 ?  {width:width / nav_proportion.current} : {}}>
                 {RenderLinks()}
             </div>
-            <div className='Component' style={{width:width / nav_proportion.current * (nav_proportion.current - 1)}}>
+            <div className='Component' style={width > 900 ? {width:width / nav_proportion.current * (nav_proportion.current - 1)} : {}}>
                 {elements[component_id].component}
             </div>
         </div>

diff --git 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
@@ -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{