fixed resize bugs

src/App.tsx

@@ -7,6 +7,7 @@ import Play from './Pages/Play/Play';
 import PlayRecorded from './Pages/Play/PlayRecorded';
 import Record from './Pages/Record/Record';
 import RebuildInfo from './Pages/RebuildInfo/RebuildInfo';
+import PlayLive from './Pages/PlayLive/PlayLive';
 import {Routes as Switch, Route} from 'react-router-dom';
 import './App.css';
 
@@ -22,6 +23,7 @@ function App() {
         <Route path='/Record' element={<Record />} />
         <Route path='/RebuildInfo' element={<RebuildInfo />} />
         <Route path='/PlayRecorded' element={<PlayRecorded />} />
+        <Route path='/PlayLive' element={<PlayLive />} />
         <Route path='/' element={<Main />} />
       </Switch>
     </div>

src/Components/Header/Header.tsx

@@ -22,6 +22,7 @@ export default function Header() {
                 <div className='Links'>
                     <Link to='/' className='Link jersey-10 HomeLink'>HOME</Link>
                     <Link to='/RebuildInfo' className='Link jersey-10'>RECORD</Link>
+                    {/* <Link to='/PlayLive' className='Link jersey-10'>LIVE PLAY</Link> */}
                     <Link to='/tutorial' className='Link jersey-10'>DOCS</Link>
                     <Link to='https://www.paypal.com/donate/?hosted_button_id=J6GQGKHC7H7SG' className='Link jersey-10'>SUPPORT</Link>
                 </div>

src/Components/NewOptions/NewOptions.styles.scss

@@ -144,6 +144,13 @@
     bottom: 60px;
 }
 
+.disable_transitions{
+    transition: none !important;
+    .Options_Data{
+        transition: none !important;
+    }
+}
+
 @keyframes Enter{
     0%{
         margin-Top: -50%;

src/Components/NewOptions/Options.tsx

@@ -1,9 +1,10 @@
-import React, { ReactElement,useState } from 'react'
+import React, { ReactElement,useState, useEffect } from 'react'
 import './NewOptions.styles.scss';
 
 import ChooseButton from './ChooseButtons/ChooseButton';
 import ImageButton from './ImageButton/ImageButton';
 import OptionsDescription from './OptionsDescription/OptionsDescription';
+import Preview from '../Preview/Preview';
 
 import { Options as OptionsType } from '../../Utils/TypesForOptions';
 
@@ -14,8 +15,6 @@ import {
     Options_Presets as OptionsPresets} from './OptionsType/OptionsType';
 
 import save_img from "../../Assets/save.png"
-import Preview from '../Preview/Preview';
-
 interface OptionsProps{
     isOpened:boolean,
     onGoBack:Function,
@@ -27,14 +26,28 @@ interface OptionsProps{
 export default function Options({isOpened,onGoBack,options,handleOptionsChange,reloadOptions}:OptionsProps):ReactElement {
 
     const [table,setTable] = useState<'blocks' | 'effects' | 'other' | 'presets'>('blocks');
+    const [resizeDisable, setResizeDisable] = useState<String>('');
 
     const change_table = (name:'blocks' | 'effects' | 'other' | 'presets'):void =>{
         setTable(name);
     }
 
+    useEffect(()=>{
+        const resize_listener = () =>{
+            setResizeDisable("disable_transitions");
+            setTimeout(()=>{
+                setResizeDisable("");
+            },100)
+        }
+
+        window.addEventListener('resize', resize_listener);
+
+        return () => {window.removeEventListener('resize',resize_listener)}
+    }, [])
+
 
     return (
-        <div className={`Options_Main ${isOpened ? 'Opened' : ''} `}>
+        <div className={`Options_Main ${isOpened ? 'Opened' : ''} ${resizeDisable}`}>
             <div className='background_options' />
             <div className='Options_Data'>
                 <OptionsDescription type={table} />

src/Components/Preview/Preview.tsx

@@ -92,14 +92,14 @@ export default function Preview({active}:PrevProps):React.ReactElement {
           width: props.width,
           height: props.height
         })
-      setReady(false);
-      if(timeout_ref.current !== 0){
-        clearTimeout(timeout_ref.current);
-      }
-      timeout_ref.current = setTimeout(()=>{
-        setReady(true);
-        addKey(curr => curr + 1);
-      },500)
+      // setReady(false);
+      // if(timeout_ref.current !== 0){
+      //   clearTimeout(timeout_ref.current);
+      // }
+      // timeout_ref.current = setTimeout(()=>{
+      //   setReady(true);
+      //   addKey(curr => curr + 1);
+      // },500)
     },[width_ref.current])
 
 

src/Components/Tracks/updatedTracks.tsx

@@ -64,6 +64,14 @@ const UpdatedTracks = ({width,height,Player,events,options,sound,number_of_white
         }
     },[events])
 
+    useEffect(()=>{
+        if(blocks){
+            blocks.handle_resize(width,height,width/number_of_white_keys);
+            console.log('resize')
+        }
+
+    },[width,height]);
+
     useEffect(()=>{
         if(blocks === undefined && pianoWhite.current && mainCtx.current && pianoBlack.current && gradCtx.current && EffectCtx.current){
             const context = mainCtx.current.getContext('2d')

src/Helpers/Blocks/pianoInteraction.ts

@@ -25,6 +25,13 @@ export default class pianoInteraction{
         })
     }
 
+    public handle_resize(width:number, height:number):void {
+        this.black_key_height = (height-this.cnavas_offSet) / 1.5 + 5;
+        this.white_key_height = (height-this.cnavas_offSet) + 2;
+        this.width = width;
+        this.height = height;
+    }
+
     public render():void {
         this.white_ctx.clearRect(0,0,this.width,this.height);
         this.black_ctx.clearRect(0,0,this.width,this.height);

src/Helpers/Blocks/updatedBlocks.ts

@@ -47,6 +47,15 @@ class Block{
         this.pauseTime += time
     }
 
+    /**
+     * Put the block in different x_position
+     * @param pos_x: new x position of the block
+     */
+    public block_alter_x_pos(pos_x: number){
+        //I think the Y does not need to change, only the x position
+        this.pos_x = pos_x;
+    }
+
     /**
      * Static method to calculate y position of a block if it existed, returns number
      * @param speed_y 
@@ -122,7 +131,7 @@ class Blocks{
     private effect_manager: EffectsManager
     private sound_manager:soundManager | undefined
 
-    constructor(canvases: blocks_canvases, private options:OptionsType, private height:number, private width:number, nr_of_keys:number, key_width:number){
+    constructor(canvases: blocks_canvases, private options:OptionsType, private height:number, private width:number, private nr_of_keys:number, private key_width:number){
         this.blocks = []
         this.notes_to_add = [];
         this.ctx = canvases.mainCtx;
@@ -288,6 +297,26 @@ class Blocks{
         this.notes_to_add = [];
     }
 
+
+    /**
+     * Method handles the resize of the canvas, it needs to rerender the blocks
+     * @param width 
+     * @param height 
+     */
+    public handle_resize(width:number,height:number, key_width: number):void {
+        this.key_width = key_width;
+        this.width = width;
+        this.height = height;
+        this.key_positions_map = this.__create_key_position_map(width, this.nr_of_keys, this.key_width);
+        this.height = height - (height / 5);
+        this.key_interactor.handle_resize(width,height / 5);
+        this.effect_manager.handle_resize(width, height - (height / 5));
+        this.positions_to_render_line = this.RenderOctaveLines()
+        this.blocks.forEach(block =>{
+            block.block_alter_x_pos(this.key_positions_map[block.noteNumber].position);
+        })
+    }
+
     /**
      * Function creates a map of key positions
      */

src/Helpers/Effects/DesignedEffects/Blank.ts

@@ -18,4 +18,8 @@ export default class Blank extends _Effect{
     public update_effect(): void {
 
     }
+
+    public handle_resze(width: number, height: number): void {
+
+    }
 }

src/Helpers/Effects/DesignedEffects/Sparks.ts

@@ -57,6 +57,11 @@ class Sparks extends Effect{
         this.ctx.closePath()
     }
 
+    public handle_resze(width: number, height: number): void {
+        this.width = width;
+        this.height = height;
+    }
+
     public update_effect(): void {
         const new_effects:Spark[] = [];
         this.sparks.forEach(spark =>{

src/Helpers/Effects/DesignedEffects/Squared.ts

@@ -75,6 +75,11 @@ class Squared extends Effect{
         //Render Effects
     }
 
+    public handle_resze(width: number, height: number): void {
+        this.width = width;
+        this.height = height;
+    }
+
     public update_effect(): void {
         const new_effects:Array<Square> = [];
         this.effects.map(efect =>{

src/Helpers/Effects/EffectsManager.ts

@@ -11,7 +11,7 @@ import { Options } from '../../Utils/TypesForOptions';
 export default class EffectsManager{
 
     private effects:Effect;
-    constructor(private ctx:CanvasRenderingContext2D, width:number,private height:number, private key_width:number,effect_type:string, options:Options){
+    constructor(private ctx:CanvasRenderingContext2D, width:number, private height:number, private key_width:number,private effect_type:string,private options:Options){
         switch(effect_type){
             case 'Sparks':
                 this.effects = new Sparks(ctx, width, height, 1, 6,);
@@ -28,6 +28,10 @@ export default class EffectsManager{
         }
     }
 
+    public handle_resize(width:number, height: number){
+        this.height = height;
+        this.effects.handle_resze(width, height);
+    }
 
     public generate_effect(pos_x:number):void{
         this.effects.create_effect(pos_x, this.height, this.key_width);

src/Helpers/Effects/_Effect.ts

@@ -24,6 +24,11 @@ export default abstract class Effect{
      */
     public abstract update_effect():void;
 
+    /**
+     * Method handles the resize of the screen
+     */
+    public abstract handle_resze(width:number, height:number):void;
+
     /**
      * Method clears the Canvas
      */

src/Pages/Play/Play.tsx

@@ -39,7 +39,10 @@ export default function Play():React.ReactElement{
     },[])
 
     const resize_listener = useCallback(()=>{
-        window.location.reload()
+        set_width_height({
+            width: window.innerWidth,
+            height: window.innerHeight
+        })
     },[]);
 
     const focus_listener = useCallback(()=>{

src/Pages/PlayLive/PlayLive.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import "./PlayLive.scss"
+
+export default function PlayLive() {
+  return (
+        <div className='INFO_REBUILD jersey-10'>
+            <h1>WORK IN PROGRESS</h1>
+            <h2>IF YOU SEE THIS, YOU HAVE DOWNLOADED PAGE FROM AVANT BRANCH</h2>
+            <h3>Then please be patient :)</h3>
+        </div>
+  )
+}

src/Utils/handleOptionsChange.ts

@@ -22,9 +22,6 @@ const handleOptionsChange = (event:ChangeEvent<HTMLInputElement> | {target:{name
         case 'Image':
             currentOptions.backgroundImage = event.target.value
             break;
-        case 'speed':
-            currentOptions.speed = parseInt(event.target.value);
-            break;
         case 'playSpeed':
             currentOptions.playSpeed = parseInt(event.target.value);
             break;