https://i.sstatic.net/7CuKj.png I am currently utilizing React and have integrated a piano component (from an external library) that is responsive. Within my application, I have implemented 3 different "levels" that determine the ranges of the piano - essentially, the horizontal length of the piano adjusts based on the level selected (with harder levels resulting in wider ranges).
To ensure consistency, I encapsulated the responsive piano within a piano-div.
https://i.sstatic.net/6wHVA.png
My objective is to maintain the height of the piano-div for seamless transitions between levels without causing any movement in the level buttons. Additionally, I want the piano component to cover the page horizontally as much as possible while leaving some space on the sides. To address this issue, I initially attempted adding padding:
.piano-div {
position: relative;
padding: 8% 30%;
}
.responsive-piano{
position: absolute;
top: 45%;
-ms-transform: translateY(-45%);
transform: translateY(-45%);
}
The challenges arose when the proportions worked well for the "easy" level but did not translate effectively for the other two levels, making them appear too small with limited horizontal coverage. Various adjustments were made to the padding/margin of different elements involved, but none proved successful (especially due to the sensitivity of the responsive-piano).
I also experimented with DOM manipulation to dynamically change the padding based on the selected level using the following CSS:
.piano-div {
position: relative;
}
.piano-div.easy {
padding: 8% 30%;
}
.piano-div.hard {
padding: 8% 5%;
}
.piano-div.crazy {
padding: 8% 5%;
}
However, transitioning smoothly from one level to another was challenging - particularly when switching from easy to hard resulted in undesirable shifts in the piano's positioning: https://i.sstatic.net/cRygj.png While adjusting the entire page briefly resolved the issue by providing a slight "refresh," it is imperative to find a solution that does not involve moving the page.
If you have any suggestions on how to rectify this issue or perhaps offer an alternative approach, please share your insights.
UPDATE:
The following snippets contain relevant HTML code:
App.js:
<div className={"piano-div " + currGame.level}>
<ResponsivePiano className='responsive-piano' noteRange={LevelConf[currGame.level].noteRanges}
handleGuess={this.handleGuess} activeNotes={winningChord.activeNotes} audioContext={audioContext}/>
</div>
ResponsivePiano.js:
function ResponsivePiano(props) {
const { noteRange, handleGuess, activeNotes, audioContext } = props;
return (
<DimensionsProvider>
{({ containerWidth, containerHeight }) => (
<SoundfontProvider
instrumentName="acoustic_grand_piano"
audioContext={audioContext}
hostname={soundfontHostname}
handleGuess={handleGuess}
render={({ isLoading, playNote, stopNote }) => (
<Piano
noteRange={noteRange}
width={containerWidth}
playNote={playNote}
stopNote={stopNote}
disabled={isLoading}
activeNotes={activeNotes}
{...props}
/>
)}
/>
)}
</DimensionsProvider>
);
}