├── .github └── FUNDING.yml ├── .gitignore ├── Attributions.MD ├── LICENSE ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public ├── Authors ├── Contribute.txt ├── PBA_logo.png ├── dependencies.txt ├── droga.pdf ├── license ├── manifest.json ├── piano_icon.png ├── piano_sounds │ ├── ao0.ogg │ ├── ao1.ogg │ ├── ao2.ogg │ ├── ao3.ogg │ ├── ao4.ogg │ ├── ao5.ogg │ ├── ao6.ogg │ ├── ao7.ogg │ ├── at0.ogg │ ├── at1.ogg │ ├── at2.ogg │ ├── at3.ogg │ ├── at4.ogg │ ├── at5.ogg │ ├── at6.ogg │ ├── at7.ogg │ ├── b0.ogg │ ├── b1.ogg │ ├── b2.ogg │ ├── b3.ogg │ ├── b4.ogg │ ├── b5.ogg │ ├── b6.ogg │ ├── b7.ogg │ ├── co1.ogg │ ├── co2.ogg │ ├── co3.ogg │ ├── co4.ogg │ ├── co5.ogg │ ├── co6.ogg │ ├── co7.ogg │ ├── ct1.ogg │ ├── ct2.ogg │ ├── ct3.ogg │ ├── ct4.ogg │ ├── ct5.ogg │ ├── ct6.ogg │ ├── ct7.ogg │ ├── ct8.ogg │ ├── do1.ogg │ ├── do2.ogg │ ├── do3.ogg │ ├── do4.ogg │ ├── do5.ogg │ ├── do6.ogg │ ├── do7.ogg │ ├── dt1.ogg │ ├── dt2.ogg │ ├── dt3.ogg │ ├── dt4.ogg │ ├── dt5.ogg │ ├── dt6.ogg │ ├── dt7.ogg │ ├── e1.ogg │ ├── e2.ogg │ ├── e3.ogg │ ├── e4.ogg │ ├── e5.ogg │ ├── e6.ogg │ ├── e7.ogg │ ├── fo1.ogg │ ├── fo2.ogg │ ├── fo3.ogg │ ├── fo4.ogg │ ├── fo5.ogg │ ├── fo6.ogg │ ├── fo7.ogg │ ├── ft1.ogg │ ├── ft2.ogg │ ├── ft3.ogg │ ├── ft4.ogg │ ├── ft5.ogg │ ├── ft6.ogg │ ├── ft7.ogg │ ├── go1.ogg │ ├── go2.ogg │ ├── go3.ogg │ ├── go4.ogg │ ├── go5.ogg │ ├── go6.ogg │ ├── go7.ogg │ ├── gt1.ogg │ ├── gt2.ogg │ ├── gt3.ogg │ ├── gt4.ogg │ ├── gt5.ogg │ ├── gt6.ogg │ ├── gt7.ogg │ ├── rename2.cpp │ └── renamer.cpp ├── robots.txt └── sitemap.xml ├── src ├── App.css ├── App.test.tsx ├── App.tsx ├── Assets │ ├── BG.jpg │ ├── Cactus.gif │ ├── FontAwesomeLogo.png │ ├── GoogleFontsLogo.png │ ├── Me.jpg │ ├── NPMLogo.png │ ├── PBA_logo.png │ ├── ReactJSLogo.png │ ├── Rhombus.gif │ ├── TypeScriptLogo.png │ ├── avnt-no-ng.png │ ├── avnt.jpeg │ ├── bass.png │ ├── demo.MID │ ├── demo_old.MID │ ├── herokuLogo.png │ ├── hi.png │ ├── hug.gif │ ├── midi.png │ ├── piano.png │ ├── piano_icon.png │ ├── piano_sounds │ │ ├── ao0.ogg │ │ ├── ao1.ogg │ │ ├── ao2.ogg │ │ ├── ao3.ogg │ │ ├── ao4.ogg │ │ ├── ao5.ogg │ │ ├── ao6.ogg │ │ ├── ao7.ogg │ │ ├── at0.ogg │ │ ├── at1.ogg │ │ ├── at2.ogg │ │ ├── at3.ogg │ │ ├── at4.ogg │ │ ├── at5.ogg │ │ ├── at6.ogg │ │ ├── at7.ogg │ │ ├── b0.ogg │ │ ├── b1.ogg │ │ ├── b2.ogg │ │ ├── b3.ogg │ │ ├── b4.ogg │ │ ├── b5.ogg │ │ ├── b6.ogg │ │ ├── b7.ogg │ │ ├── co1.ogg │ │ ├── co2.ogg │ │ ├── co3.ogg │ │ ├── co4.ogg │ │ ├── co5.ogg │ │ ├── co6.ogg │ │ ├── co7.ogg │ │ ├── ct1.ogg │ │ ├── ct2.ogg │ │ ├── ct3.ogg │ │ ├── ct4.ogg │ │ ├── ct5.ogg │ │ ├── ct6.ogg │ │ ├── ct7.ogg │ │ ├── ct8.ogg │ │ ├── do1.ogg │ │ ├── do2.ogg │ │ ├── do3.ogg │ │ ├── do4.ogg │ │ ├── do5.ogg │ │ ├── do6.ogg │ │ ├── do7.ogg │ │ ├── dt1.ogg │ │ ├── dt2.ogg │ │ ├── dt3.ogg │ │ ├── dt4.ogg │ │ ├── dt5.ogg │ │ ├── dt6.ogg │ │ ├── dt7.ogg │ │ ├── e1.ogg │ │ ├── e2.ogg │ │ ├── e3.ogg │ │ ├── e4.ogg │ │ ├── e5.ogg │ │ ├── e6.ogg │ │ ├── e7.ogg │ │ ├── fo1.ogg │ │ ├── fo2.ogg │ │ ├── fo3.ogg │ │ ├── fo4.ogg │ │ ├── fo5.ogg │ │ ├── fo6.ogg │ │ ├── fo7.ogg │ │ ├── ft1.ogg │ │ ├── ft2.ogg │ │ ├── ft3.ogg │ │ ├── ft4.ogg │ │ ├── ft5.ogg │ │ ├── ft6.ogg │ │ ├── ft7.ogg │ │ ├── go1.ogg │ │ ├── go2.ogg │ │ ├── go3.ogg │ │ ├── go4.ogg │ │ ├── go5.ogg │ │ ├── go6.ogg │ │ ├── go7.ogg │ │ ├── gt1.ogg │ │ ├── gt2.ogg │ │ ├── gt3.ogg │ │ ├── gt4.ogg │ │ ├── gt5.ogg │ │ ├── gt6.ogg │ │ ├── gt7.ogg │ │ ├── rename2.cpp │ │ └── renamer.cpp │ ├── tutorial │ │ ├── Config │ │ │ ├── BlockShadow.png │ │ │ ├── BlockShadow1.png │ │ │ ├── BlockShadow2.png │ │ │ ├── Bubbles.png │ │ │ ├── Color1.png │ │ │ ├── Color2.png │ │ │ ├── ColorCard.png │ │ │ ├── DancingLines.png │ │ │ ├── Fireworks.png │ │ │ ├── Gradient.png │ │ │ ├── Gradient1.png │ │ │ ├── Gradient2.png │ │ │ ├── KeyPressColor.png │ │ │ ├── KeyPressColor1.png │ │ │ ├── KeyPressColor2.png │ │ │ ├── RandomBlocksColor.png │ │ │ ├── RandomBlocksColor1.png │ │ │ ├── RandomBlocksColor2.png │ │ │ ├── Shadow.png │ │ │ ├── Shadow1.png │ │ │ ├── Shadow2.png │ │ │ ├── Sparks.png │ │ │ ├── ThinColor1.png │ │ │ ├── ThinColor2.png │ │ │ ├── ThinColorCard.png │ │ │ ├── Watermark.png │ │ │ ├── Watermark1.png │ │ │ ├── Watermark2.png │ │ │ ├── fountain.png │ │ │ ├── radius.png │ │ │ ├── radius1.png │ │ │ └── radius2.png │ │ ├── Demo.mp4 │ │ ├── Midi_Description.png │ │ ├── file_input_tut.mp4 │ │ ├── interface.png │ │ ├── rec.mp4 │ │ └── shet.png │ └── violin.png ├── Components │ ├── DonateButton │ │ ├── DonateButton.scss │ │ └── DonateButton.tsx │ ├── DonationPrompt │ │ ├── DonationPrompt.scss │ │ └── DonationPrompt.tsx │ ├── DrawPiano │ │ ├── DrawPiano.styles.css │ │ ├── DrawPiano.tsx │ │ ├── LoadingScreen │ │ │ ├── LoadingScreen.scss │ │ │ └── LoadingScreen.tsx │ │ └── PianoKeys │ │ │ ├── AllKeys.tsx │ │ │ ├── BlackKey.tsx │ │ │ └── WhiteKey.tsx │ ├── Header │ │ ├── Header.styles.scss │ │ └── Header.tsx │ ├── Inputfile │ │ ├── DrawInCanvas.ts │ │ ├── Input.styles.scss │ │ └── InputFile.tsx │ ├── InsideNavigator │ │ ├── InsideNavigator.style.scss │ │ └── InsideNavigator.tsx │ ├── NewOptions │ │ ├── ChooseButtons │ │ │ ├── ChooseButton.style.scss │ │ │ └── ChooseButton.tsx │ │ ├── NewOptions.styles.scss │ │ ├── OptionCard │ │ │ ├── EffectChoose │ │ │ │ ├── EffectChoose.style.scss │ │ │ │ ├── EffectChoose.tsx │ │ │ │ └── Previews │ │ │ │ │ ├── DancingLines.mp4 │ │ │ │ │ ├── Fireworks.mp4 │ │ │ │ │ ├── Snow.mp4 │ │ │ │ │ ├── Sparks.mp4 │ │ │ │ │ ├── balls.mp4 │ │ │ │ │ └── fountain.mp4 │ │ │ ├── Input.styles.scss │ │ │ ├── OptionCard.style.scss │ │ │ ├── OptionCard.tsx │ │ │ ├── OptionCardImage.tsx │ │ │ ├── addCard │ │ │ │ ├── addCard.styles.scss │ │ │ │ └── addCard.tsx │ │ │ ├── presetCard │ │ │ │ ├── presetCard.style.scss │ │ │ │ └── presetCard.tsx │ │ │ └── presets.json │ │ ├── Options.tsx │ │ └── OptionsType │ │ │ └── OptionsType.tsx │ ├── PlayingManagement │ │ ├── PlayingManagement.scss │ │ └── PlayingManagement.tsx │ └── Tracks │ │ ├── Tracks.styles.css │ │ ├── Tracks.tsx │ │ ├── TracksIntervalMethod.tsx │ │ └── index.ts ├── Helpers │ ├── Blocks │ │ └── Blocks.ts │ ├── CanvasEffects │ │ ├── DNA.ts │ │ ├── DancingLines.ts │ │ ├── EmptyEffect.ts │ │ ├── Fireworks.ts │ │ ├── HexagonEffect.ts │ │ ├── Sparks.ts │ │ ├── StickyBalls.ts │ │ ├── fountain.ts │ │ └── index.ts │ ├── Effects │ │ └── Effects.ts │ ├── MidiPlayer.ts │ ├── PlayMidiAsync.ts │ ├── ReadMidiFile.ts │ ├── getConstantDataFromMidiFile.ts │ ├── getNoteEventsJSON.ts │ └── soundManager.ts ├── Pages │ ├── Main │ │ ├── Main.styles.scss │ │ └── Main.tsx │ ├── Play │ │ ├── Play.tsx │ │ └── PlayRecorded.tsx │ ├── Record │ │ ├── ConvertToPdf │ │ │ └── ConvertToPdf.ts │ │ ├── Record.styles.scss │ │ ├── Record.tsx │ │ └── statelessRecord.ts │ ├── ToDo │ │ ├── Info.styles.scss │ │ └── ToDo.tsx │ └── Tutorial │ │ ├── Pages │ │ ├── Authors.tsx │ │ ├── Basic.tsx │ │ ├── Configuration.tsx │ │ ├── Creating.tsx │ │ ├── Midi.tsx │ │ ├── PagesStyle.scss │ │ └── Record.tsx │ │ ├── Tutorial.styles.css │ │ └── Tutorial.tsx ├── Utils │ ├── CanvasFuntions.ts │ ├── Default.ts │ ├── OtherTypes.ts │ ├── ReduxStore.ts │ ├── TypesForMidi.ts │ ├── TypesForOptions.ts │ ├── handleOptionsChange.ts │ └── smallFunctions.ts ├── index.css ├── index.tsx ├── logo.svg ├── react-app-env.d.ts └── setupTests.ts ├── tsconfig.json └── vite.config.ts /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | custom: ['https://www.paypal.com/donate/?hosted_button_id=J6GQGKHC7H7SG'] 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Attributions.MD: -------------------------------------------------------------------------------- 1 | Midi icons created by El-Faza Stuff - Flaticon 2 | Music and multimedia icons created by Miftakhul Rizky - Flaticon 3 | Stop icons created by DinosoftLabs - Flaticon 4 | Play button icons created by Those Icons - Flaticon 5 | Save as icons created by Sir.Vector - Flaticon 6 | Preview icons created by Miftakhul Rizky - Flaticon -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Tymoteusz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | Logo 5 | 6 | 7 |

Piano MIDI player/visualizer with ReactJS & TS

8 | 9 |

10 | Project inheritated by AVANT group ©AVANT 2024/2025, Januarry/2025 AVANT group will begin work on a new verision 11 |
12 | 13 |
14 |
15 | 16 | · 17 | 18 |

19 |
20 | 21 | 22 | # React Piano Player/Visualizer/Analyzer 23 | 24 | PianoBlocksApp is a web application made for hobbists/enthusiasts of playing piano. This app provides a very simple way to visualize a persons piano playing, by reading his midi File. 25 | 26 | Link to latest version https://react-piano-player-63qjc9wca-tzmcion.vercel.app/ 27 | ###### Github version is not always up-to-date. 28 | ### Last Update 03/02/2025
29 |

Update Description: Switching from react-scripts to vite, and updating

30 | 31 | ## Description 32 | 33 | ### What does this app do ? 34 | 35 | I always wanted to create piano Tutorials like big youtubers, but I didn't want to pay for professional software, so I created it myself :). This app makes it super easy to create piano tutorials, it delivers some basic effects, basic sound, and if you can't record a midi file with softwares, you can record it there. Also with recording app gives you basic (super basic) sheet music. On top of that, app gives you plenty of ways to customize effects, colors, spped of playing. With this app you can learn and have fun. 36 | 37 | ### Technologies used 38 | 39 | * React 40 | * Typescript 41 | * HTML/CSS 42 | * Sass (scss) 43 | * Redux (a little) 44 | * NPM library 45 | 46 | ### How does the app work ? 47 | 48 | ![app schema](https://user-images.githubusercontent.com/64361206/156896648-36977f49-34ac-4b7c-ade3-990c13f6612d.JPG) 49 | 50 |
    51 |
  1. 52 | User input
    53 | User Drags/chooses Midi file. He can configure options before that, or he can play demo file, then the Midi file is automatically imported 54 |
    2. 55 |
  2. 56 | Website proceses it
    57 | Website saves the file to localstorage and it procesess it. It uses a "/helpers/getNoteEventsJSON.ts" file (function) to remove all unnecesarry events. 58 |
    3. 59 |
  3. 60 | Website creates canvas animation
    61 | Canvas animation is created, frame rate is 60fps or 144 fps (depends on the screen type). 62 |
    4. 63 |
64 | 65 | ## Installation 66 | 67 | Just like every other github repo 68 | 69 | ``` 70 | git init 71 | git pull https://github.com/tzmcion/ReactPianoPlayer 72 | npm i 73 | ``` 74 | 75 | Or git clone 76 | 77 | ``` 78 | git clone https://github.com/tzmcion/ReactPianoPlayer 79 | ``` 80 | 81 | ## Note ! 82 | 83 | * In Official version you can find Donation page, but I deleted it here 84 | * Some dependencies in `package.lock` are not used 85 | * Please report every issue and bug 86 | * If you'd like to work on this app, I will explain how every file works to you with pleasure, just write :) 87 | 88 | ## Resources 89 | 90 | - __soundfont-player__ 91 | - __midi-parser-js__ 92 | - __react-youtube__ 93 | - __rgb-hex__ 94 | - __sass__ 95 | 96 | ## License 97 | 98 | __MIT__ license 99 | 100 | 101 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Piano Blocks App 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "piano-player-ts", 3 | "version": "2.0.1.01", 4 | "private": false, 5 | "type": "module", 6 | "dependencies": { 7 | "@emotion/react": "^11.14.0", 8 | "@emotion/styled": "^11.14.0", 9 | "@mui/material": "^6.4.2", 10 | "@testing-library/jest-dom": "^6.6.3", 11 | "@testing-library/react": "^16.2.0", 12 | "@testing-library/user-event": "^14.6.1", 13 | "@types/hex-rgba": "^1.0.3", 14 | "@types/hex2dec": "^1.1.4", 15 | "@types/jest": "^29.5.14", 16 | "@types/react": "^19.0.8", 17 | "@types/react-dom": "^19.0.3", 18 | "@types/react-router-dom": "^5.3.3", 19 | "@types/webmidi": "^2.1.0", 20 | "hex-alpha": "^1.3.0", 21 | "hex-rgba": "^1.0.2", 22 | "hex2dec": "^1.1.2", 23 | "midi-json-parser": "^8.1.58", 24 | "react": "^19.0.0", 25 | "react-dom": "^19.0.0", 26 | "react-redux": "^9.2.0", 27 | "react-router-dom": "^6.29.0", 28 | "react-youtube": "^10.1.0", 29 | "redux": "^5.0.1", 30 | "rgb-hex": "^4.1.0", 31 | "sass": "^1.83.4" 32 | }, 33 | "scripts": { 34 | "dev": "vite", 35 | "build": "vite build", 36 | "preview": "vite preview" 37 | }, 38 | "eslintConfig": { 39 | "extends": [ 40 | "react-app", 41 | "react-app/jest" 42 | ] 43 | }, 44 | "browserslist": { 45 | "production": [ 46 | ">0.2%", 47 | "not dead", 48 | "not op_mini all" 49 | ], 50 | "development": [ 51 | "last 1 chrome version", 52 | "last 1 firefox version", 53 | "last 1 safari version" 54 | ] 55 | }, 56 | "engines": { 57 | "node": "18.x" 58 | }, 59 | "devDependencies": { 60 | "@types/node": "^22.13.0", 61 | "@vitejs/plugin-react": "^4.3.4", 62 | "@vitejs/plugin-vue": "^5.2.1", 63 | "typescript": "^5.7.3", 64 | "vite": "^6.0.11", 65 | "vite-plugin-env-compatible": "^2.0.1" 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /public/Authors: -------------------------------------------------------------------------------- 1 | -- Owner -- 2 | Tymoteusz Apriasz 3 | 4 | -Contact- 5 | @ tymsonekjelonek@gmail.com 6 | @ FB: Tymoteusz Apriasz 7 | 8 | -- Testers -- 9 | 10 | @ FreestyleXV 11 | @ avec 12 | @ MonsieurAntoine 13 | @ bonbon 14 | @ bandzior 15 | @ Nautirius 16 | @ Dronik 17 | @ 6xSpace 18 | 19 | -- Yt -- 20 | 21 | @ https://www.youtube.com/channel/UCN8IP1pWA3BvXAqtdLHFHkg 22 | 23 | -- LinkedIN -- 24 | 25 | @ https://www.linkedin.com/in/tymoteusz-apriasz-2ba8501a6/ 26 | 27 | --Github 28 | 29 | @ https://github.com/tzmcion 30 | 31 | -------------------------------------------------------------------------------- /public/Contribute.txt: -------------------------------------------------------------------------------- 1 | Midi Icon ::
Icons made by Freepik from www.flaticon.com
2 | Piano Icon ::
Icons made by mangsaabguru from www.flaticon.com
3 | Wave Icon :: Slang icons created by Freepik - Flaticon 4 | SoundFont Player :: https://www.npmjs.com/package/soundfont-player 5 | Midi-Json-Parser :: https://www.npmjs.com/package/midi-json-parser 6 | rgb-hex :: https://www.npmjs.com/package/rgb-hex 7 | hex2dec :: https://www.npmjs.com/package/hex2dec 8 | circular_progress_bar :: https://www.npmjs.com/package/react-circular-progressbar 9 | Dancing_Cactus :: https://tenor.com/view/cactus-cool-shades-animated-dancing-gif-17528497 10 | Sad_Cactus :: https://tenor.com/view/hug-yay-squeeze-bear-hug-hug-tight-gif-15085080 11 | default_background :: https://unsplash.com/photos/zXwG_60Yo0Q 12 | Midi_Data_Image :: https://www.npmjs.com/package/midi-parser-js 13 | 14 | --------------------------- 15 | Website Designed in Figma :: https://www.figma.com/ 16 | Writen using Vs Code :: https://code.visualstudio.com/ 17 | Hosted on Vercel :: https://vercel.com/ 18 | DNS delivered by Cloudflare :: https://www.cloudflare.com/ 19 | 20 | Technologies used :: 21 | 22 | - React 23 | - Typescript 24 | - HTML 25 | - SCSS (Sass) 26 | - Redux [only a little] 27 | - Npm library 28 | 29 | -------------------------------------------------------------------------------- /public/PBA_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/PBA_logo.png -------------------------------------------------------------------------------- /public/dependencies.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/dependencies.txt -------------------------------------------------------------------------------- /public/droga.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/droga.pdf -------------------------------------------------------------------------------- /public/license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Tymoteusz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Piano Blocks App", 3 | "name": "Piano Blocks App - Your Piano Visualizer/MidiPlayer/Assistant", 4 | "icons": [ 5 | { 6 | "src": "piano_icon.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "piano_icon.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "piano_icon.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "orientation": "landscape", 23 | "display": "standalone", 24 | "theme_color": "#323232", 25 | "background_color": "#323232" 26 | } 27 | -------------------------------------------------------------------------------- /public/piano_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_icon.png -------------------------------------------------------------------------------- /public/piano_sounds/ao0.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ao0.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ao1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ao1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ao2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ao2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ao3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ao3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ao4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ao4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ao5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ao5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ao6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ao6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ao7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ao7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/at0.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/at0.ogg -------------------------------------------------------------------------------- /public/piano_sounds/at1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/at1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/at2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/at2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/at3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/at3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/at4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/at4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/at5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/at5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/at6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/at6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/at7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/at7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/b0.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/b0.ogg -------------------------------------------------------------------------------- /public/piano_sounds/b1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/b1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/b2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/b2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/b3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/b3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/b4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/b4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/b5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/b5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/b6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/b6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/b7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/b7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/co1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/co1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/co2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/co2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/co3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/co3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/co4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/co4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/co5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/co5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/co6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/co6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/co7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/co7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ct1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ct1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ct2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ct2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ct3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ct3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ct4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ct4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ct5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ct5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ct6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ct6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ct7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ct7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ct8.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ct8.ogg -------------------------------------------------------------------------------- /public/piano_sounds/do1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/do1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/do2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/do2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/do3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/do3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/do4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/do4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/do5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/do5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/do6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/do6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/do7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/do7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/dt1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/dt1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/dt2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/dt2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/dt3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/dt3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/dt4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/dt4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/dt5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/dt5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/dt6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/dt6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/dt7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/dt7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/e1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/e1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/e2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/e2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/e3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/e3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/e4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/e4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/e5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/e5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/e6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/e6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/e7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/e7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/fo1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/fo1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/fo2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/fo2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/fo3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/fo3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/fo4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/fo4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/fo5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/fo5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/fo6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/fo6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/fo7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/fo7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ft1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ft1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ft2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ft2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ft3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ft3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ft4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ft4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ft5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ft5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ft6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ft6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/ft7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/ft7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/go1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/go1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/go2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/go2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/go3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/go3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/go4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/go4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/go5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/go5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/go6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/go6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/go7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/go7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/gt1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/gt1.ogg -------------------------------------------------------------------------------- /public/piano_sounds/gt2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/gt2.ogg -------------------------------------------------------------------------------- /public/piano_sounds/gt3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/gt3.ogg -------------------------------------------------------------------------------- /public/piano_sounds/gt4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/gt4.ogg -------------------------------------------------------------------------------- /public/piano_sounds/gt5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/gt5.ogg -------------------------------------------------------------------------------- /public/piano_sounds/gt6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/gt6.ogg -------------------------------------------------------------------------------- /public/piano_sounds/gt7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/public/piano_sounds/gt7.ogg -------------------------------------------------------------------------------- /public/piano_sounds/rename2.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include 5 | 6 | namespace fs = std::filesystem; 7 | 8 | int main(){ 9 | std::string path = "./"; 10 | std::vector already_names; 11 | for (const auto & entry : fs::directory_iterator(path)){ 12 | const std::string name = entry.path().string().substr(2,entry.path().string().length()-2); 13 | if(name[0] != 'b' && name[0] != 'e'){ 14 | if(name[1] == 's'){ 15 | const std::string new_name = name.substr(0,1) + 'o' + name.substr(2,5); 16 | std::cout << "OLD: " << entry.path() << "NEW: " << new_name << std::endl; 17 | rename(entry,new_name.c_str()); 18 | }else{ 19 | const std::string new_name = name.substr(0,1) + 't' + name.substr(1,5); 20 | std::cout << "OLD: " << entry.path() << "NEW: " << new_name << std::endl; 21 | rename(entry,new_name.c_str()); 22 | } 23 | } 24 | } 25 | 26 | } -------------------------------------------------------------------------------- /public/piano_sounds/renamer.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include 5 | 6 | namespace fs = std::filesystem; 7 | 8 | int main(){ 9 | std::string path = "./"; 10 | std::vector already_names; 11 | for (const auto & entry : fs::directory_iterator(path)){ 12 | if(entry.path().string().length() > 15){ 13 | const std::string new_name = entry.path().string().substr(20,6); 14 | bool is_in = false; 15 | for(int x = 0; x < already_names.size(); x++){ 16 | if(already_names[x] == new_name){ 17 | is_in=true; 18 | } 19 | } 20 | if(!is_in){ 21 | rename(entry,new_name); 22 | already_names.push_back(new_name); 23 | }else{ 24 | const std::string edited_name = new_name.substr(0,1) + "s" + new_name.substr(1,5); 25 | rename(entry,edited_name); 26 | already_names.push_back(edited_name); 27 | } 28 | std::cout << already_names[already_names.size()-1] << std::endl; 29 | } 30 | } 31 | 32 | } -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | 4 | -------------------------------------------------------------------------------- /public/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | https://pianoblocksapp.com/ 12 | 2023-12-26T21:47:20+00:00 13 | https://pianoblocksapp.com/tutorial 14 | 2023-12-26T21:47:20+00:00 15 | https://pianoblocksapp.com/info 16 | 2023-12-26T21:47:20+00:00 17 | https://pianoblocksapp.com/record 18 | 2023-12-26T21:47:20+00:00 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .main{ 2 | width:100%; 3 | position: absolute; 4 | top: 0px; 5 | overflow-y: hidden; 6 | overflow-x: hidden; 7 | } 8 | 9 | h1{ 10 | text-align: center; 11 | } 12 | 13 | .CheckPassword{ 14 | width:100vw; 15 | height:100vh; 16 | background-color: #101010; 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | .CheckPassword>input{ 24 | padding: 10px; 25 | border-radius: 5px; 26 | } 27 | 28 | .CheckPassword>h3{ 29 | color:white; 30 | } 31 | 32 | .CheckPassword>h1{ 33 | color:white; 34 | } 35 | 36 | body{ 37 | cursor: default; 38 | overflow: hidden; 39 | background-color: #101010; 40 | } 41 | -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Main from './Pages/Main/Main'; 3 | import Tutorial from './Pages/Tutorial/Tutorial'; 4 | import Header from './Components/Header/Header'; 5 | import Info from './Pages/ToDo/ToDo'; 6 | import Play from './Pages/Play/Play'; 7 | import PlayRecorded from './Pages/Play/PlayRecorded'; 8 | import Record from './Pages/Record/Record'; 9 | import {Routes as Switch, Route} from 'react-router-dom'; 10 | import './App.css'; 11 | 12 | function App() { 13 | 14 | return ( 15 |
16 |
17 | 18 | } /> 19 | } /> 20 | } /> 21 | } /> 22 | } /> 23 | } /> 24 | 25 |
26 | ); 27 | } 28 | 29 | export default App; -------------------------------------------------------------------------------- /src/Assets/BG.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/BG.jpg -------------------------------------------------------------------------------- /src/Assets/Cactus.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/Cactus.gif -------------------------------------------------------------------------------- /src/Assets/FontAwesomeLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/FontAwesomeLogo.png -------------------------------------------------------------------------------- /src/Assets/GoogleFontsLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/GoogleFontsLogo.png -------------------------------------------------------------------------------- /src/Assets/Me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/Me.jpg -------------------------------------------------------------------------------- /src/Assets/NPMLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/NPMLogo.png -------------------------------------------------------------------------------- /src/Assets/PBA_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/PBA_logo.png -------------------------------------------------------------------------------- /src/Assets/ReactJSLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/ReactJSLogo.png -------------------------------------------------------------------------------- /src/Assets/Rhombus.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/Rhombus.gif -------------------------------------------------------------------------------- /src/Assets/TypeScriptLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/TypeScriptLogo.png -------------------------------------------------------------------------------- /src/Assets/avnt-no-ng.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/avnt-no-ng.png -------------------------------------------------------------------------------- /src/Assets/avnt.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/avnt.jpeg -------------------------------------------------------------------------------- /src/Assets/bass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/bass.png -------------------------------------------------------------------------------- /src/Assets/demo.MID: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/demo.MID -------------------------------------------------------------------------------- /src/Assets/demo_old.MID: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/demo_old.MID -------------------------------------------------------------------------------- /src/Assets/herokuLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/herokuLogo.png -------------------------------------------------------------------------------- /src/Assets/hi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/hi.png -------------------------------------------------------------------------------- /src/Assets/hug.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/hug.gif -------------------------------------------------------------------------------- /src/Assets/midi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/midi.png -------------------------------------------------------------------------------- /src/Assets/piano.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano.png -------------------------------------------------------------------------------- /src/Assets/piano_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_icon.png -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ao0.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ao0.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ao1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ao1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ao2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ao2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ao3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ao3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ao4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ao4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ao5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ao5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ao6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ao6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ao7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ao7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/at0.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/at0.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/at1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/at1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/at2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/at2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/at3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/at3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/at4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/at4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/at5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/at5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/at6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/at6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/at7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/at7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/b0.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/b0.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/b1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/b1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/b2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/b2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/b3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/b3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/b4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/b4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/b5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/b5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/b6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/b6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/b7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/b7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/co1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/co1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/co2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/co2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/co3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/co3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/co4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/co4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/co5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/co5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/co6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/co6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/co7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/co7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ct1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ct1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ct2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ct2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ct3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ct3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ct4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ct4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ct5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ct5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ct6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ct6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ct7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ct7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ct8.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ct8.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/do1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/do1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/do2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/do2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/do3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/do3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/do4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/do4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/do5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/do5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/do6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/do6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/do7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/do7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/dt1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/dt1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/dt2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/dt2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/dt3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/dt3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/dt4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/dt4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/dt5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/dt5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/dt6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/dt6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/dt7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/dt7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/e1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/e1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/e2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/e2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/e3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/e3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/e4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/e4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/e5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/e5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/e6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/e6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/e7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/e7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/fo1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/fo1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/fo2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/fo2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/fo3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/fo3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/fo4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/fo4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/fo5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/fo5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/fo6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/fo6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/fo7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/fo7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ft1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ft1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ft2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ft2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ft3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ft3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ft4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ft4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ft5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ft5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ft6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ft6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/ft7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/ft7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/go1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/go1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/go2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/go2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/go3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/go3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/go4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/go4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/go5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/go5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/go6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/go6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/go7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/go7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/gt1.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/gt1.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/gt2.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/gt2.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/gt3.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/gt3.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/gt4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/gt4.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/gt5.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/gt5.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/gt6.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/gt6.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/gt7.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/piano_sounds/gt7.ogg -------------------------------------------------------------------------------- /src/Assets/piano_sounds/rename2.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include 5 | 6 | namespace fs = std::filesystem; 7 | 8 | int main(){ 9 | std::string path = "./"; 10 | std::vector already_names; 11 | for (const auto & entry : fs::directory_iterator(path)){ 12 | const std::string name = entry.path().string().substr(2,entry.path().string().length()-2); 13 | if(name[0] != 'b' && name[0] != 'e'){ 14 | if(name[1] == 's'){ 15 | const std::string new_name = name.substr(0,1) + 'o' + name.substr(2,5); 16 | std::cout << "OLD: " << entry.path() << "NEW: " << new_name << std::endl; 17 | rename(entry,new_name.c_str()); 18 | }else{ 19 | const std::string new_name = name.substr(0,1) + 't' + name.substr(1,5); 20 | std::cout << "OLD: " << entry.path() << "NEW: " << new_name << std::endl; 21 | rename(entry,new_name.c_str()); 22 | } 23 | } 24 | } 25 | 26 | } -------------------------------------------------------------------------------- /src/Assets/piano_sounds/renamer.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include 5 | 6 | namespace fs = std::filesystem; 7 | 8 | int main(){ 9 | std::string path = "./"; 10 | std::vector already_names; 11 | for (const auto & entry : fs::directory_iterator(path)){ 12 | if(entry.path().string().length() > 15){ 13 | const std::string new_name = entry.path().string().substr(20,6); 14 | bool is_in = false; 15 | for(int x = 0; x < already_names.size(); x++){ 16 | if(already_names[x] == new_name){ 17 | is_in=true; 18 | } 19 | } 20 | if(!is_in){ 21 | rename(entry,new_name); 22 | already_names.push_back(new_name); 23 | }else{ 24 | const std::string edited_name = new_name.substr(0,1) + "s" + new_name.substr(1,5); 25 | rename(entry,edited_name); 26 | already_names.push_back(edited_name); 27 | } 28 | std::cout << already_names[already_names.size()-1] << std::endl; 29 | } 30 | } 31 | 32 | } -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/BlockShadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/BlockShadow.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/BlockShadow1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/BlockShadow1.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/BlockShadow2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/BlockShadow2.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Bubbles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Bubbles.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Color1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Color1.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Color2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Color2.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/ColorCard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/ColorCard.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/DancingLines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/DancingLines.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Fireworks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Fireworks.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Gradient.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Gradient1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Gradient1.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Gradient2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Gradient2.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/KeyPressColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/KeyPressColor.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/KeyPressColor1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/KeyPressColor1.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/KeyPressColor2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/KeyPressColor2.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/RandomBlocksColor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/RandomBlocksColor.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/RandomBlocksColor1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/RandomBlocksColor1.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/RandomBlocksColor2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/RandomBlocksColor2.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Shadow.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Shadow1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Shadow1.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Shadow2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Shadow2.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Sparks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Sparks.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/ThinColor1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/ThinColor1.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/ThinColor2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/ThinColor2.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/ThinColorCard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/ThinColorCard.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Watermark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Watermark.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Watermark1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Watermark1.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/Watermark2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/Watermark2.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/fountain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/fountain.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/radius.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/radius.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/radius1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/radius1.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Config/radius2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Config/radius2.png -------------------------------------------------------------------------------- /src/Assets/tutorial/Demo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Demo.mp4 -------------------------------------------------------------------------------- /src/Assets/tutorial/Midi_Description.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/Midi_Description.png -------------------------------------------------------------------------------- /src/Assets/tutorial/file_input_tut.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/file_input_tut.mp4 -------------------------------------------------------------------------------- /src/Assets/tutorial/interface.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/interface.png -------------------------------------------------------------------------------- /src/Assets/tutorial/rec.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/rec.mp4 -------------------------------------------------------------------------------- /src/Assets/tutorial/shet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/tutorial/shet.png -------------------------------------------------------------------------------- /src/Assets/violin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Assets/violin.png -------------------------------------------------------------------------------- /src/Components/DonateButton/DonateButton.scss: -------------------------------------------------------------------------------- 1 | .DonateButton{ 2 | border-radius: 5px; 3 | box-shadow: 1px 1px 4px black; 4 | background-color: beige; 5 | a{ 6 | font-size: 18px; 7 | display: block; 8 | padding: 10px; 9 | padding-left: 20px; 10 | padding-right: 20px; 11 | text-decoration: none; 12 | color: rgb(32, 143, 180); 13 | transition: 0.15s; 14 | } 15 | } -------------------------------------------------------------------------------- /src/Components/DonateButton/DonateButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './DonateButton.scss' 3 | 4 | interface DonateButton_Props{ 5 | className: string 6 | link:string 7 | } 8 | 9 | export default function DonateButton({className,link}:DonateButton_Props) { 10 | 11 | return ( 12 |
13 | Donate 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/Components/DonationPrompt/DonationPrompt.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quantico&family=Quattrocento+Sans&display=swap'); 2 | 3 | .DonationPrompt{ 4 | position: absolute; 5 | width:400px; 6 | height:600px; 7 | left:50%; 8 | transform: translateX(-50%) translateY(-50%); 9 | background-color: #060606; 10 | background: linear-gradient(#060606,#262626,#060606); 11 | border-radius: 15px; 12 | box-shadow: 0px 0px 1px 8px rgb(77, 77, 77); 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | color: white; 17 | top:50%; 18 | animation: enter 0.7s ease; 19 | z-index: 99; 20 | img{ 21 | width:100px; 22 | margin-top: 20px; 23 | } 24 | h3,h4{ 25 | font-family: 'Quantico', sans-serif; 26 | padding: 10px; 27 | margin: 0; 28 | text-align: center; 29 | } 30 | h3{ 31 | margin-top: 20px; 32 | } 33 | .DonBut{ 34 | margin-top: 10px; 35 | a{ 36 | font-size: 24px; 37 | } 38 | } 39 | span{ 40 | color: orange; 41 | } 42 | button{ 43 | position: absolute; 44 | left: 50%; 45 | bottom:10px; 46 | transform: translateX(-50%); 47 | outline: none; 48 | border: none; 49 | font-size: 16px; 50 | color:white; 51 | background-color: rgb(251, 76, 76); 52 | font-weight: 800; 53 | padding: 10px; 54 | padding-left: 15px; 55 | padding-right: 15px; 56 | border-radius: 10px; 57 | box-shadow: 0px 0px 4px red; 58 | &:hover{ 59 | box-shadow: 0px 0px 4px 2px rgb(195, 0, 0); 60 | transition: 0.2s; 61 | cursor: pointer; 62 | } 63 | } 64 | } 65 | 66 | .DonationPromptClosed{ 67 | display: none !important; 68 | } 69 | 70 | @keyframes enter{ 71 | 0%{ 72 | top:-1000px; 73 | } 74 | 100%{ 75 | top:50%; 76 | transform: translateY(-50%) translateX(-50%) ; 77 | } 78 | } -------------------------------------------------------------------------------- /src/Components/DonationPrompt/DonationPrompt.tsx: -------------------------------------------------------------------------------- 1 | import React,{useEffect,useState} from 'react' 2 | import DonateButton from '../DonateButton/DonateButton'; 3 | import Hi from '../../Assets/hi.png'; 4 | import './DonationPrompt.scss' 5 | 6 | export default function DonationPrompt() { 7 | 8 | const [canPrompt,setCanPrompt] = useState(false); 9 | const [countVisited,setCountVisited] = useState(0); 10 | 11 | useEffect(()=>{ 12 | const visited = window.localStorage.getItem("pba_visited") !== null ? parseInt(window.localStorage.getItem("pba_visited")!) : 0 ; 13 | if(visited % 5 === 0 && visited!== 0){ 14 | setCanPrompt(true); 15 | setCountVisited(visited); 16 | } 17 | window.localStorage.setItem("pba_visited",(visited+1).toString()); 18 | },[]); 19 | 20 | return ( 21 |
22 | wave_hand 23 |

We've noticed that You've visited this page {countVisited} times!

24 |

25 | If you like using this app consider donating 26 | It really helps run this project for free 27 |

28 | 29 |

Thank You!

30 | 31 |
32 | ) 33 | } 34 | -------------------------------------------------------------------------------- /src/Components/DrawPiano/DrawPiano.styles.css: -------------------------------------------------------------------------------- 1 | .Piano{ 2 | position: relative; 3 | /* margin: 20px auto; */ 4 | width:100%; 5 | background-color: rgb(32, 9, 0); 6 | } 7 | 8 | .piano_keys{ 9 | position: absolute; 10 | } 11 | 12 | .whiteKey{ 13 | 14 | border:1px solid black; 15 | border-bottom: none; 16 | position: absolute; 17 | box-shadow: 0 4px 3px -3px black; 18 | background-color: rgb(255, 255, 240); 19 | border-radius: 5px; 20 | z-index: 30; 21 | border-top-left-radius: 1px; 22 | border-top-right-radius: 1px; 23 | } 24 | 25 | .blackKey{ 26 | border:1px solid black; 27 | background-color: black; 28 | position: absolute; 29 | box-shadow: 0px 1px 4px black; 30 | border-radius: 5px; 31 | border-top-left-radius: 1px; 32 | border-top-right-radius: 1px; 33 | z-index: 33; 34 | } 35 | 36 | .redFancyLine{ 37 | position: absolute; 38 | height:3px; 39 | width:100%; 40 | border-top: 4px solid black; 41 | background-color: rgb(44, 1, 1); 42 | box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.699); 43 | z-index: 35; 44 | } 45 | 46 | .red{ 47 | background-color: #11d331; 48 | transform: scale(0.92); 49 | } 50 | 51 | .loading_sound{ 52 | position: absolute; 53 | z-index: 555; 54 | background-color: white; 55 | } 56 | 57 | .loading_sound>img{ 58 | display: block; 59 | margin: 100px auto; 60 | transform: scale(1.5); 61 | } 62 | 63 | .loading_sound>h2{ 64 | display: block; 65 | text-align: center; 66 | font-size: 64px; 67 | margin: 0px auto; 68 | padding-top: 10px; 69 | color:black; 70 | } 71 | 72 | .loading_sound>h3{ 73 | color:black; 74 | font-size: 32px; 75 | text-align: center; 76 | } -------------------------------------------------------------------------------- /src/Components/DrawPiano/DrawPiano.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement, useState, useEffect} from 'react'; 2 | import './DrawPiano.styles.css'; 3 | 4 | import { noteEvent } from "../../Utils/TypesForMidi"; 5 | import { Options as OptionsType } from '../../Utils/TypesForOptions'; 6 | import MidiPlayer from '../../Helpers/MidiPlayer'; 7 | import {TracksInterval, TracksAnimationFrame} from '../Tracks'; 8 | import soundManager from '../../Helpers/soundManager'; 9 | 10 | import Gear from '../../Assets/Rhombus.gif'; 11 | 12 | interface DrawPianoProps{ 13 | Data: Array | undefined, 14 | Speed: number, 15 | options: OptionsType, 16 | drawSpeed: number, 17 | Player: MidiPlayer, 18 | } 19 | 20 | export default function DrawPiano({Data,Speed,options,drawSpeed,Player}:DrawPianoProps):ReactElement { 21 | 22 | const [WhiteKeyWidth,setWindowKeyWidth] = useState(window.innerWidth / 52); 23 | const [windowHeight,setWindowHeight] = useState(window.innerHeight); 24 | const [sound,setSound] = useState(); 25 | 26 | const handleResize = () =>{ 27 | setWindowKeyWidth(window.innerWidth / 52); 28 | setWindowHeight(window.innerHeight); 29 | } 30 | 31 | const KeysPositions = (type:('black' | 'all')):Array =>{ 32 | let Returning:Array = []; 33 | let counter_ids:number = 21; 34 | for(let x = 0; x < 52; x++){ 35 | type === 'all' && Returning.push({position: WhiteKeyWidth * x, noteNumber: counter_ids,width:WhiteKeyWidth}); 36 | const num = counter_ids % 12; 37 | if(num === 1 - 1 || num === 3 - 1 || num === 6 - 1 || num ===8 - 1 || num ===10 - 1 ){ 38 | counter_ids++; 39 | if(counter_ids < 109){ 40 | type ==='all' && Returning.push({position : WhiteKeyWidth * x + WhiteKeyWidth / 1.4, notenumber: counter_ids,width:WhiteKeyWidth/1.8}); 41 | type === 'black' && Returning.push(counter_ids); 42 | } 43 | } 44 | counter_ids++; 45 | } 46 | return Returning; 47 | } 48 | 49 | const RenderTracks = ():ReactElement =>{ 50 | if(options.renderMethod === 'Interval'){ 51 | return 59 | }else{ 60 | return 70 | } 71 | } 72 | 73 | 74 | useEffect(()=>{ 75 | window.addEventListener('resize',handleResize); 76 | if(options.soundOn){ 77 | setSound(new soundManager()); 78 | } 79 | return () =>{window.removeEventListener('resize',handleResize)} 80 | },[options.soundOn]) 81 | 82 | return ( 83 |
84 | {sound && options.soundOn && RenderTracks()} 85 | {!sound && options.soundOn &&
Loading

Sound Loading

If sound is not loading try clicking anywhere on the screen

} 86 | {!options.soundOn && RenderTracks()} 87 |
88 | ) 89 | } 90 | -------------------------------------------------------------------------------- /src/Components/DrawPiano/LoadingScreen/LoadingScreen.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Irish+Grover&display=swap'); 2 | 3 | .LoadingScreen{ 4 | position: absolute; 5 | top:0; 6 | left:0; 7 | z-index: 100; 8 | background: white; 9 | transition: 1s; 10 | img{ 11 | display: block; 12 | position: relative; 13 | box-sizing: border-box; 14 | margin: 50px auto; 15 | width:150px; 16 | padding: 5px; 17 | top:100px; 18 | border-radius: 15px; 19 | } 20 | h2{ 21 | display: block; 22 | text-align: center; 23 | margin: 100px auto; 24 | font-family: 'Irish Grover', cursive; 25 | font-size: 32px; 26 | } 27 | } 28 | 29 | @keyframes spin{ 30 | 0%{ 31 | transform: rotate(0deg); 32 | } 33 | 100%{ 34 | transform: rotate(360deg); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/Components/DrawPiano/LoadingScreen/LoadingScreen.tsx: -------------------------------------------------------------------------------- 1 | import React,{ReactElement,useState,useEffect} from 'react' 2 | import './LoadingScreen.scss'; 3 | 4 | import Gear from '../../../Assets/Rhombus.gif'; 5 | 6 | interface LoadingScreenProps{ 7 | width:number, 8 | height:number, 9 | onLoaded: Function, 10 | Finished:boolean 11 | } 12 | 13 | 14 | 15 | export default function LoadingScreen({width,height,onLoaded,Finished}:LoadingScreenProps):ReactElement { 16 | 17 | const [opacity,setOpacity] = useState(0) 18 | const [isReady,setisReady] = useState(false); 19 | 20 | useEffect(() => { 21 | if(Finished){ 22 | setTimeout(()=>{setOpacity(200)},1500); 23 | } 24 | }, [Finished]) 25 | 26 | useEffect(() => { 27 | if(isReady){onLoaded();} 28 | if(Gear){ 29 | setisReady(true) 30 | } 31 | // eslint-disable-next-line react-hooks/exhaustive-deps 32 | }, [isReady]) 33 | 34 | return ( 35 |
36 | Loading 37 |

Loading, Please Wait

38 |
39 | ) 40 | } 41 | -------------------------------------------------------------------------------- /src/Components/DrawPiano/PianoKeys/AllKeys.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement } from 'react'; 2 | import WhiteKey from './WhiteKey'; 3 | import BlackKey from './BlackKey'; 4 | import { blockNote } from '../../../Utils/TypesForMidi'; 5 | 6 | interface AllKeysProps{ 7 | wh:number, 8 | WhiteKeyWidth:number, 9 | data: Array, 10 | sound:any, 11 | height:number 12 | } 13 | 14 | export default function AllKeys({wh,WhiteKeyWidth,data,sound,height}:AllKeysProps):ReactElement { 15 | 16 | const drawWhitePianoKey = (pos_x:number,id:number):ReactElement =>{ 17 | return 18 | } 19 | 20 | const drawBlackPianoKey = (pos_x:number,id:number):ReactElement =>{ 21 | return 22 | } 23 | 24 | const KeysPositions = ():Array =>{ 25 | let Returning:Array = []; 26 | let counter_ids:number = 21; 27 | for(let x = 0; x < 52; x++){ 28 | Returning.push(drawWhitePianoKey(WhiteKeyWidth * x,counter_ids)); 29 | const num = counter_ids % 12; 30 | if(num === 1 - 1 || num === 3 - 1 || num === 6 - 1 || num ===8 - 1 || num ===10 - 1 ){ 31 | counter_ids++; 32 | if(counter_ids < 109){ 33 | Returning.push(drawBlackPianoKey(WhiteKeyWidth * x + WhiteKeyWidth / 1.4,counter_ids)); 34 | } 35 | } 36 | counter_ids++; 37 | } 38 | return Returning; 39 | } 40 | 41 | return ( 42 |
43 | {KeysPositions()} 44 |
45 | ) 46 | } 47 | -------------------------------------------------------------------------------- /src/Components/DrawPiano/PianoKeys/BlackKey.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement,useEffect,useState } from 'react' 2 | import { blockNote } from "../../../Utils/TypesForMidi"; 3 | 4 | interface WhiteKeyProps{ 5 | WhiteKeyWidth: number, 6 | pos_x:number, 7 | Data: Array | undefined, 8 | id: number, 9 | sound:any, 10 | height:number 11 | } 12 | 13 | export default function BlackKey({WhiteKeyWidth,pos_x,Data, id,sound,height}:WhiteKeyProps):ReactElement { 14 | 15 | const [backgroundColor,setBackgroundColor] = useState('black'); 16 | 17 | useEffect(()=>{ 18 | Data?.map(event =>{ 19 | if(event.NoteNumber === id){ 20 | if(event.wasDetected === true){ 21 | setBackgroundColor('#5085f8'); 22 | sound && sound.play_key(id); 23 | }else{ 24 | setBackgroundColor('black'); 25 | } 26 | } 27 | return null; 28 | }) 29 | },[Data,id,sound]) 30 | 31 | return ( 32 |
33 |
34 | ) 35 | } 36 | -------------------------------------------------------------------------------- /src/Components/DrawPiano/PianoKeys/WhiteKey.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement,useEffect, useState } from 'react' 2 | import { blockNote } from "../../../Utils/TypesForMidi"; 3 | 4 | interface WhiteKeyProps{ 5 | WhiteKeyWidth: number, 6 | pos_x:number, 7 | Data: undefined | Array, 8 | id:number, 9 | sound:any, 10 | height:number 11 | } 12 | 13 | export default function WhiteKey({WhiteKeyWidth,pos_x,Data,id,sound,height}:WhiteKeyProps):ReactElement { 14 | 15 | const [backgroundColor,setBackgroundColor] = useState('#fffff0'); 16 | 17 | 18 | useEffect(()=>{ 19 | Data?.map(event =>{ 20 | if(event.NoteNumber === id){ 21 | if(event.wasDetected === true){ 22 | setBackgroundColor('#5085f8'); 23 | //sound && sound.play_key(id); 24 | }else{ 25 | setBackgroundColor('#fffff0'); 26 | } 27 | } 28 | return null; 29 | }) 30 | },[Data,id,sound]) 31 | 32 | return ( 33 |
34 |
35 | ) 36 | } 37 | -------------------------------------------------------------------------------- /src/Components/Header/Header.styles.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300;400&family=Poppins:wght@300&display=swap'); 2 | 3 | .Header{ 4 | width:100%; 5 | height:60px; 6 | background: #12202d; 7 | box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.781); 8 | text-transform: uppercase; 9 | position: fixed; 10 | z-index: 10; 11 | .HeaderData{ 12 | height:100%; 13 | display:flex; 14 | align-items: center; 15 | justify-content: space-between; 16 | margin-left: 60px; 17 | .Logo{ 18 | height:100%; 19 | display: flex; 20 | align-items: center; 21 | position: relative; 22 | overflow: hidden; 23 | h1{ 24 | font-weight: 300; 25 | font-family: 'Overpass Mono', monospace; 26 | font-weight: 100; 27 | font-size: 24px; 28 | color:white; 29 | margin:0; 30 | padding:0; 31 | } 32 | .Logo_Link{ 33 | text-decoration: none; 34 | } 35 | } 36 | .Links{ 37 | height:100%; 38 | display:flex; 39 | align-items: center; 40 | margin-right: 158px; 41 | .Link{ 42 | color:white; 43 | margin-left: 40px; 44 | text-decoration: none; 45 | font-size: 16px; 46 | font-family: 'Poppins', sans-serif; 47 | } 48 | .Link:hover{ 49 | transition: 0.1s; 50 | color:#99c7f5; 51 | transform: scale(1.10); 52 | font-weight: 500; 53 | } 54 | } 55 | } 56 | } 57 | 58 | @keyframes hover{ 59 | 0%{ 60 | width:0%; 61 | } 62 | 100%{ 63 | width:100%; 64 | } 65 | } 66 | 67 | @media only screen and (max-width: 1060px) { 68 | .Header{ 69 | .HeaderData{ 70 | margin-left: 20px; 71 | .Logo{ 72 | h1{ 73 | font-size: 16px; 74 | } 75 | } 76 | .Links{ 77 | margin-right: 50px; 78 | .Link{ 79 | font-size: 12px; 80 | margin-left: 10px; 81 | } 82 | } 83 | } 84 | } 85 | } 86 | 87 | @media only screen and (max-width: 550px) { 88 | .Header{ 89 | .HeaderData{ 90 | margin-left: 15px; 91 | .Logo{ 92 | h1{ 93 | font-size: 14px; 94 | } 95 | } 96 | .Links{ 97 | margin-right: 50px; 98 | .Link{ 99 | font-size: 11px; 100 | margin-left: 10px; 101 | } 102 | } 103 | } 104 | } 105 | } 106 | 107 | @media only screen and (max-width: 360px) { 108 | .Header{ 109 | .HeaderData{ 110 | margin-left: 15px; 111 | .Logo{ 112 | h1{ 113 | margin-top: -12px; 114 | font-size: 12px; 115 | } 116 | } 117 | .Links{ 118 | margin-right: 30px; 119 | .Link{ 120 | font-size: 9px; 121 | margin-left: 5px; 122 | } 123 | } 124 | } 125 | } 126 | } -------------------------------------------------------------------------------- /src/Components/Header/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Link} from 'react-router-dom'; 3 | import './Header.styles.scss'; 4 | 5 | export default function Header() { 6 | return ( 7 | 22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /src/Components/Inputfile/DrawInCanvas.ts: -------------------------------------------------------------------------------- 1 | import { RefObject } from "react" 2 | import {CanvasRoundRect} from '../../Utils/CanvasFuntions'; 3 | import { Options } from "../../Utils/TypesForOptions"; 4 | 5 | interface Ball{ 6 | x:number, 7 | y:number, 8 | speed:number, 9 | size:number, 10 | start_time:number 11 | } 12 | 13 | export default class DrawInCanvas{ 14 | private ctx:CanvasRenderingContext2D 15 | private Canvas:RefObject 16 | private balls:Array 17 | private options:Options 18 | private gradient:CanvasGradient 19 | 20 | constructor(CanvasRef:RefObject,options:Options,defaultValue?:Array){ 21 | this.ctx = CanvasRef.current?.getContext('2d')!; 22 | this.Canvas = CanvasRef; 23 | this.options = options 24 | this.Canvas.current!.width = window.innerWidth / 2; 25 | this.Canvas.current!.height = window.innerHeight + 300; 26 | this.balls = defaultValue ? defaultValue : []; 27 | this.CreateBalls = this.CreateBalls.bind(this); 28 | this.render = this.render.bind(this); 29 | this.CreateBalls(100); 30 | this.gradient = this.ctx.createLinearGradient(0,0, this.Canvas.current!.width * Math.cos(90 / 180 * Math.PI),this.Canvas.current!.height * Math.sin(90 / 180 * Math.PI)); 31 | const step = 1 / this.options.GradientBlocksColor.length; 32 | let current_step = 0; 33 | console.log(this.options.GradientBlocksColor) 34 | this.options.GradientBlocksColor.forEach(color =>{this.gradient.addColorStop(current_step,color); current_step+=step}); 35 | } 36 | 37 | public render(color:string):void{ 38 | if(this.Canvas && this.ctx){ 39 | if(this.Canvas && this.Canvas.current){ 40 | if(this.Canvas.current!.width !== window.innerWidth || this.Canvas.current!.height !== window.innerHeight + 300){ 41 | this.Canvas.current!.width = window.innerWidth > 920 ? window.innerWidth / 2 : window.innerWidth; 42 | this.Canvas.current!.height = window.innerHeight + 300; 43 | } 44 | } 45 | this.ctx.clearRect(0,0,window.innerWidth,window.innerHeight); 46 | this.balls = this.balls.map(ball =>{ 47 | ball.y = (Date.now() - ball.start_time) / ball.speed; 48 | if(ball.y > this.Canvas.current!.height){ball.x = Math.random() * window.innerWidth;ball.start_time = Date.now() + 500}; 49 | this.ctx.beginPath(); 50 | this.ctx.shadowColor = this.options.ShadowColor; 51 | CanvasRoundRect(this.ctx,this.options.GradientBlocks ? this.gradient:color,Math.floor(ball.x),Math.floor(ball.y),Math.floor(ball.size),Math.floor(ball.size*3.7),this.options.blockRadius,true); 52 | return ball; 53 | }) 54 | }; 55 | } 56 | 57 | private CreateBalls(quantity:number):void{ 58 | this.ctx.shadowBlur = 4; 59 | for(let x = 0; x < quantity; x++){ 60 | const ball:Ball = { 61 | x: window.innerWidth/quantity * x, 62 | y: Math.random() * window.innerHeight, 63 | speed: Math.random() * 2 + 2, 64 | size: (Math.random() > 0.5 ? window.innerWidth < 1200 ? 1200 / 52 / 1.5 : window.innerWidth / 52 / 1.5 : window.innerWidth < 1200 ? 1200/52 /1.6 / 1.5 : window.innerWidth/52 /1.6 / 1.5), 65 | start_time: Date.now() - Math.floor(Math.random() * 4000) 66 | } 67 | this.balls.push(ball); 68 | } 69 | } 70 | 71 | public get Blocks():Array{ 72 | return this.Blocks; 73 | } 74 | } -------------------------------------------------------------------------------- /src/Components/Inputfile/InputFile.tsx: -------------------------------------------------------------------------------- 1 | import React, {ReactElement, useRef, useEffect,useState} from 'react'; 2 | import './Input.styles.scss'; 3 | 4 | import MidiImage from '../../Assets/midi.png'; 5 | import DrawInCanvas from './DrawInCanvas'; 6 | import { Options } from '../../Utils/TypesForOptions'; 7 | 8 | interface InputFileProps{ 9 | FileRef: React.RefObject, 10 | onFileUpload: Function, 11 | options:Options, 12 | onConfClick:Function, 13 | isConfOn:boolean 14 | } 15 | 16 | export default function InputFile({FileRef,onFileUpload,options,onConfClick,isConfOn}:InputFileProps):ReactElement { 17 | 18 | const Canvas = useRef(null); 19 | const animationId = useRef(0); 20 | const [blocks,setBlocks] = useState(); 21 | const [fade,setFade] = useState(false); 22 | 23 | useEffect(()=>{ 24 | !blocks && setBlocks(new DrawInCanvas(Canvas,options)); 25 | },[blocks,Canvas,options]) 26 | 27 | const render = () =>{ 28 | if(Canvas.current){ 29 | blocks?.render(options.Color); 30 | animationId.current = requestAnimationFrame(render); 31 | } 32 | } 33 | 34 | useEffect(() => { 35 | if(blocks){ 36 | animationId.current = requestAnimationFrame(render); 37 | } 38 | return () => { 39 | cancelAnimationFrame(animationId.current); 40 | } 41 | // eslint-disable-next-line react-hooks/exhaustive-deps 42 | }, [blocks]) 43 | 44 | const onConfigureClick = () => { 45 | window.innerWidth > 920 && setFade(true); 46 | onConfClick(); 47 | } 48 | 49 | useEffect(() => { 50 | if(!isConfOn){ 51 | setTimeout(()=>{setFade(false)},250); 52 | } 53 | }, [isConfOn]) 54 | 55 | return ( 56 |
57 | {onFileUpload()}} /> 58 |
59 | 920 ? window.innerWidth / 2 : window.innerWidth} ref={Canvas}/> 60 |
61 |
62 | midi_icon 63 |

Drag Your MIDI file here to start visualizing!

64 |

Or click here to choose file!

65 | 66 |
67 |
68 | ) 69 | } 70 | -------------------------------------------------------------------------------- /src/Components/InsideNavigator/InsideNavigator.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement,useRef} from 'react'; 2 | import './InsideNavigator.style.scss'; 3 | 4 | interface InsideNavigatorProps{ 5 | elements:Array<{ 6 | name:string, 7 | component:ReactElement | HTMLElement | string 8 | }> 9 | setId:Function 10 | component_id:number 11 | width:number 12 | height:number 13 | proportion?:number 14 | } 15 | 16 | interface LinkProps{ 17 | id:number 18 | name:string, 19 | onChange:Function 20 | } 21 | 22 | function Link({id,name,onChange}:LinkProps):ReactElement{ 23 | 24 | const onClick= ():void =>{ 25 | onChange(id); 26 | } 27 | 28 | return
29 |

{name}

30 |
31 | } 32 | 33 | export default function InsideNavigator({elements,width,height,proportion,setId,component_id}:InsideNavigatorProps):ReactElement { 34 | 35 | const nav_proportion = useRef(proportion ? proportion : 7); 36 | 37 | const onLinkClick = (id:number):void =>{ 38 | setId(id); 39 | } 40 | const RenderLinks = ():any => { 41 | return elements.map((el,index) =>{ 42 | return 43 | }) 44 | } 45 | 46 | 47 | return ( 48 |
49 |
900 ? {width:width / nav_proportion.current} : {}}> 50 | {RenderLinks()} 51 |
52 |
900 ? {width:width / nav_proportion.current * (nav_proportion.current - 1)} : {}}> 53 | {elements[component_id].component} 54 |
55 |
56 | ) 57 | } 58 | -------------------------------------------------------------------------------- /src/Components/NewOptions/ChooseButtons/ChooseButton.style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,500;0,600;1,400&display=swap'); 2 | 3 | .options_button{ 4 | width:150px; 5 | height:45px; 6 | background-color: #F8F0EF; 7 | border-radius: 10px; 8 | box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.26); 9 | display: flex; 10 | align-items: center; 11 | cursor:pointer; 12 | .options_button_text{ 13 | width:100%; 14 | height: 100%; 15 | text-align: center; 16 | font-family: 'Poppins', sans-serif; 17 | font-weight: 600; 18 | font-size: 18px; 19 | text-transform: uppercase; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | overflow: hidden; 24 | } 25 | } 26 | 27 | .single_letter{ 28 | margin:0; 29 | display: inline-block; 30 | font-family: 'Poppins', sans-serif; 31 | font-weight: 600; 32 | font-size: 18px; 33 | } 34 | 35 | @media only screen and (max-width: 860px) { 36 | .options_button{ 37 | margin-top: 15px; 38 | width:auto; 39 | height:40px; 40 | border-radius: 6px; 41 | padding-left: 10px; 42 | padding-right: 10px; 43 | } 44 | .single_letter{ 45 | font-size: 15px; 46 | } 47 | } 48 | 49 | @media only screen and (max-width: 550px) { 50 | .options_button{ 51 | margin-top: 15px; 52 | width:auto; 53 | height:40px; 54 | border-radius: 6px; 55 | padding-left: 5px; 56 | padding-right: 5px; 57 | } 58 | .single_letter{ 59 | font-size: 12px; 60 | } 61 | } 62 | 63 | @media only screen and (max-width: 400px) { 64 | .options_button{ 65 | margin-top: 2px; 66 | width:auto; 67 | height:30px; 68 | border-radius: 4px; 69 | padding-left: 5px; 70 | padding-right: 5px; 71 | } 72 | .single_letter{ 73 | font-size: 10px; 74 | } 75 | } 76 | 77 | @media only screen and (max-width: 300px) { 78 | .options_button{ 79 | margin-top: 2px; 80 | width:auto; 81 | height:20px; 82 | border-radius: 4px; 83 | padding-left: 2px; 84 | padding-right: 2px; 85 | } 86 | .single_letter{ 87 | font-size: 8px; 88 | } 89 | } -------------------------------------------------------------------------------- /src/Components/NewOptions/ChooseButtons/ChooseButton.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement,useState,useEffect} from 'react'; 2 | import './ChooseButton.style.scss'; 3 | 4 | interface ChooseButtonProps{ 5 | onClick:any, 6 | name:string, 7 | title:string, 8 | textColor:string 9 | } 10 | 11 | export default function ChooseButton({onClick,name,title,textColor}:ChooseButtonProps):ReactElement { 12 | 13 | const [positions,setPositions] = useState>(); 14 | 15 | const setDefaultPositions = ():void =>{ 16 | const arr = title.split(''); 17 | const pos:any = []; 18 | arr.map((letter,index) =>{ 19 | pos.push({ 20 | transition:'0s', 21 | pos: 0 22 | }); 23 | return null; 24 | }); 25 | setPositions(pos); 26 | } 27 | 28 | const renderLetters = ():any =>{ 29 | const arr = title.split(''); 30 | if(positions){ 31 | return arr.map((letter,index) =>{ 32 | return

{letter}

33 | }) 34 | }else{ 35 | return <> 36 | } 37 | } 38 | 39 | useEffect(() => { 40 | setDefaultPositions(); 41 | // eslint-disable-next-line react-hooks/exhaustive-deps 42 | }, []) 43 | 44 | const setTopPositions = ():void =>{ 45 | const arr = title.split(''); 46 | const pos:any = []; 47 | arr.map((letter,index) =>{ 48 | pos.push({ 49 | transition:'0s', 50 | pos: '-150%' 51 | }); 52 | return null; 53 | }); 54 | setPositions(pos); 55 | arr.map((letter,index) =>{ 56 | setTimeout(()=>{ 57 | const pos:any = []; 58 | arr.map((letter,i) =>{ 59 | if(i <= index){ 60 | pos.push({ 61 | transition:'0.12s ease', 62 | pos: '0px' 63 | }); 64 | }else{ 65 | pos.push({ 66 | transition:'0s', 67 | pos: '-150%' 68 | }); 69 | } 70 | return null; 71 | }); 72 | setPositions(pos); 73 | },index * 75 + 25); 74 | return null; 75 | }); 76 | } 77 | 78 | 79 | return ( 80 |
{onClick(name)}} onMouseEnter={setTopPositions}> 81 |
82 | {renderLetters()} 83 |
84 |
85 | ) 86 | } 87 | -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/EffectChoose/EffectChoose.style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;1,400&display=swap'); 2 | 3 | .EffectChoose{ 4 | cursor:pointer; 5 | overflow:hidden; 6 | position: relative; 7 | transition: 0.4s; 8 | } 9 | 10 | .curr{ 11 | transition: 0.4s; 12 | box-shadow: 0px 0px 8px 6px #f1c470 !important; 13 | } 14 | 15 | .hovered{ 16 | padding: 0px; 17 | box-shadow: 0px 0px 8px #9BF1F3; 18 | } 19 | 20 | .video{ 21 | position: absolute; 22 | top:-2px; 23 | width:100%; 24 | height:100%; 25 | opacity: 0.95; 26 | transition: 0.4s ease; 27 | } 28 | 29 | .hidd{ 30 | top:-100% !important; 31 | } 32 | 33 | .Click_To{ 34 | margin:15px; 35 | text-align: center; 36 | color:#f39a47; 37 | font-family: 'Poppins'; 38 | font-weight: 400; 39 | font-size: 18px; 40 | text-shadow: 0px 0px 4px #f09b3b; 41 | } 42 | -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/EffectChoose/EffectChoose.tsx: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react'; 2 | import './EffectChoose.style.scss'; 3 | 4 | interface OptionCardProps{ 5 | type:string, 6 | name:string, 7 | onChange: Function; 8 | Important?:boolean; 9 | title?:string; 10 | current:string; 11 | children: JSX.Element | string; 12 | value: string|boolean, 13 | src:any 14 | textColor?: 'effects' | 'blocks' | 'speed' | 'background' 15 | } 16 | 17 | export default function EffectChoose({type,name,onChange,value,children,title,textColor,src,current}:OptionCardProps) { 18 | 19 | const [hovered,isHovered] = useState(false); 20 | 21 | const onClick = ():void =>{ 22 | const event = { 23 | target:{ 24 | name: name, 25 | value: value 26 | } 27 | } 28 | onChange(event); 29 | } 30 | 31 | 32 | const onMouseEnter_Leave = (action:'leave' | 'enter') =>{ 33 | if(action === 'enter'){ 34 | isHovered(true); 35 | } 36 | if(action === 'leave'){ 37 | isHovered(false); 38 | } 39 | } 40 | 41 | return ( 42 |
{onMouseEnter_Leave('enter')}} onMouseLeave={()=>{onMouseEnter_Leave('leave')}} onClick={onClick} > 43 |

{title}

44 |

{children}

45 |

Click to choose

46 | {type !== "None" && 47 | 50 | } 51 |
52 | ) 53 | } 54 | -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/EffectChoose/Previews/DancingLines.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Components/NewOptions/OptionCard/EffectChoose/Previews/DancingLines.mp4 -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/EffectChoose/Previews/Fireworks.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Components/NewOptions/OptionCard/EffectChoose/Previews/Fireworks.mp4 -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/EffectChoose/Previews/Snow.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Components/NewOptions/OptionCard/EffectChoose/Previews/Snow.mp4 -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/EffectChoose/Previews/Sparks.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Components/NewOptions/OptionCard/EffectChoose/Previews/Sparks.mp4 -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/EffectChoose/Previews/balls.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Components/NewOptions/OptionCard/EffectChoose/Previews/balls.mp4 -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/EffectChoose/Previews/fountain.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tzmcion/ReactPianoPlayer/37d8190ac574abe11ed5eb6f1c144bd208bdf6ba/src/Components/NewOptions/OptionCard/EffectChoose/Previews/fountain.mp4 -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/Input.styles.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap'); 2 | 3 | //Color 4 | 5 | input[type="color"] { 6 | -webkit-appearance: none; 7 | border: none; 8 | display: block; 9 | border-radius: 5px; 10 | margin: 10px auto; 11 | width:50%; 12 | height:15%; 13 | cursor: pointer; 14 | } 15 | 16 | input[type="color"]::-webkit-color-swatch-wrapper { 17 | padding: 0; 18 | border-radius: 5px; 19 | box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.7); 20 | } 21 | input[type="color"]::-webkit-color-swatch { 22 | border: none; 23 | border-radius: 5px; 24 | } 25 | 26 | //Checkbox 27 | 28 | .checkboxInput{ 29 | width:25px; 30 | height:25px; 31 | cursor: pointer; 32 | position: relative; 33 | display: block; 34 | margin: 10px auto; 35 | box-shadow: 0px 0px 7px rgb(248, 28, 28); 36 | } 37 | 38 | .checkboxInput:checked, .Randocheckbox:active{ 39 | box-shadow: 0px 0px 7px rgb(33, 182, 33); 40 | } 41 | 42 | .checkboxInput::after{ 43 | content: ''; 44 | width: 100%; 45 | height: 100%; 46 | top:0; 47 | left: 0px; 48 | background-color: rgb(230, 63, 63); 49 | position: absolute; 50 | } 51 | 52 | .checkboxInput:hover::after{ 53 | content: ''; 54 | transition: 0.2s; 55 | width: 100%; 56 | height: 100%; 57 | top:0; 58 | left: 0px; 59 | background-color: rgb(155, 9, 9); 60 | position: absolute; 61 | } 62 | 63 | .checkboxInput:checked::after, .checkboxInput:active::after{ 64 | content: ''; 65 | transition: 0.2s; 66 | width: 100%; 67 | height: 100%; 68 | top:0px; 69 | left: 0px; 70 | background-color: rgb(63, 221, 63); 71 | position: absolute; 72 | } 73 | 74 | //Number 75 | 76 | .numberInput{ 77 | height:15%; 78 | margin: 10px auto; 79 | display: block; 80 | outline: none; 81 | border: none; 82 | -moz-appearance: textfield; 83 | border-radius: 5px; 84 | font-family: 'Poppins', sans-serif; 85 | font-weight: 600; 86 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.582); 87 | 88 | } 89 | 90 | .numberInput::-webkit-inner-spin-button{ 91 | opacity:0; 92 | -webkit-appearance: none; 93 | } 94 | 95 | .numberInput:focus-visible{ 96 | border:none; 97 | outline: none; 98 | } 99 | @media only screen and (max-width: 550px) { 100 | .numberInput{ 101 | height:12%; 102 | width: 50%; 103 | } 104 | } -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/OptionCard.style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;1,400&display=swap'); 2 | 3 | .OptionCard{ 4 | width:300px; 5 | height:170px; 6 | background-color: #F8F0EF; 7 | border-radius: 2px; 8 | box-shadow: 0px 0px 6px #F8F0EF; 9 | margin: 20px 1.8% 20px 1.8%; 10 | .Card_Title{ 11 | color:#44C1F8; 12 | font-family: 'Poppins'; 13 | font-weight: 400; 14 | font-size: 20px; 15 | text-shadow: 0px 0px 4px #44C1F8; 16 | } 17 | .Card_Description{ 18 | font-family: 'Poppins' !important; 19 | font-weight: 300 !important; 20 | color:black !important; 21 | font-size: 13px !important; 22 | letter-spacing: 1.1px !important; 23 | display: block !important; 24 | width:90% !important; 25 | margin: 0px auto !important; 26 | } 27 | .blocks{ 28 | text-shadow: 0px 0px 4px #44C1F8 !important; 29 | color:#44C1F8 !important; 30 | } 31 | .effects{ 32 | color:#7B6D8D !important; 33 | text-shadow: 0px 0px 4px #7B6D8D !important; 34 | } 35 | .speed{ 36 | color:#59CD90 !important; 37 | text-shadow: 0px 0px 4px #59CD90 !important; 38 | } 39 | .background{ 40 | color: #F95738 !important; 41 | text-shadow: 0px 0px 4px #F95738 !important; 42 | } 43 | } 44 | 45 | .inputImageDiv{ 46 | position: relative; 47 | width:80%; 48 | height:45px; 49 | margin: 0px auto; 50 | overflow:hidden; 51 | border-radius: 5px; 52 | border:2px dashed black; 53 | display:flex; 54 | align-items: center; 55 | justify-content: center; 56 | } 57 | 58 | .inputImage{ 59 | display: block; 60 | position: relative; 61 | width:80%; 62 | margin: 0px auto; 63 | height:50px; 64 | border-radius: 10px; 65 | } 66 | 67 | .ImageInput{ 68 | position: absolute; 69 | height:200%; 70 | width:100%; 71 | top:-50px; 72 | border-radius: 10px; 73 | cursor: pointer; 74 | } 75 | 76 | .inputImageDiv{ 77 | h1{ 78 | font-size: 12px; 79 | font-family: 'IM Fell English SC'; 80 | color:black; 81 | font-weight: 100; 82 | } 83 | } 84 | 85 | 86 | @media only screen and (max-width: 550px) { 87 | .OptionCard{ 88 | height:150px; 89 | width:280px; 90 | .Card_Title{ 91 | margin:0; 92 | margin-top: 8px; 93 | margin-bottom: 4px; 94 | font-size: 15px; 95 | } 96 | .Card_Description{ 97 | font-size: 11px !important; 98 | } 99 | } 100 | } -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/OptionCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement,useState,useEffect } from 'react' 2 | import './OptionCard.style.scss'; 3 | import './Input.styles.scss'; 4 | 5 | interface OptionCardProps{ 6 | type:string, 7 | name:string, 8 | onChange: Function; 9 | Important?:boolean; 10 | title?:string; 11 | children:JSX.Element | string; 12 | value: string|boolean, 13 | textColor?: 'effects' | 'blocks' | 'speed' | 'background' 14 | } 15 | 16 | export default function OptionCard({type,name,onChange,value,children,title,textColor}:OptionCardProps):ReactElement { 17 | 18 | const [Myvalue,setValue] = useState(value); 19 | 20 | const handleChange = (e:any) =>{ 21 | onChange(e) 22 | if(e.target.type === 'checkbox'){ 23 | setValue(!Myvalue); 24 | }else if(e.target.type === 'number'){ 25 | setValue(parseInt(e.target.value) < 0 ? 0: parseInt(e.target.value)); 26 | parseInt(e.target.value) >= 0 && onChange(e); 27 | } 28 | else{ 29 | setValue(e.target.value) 30 | } 31 | } 32 | 33 | useEffect(()=>{ 34 | setValue(value); 35 | },[value]) 36 | 37 | return ( 38 |
39 |

{title}

40 |

{children}

41 | 42 |
43 | ) 44 | } 45 | -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/OptionCardImage.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement,useRef, useState } from 'react' 2 | 3 | import {checkExtension} from '../../../Utils/smallFunctions'; 4 | 5 | interface CardProps{ 6 | onChange: Function; 7 | name: string; 8 | type: string; 9 | title?:string; 10 | children:JSX.Element | string; 11 | value: string|boolean, 12 | textColor:string 13 | } 14 | 15 | export default function OptionCard({onChange,name,type,textColor,title,children,value}:CardProps):ReactElement { 16 | 17 | const Myvalue = useRef(); 18 | const [image,setImage] = useState(); 19 | 20 | const handleChange = () =>{ 21 | 22 | function convertDataToArray64():Promise { 23 | 24 | if(Myvalue.current){ 25 | const file = Myvalue.current.files![0]; 26 | 27 | return new Promise((resolve, reject) => { 28 | const reader = new FileReader(); 29 | 30 | reader.onload = (event:any) => { 31 | resolve(event.target.result); 32 | }; 33 | 34 | reader.onerror = (err) => { 35 | reject(err); 36 | }; 37 | // reader.readAsArrayBuffer(file); 38 | reader.readAsDataURL(file) 39 | }); 40 | }else{ 41 | return new Promise(resolve =>{resolve('Error')}) 42 | } 43 | } 44 | if(checkExtension(Myvalue.current?.files[0],'.jpg') || checkExtension(Myvalue.current?.files[0],'.png') || checkExtension(Myvalue.current?.files[0],'.gif')){ 45 | convertDataToArray64().then(reading =>{ 46 | const data = { 47 | target:{name:'Image', value:reading} 48 | }; 49 | onChange(data); 50 | setImage(reading); 51 | }) 52 | } 53 | else{ 54 | alert('Error, Image Format Not supported'); 55 | } 56 | } 57 | return ( 58 |
59 |

{title}

60 |

{children}

61 | {!image && 62 |
63 |

Insert Image

64 | 65 |
66 | } 67 | {image && your} 68 |
69 | ) 70 | } -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/addCard/addCard.styles.scss: -------------------------------------------------------------------------------- 1 | .add-card{ 2 | height:50px !important; 3 | width:50px !important; 4 | background-color:white; 5 | cursor:pointer; 6 | transition:0.3s; 7 | margin:15px auto; 8 | margin-left: 25px; 9 | border-radius: 5px; 10 | display: flex; 11 | align-items: center; 12 | box-shadow:0px 0px 6px white; 13 | p{ 14 | font-size:18px; 15 | font-weight: 700; 16 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 17 | text-align: center; 18 | padding:0; 19 | margin:0 auto; 20 | } 21 | } 22 | 23 | .add-card:hover{ 24 | background-color:rgb(255, 162, 74); 25 | box-shadow: 0px 0px 2px orange; 26 | } -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/addCard/addCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './addCard.styles.scss'; 3 | 4 | interface props{ 5 | type: 'add' | 'delete' 6 | onClick: () => void; 7 | } 8 | 9 | export default function addCard({type,onClick}:props):React.ReactElement { 10 | return ( 11 |

{type === 'add' ? 'ADD' : 'DEL'}

12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/presetCard/presetCard.style.scss: -------------------------------------------------------------------------------- 1 | .Option_Preset_Card{ 2 | cursor:pointer; 3 | transition:0.2s; 4 | } 5 | 6 | .Option_Preset_Card:hover{ 7 | box-shadow: 0px 0px 6px 2px gold; 8 | } -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/presetCard/presetCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './presetCard.style.scss'; 3 | 4 | 5 | interface Props{ 6 | title:string, 7 | color:string, 8 | children:string | React.ReactNode 9 | json:any, 10 | onClick:Function 11 | updateOptions:Function 12 | } 13 | 14 | 15 | 16 | export default function PresetCard({title,color,children,json,updateOptions,onClick}:Props):React.ReactElement { 17 | const changeOptions = ():void => { 18 | if(typeof json == 'string'){ 19 | localStorage.setItem('options',json) 20 | onClick(); 21 | updateOptions(); 22 | }else{ 23 | console.log(new Error('JSON is not a string')); 24 | } 25 | } 26 | 27 | return ( 28 |
29 |

{title}

30 |

{children}

31 | 32 |
33 | ) 34 | } 35 | -------------------------------------------------------------------------------- /src/Components/NewOptions/OptionCard/presets.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "name":"Rainbow preset", 3 | "color":"green", 4 | "description" : "Gradient blocks with rainbow colors, white gradient on key press, key press white blue, sound on, normal speed", 5 | "data":{"Color":"#8EF971","OctaveLines":true,"KeyPressColor":"#94d6ff","RandomColors":false,"IsEffects":true,"backgroundImage":"","speed":35,"playSpeed":5,"watermark":false,"soundOn":true,"renderMethod":"animationFrame","Effect":"None","blockRadius":10,"ShadowColor":"#000","blockShadowRadius":6,"EffectsBlockColor":false,"randomEffectColors":false,"EffectsKeyColor":false,"EffectsColor":"#ffffff","GameMode":false,"ThinerBlockColor":"#FB1378","GradientColor":"#e3e3e3","GradientBlocks":true,"GradientBlocksColor":["#ff0000","#f59b00","#ffff00","#00ff00","#0033ff","#4b0082","#7f00ff"]} 6 | },{ 7 | "name":"Violet preset", 8 | "color":"Violet", 9 | "description" : "Blocks color violet, light violet on key press, key press color light blue, sound on, speed normal", 10 | "data":{"Color":"#7371f9","OctaveLines":true,"KeyPressColor":"#86aafe","RandomColors":false,"IsEffects":true,"backgroundImage":"","speed":35,"playSpeed":5,"watermark":false,"soundOn":true,"renderMethod":"animationFrame","Effect":"None","blockRadius":10,"ShadowColor":"#7371f9","blockShadowRadius":6,"EffectsBlockColor":false,"randomEffectColors":false,"EffectsKeyColor":false,"EffectsColor":"#ffffff","GameMode":false,"ThinerBlockColor":"#7371f9","GradientColor":"#cba9fe","GradientBlocks":false,"GradientBlocksColor":["#123456"]} 11 | }, 12 | { 13 | "name":"Gold preset", 14 | "color":"#C54920", 15 | "description" : "Blocks color light yellow, light yellow on key press, key press color gold, sound on, speed normal", 16 | "data":{"Color":"#f9dc71","OctaveLines":true,"KeyPressColor":"#ffca38","RandomColors":false,"IsEffects":true,"backgroundImage":"","speed":35,"playSpeed":5,"watermark":false,"soundOn":true,"renderMethod":"animationFrame","Effect":"None","blockRadius":10,"ShadowColor":"#fee95d","blockShadowRadius":6,"EffectsBlockColor":false,"randomEffectColors":false,"EffectsKeyColor":false,"EffectsColor":"#ffffff","GameMode":false,"ThinerBlockColor":"#ffc494","GradientColor":"#fec90b","GradientBlocks":false,"GradientBlocksColor":["#123456"]} 17 | } 18 | ] -------------------------------------------------------------------------------- /src/Components/PlayingManagement/PlayingManagement.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap'); 2 | 3 | $background : hsla(187, 100%, 12%, 0.953); 4 | $buttons_color : #FF7D00; 5 | 6 | .Playing_main{ 7 | width:70%; 8 | left: 15%; 9 | padding-left: 50px; 10 | padding-right: 50px; 11 | height: 54px; 12 | background-color: $background; 13 | position: absolute; 14 | z-index: 200; 15 | bottom: 0; 16 | display: flex; 17 | align-items: center; 18 | justify-content: space-between; 19 | box-sizing: border-box; 20 | transition: 0.25s ease; 21 | border-top-left-radius: 10px; 22 | border-top-right-radius: 10px; 23 | box-shadow: 0px -3px 6px black; 24 | .icons{ 25 | height:100%; 26 | display: flex; 27 | box-sizing: border-box; 28 | padding: 10px; 29 | margin-left: 5px; 30 | flex-direction: row; 31 | align-items: center; 32 | i{ 33 | font-size: 32px; 34 | color:white; 35 | margin:10px; 36 | } 37 | i:hover{ 38 | transition: 0.02s; 39 | transform: scale(1.25); 40 | text-shadow: 0px 0px 8px rgb(170, 40, 209); 41 | cursor:pointer; 42 | } 43 | .IconGoBack{ 44 | cursor: pointer; 45 | width:35px; 46 | margin-left: -10px; 47 | margin-right: 20px; 48 | } 49 | } 50 | .Timer{ 51 | font-family: 'Quicksand', sans-serif; 52 | display: block; 53 | width:50px; 54 | height:50px; 55 | font-weight: 700; 56 | } 57 | .Duration{ 58 | width:75%; 59 | justify-self: flex-end; 60 | height:30%; 61 | border:1px dotted rgb(255, 255, 255); 62 | border-radius: 2px; 63 | position: relative; 64 | cursor:pointer; 65 | .Bar{ 66 | position: absolute; 67 | opacity: 0.9; 68 | height:100%; 69 | background: linear-gradient(90deg,rgb(66, 20, 151),rgb(143, 11, 136)); 70 | } 71 | } 72 | } 73 | 74 | @media only screen and (max-width:900px) { 75 | .Playing_main{ 76 | .icons{ 77 | padding-left: 2px; 78 | margin-left: 0px; 79 | i{ 80 | font-size: 22px; 81 | margin: 4px; 82 | } 83 | .IconGoBack{ 84 | width:28px; 85 | margin-right: 4px; 86 | } 87 | } 88 | .Duration{ 89 | width:60%; 90 | } 91 | } 92 | } -------------------------------------------------------------------------------- /src/Components/PlayingManagement/PlayingManagement.tsx: -------------------------------------------------------------------------------- 1 | import React, { MouseEvent, ReactElement, useEffect, useState,useCallback } from 'react'; 2 | import { useNavigate } from 'react-router-dom'; 3 | import './PlayingManagement.scss'; 4 | 5 | import MidiPlayer from '../../Helpers/MidiPlayer'; 6 | import LogoPrototype from '../../Assets/piano_icon.png' 7 | 8 | interface PlayingManagementProps{ 9 | Player: MidiPlayer, 10 | onStart:Function 11 | } 12 | 13 | export default function PlayingManagement({Player,onStart}:PlayingManagementProps):ReactElement { 14 | 15 | const [opacity,setOpacity] = useState(0); 16 | const [width,setWidth] = useState("0%"); 17 | const history = useNavigate(); 18 | 19 | useEffect(()=>{ 20 | let dada:any = 0; 21 | const move = () =>{ 22 | clearTimeout(dada); 23 | dada = setTimeout(()=>{ 24 | setOpacity(0); 25 | },1500); 26 | setOpacity(1) 27 | } 28 | document.addEventListener('mousemove',move); 29 | document.addEventListener('keyup',(event)=>{ 30 | if(event.key === ' '){ 31 | Player.PausePlay(); 32 | } 33 | }) 34 | return () => {clearTimeout(dada);document.removeEventListener('mousemove',move)} 35 | },[Player]) 36 | 37 | 38 | 39 | const set_time = useCallback( ()=>{ 40 | setWidth((Player.get_time() / Player.MidiLength * 100).toString() + '%'); 41 | },[Player]) 42 | 43 | useEffect(()=>{ 44 | const x = setInterval(()=>{ 45 | set_time(); 46 | },100) 47 | return () => {clearInterval(x);} 48 | },[set_time]) 49 | 50 | 51 | const handlePause = ():void =>{ 52 | if(Player.isReady){ 53 | Player.PausePlay(); 54 | } 55 | } 56 | 57 | const handleStop = ():void =>{ 58 | if(Player.isReady){ 59 | Player.Restart(); 60 | } 61 | } 62 | 63 | const onDurClick = (ev:MouseEvent):void =>{ 64 | const target_data = ev.currentTarget.getBoundingClientRect() 65 | const percent = Math.floor((ev.clientX - target_data.x) *100 /target_data.width); 66 | Player.MoveTo(percent); 67 | } 68 | 69 | return ( 70 |
71 |
72 | Logo{history('/')}} title='Go back ?' className='IconGoBack LogoImg' /> 73 | 74 | 75 | 76 |
77 | {/* */} 90 |
91 |
92 |
93 |
94 | ) 95 | } 96 | -------------------------------------------------------------------------------- /src/Components/Tracks/Tracks.styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300&display=swap'); 2 | 3 | .Canvas{ 4 | position: absolute; 5 | z-index: 151; 6 | /* filter: blur(2px); */ 7 | } 8 | 9 | .Effects{ 10 | position: absolute; 11 | z-index: 149; 12 | } 13 | 14 | .Gradient{ 15 | position: absolute; 16 | z-index: 152; 17 | } 18 | 19 | .coverPhoto{ 20 | position: absolute; 21 | filter: saturate(0.5); 22 | background-repeat: no-repeat; 23 | background-position: center; 24 | z-index: 50; 25 | } 26 | 27 | .Summer{ 28 | z-index: 152; 29 | position: absolute; 30 | background: linear-gradient(180deg,transparent,rgba(0, 0, 0, 0.397)); 31 | } 32 | 33 | .Mark{ 34 | position: absolute; 35 | top: 0px; 36 | right:10px; 37 | color: white; 38 | z-index: 51; 39 | font-family: 'Titillium Web', sans-serif; 40 | } 41 | 42 | .Mark>h1{ 43 | font-size: 24px; 44 | margin: 0; 45 | padding: 0; 46 | } 47 | 48 | .Mark>h2{ 49 | font-size: 16px; 50 | margin: 0; 51 | padding: 0; 52 | text-align: center; 53 | } -------------------------------------------------------------------------------- /src/Components/Tracks/index.ts: -------------------------------------------------------------------------------- 1 | import TracksAnimationFrame from './Tracks'; 2 | import TracksInterval from './TracksIntervalMethod'; 3 | 4 | export {TracksAnimationFrame, TracksInterval}; -------------------------------------------------------------------------------- /src/Helpers/CanvasEffects/DNA.ts: -------------------------------------------------------------------------------- 1 | class Effect{ 2 | private x; 3 | private y; 4 | private lifetime; 5 | private multiplier; 6 | private created; 7 | constructor(pos_x:number,pos_y:number,lifetime:number,side:boolean){ 8 | this.x = pos_x; 9 | this.y = pos_y; 10 | this.lifetime = lifetime; 11 | this.created = Date.now(); 12 | this.multiplier = side ? 1 : -1; 13 | } 14 | 15 | public render(){ 16 | const now = Date.now(); 17 | const x_pos = this.x + Math.sin((now - this.created)/200)*20*this.multiplier; 18 | const y_pos = this.y - (now - this.created)/12; 19 | if((now - this.created) / 1000 < this.lifetime){ 20 | return[x_pos,y_pos,1-((now-this.created)/1000)*1/this.lifetime]; 21 | } 22 | return false; 23 | } 24 | } 25 | 26 | class DNA{ 27 | private ctx; 28 | private width; 29 | private height; 30 | private key_width; 31 | private effects:Array; 32 | constructor(ctx:CanvasRenderingContext2D,width:number,height:number,key_width:number){ 33 | this.ctx=ctx; 34 | this.width=width; 35 | this.height=height; 36 | this.key_width=key_width; 37 | this.effects = []; 38 | } 39 | 40 | public render(): void { 41 | this.ctx.clearRect(0, 0, this.width, this.height); 42 | const newEffects:Array = []; 43 | this.effects.forEach(effect =>{ 44 | const data = effect.render(); 45 | if(data !== false){ 46 | const alpha = Math.floor(data[2] * 100); 47 | this.ctx.fillStyle = `rgba(255,255,255,${alpha %2 === 0 || alpha % 4 === 0 ? 0 : alpha/100})`; 48 | this.ctx.beginPath(); 49 | this.ctx.arc(data[0],data[1],2,Math.PI*2,0); 50 | this.ctx.fill(); 51 | this.ctx.closePath(); 52 | newEffects.push(effect); 53 | }}); 54 | this.effects = newEffects; 55 | } 56 | 57 | public create(pos_x: number, pos_y: number, color: string): void { 58 | this.effects.push(new Effect(pos_x,pos_y,6,true)); 59 | this.effects.push(new Effect(pos_x,pos_y,6,false)); 60 | } 61 | 62 | public clear(): void { 63 | this.ctx.fillStyle = 'rgba(0,0,0,1)'; 64 | this.effects = []; 65 | } 66 | } 67 | 68 | export default DNA; -------------------------------------------------------------------------------- /src/Helpers/CanvasEffects/DancingLines.ts: -------------------------------------------------------------------------------- 1 | import { decToHex} from "hex2dec"; 2 | import hexAlpha from "hex-alpha"; 3 | 4 | interface Effect{ 5 | pos_x: number, 6 | pos_y: number, 7 | color: string, 8 | velocity_y:number, 9 | velocity_x:number 10 | alpha:number 11 | } 12 | 13 | class DancingLines{ 14 | readonly ctx:CanvasRenderingContext2D; 15 | readonly key_width:number; 16 | readonly life_time:number; 17 | private effect_width:number; 18 | private speed:number; 19 | private gravitation:boolean; 20 | private allSameSpeed:boolean; 21 | private effect_height:number; 22 | private gravitation_force:number; 23 | private height:number 24 | private Effects:Array 25 | constructor(ctx:CanvasRenderingContext2D,height:number, keyWidth:number, lifeTime:number,effect_width:number,effect_height:number,speed?:number,allSameSpeed?:boolean,lighten?:boolean,gravitation?:boolean,gravitationForce?:number ){ 26 | this.ctx = ctx; 27 | this.ctx.globalCompositeOperation = 'screen' 28 | this.ctx.shadowBlur = 4; 29 | this.key_width = keyWidth; 30 | this.height = height; 31 | this.effect_width = effect_width; 32 | this.effect_height = effect_height; 33 | this.life_time = lifeTime; 34 | this.speed = speed === undefined ? 13 : speed; 35 | this.gravitation = gravitation === undefined ? true: gravitation; 36 | this.allSameSpeed = allSameSpeed === undefined ? false: allSameSpeed; 37 | this.gravitation_force = gravitationForce === undefined? 0.15 : gravitationForce; 38 | this.Effects = []; 39 | this.Rect_Floor_Alpha_ReturnNewAlpha = this.Rect_Floor_Alpha_ReturnNewAlpha.bind(this); 40 | } 41 | 42 | public create(pos_x:number,pos_y:number, color:string):void{ 43 | for(let x =0; x < 2; x++){ 44 | const NewEffect: Effect = { 45 | pos_x: pos_x + this.key_width / (1.5 + Math.random()), 46 | pos_y: pos_y, 47 | color: color, 48 | velocity_y: Math.round(this.allSameSpeed ? this.speed : Math.random() * (this.speed-2) + 2), 49 | velocity_x: Math.random() > 0.5 ? 1 : -1, 50 | alpha:1, 51 | } 52 | this.Effects.push(NewEffect); 53 | } 54 | } 55 | 56 | public render():void{ 57 | let newEffects: Array = []; 58 | this.ctx.clearRect(0,0,this.key_width * 52,this.height); 59 | this.Effects.map(Effect =>{ 60 | Effect.alpha = this.Rect_Floor_Alpha_ReturnNewAlpha(Effect.pos_x,Effect.pos_y,Effect.color,Effect.alpha); 61 | Effect.pos_y -= Math.random() * Effect.velocity_y; 62 | Effect.pos_x += Math.random() * Effect.velocity_x; 63 | Effect.velocity_x > 0 ? Effect.velocity_x += Math.random() * 0.05: Effect.velocity_x-= Math.random() * 0.05 64 | if(this.gravitation)Effect.velocity_y -= this.gravitation_force / Effect.alpha; 65 | Effect.alpha > 0 && Effect.pos_y < this.height && newEffects.push(Effect); 66 | return null; 67 | }) 68 | this.Effects = newEffects; 69 | } 70 | 71 | public clear(){ 72 | this.Effects = []; 73 | this.ctx.clearRect(0,0,this.key_width * 52,this.height); 74 | } 75 | 76 | private Rect_Floor_Alpha_ReturnNewAlpha(pos_x:number,pos_y:number, color:string, alpha:number){ 77 | this.ctx.shadowColor = color + decToHex((alpha*1000).toString())?.slice(2); 78 | this.ctx.fillStyle = hexAlpha(color,parseFloat(decToHex((alpha*1000).toString())!)); 79 | this.ctx.fillRect(Math.floor(pos_x),Math.floor(pos_y),Math.floor(this.effect_width),Math.floor(this.effect_height)); 80 | return alpha - 1/this.life_time; 81 | } 82 | 83 | } 84 | 85 | export default DancingLines; -------------------------------------------------------------------------------- /src/Helpers/CanvasEffects/EmptyEffect.ts: -------------------------------------------------------------------------------- 1 | 2 | class EmptyEffect{ 3 | public render(){ 4 | 5 | } 6 | 7 | public create(){ 8 | 9 | } 10 | 11 | public clear(){ 12 | 13 | } 14 | } 15 | 16 | export default EmptyEffect; -------------------------------------------------------------------------------- /src/Helpers/CanvasEffects/Fireworks.ts: -------------------------------------------------------------------------------- 1 | interface Effect{ 2 | pos_x: number, 3 | pos_y: number, 4 | color: string, 5 | velocity_y:number, 6 | velocity_x:number, 7 | alpha:number 8 | } 9 | 10 | class Trail_Element{ 11 | private pos_x:number 12 | private pos_y:number 13 | private radius:number 14 | private color:string 15 | private ticks:number 16 | public alpha:number 17 | private startalpha:number 18 | constructor(x:number,y:number,r:number,lifeTime:number,color:string,alpha:number){ 19 | this.pos_x = x; 20 | this.pos_y = y; 21 | this.radius = r; 22 | this.alpha = alpha; 23 | this.ticks = 0; 24 | this.color = color; 25 | this.startalpha = Math.random() > 0.5 ? 0.5: -0.5 26 | } 27 | 28 | public Update_and_draw(ctx:CanvasRenderingContext2D):void{ 29 | const col = this.color + `,${this.alpha})`; 30 | ctx.fillStyle = col; 31 | ctx.beginPath(); 32 | ctx.arc(Math.floor(this.pos_x),Math.floor(this.pos_y),Math.round(this.radius),0,Math.PI*2); 33 | ctx.fill(); 34 | ctx.closePath(); 35 | this.Updt(); 36 | } 37 | 38 | private Updt():void{ 39 | this.alpha -= 0.03 40 | this.ticks++; 41 | if(this.ticks % 15 === 0){ 42 | this.startalpha *= -1 43 | } 44 | this.pos_x += this.startalpha 45 | } 46 | } 47 | 48 | export default class Firework{ 49 | private ctx:CanvasRenderingContext2D 50 | private width:number 51 | private height:number 52 | private key_width:number 53 | private ticker:number 54 | private effects:Array 55 | private trials:Array 56 | 57 | constructor(ctx:CanvasRenderingContext2D,width:number,height:number,key_width:number){ 58 | this.ctx = ctx; 59 | this.width=width; 60 | this.height=height; 61 | this.key_width = key_width; 62 | this.ctx.globalCompositeOperation = 'lighter'; 63 | this.ctx.shadowBlur = 0; 64 | this.ctx.clearRect(0,0,width,height); 65 | this.effects = []; 66 | this.trials = []; 67 | this.ticker = 0; 68 | } 69 | 70 | public render(){ 71 | this.ctx.clearRect(0, 0, this.width, this.height); 72 | let newEffects: Array = []; 73 | this.effects.map(effect =>{ 74 | effect.alpha = this.Rect_Floor_Alpha_ReturnNewAlpha(effect.pos_x,effect.pos_y,effect.color,effect.alpha); 75 | effect.pos_y -= effect.velocity_y; 76 | effect.pos_x += Math.random() * effect.velocity_x; 77 | effect.velocity_x > 0 ? effect.velocity_x += Math.random() * 0.05: effect.velocity_x-= Math.random() * 0.05 78 | effect.alpha > 0.15 && newEffects.push(effect); 79 | Math.random() > 0.6 && this.trials.push(new Trail_Element(effect.pos_x + this.key_width / (2 * (Math.random() + 7)),effect.pos_y,Math.random()*2,1000,`rgba(${Math.random() * 50 + 50},150,${Math.random()*150 + 50}`,effect.alpha)); 80 | return null; 81 | }) 82 | const newTrails:any = []; 83 | this.trials.map(el=>{ 84 | el.Update_and_draw(this.ctx); 85 | if(el.alpha > 0.15){ 86 | newTrails.push(el); 87 | } 88 | return null; 89 | }) 90 | this.trials = newTrails; 91 | this.effects = newEffects; 92 | } 93 | 94 | public create(pos_x:number,pos_y:number, color:string){ 95 | const NewEffect: Effect = { 96 | pos_x: pos_x + Math.random() * this.key_width / 2 + this.key_width / 4, 97 | pos_y: pos_y, 98 | color: color, 99 | velocity_y: Math.round(Math.random() * (this.height/300) + 1.4), 100 | velocity_x: Math.random() > 0.5 ? 1 : -1, 101 | alpha:1 102 | } 103 | this.effects = [...this.effects,NewEffect]; 104 | } 105 | 106 | public clear(){ 107 | this.ctx.fillStyle = 'rgba(0,0,0,1)'; 108 | this.effects = []; 109 | } 110 | 111 | private Rect_Floor_Alpha_ReturnNewAlpha(pos_x:number,pos_y:number, color:string, alpha:number){ 112 | return alpha - 1/(60 + Math.random() * 50); 113 | } 114 | } -------------------------------------------------------------------------------- /src/Helpers/CanvasEffects/HexagonEffect.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | interface Effect{ 4 | pos_x: number, 5 | pos_y: number, 6 | color: string, 7 | velocity_y:number, 8 | velocity_x:number, 9 | alpha:number, 10 | lifeStart:number, 11 | hsl:number 12 | } 13 | 14 | export default class HexagonEffect{ 15 | private ctx:CanvasRenderingContext2D 16 | private width:number 17 | private height:number 18 | private startTime:number 19 | private key_width:number 20 | private reseter:number 21 | private effects:Array 22 | 23 | constructor(ctx:CanvasRenderingContext2D,width:number,height:number,key_width:number){ 24 | this.ctx = ctx; 25 | this.width=width; 26 | this.key_width = key_width 27 | this.height=height; 28 | this.ctx.globalCompositeOperation = 'source-over'; 29 | this.reseter = 0; 30 | this.ctx.shadowBlur = 0; 31 | this.startTime = Date.now(); 32 | this.ctx.clearRect(0,0,width,height); 33 | this.effects = []; 34 | } 35 | 36 | public render(){ 37 | this.ctx.fillStyle = 'rgba(0,0,0,0.10)'; 38 | this.ctx.beginPath(); 39 | this.ctx.fillRect(0, 0, this.width, this.height); 40 | this.ctx.fill(); 41 | let newEffects: Array = []; 42 | this.effects.map(effect =>{ 43 | effect.alpha = this.Rect_Floor_Alpha_ReturnNewAlpha(effect.pos_x,effect.pos_y,effect.color,effect.alpha,effect.hsl); 44 | effect.pos_y -= effect.velocity_y; 45 | effect.pos_x += effect.velocity_x; 46 | if(Date.now() - effect.lifeStart >= 500){ 47 | effect.velocity_y = Math.random() > 0.5 ? 1 : Math.random() > 0.5 ? 2 : 0 48 | effect.velocity_x = effect.velocity_y === 2? 0 : effect.velocity_y === 1 ? Math.random() > 0.5 ? -1: 1 : Math.random() > 0.5 ? -2: 2; 49 | effect.lifeStart = Date.now(); 50 | } 51 | effect.alpha > 0 && Math.random() > 0.005 && effect.pos_y < this.height && newEffects.push(effect); 52 | return null; 53 | }) 54 | this.effects = newEffects; 55 | this.reseter++; 56 | } 57 | 58 | public create(pos_x:number,pos_y:number, color:string){ 59 | const newEffect:Effect = { 60 | alpha:1, 61 | color: color, 62 | lifeStart: Date.now(), 63 | pos_x: pos_x + this.key_width / 2, 64 | pos_y:pos_y, 65 | velocity_x: Math.random() > 0.5 ? Math.random() > 0.5 ? 1: -1 : 2, 66 | velocity_y: Math.random() > 0.5 ? 1 : Math.random() > 0.5 ? 2 : 0, 67 | hsl:Math.random() * 2000 68 | } 69 | if((Date.now() - this.startTime) % 50 < 35){ 70 | this.effects = [...this.effects,newEffect]; 71 | } 72 | } 73 | 74 | public clear(){ 75 | this.ctx.fillStyle = 'rgba(0,0,0,1)'; 76 | this.effects = []; 77 | } 78 | 79 | private Rect_Floor_Alpha_ReturnNewAlpha(pos_x:number,pos_y:number, color:string, alpha:number,hsl:number){ 80 | this.ctx.beginPath(); 81 | this.ctx.fillStyle = `hsl(${hsl},100%,${100 * Math.sin(alpha * 360)}%)`; 82 | this.ctx.shadowColor = color; 83 | const size = Math.random() * 2 + 1.5 84 | this.ctx.fillRect(pos_x,pos_y,size,size); 85 | this.ctx.fill(); 86 | return alpha - 1/400; 87 | } 88 | } -------------------------------------------------------------------------------- /src/Helpers/CanvasEffects/Sparks.ts: -------------------------------------------------------------------------------- 1 | import hexAlpha from "hex-alpha"; 2 | 3 | class Spark{ 4 | private pos_x:number 5 | private pos_y:number 6 | private readonly dirrection: 'R' | 'L' 7 | private readonly duration:number 8 | private readonly color:string 9 | private readonly height:number 10 | private readonly width:number 11 | private speed_x:number 12 | private speed_y:number 13 | private time:number 14 | public alpha:number 15 | constructor(pos_x:number,pos_y:number, duration:number, direction: 'R' | 'L', color:string){ 16 | this.pos_x = pos_x + (direction ==='R' ? Math.random() *-8 -1: Math.random() * 8 + 1); 17 | this.pos_y = pos_y; 18 | this.speed_x = direction ==='R' ? Math.random() *-3 -1: Math.random() * 3 + 1; 19 | this.speed_y = Math.random() *-2 -1; 20 | this.dirrection = direction; 21 | this.duration = duration; 22 | this.color = color; 23 | this.width = Math.floor(Math.random() * 2 + 2); 24 | this.height = Math.floor(Math.random() * 4 + 3); 25 | this.time = Date.now(); 26 | this.alpha = 1; 27 | } 28 | 29 | public render(ctx:CanvasRenderingContext2D){ 30 | this.pos_x += this.speed_x; 31 | this.pos_y += this.speed_y; 32 | this.speed_y -= 0.2; 33 | if(this.alpha > 0){ 34 | ctx.beginPath(); 35 | ctx.fillStyle = hexAlpha(this.color,this.alpha); 36 | ctx.fillRect(this.pos_x,this.pos_y,this.width,this.height); 37 | ctx.closePath(); 38 | ctx.fill(); 39 | } 40 | const now = Date.now(); 41 | this.alpha = 1 - 1*(now - this.time)/this.duration; 42 | } 43 | }; 44 | 45 | class Sparks{ 46 | private readonly ctx:CanvasRenderingContext2D 47 | private readonly width:number 48 | private readonly height:number 49 | private readonly key_width:number 50 | private sparks: Array 51 | private creators: Array<{pos_x:number,pos_y:number,color:string,speed_x:number}> 52 | constructor(ctx:CanvasRenderingContext2D, width:number, height:number, key_width:number){ 53 | this.ctx = ctx; 54 | this.width = width; 55 | this.height = height; 56 | this.key_width = key_width; 57 | this.ctx.globalCompositeOperation = "source-over"; 58 | this.sparks = []; 59 | this.creators = []; 60 | } 61 | 62 | public render(){ 63 | this.ctx.clearRect(0,0,this.width,this.height); 64 | let newSparks: Array = []; 65 | this.sparks.map(spark =>{ 66 | spark.render(this.ctx); 67 | if(spark.alpha > 0){ 68 | newSparks.push(spark); 69 | } 70 | return 0; 71 | }) 72 | this.sparks = newSparks; 73 | let newCreators: Array<{pos_x:number,pos_y:number,color:string,speed_x:number}> = []; 74 | this.creators.map(creator =>{ 75 | creator.pos_y -= Math.floor(Math.random() * 5 + 5); 76 | creator.pos_x += creator.speed_x/3; 77 | creator.speed_x += Math.random() > 0.5 ? Math.random() * -1: Math.random() * 1; 78 | if(Math.random() > 0.8){ 79 | this.sparks.push(new Spark(creator.pos_x,creator.pos_y,1000,Math.random() > 0.5 ? 'R' : 'L',creator.color)); 80 | } 81 | if(creator.pos_y > 300){ 82 | newCreators.push(creator); 83 | } 84 | return 0; 85 | }) 86 | this.creators = newCreators; 87 | } 88 | 89 | public create(pos_x:number,pos_y:number,color:string){ 90 | this.creators.push({pos_x:pos_x,pos_y:pos_y,color:color,speed_x: Math.random() > 0.5 ? -2:2}); 91 | } 92 | 93 | public clear(){ 94 | this.creators = []; 95 | this.sparks = []; 96 | this.ctx.fillStyle = 'rgba(0,0,0,1)'; 97 | } 98 | }; 99 | 100 | export default Sparks; -------------------------------------------------------------------------------- /src/Helpers/CanvasEffects/StickyBalls.ts: -------------------------------------------------------------------------------- 1 | class ball { 2 | public y:number 3 | private size:number 4 | private x:number 5 | private c:CanvasRenderingContext2D 6 | private gradient: CanvasGradient 7 | private last:number 8 | private vy:number 9 | constructor(size:number,ctx:CanvasRenderingContext2D,color:string,y:number,x:number) { 10 | this.c = ctx 11 | this.y = y 12 | this.size = size === undefined ? Math.random() * 25 + 15 : Math.random() * size + 5; 13 | this.x = x; 14 | var colorrr = color.replace("hue", (Math.random() * 350 + 100).toString()).replace("hue", (Math.random() * 350 + 100).toString()).replace("hue", (Math.random() * 350 + 100).toString()); 15 | 16 | this.vy = Math.random() * -5 - 3; 17 | this.gradient = this.c.createRadialGradient(0, 0, 0, 0, 0, this.size); 18 | this.gradient.addColorStop(1, colorrr.replace("alp", '0.6')); 19 | this.gradient.addColorStop(0, colorrr.replace("alp", '0.5')); 20 | this.gradient.addColorStop(0.5, colorrr.replace("alp", '0.4')); 21 | this.last = 1; 22 | } 23 | update() { 24 | this.y += this.vy; 25 | } 26 | 27 | draw() { 28 | this.c.fillStyle = this.gradient; 29 | this.c.translate(this.x | 0, this.y | 0); 30 | this.c.beginPath(); 31 | this.c.arc(0, 0, this.size, 0, Math.PI * 2,false); 32 | this.c.fill(); 33 | this.c.translate(-this.x | 0, -this.y | 0); 34 | } 35 | } 36 | 37 | 38 | export default class StickyBalls{ 39 | private ctx:CanvasRenderingContext2D 40 | private ctx_b:CanvasRenderingContext2D 41 | private width:number 42 | private height:number 43 | private startTime:number 44 | private key_width:number 45 | private reseter:number 46 | private effects:Array 47 | 48 | constructor(ctx:CanvasRenderingContext2D,width:number,height:number,key_width:number){ 49 | this.ctx = ctx; 50 | this.ctx_b = ctx; 51 | this.width=width; 52 | this.key_width = key_width 53 | this.height=height; 54 | this.ctx.globalCompositeOperation = 'source-over'; 55 | this.reseter = 0; 56 | this.ctx.shadowBlur = 0; 57 | this.startTime = Date.now(); 58 | this.ctx.clearRect(0,0,width,height); 59 | this.effects = []; 60 | } 61 | 62 | public render(){ 63 | if(Date.now() - this.startTime >= 30){ 64 | this.ctx.clearRect(0, 0, this.width, this.height); 65 | this.ctx.beginPath(); 66 | const newEffects:any = []; 67 | this.effects.map(effect =>{ 68 | effect.update(); 69 | effect.draw(); 70 | if(effect.y > 0){ 71 | newEffects.push(effect); 72 | } 73 | return null; 74 | }) 75 | this.effects = newEffects; 76 | this.startTime = Date.now(); 77 | } 78 | } 79 | 80 | public create(pos_x:number,pos_y:number, color:string){ 81 | if(Date.now() % 50 < 20){ 82 | this.effects = [...this.effects,new ball(Math.random()* 15,this.ctx,'rgba(hue,80, 80 , alp )',pos_y,pos_x + (this.key_width / (Math.random() *2 +1)))]; 83 | } 84 | } 85 | 86 | public clear(){ 87 | this.ctx.fillStyle = 'rgba(0,0,0,1)'; 88 | this.effects = []; 89 | } 90 | 91 | private Rect_Floor_Alpha_ReturnNewAlpha(pos_x:number,pos_y:number, color:string, alpha:number,hsl:number){ 92 | this.ctx.beginPath(); 93 | this.ctx.fillStyle = `hsl(${hsl},100%,${100 * Math.sin(alpha * 360)}%)`; 94 | this.ctx.shadowColor = color; 95 | const size = Math.random() * 2 + 1.5 96 | this.ctx.fillRect(pos_x,pos_y,size,size); 97 | this.ctx.fill(); 98 | return alpha - 1/400; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /src/Helpers/CanvasEffects/fountain.ts: -------------------------------------------------------------------------------- 1 | interface Effect{ 2 | pos_x: number, 3 | pos_y: number, 4 | color: string, 5 | velocity_y:number, 6 | velocity_x:number, 7 | alpha:number 8 | } 9 | 10 | export default class fountain{ 11 | private ctx:CanvasRenderingContext2D 12 | private width:number 13 | private height:number 14 | private key_width:number 15 | private effect_width:number 16 | private effect_height:number 17 | private gravitation_force:number 18 | private effects:Array 19 | 20 | constructor(ctx:CanvasRenderingContext2D,width:number,height:number,key_width:number){ 21 | this.ctx = ctx; 22 | this.width=width; 23 | this.height=height; 24 | this.gravitation_force = 0.20 25 | this.key_width = key_width; 26 | this.effect_height = 6; 27 | this.effect_width = 2; 28 | this.ctx.globalCompositeOperation = 'source-over'; 29 | this.ctx.shadowBlur = 0; 30 | this.ctx.clearRect(0,0,width,height); 31 | this.effects = []; 32 | } 33 | 34 | public render(){ 35 | let newEffects: Array = []; 36 | this.effects.map(effect =>{ 37 | effect.alpha = this.Rect_Floor_Alpha_ReturnNewAlpha(effect.pos_x,effect.pos_y,effect.color,effect.alpha); 38 | effect.pos_y -= Math.random() * effect.velocity_y; 39 | effect.pos_x += Math.random() * effect.velocity_x; 40 | effect.velocity_x > 0 ? effect.velocity_x += Math.random() * 0.05: effect.velocity_x-= Math.random() * 0.05 41 | effect.velocity_y -= this.gravitation_force / effect.alpha; 42 | effect.alpha > 0 && effect.pos_y < this.height && newEffects.push(effect); 43 | return null; 44 | }) 45 | this.effects = newEffects; 46 | this.ctx.fillStyle = 'rgba(0,0,0,0.1)'; 47 | this.ctx.beginPath(); 48 | this.ctx.rect(0, 0, this.width, this.height); 49 | this.ctx.fill(); 50 | } 51 | 52 | public create(pos_x:number,pos_y:number, color:string){ 53 | const NewEffect: Effect = { 54 | pos_x: pos_x + Math.random() * this.key_width / 2 + this.key_width / 4, 55 | pos_y: pos_y, 56 | color: color, 57 | velocity_y: Math.round(Math.random() * (this.height/80) + 5), 58 | velocity_x: Math.random() > 0.5 ? 1 : -1, 59 | alpha:1 60 | } 61 | this.effects.push(NewEffect); 62 | } 63 | 64 | public clear(){ 65 | this.ctx.fillStyle = 'rgba(0,0,0,1)'; 66 | this.effects = []; 67 | } 68 | 69 | private Rect_Floor_Alpha_ReturnNewAlpha(pos_x:number,pos_y:number, color:string, alpha:number){ 70 | this.ctx.beginPath(); 71 | this.ctx.fillStyle = color; 72 | this.ctx.shadowColor = color; 73 | this.ctx.arc(pos_x,pos_y,Math.random() * 2 + 0.2,0,Math.PI*2); 74 | this.ctx.fill(); 75 | return alpha - 1/100; 76 | } 77 | } -------------------------------------------------------------------------------- /src/Helpers/CanvasEffects/index.ts: -------------------------------------------------------------------------------- 1 | import DancingLines from "./DancingLines"; 2 | import Fountain from './fountain'; 3 | import HexagonEffect from "./HexagonEffect"; 4 | import StickyBalls from "./StickyBalls"; 5 | import Firework from "./Fireworks"; 6 | import Sparks from "./Sparks"; 7 | import EmptyEffect from "./EmptyEffect"; 8 | import DNA from "./DNA"; 9 | 10 | import hexToRgba from "hex-rgba"; 11 | 12 | const KeyGradient = (ctx:CanvasRenderingContext2D,pos_x:number,block_width:number,height:number,color:string) =>{ 13 | const radius:number = 80; 14 | const radialGradient = ctx.createRadialGradient(pos_x + block_width/2, height, 0, pos_x + block_width/2, height, Math.random()*20 + radius - 20); 15 | radialGradient.addColorStop(0.0, hexToRgba(color,90)); 16 | radialGradient.addColorStop(0.2, hexToRgba(color,60)); 17 | radialGradient.addColorStop(0.5, hexToRgba(color,15)); 18 | radialGradient.addColorStop(0.7, hexToRgba(color,3)); 19 | radialGradient.addColorStop(0.9, hexToRgba(color,1)); 20 | radialGradient.addColorStop(1, 'transparent'); 21 | ctx.fillStyle = radialGradient; 22 | ctx.beginPath(); 23 | ctx.arc(pos_x + block_width/2, height, Math.random()*20 + radius - 20, 0, 2 * Math.PI); 24 | ctx.fill(); 25 | } 26 | 27 | 28 | export {DancingLines,Fountain,HexagonEffect,StickyBalls,Firework,Sparks,EmptyEffect,KeyGradient,DNA}; -------------------------------------------------------------------------------- /src/Helpers/Effects/Effects.ts: -------------------------------------------------------------------------------- 1 | import { Options as OptionsType } from "../../Utils/TypesForOptions"; 2 | import {Fountain, DancingLines, HexagonEffect, StickyBalls, Firework,Sparks, EmptyEffect,DNA} from '../CanvasEffects'; 3 | 4 | import hexAlpha from "hex-alpha"; 5 | 6 | class Effects{ 7 | private ctx:CanvasRenderingContext2D 8 | private options:OptionsType 9 | private width:number 10 | private height:number 11 | private Effect: {render:Function,create(pos_x:number,pos_y:number,color:string):void,clear:Function} 12 | 13 | constructor(ctx:CanvasRenderingContext2D,options:OptionsType,width:number,height:number){ 14 | this.ctx = ctx; 15 | this.options = options; 16 | this.width = width; 17 | this.height = height; 18 | switch(options.Effect){ 19 | case 'fountain': 20 | this.Effect = new Fountain(ctx,width,height,width/52); 21 | break; 22 | case 'dancingLines': 23 | this.Effect = new DancingLines(ctx,height,width/52,200,1,6,12); 24 | break; 25 | case 'hexagon': 26 | this.Effect = new HexagonEffect(ctx,width,height,width/52); 27 | break; 28 | case 'stickyBalls': 29 | this.Effect = new StickyBalls(ctx,width,height,width/52); 30 | break; 31 | case 'fireworks': 32 | this.Effect = new Firework(ctx,width,height,width/52); 33 | break; 34 | case 'sparks': 35 | this.Effect = new Sparks(ctx,width,height,width/52); 36 | break; 37 | case 'DNA': 38 | this.Effect = new DNA(ctx,width,height,width/52); 39 | break; 40 | default: 41 | this.Effect = new EmptyEffect(); 42 | break; 43 | } 44 | } 45 | 46 | public renerEffects():void{ 47 | this.options.IsEffects && this.Effect.render(); 48 | } 49 | 50 | public triggerNewEffects(timer:number,pos_x:number,block_width:number):void{ 51 | 52 | let color:string; 53 | if(this.options.EffectsBlockColor){ 54 | color = hexAlpha(this.options.Color,100) 55 | }else if(this.options.EffectsKeyColor){ 56 | color = hexAlpha(this.options.KeyPressColor,100) 57 | }else if(this.options.randomEffectColors){ 58 | color = `rgba(${Math.random() * 255},${Math.random()*255},${Math.random()*255}`; 59 | }else{ 60 | color = this.options.EffectsColor; 61 | } 62 | this.Effect.create(pos_x,this.height,color); 63 | } 64 | 65 | public clearAllEffects():void{ 66 | this.Effect.clear(); 67 | //a 68 | } 69 | 70 | 71 | } 72 | 73 | export default Effects; -------------------------------------------------------------------------------- /src/Helpers/PlayMidiAsync.ts: -------------------------------------------------------------------------------- 1 | //File Currently Not Used 2 | import {IMidiFile, noteEvent} from "../Utils/TypesForMidi"; 3 | 4 | import getConstantDataFromMidiFile from "./getConstantDataFromMidiFile"; 5 | import ConvertToNoteEventsJSON from './getNoteEventsJSON'; 6 | 7 | const PlayMidiAsync = async (fileData:Object,onEvent:Function) =>{ 8 | const File = fileData as IMidiFile; 9 | const noteEventsJSON = ConvertToNoteEventsJSON(File,500000,getConstantDataFromMidiFile(File)); 10 | const PlayFromNotesAsync = async () =>{ 11 | let timer = 0, currentIndex = 0; 12 | let Events:Array = []; 13 | const timeStamps = 20; 14 | const interval = setInterval(()=>{ 15 | timer += timeStamps; 16 | while(true){ 17 | try{ 18 | if(noteEventsJSON[currentIndex].Delta / 1000 <= timer){ 19 | Events.push(noteEventsJSON[currentIndex]); 20 | currentIndex+=1 21 | }else{ 22 | onEvent(Events); 23 | Events = []; 24 | break; 25 | } 26 | }catch{ 27 | clearInterval(interval); 28 | onEvent(Events); 29 | break; 30 | } 31 | } 32 | },timeStamps); 33 | } 34 | PlayFromNotesAsync(); 35 | } 36 | 37 | export default PlayMidiAsync; -------------------------------------------------------------------------------- /src/Helpers/ReadMidiFile.ts: -------------------------------------------------------------------------------- 1 | // This File exports a Function 2 | // which converts a midi file 3 | // into Object(JSON) 4 | // It returns a Promise of an Object, which Object 5 | // Will be converted JSON 6 | 7 | import { parseArrayBuffer } from 'midi-json-parser'; 8 | // midi-json-parser is npm library created by chrisguttandin 9 | // Big thanks to Him! 10 | 11 | const ReadMidiFile = (file:any,type:'ref' | 'ArrayBuffer') =>{ 12 | 13 | //Function Converting file from binarry form into ArrayBuffer 14 | function convertDataToArray64():Promise { 15 | return new Promise((resolve, reject) => { 16 | const reader = new FileReader(); 17 | 18 | reader.onload = (event:any) => { 19 | resolve(event.target.result as ArrayBuffer); 20 | }; 21 | 22 | reader.onerror = (err) => { 23 | reject(err); 24 | }; 25 | reader.readAsArrayBuffer(file); 26 | }); 27 | } 28 | if(type === 'ref'){ 29 | return new Promise((resolve,reject) =>{ 30 | convertDataToArray64().then(file=>{ 31 | //checking if Error hasn't been returned 32 | if(typeof file !== 'string'){ 33 | parseArrayBuffer(file).then(json =>{ 34 | resolve(json); 35 | }); 36 | }else{ 37 | reject('Error ! Provided type is Not an Object !!'); 38 | } 39 | }) 40 | }) 41 | }else{ 42 | return new Promise((resolve,reject) =>{ 43 | //checking if Error hasn't been returned 44 | parseArrayBuffer(file).then(json =>{ 45 | resolve(json); 46 | }); 47 | }) 48 | } 49 | } 50 | 51 | export default ReadMidiFile; -------------------------------------------------------------------------------- /src/Helpers/getConstantDataFromMidiFile.ts: -------------------------------------------------------------------------------- 1 | import { TimeSignature, IMidiFile, StaticMidiDataProps } from "../Utils/TypesForMidi"; 2 | 3 | export default function getConstantDataFromMidiFile(file:IMidiFile):StaticMidiDataProps{ 4 | const division = file.division; 5 | let denominator = 0, nominator = 0,metronome = 0,thirtyseconds = 0; 6 | file.tracks.map(track =>{ 7 | for(let x = 0; x < track.length; x++){ 8 | if(denominator){break}; 9 | if('timeSignature' in track[x]){ 10 | const TimeSignatureData = (track[x].timeSignature as TimeSignature) 11 | if('denominator' in track[x].timeSignature){ 12 | denominator = TimeSignatureData.denominator; 13 | } 14 | if('numerator' in track[x].timeSignature){ 15 | nominator = TimeSignatureData.numerator; 16 | } 17 | if('metronome' in track[x].timeSignature){ 18 | metronome = TimeSignatureData.metronome; 19 | } 20 | if('thirtyseconds' in track[x].timeSignature){ 21 | thirtyseconds = TimeSignatureData.thirtyseconds; 22 | } 23 | } 24 | } 25 | return null; 26 | }) 27 | return{ 28 | denominator: denominator, 29 | nominator: nominator, 30 | metronome: metronome, 31 | thirtyseconds: thirtyseconds, 32 | division: division 33 | } 34 | } -------------------------------------------------------------------------------- /src/Helpers/soundManager.ts: -------------------------------------------------------------------------------- 1 | import key_1 from '../Assets/piano_sounds/at0.ogg'; 2 | import key_2 from '../Assets/piano_sounds/ao0.ogg'; 3 | import key_3 from '../Assets/piano_sounds/b0.ogg'; 4 | import key_88 from '../Assets/piano_sounds/ct8.ogg'; 5 | 6 | interface sound_object{ 7 | audio:HTMLAudioElement 8 | id:number, 9 | time_started?: any 10 | } 11 | 12 | class soundManager{ 13 | private current_sounds:Array; 14 | constructor(){ 15 | this.current_sounds = [{audio:new Audio(key_1),id:0},{audio:new Audio(key_2),id:1},{audio:new Audio(key_3),id:2},{audio:new Audio(key_88),id:87}]; 16 | for(let x = 1; x < 8; x++){ 17 | const src_els = [ 18 | `co${x}`, 19 | `ct${x}`, 20 | `do${x}`, 21 | `dt${x}`, 22 | `e${x}`, 23 | `fo${x}`, 24 | `ft${x}`, 25 | `gt${x}`, 26 | `go${x}`, 27 | `at${x}`, 28 | `ao${x}`, 29 | `b${x}`, 30 | ]; 31 | src_els.forEach( async (el,index) =>{ 32 | const path = await import(`/piano_sounds/${el}.ogg`); 33 | const obj:sound_object = { 34 | audio: new Audio(path.default), 35 | id:((x-1)*12) + index+3, 36 | time_started:0 37 | } 38 | this.current_sounds.push(obj); 39 | }) 40 | } 41 | } 42 | 43 | 44 | public play_key(key:number,time:number = 0.1,velocity:number=0.1){ 45 | const okey_key = this.current_sounds[this.current_sounds.findIndex(e => e.id===key)]; 46 | if(okey_key.time_started){ 47 | clearTimeout(okey_key.time_started); 48 | } 49 | console.log(okey_key) 50 | console.log(okey_key.audio.src) 51 | okey_key.audio.volume = velocity/250; 52 | okey_key.audio.currentTime = 0; 53 | okey_key.audio.play(); 54 | okey_key.time_started = setTimeout(()=>{ 55 | okey_key.audio.pause(); 56 | okey_key.audio.currentTime = 0; 57 | okey_key.time_started = null; 58 | },time/1000 +2000) 59 | } 60 | 61 | } 62 | 63 | export default soundManager; -------------------------------------------------------------------------------- /src/Pages/Play/Play.tsx: -------------------------------------------------------------------------------- 1 | import React,{useEffect,useState} from 'react'; 2 | 3 | import DrawPiano from '../../Components/DrawPiano/DrawPiano'; 4 | import PlayingManagement from '../../Components/PlayingManagement/PlayingManagement'; 5 | import MidiPlayer from '../../Helpers/MidiPlayer'; 6 | import { DefaultOptions } from '../../Utils/Default'; 7 | import { Options as OptionsType } from '../../Utils/TypesForOptions'; 8 | import { noteEvent } from "../../Utils/TypesForMidi"; 9 | import { ReadFromLocalStorageBase64 } from '../../Utils/smallFunctions'; 10 | 11 | export default function Play() { 12 | 13 | const [options,setOptions] = useState(DefaultOptions); 14 | const [Player,setPlayer] = useState(); 15 | const [Events,setEvents] = useState>(); 16 | 17 | useEffect(() => { 18 | const options = JSON.parse(localStorage.getItem('options')!); 19 | const file = ReadFromLocalStorageBase64('file'); 20 | setOptions(options); 21 | setPlayer(new MidiPlayer(file,handleMidiEvent,25)); 22 | }, []); 23 | 24 | useEffect(() => { 25 | Player?.Restart(); 26 | }, [Player]) 27 | 28 | const handleMidiEvent = (Events:Array) =>{ 29 | Events.length > 0 && setEvents(Events); 30 | } 31 | 32 | return ( 33 |
34 | {Player &&} 35 | {Player && {}} />} 36 |
37 | ) 38 | } 39 | -------------------------------------------------------------------------------- /src/Pages/Play/PlayRecorded.tsx: -------------------------------------------------------------------------------- 1 | import React,{useEffect,useState} from 'react'; 2 | 3 | import DrawPiano from '../../Components/DrawPiano/DrawPiano'; 4 | import PlayingManagement from '../../Components/PlayingManagement/PlayingManagement'; 5 | import MidiPlayer from '../../Helpers/MidiPlayer'; 6 | import { DefaultOptions } from '../../Utils/Default'; 7 | import { Options as OptionsType } from '../../Utils/TypesForOptions'; 8 | import { noteEvent } from "../../Utils/TypesForMidi"; 9 | 10 | export default function PlayRecorded() { 11 | 12 | const [options,setOptions] = useState(DefaultOptions); 13 | const [Player,setPlayer] = useState(); 14 | const [Events,setEvents] = useState>(); 15 | 16 | useEffect(() => { 17 | const options = JSON.parse(localStorage.getItem('options')!); 18 | const file = JSON.parse(localStorage.getItem('fileJson')!); 19 | setOptions(options); 20 | setPlayer(new MidiPlayer(file,handleMidiEvent,25)); 21 | }, []); 22 | 23 | const handleMidiEvent = (Events:Array) =>{ 24 | Events.length > 0 && setEvents(Events); 25 | } 26 | 27 | return ( 28 |
29 | {Player &&} 30 | {Player && {}} />} 31 |
32 | ) 33 | } -------------------------------------------------------------------------------- /src/Pages/Record/statelessRecord.ts: -------------------------------------------------------------------------------- 1 | import { noteEvent } from "../../Utils/TypesForMidi"; 2 | import { SaveAsBase64 } from '../../Utils/smallFunctions'; 3 | import { DefaultOptions } from '../../Utils/Default'; 4 | 5 | interface singleNote{ 6 | ison:boolean, 7 | timeStart:number 8 | } 9 | 10 | export default class statelessRecord{ 11 | private eventList:Array 12 | private notesOn:Array 13 | private startTime:number 14 | private isRecording:boolean 15 | constructor(){ 16 | this.eventList = []; 17 | this.notesOn = []; 18 | for(let x = 0; x < 108; x++){ 19 | this.notesOn.push({ison:false,timeStart:0}) 20 | } 21 | this.startTime = 0; 22 | this.isRecording = false; 23 | this.add = this.add.bind(this); 24 | this.startStop = this.startStop.bind(this); 25 | } 26 | 27 | public add(command:number,noteNumber:number,velocity:number):noteEvent | void{ 28 | if(this.isRecording){ 29 | if(this.notesOn[noteNumber].ison === false){ 30 | this.notesOn[noteNumber].ison = true; 31 | this.notesOn[noteNumber].timeStart = Date.now(); 32 | } 33 | else{ 34 | this.notesOn[noteNumber].ison = false; 35 | const now = Date.now(); 36 | const delta = this.notesOn[noteNumber].timeStart - this.startTime; 37 | const duration = now - this.notesOn[noteNumber].timeStart; 38 | console.log(delta + ' ' + duration); 39 | const event:noteEvent = { 40 | NoteNumber:noteNumber, 41 | Delta:delta * 1000, 42 | SoundDuration: duration * 1000, 43 | Duration:duration * 1000, 44 | Velocity:100 45 | } 46 | this.eventList = [...this.eventList,event]; 47 | } 48 | } 49 | } 50 | 51 | public startStop(events:Array):void{ 52 | this.startTime = Date.now(); 53 | this.isRecording = !this.isRecording; 54 | console.log(this.eventList); 55 | this.eventList.length > 0 && localStorage.setItem('options',JSON.stringify(DefaultOptions)); 56 | this.eventList.length > 0 && SaveAsBase64(this.eventList.sort((a,b)=> a.Delta - b.Delta),'fileJson',true).then(e =>{ 57 | console.log('file saved to localStorage !') 58 | }); 59 | } 60 | 61 | public reset():void{ 62 | this.eventList = []; 63 | } 64 | 65 | public get list():Array{ 66 | return this.eventList; 67 | } 68 | } -------------------------------------------------------------------------------- /src/Pages/ToDo/ToDo.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import './Info.styles.scss'; 3 | import DonateButton from '../../Components/DonateButton/DonateButton' 4 | 5 | import Cactus from '../../Assets/Cactus.gif'; 6 | import sad_cactus from '../../Assets/hug.gif'; 7 | 8 | export default function ToDo() { 9 | 10 | const [checkbox,setScheckbox] = useState('false'); 11 | 12 | return ( 13 |
14 |
15 |

List of all additional data

16 | 23 |
24 |
25 |

Support / Donate

26 |
27 |
28 | Cactus gif 29 |
30 |
31 |

I understand what a Donation is and I accept a fact that I'm not receiving any goods from this payment

32 |
33 | {setScheckbox(checkbox === 'false' ? 'checked': 'false')}} /> 34 |

<-- Click to accept

35 |
36 | {checkbox === 'checked' && } 37 |
38 |
39 |
40 |
41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /src/Pages/Tutorial/Pages/Authors.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Me from '../../../Assets/Me.jpg'; 4 | 5 | export default function Authors() { 6 | return ( 7 |
8 |

Authors

9 |

Tymoteusz Apriasz

10 |
11 |
12 |

13 | Hi! It's me :). I'm a student and web developer. This app is 95% my doing. I'm main developer and owner of this website. 14 | As I play piano, I decided to create this app to help pianists around the world. 15 | Since I was 14, I was writing stuff with Midi files and Piano. My first app like this I made in my first class of high school (15 years old). 16 | This time, I decided to make something that everyone can use. In someway I surpased my initial plan, but in some ways I changed it to worse. 17 | If you want to talk with me fell free to find me on FB, or just contact me using contact forms on this website. 18 |

19 | Anyway, I do hope you enjoy using this app! 20 |

21 |
22 |
23 | Me 24 |
25 |
26 |

Others

27 |

There are many peoples that helped developing this app, much more than on this list (and I can only write their nicknames)

28 |
    29 |
  • FreestyleXV
    • 30 |
  • Avec
    • 31 |
  • MonsieurAntoine
    • 32 |
  • bonbon
    • 33 |
  • 6xSpace
    • 34 |
  • bandzior
    • 35 |
  • Nautirius
    • 36 |
  • DiamondHaj
    • 37 |
  • Dronik
    • 38 |
  • And many friends I don't call by nicknames :)
    • 39 |
40 |

Here I want to thank everyone for help in developing this project, as you probably don't even know how even a little support helps 💗

41 |
42 | ) 43 | } 44 | -------------------------------------------------------------------------------- /src/Pages/Tutorial/Pages/Creating.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import YouTube from 'react-youtube'; 3 | 4 | export default function Creating() { 5 | return ( 6 |
7 |

Creating Tutorials

8 |

Creating Tutorial with Piano Blocks App and ANY video editor

9 | 13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/Pages/Tutorial/Pages/Record.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Rec from '../../../Assets/tutorial/rec.mp4' 4 | import shet from '../../../Assets/tutorial/shet.png' 5 | 6 | export default function Record() { 7 | return ( 8 |
9 |

Recording

10 |

How to record in Piano Blocks App

11 |
12 |
13 |

14 | When you enter a Record page, you'r gona see buttos Rec, play Recorded, and a rectangle with a list of connected devices. 15 | If you've connected your device through USB, and you still don't see your device, try connecting to https {window.location.replace('https://pianoblocksapp.com')}}>here, 16 | Or try to install Drivers. App is recording every device that is connected and displayed there. Click record, the dot(s) will start blinking, then clikc it again to stop recording. 17 | To play recorded clikc button Play Recorded. To configure visuals, go to main page, then come back :). 18 | Remember, don't use this option on cheaper or old computers, it won't work properly. 19 |

20 |
21 |
22 | 25 |
26 |
27 |

Sheet music of your recording

28 |
29 |
30 |

31 | *BETA*. If you record your playing through this website, you can instantly get prototype of sheet music. 32 |

33 | *It yet is not working as it should, but you can get some sort of sketch. 34 |

35 |
36 |
37 | sheet music demo 38 |
39 |
40 |
41 |

* For Nerds

42 |
43 |
44 |

45 | Recording in web apps is possible thanks to window.navigator.requestMIDIAccess(). 46 | If you ever need to record midi through web apps, use it. 47 | Altough it is still not supported by some web browsers 48 |

49 |
50 |
51 |
52 |
53 | ) 54 | } 55 | -------------------------------------------------------------------------------- /src/Pages/Tutorial/Tutorial.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement,useState,useEffect } from 'react' 2 | import './Tutorial.styles.css'; 3 | 4 | import InsideNavigator from '../../Components/InsideNavigator/InsideNavigator'; 5 | 6 | import Basic from './Pages/Basic'; 7 | import Midi from './Pages/Midi'; 8 | import Recording from './Pages/Record'; 9 | import Configuration from './Pages/Configuration'; 10 | import Creating from './Pages/Creating'; 11 | import Authors from './Pages/Authors'; 12 | 13 | 14 | 15 | export default function Tutorial():ReactElement { 16 | 17 | const [width,setWidth] = useState(window.innerWidth); 18 | const [height,setHeight] = useState(window.innerHeight); 19 | 20 | const [comp_id,set_comp_id] = useState(0); 21 | 22 | const Listeners = () =>{ 23 | setWidth(window.innerWidth); 24 | setHeight(window.innerHeight); 25 | } 26 | 27 | useEffect(() => { 28 | window.addEventListener('resize',Listeners); 29 | return () => {window.removeEventListener('resize',Listeners)} 30 | }, []); 31 | 32 | const set_id = (id:number):void =>{ 33 | set_comp_id(id); 34 | } 35 | 36 | return ( 37 |
38 | 47 | }, 48 | { 49 | name: 'Midi', 50 | component: 51 | }, 52 | { 53 | name: 'Recording', 54 | component: 55 | }, 56 | { 57 | name: 'Configuration', 58 | component: 59 | }, 60 | { 61 | name: 'Creating Tutorials', 62 | component: 63 | }, 64 | { 65 | name: 'Authors', 66 | component: 67 | } 68 | ]} /> 69 |
70 | ) 71 | } 72 | -------------------------------------------------------------------------------- /src/Utils/CanvasFuntions.ts: -------------------------------------------------------------------------------- 1 | const CanvasRoundRect = (ctx:CanvasRenderingContext2D,color:string | CanvasGradient,x:number, y:number, w:number, h:number, r:number,stroke?:boolean):void => { 2 | if (w < 2 * r) r = w / 2; 3 | if (h < 2 * r) r = h / 2; 4 | ctx.beginPath(); 5 | ctx.fillStyle = color; 6 | ctx.strokeStyle = color; 7 | ctx.moveTo(x+r, y); 8 | ctx.arcTo(x+w, y, x+w, y+h, r); 9 | ctx.arcTo(x+w, y+h, x, y+h, r); 10 | ctx.arcTo(x, y+h, x, y, r); 11 | ctx.arcTo(x, y, x+w, y, r); 12 | if(!stroke){ 13 | ctx.fill(); 14 | }else{ 15 | ctx.stroke(); 16 | } 17 | 18 | } 19 | 20 | export {CanvasRoundRect} -------------------------------------------------------------------------------- /src/Utils/OtherTypes.ts: -------------------------------------------------------------------------------- 1 | interface prop_json{ 2 | name:string, 3 | value:string 4 | } 5 | 6 | export type {prop_json} -------------------------------------------------------------------------------- /src/Utils/ReduxStore.ts: -------------------------------------------------------------------------------- 1 | import {Action, createStore} from 'redux'; 2 | 3 | const initialState = 0; 4 | 5 | const Reducer = (state:any = initialState,action:Action) => { 6 | switch(action.type){ 7 | case 'perfect': 8 | return state + 100; 9 | case 'good': 10 | return state + 50; 11 | case 'ok': 12 | return state + 20; 13 | case 'meh': 14 | return state + 10; 15 | case 'cheat': 16 | return state - 1000; 17 | default: 18 | return state; 19 | } 20 | } 21 | 22 | const store = createStore(Reducer); 23 | 24 | export default store; -------------------------------------------------------------------------------- /src/Utils/TypesForMidi.ts: -------------------------------------------------------------------------------- 1 | export interface IMidiFile { 2 | division: number; 3 | 4 | format: number; 5 | 6 | tracks: any[][]; 7 | } 8 | 9 | export interface TimeSignature{ 10 | denominator:number; 11 | numerator:number; 12 | metronome:number; 13 | thirtyseconds:number; 14 | } 15 | 16 | export interface StaticMidiDataProps{ 17 | denominator:number, 18 | nominator:number, 19 | metronome:number, 20 | thirtyseconds:number, 21 | division:number; 22 | } 23 | 24 | export interface MidiEventType{ 25 | delta:number, 26 | setTempo: {microsecondsPerQuarter:number}, 27 | endOfTrack: boolean, 28 | channel: number, 29 | programChange: {programNumber:number}, 30 | controlChange:{type:number,value:number}, 31 | noteOn:{noteNumber:number,velocity:number}, 32 | noteOff:{noteNumber:number,velocity:number}, 33 | } 34 | 35 | export interface noteEvent{ 36 | NoteNumber:number, 37 | Delta:number, 38 | Duration:number, 39 | SoundDuration:number, 40 | Velocity:number 41 | } 42 | 43 | export interface blockNote{ 44 | color:string 45 | width:number 46 | NoteNumber:number, 47 | Velocity:number, 48 | pos_y:number, 49 | pos_x:number, 50 | height?:number, 51 | creationTime:number, 52 | pauseTime?:number, 53 | playingTime?:number, 54 | duration:number, 55 | detectTime?:number, 56 | timeWasTaken?:boolean, 57 | wasDetected:boolean 58 | } 59 | 60 | -------------------------------------------------------------------------------- /src/Utils/TypesForOptions.ts: -------------------------------------------------------------------------------- 1 | export interface Options{ 2 | Color:string, 3 | KeyPressColor:string, 4 | RandomColors:boolean, 5 | IsEffects:boolean, 6 | backgroundImage: string, 7 | speed:number, 8 | playSpeed:number, 9 | watermark:boolean, 10 | soundOn:boolean, 11 | blockRadius:number, 12 | blockShadowRadius:number, 13 | ShadowColor:string, 14 | randomEffectColors:boolean, 15 | EffectsBlockColor:boolean, 16 | EffectsKeyColor:boolean, 17 | EffectsColor:string, 18 | OctaveLines:boolean, 19 | GameMode:boolean, 20 | renderMethod:'Interval' | 'animationFrame', 21 | Effect:'fountain' | 'dancingLines' | 'hexagon' | 'stickyBalls' | 'fireworks' | 'sparks' | 'DNA', 22 | ThinerBlockColor:string, 23 | GradientColor:string, 24 | GradientBlocks:boolean, 25 | GradientBlocksColor:Array 26 | } 27 | 28 | -------------------------------------------------------------------------------- /src/Utils/handleOptionsChange.ts: -------------------------------------------------------------------------------- 1 | import { Options as OptionsType } from './TypesForOptions'; 2 | import { ChangeEvent } from 'react'; 3 | 4 | const handleOptionsChange = (event:ChangeEvent | {target:{name:string,value:any}},options:OptionsType):OptionsType =>{ 5 | let currentOptions = options; 6 | switch(event.target.name){ 7 | case 'color': 8 | currentOptions.Color = event.target.value; 9 | break; 10 | case 'Thincolor': 11 | currentOptions.ThinerBlockColor = event.target.value; 12 | break; 13 | case 'GradientCol': 14 | currentOptions.GradientColor = event.target.value; 15 | break; 16 | case 'RandomColors': 17 | currentOptions.RandomColors = !options.RandomColors; 18 | break; 19 | case 'IsEffects': 20 | currentOptions.IsEffects = !options.IsEffects; 21 | break; 22 | case 'Image': 23 | try{ 24 | let sss = options; 25 | sss.backgroundImage = event.target.value 26 | localStorage.setItem('options',JSON.stringify(sss)) 27 | }catch{ 28 | alert('this File is probably to big man') 29 | currentOptions.backgroundImage = ''; 30 | } 31 | break; 32 | case 'speed': 33 | currentOptions.speed = parseInt(event.target.value); 34 | break; 35 | case 'playSpeed': 36 | currentOptions.playSpeed = parseInt(event.target.value); 37 | break; 38 | case 'watermark': 39 | currentOptions.watermark = !options.watermark; 40 | break; 41 | case 'soundOn': 42 | currentOptions.soundOn = !options.soundOn; 43 | break; 44 | case 'renderMethod': 45 | if(event.target.value === 'Interval' || event.target.value === 'animationFrame'){ 46 | currentOptions.renderMethod = event.target.value; 47 | } 48 | break; 49 | case 'KeyPressColor': 50 | currentOptions.KeyPressColor = event.target.value; 51 | break; 52 | case 'blockShadowColor': 53 | currentOptions.blockShadowRadius = parseInt(event.target.value); 54 | break; 55 | case 'blockRadius': 56 | currentOptions.blockRadius = parseInt(event.target.value); 57 | break; 58 | case 'Effect': 59 | if(event.target.value === 'fountain' || event.target.value === 'dancingLines' || event.target.value === 'hexagon' || event.target.value === 'stickyBalls' || event.target.value === 'fireworks' || event.target.value === 'sparks' || event.target.value === 'None' || event.target.value === 'DNA'){ 60 | currentOptions.Effect = event.target.value;} 61 | break; 62 | case 'shadowColor': 63 | currentOptions.ShadowColor = event.target.value; 64 | break; 65 | case 'EffectsBlockColor': 66 | currentOptions.EffectsBlockColor = !currentOptions.EffectsBlockColor 67 | break; 68 | case 'EffectsKeyColor': 69 | currentOptions.EffectsKeyColor = !currentOptions.EffectsKeyColor; 70 | break; 71 | case 'randomEffectsColor': 72 | currentOptions.randomEffectColors = !currentOptions.randomEffectColors; 73 | break; 74 | case 'EffectsColor': 75 | currentOptions.EffectsColor = event.target.value; 76 | break; 77 | case 'IsEffectsTrue': 78 | currentOptions.IsEffects = true; 79 | break; 80 | case 'gradientBlocks': 81 | currentOptions.GradientBlocks = !currentOptions.GradientBlocks; 82 | break; 83 | case 'gradientBlocksColor': 84 | currentOptions.GradientBlocksColor = event.target.value; 85 | break; 86 | default: 87 | break; 88 | } 89 | return currentOptions; 90 | } 91 | 92 | export default handleOptionsChange; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import {BrowserRouter} from 'react-router-dom'; 4 | import { Provider } from 'react-redux' 5 | import store from './Utils/ReduxStore'; 6 | import './index.css'; 7 | import App from './App'; 8 | 9 | const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement) 10 | 11 | root.render( 12 | 13 | 14 | 15 | 16 | , 17 | ); 18 | // If you want to start measuring performance in your app, pass a function 19 | // to log results (for example: reportWebVitals(console.log)) 20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 21 | //reportWebVitals(); 22 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare module '*.mp4'; 3 | declare module '*.MID'; 4 | declare module '*.ogg'; 5 | declare module '*.png'; 6 | declare module '*.jpeg'; -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "downlevelIteration": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "noFallthroughCasesInSwitch": true, 17 | "module": "esnext", 18 | "moduleResolution": "node", 19 | "resolveJsonModule": true, 20 | "isolatedModules": true, 21 | "noEmit": true, 22 | "jsx": "preserve" 23 | }, 24 | "include": [ 25 | "src" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | assetsInclude: ["**/*.MID", "**/*.png","**/*.ogg"], 8 | server: { 9 | port: 3000, // Change the port if needed 10 | }, 11 | define: { 12 | 'process.env': {}, // Ensures compatibility with process.env 13 | }, 14 | resolve: { 15 | alias: { 16 | '@': '/src', // Optional: Allows you to use '@/components' instead of '../../../components' 17 | }, 18 | }, 19 | build: { 20 | outDir: 'build', // Change from 'dist' to 'build' 21 | }, 22 | }); 23 | --------------------------------------------------------------------------------