fixed ts type issue

front/components/PartitionView.tsx

@@ -103,7 +103,11 @@ const PartitionView = (props: PartitionViewProps) => {
 			// console.log('timestamp cursor', _osmd.cursor.iterator.CurrentSourceTimestamp);
 			// console.log('timestamp cursor', _osmd.cursor.iterator.CurrentVoiceEntries);
 			// console.log('current measure index', _osmd.cursor.iterator.CurrentMeasureIndex);
-			const osmdCanvas = document.querySelector('#' + OSMD_DIV_ID + ' canvas');
+			const osmdCanvas = document.querySelector<HTMLCanvasElement>('#' + OSMD_DIV_ID + ' canvas');
+			if (!osmdCanvas) {
+				// this should never happen this is done to silent ts linter about maybe null
+				throw new Error('No canvas found');
+			}
 			// Ty https://github.com/jimutt/osmd-audio-player/blob/ec205a6e46ee50002c1fa8f5999389447bba7bbf/src/PlaybackEngine.ts#LL77C12-L77C63
 			props.onPartitionReady(
 				osmdCanvas.toDataURL(),

front/components/PartitionVisualizer/PhaserCanvas.tsx

@@ -8,9 +8,10 @@ import { RootState, useSelector } from '../../state/Store';
 import { setSoundPlayer as setSPStore } from '../../state/SoundPlayerSlice';
 import { useDispatch } from 'react-redux';
 import { SplendidGrandPiano, CacheStorage } from 'smplr';
+import { Note } from 'opensheetmusicdisplay';
 
 let globalTimestamp = 0;
-let globalStatus: 'playing' | 'paused' | 'stopped' = 'playing';
+const globalStatus: 'playing' | 'paused' | 'stopped' = 'playing';
 
 const isValidSoundPlayer = (soundPlayer: SplendidGrandPiano | undefined) => {
 	return soundPlayer && soundPlayer.loaded;
@@ -35,7 +36,9 @@ const getPianoScene = (
 ) => {
 	class PianoScene extends Phaser.Scene {
 		async preload() {}
-
+		private cursorPositionsIdx = -1;
+		private partition!: Phaser.GameObjects.Image;
+		private cursor!: Phaser.GameObjects.Rectangle;
 		create() {
 			this.textures.addBase64('partition', partitionB64);
 			this.cursorPositionsIdx = -1;
@@ -56,7 +59,7 @@ const getPianoScene = (
 
 			if (status === 'playing') {
 				const transitionTime = 75;
-				const cP = cursorPositions.findLast((cP, idx) => {
+				const cP = cursorPositions.findLast((cP: { timestamp: number; }, idx: number) => {
 					if (
 						cP.timestamp < currentTimestamp + transitionTime &&
 						idx > this.cursorPositionsIdx
@@ -73,6 +76,7 @@ const getPianoScene = (
 						x: cP!.x,
 						duration: transitionTime,
 						ease: 'Sine.easeInOut',
+						onComplete: undefined as (() => void) | undefined,
 					};
 					if (this.cursorPositionsIdx === cursorPositions.length - 1) {
 						tw.onComplete = () => {
@@ -93,7 +97,7 @@ export type PianoCursorPosition = {
 	// timestamp in ms
 	timing: number;
 	timestamp: number;
-	notes: any[];
+	notes: Note[];
 };
 
 export type UpdateInfo = {

front/tsconfig.json

@@ -14,7 +14,7 @@
 		/* Language and Environment */
 		"target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 		"lib": [
-			"es2019",
+			"es2023",
 			"DOM"
 		] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
 		"jsx": "react-native" /* Specify what JSX code is generated. */,