Fixed scaling issue with the cursor position texture size is still a concern

back/src/auth/auth.controller.ts

@@ -7,7 +7,7 @@ import {
 	Body,
 	Delete,
 	BadRequestException,
-	DuplicateException,
+	ConflictException,
 	HttpCode,
 	Put,
 	InternalServerErrorException,
@@ -77,7 +77,7 @@ export class AuthController {
 		} catch (e) {
 			// check if the error is a duplicate key error
 			if (e.code === 'P2002') {
-				throw new DuplicateException('Username or email already taken');
+				throw new ConflictException('Username or email already taken');
 			}
 			console.error(e);
 			throw new BadRequestException();

front/components/PartitionCoord.tsx

@@ -20,7 +20,7 @@ const PartitionCoord = ({
 	onResume,
 }: PartitionCoordProps) => {
 	const [partitionData, setPartitionData] = React.useState<
-		[string, PianoCursorPosition[]] | null
+		[[number, number], string, PianoCursorPosition[]] | null
 	>(null);
 
 	return (
@@ -28,8 +28,8 @@ const PartitionCoord = ({
 			{!partitionData && (
 				<PartitionView
 					file={file}
-					onPartitionReady={(base64data, a) => {
-						setPartitionData([base64data, a]);
+					onPartitionReady={(dims, base64data, a) => {
+						setPartitionData([dims, base64data, a]);
 						onPartitionReady();
 					}}
 					onEndReached={() => {
@@ -40,8 +40,9 @@ const PartitionCoord = ({
 			)}
 			{partitionData && (
 				<PhaserCanvas
-					partitionB64={partitionData?.[0]}
-					cursorPositions={partitionData?.[1]}
+					partitionDims={partitionData?.[0]}
+					partitionB64={partitionData?.[1]}
+					cursorPositions={partitionData?.[2]}
 					onPause={onPause}
 					onResume={onResume}
 					onEndReached={() => {

front/components/PartitionView.tsx

@@ -14,7 +14,11 @@ import { PianoCursorPosition } from '../models/PianoGame';
 type PartitionViewProps = {
 	// The Buffer of the MusicXML file retreived from the API
 	file: string;
-	onPartitionReady: (base64data: string, cursorInfos: PianoCursorPosition[]) => void;
+	onPartitionReady: (
+		dims: [number, number],
+		base64data: string,
+		cursorInfos: PianoCursorPosition[]
+	) => void;
 	onEndReached: () => void;
 	// Timestamp of the play session, in milisecond
 	timestamp: number;
@@ -60,7 +64,6 @@ const PartitionView = (props: PartitionViewProps) => {
 			const bpm = _osmd.Sheet.HasBPMInfo ? _osmd.Sheet.getExpressionsStartTempoInBPM() : 60;
 			const wholeNoteLength = Math.round((60 / bpm) * 4000);
 			const curPos = [];
-			_osmd.setLogLevel('info');
 			while (!_osmd.cursor.iterator.EndReached) {
 				const notesToPlay = _osmd.cursor
 					.NotesUnderCursor()
@@ -97,7 +100,6 @@ const PartitionView = (props: PartitionViewProps) => {
 				});
 				_osmd.cursor.next();
 			}
-			// console.log('curPos', curPos);
 			_osmd.cursor.reset();
 			_osmd.cursor.hide();
 			// console.log('timestamp cursor', _osmd.cursor.iterator.CurrentSourceTimestamp);
@@ -110,12 +112,18 @@ const PartitionView = (props: PartitionViewProps) => {
 			if (!osmdCanvas) {
 				throw new Error('No canvas found');
 			}
+			let scale = osmdCanvas.width / parseFloat(osmdCanvas.style.width);
+			if (Number.isNaN(scale)) {
+				console.error('Scale is NaN setting it to 1');
+				scale = 1;
+			}
 			// Ty https://github.com/jimutt/osmd-audio-player/blob/ec205a6e46ee50002c1fa8f5999389447bba7bbf/src/PlaybackEngine.ts#LL77C12-L77C63
 			props.onPartitionReady(
+				[osmdCanvas.width, osmdCanvas.height],
 				osmdCanvas.toDataURL(),
 				curPos.map((pos) => {
 					return {
-						x: pos.offset,
+						x: pos.offset * scale,
 						timing: pos.sNinfos.sNL,
 						timestamp: pos.sNinfos.ts,
 						notes: pos.notes,

front/components/PartitionVisualizer/PhaserCanvas.tsx

@@ -75,11 +75,13 @@ const getPianoScene = (
 				if (this.nbTextureToload > 0) return;
 				this.partition = this.add.image(0, 0, 'partition').setOrigin(0, 0);
 				this.cameras.main.setBounds(0, 0, this.partition.width, this.partition.height);
-				console.log("canvas", this.partition.width, this.partition.height);
+				console.log('canvas', this.partition.width, this.partition.height);
 
 				const dims = this.partition.getBounds();
 				// base ref normal cursor is 350px by 30px
-				this.cursor = this.add.rectangle(0, 0, dims.height * 30 / 350, dims.height, 0x31ef8c, 0.5).setOrigin(0, 0);
+				this.cursor = this.add
+					.rectangle(0, 0, dims.height * 30 / 276, dims.height, 0x31ef8c, 0.5)
+					.setOrigin(0, 0);
 				this.cameras.main.startFollow(this.cursor, true, 0.05, 0.05);
 
 				this.emitter = this.add.particles(0, 0, 'star', {
@@ -145,6 +147,7 @@ const getPianoScene = (
 };
 
 export type PhaserCanvasProps = {
+	partitionDims: [number, number];
 	partitionB64: string;
 	cursorPositions: PianoCursorPosition[];
 	onEndReached: () => void;
@@ -152,7 +155,12 @@ export type PhaserCanvasProps = {
 	onResume: () => void;
 };
 
-const PhaserCanvas = ({ partitionB64, cursorPositions, onEndReached }: PhaserCanvasProps) => {
+const PhaserCanvas = ({
+	partitionDims,
+	partitionB64,
+	cursorPositions,
+	onEndReached,
+}: PhaserCanvasProps) => {
 	const colorScheme = useColorScheme();
 	const dispatch = useDispatch();
 	const pianoCC = useContext(PianoCC);
@@ -219,8 +227,8 @@ const PhaserCanvas = ({ partitionB64, cursorPositions, onEndReached }: PhaserCan
 		const config = {
 			type: Phaser.AUTO,
 			parent: 'phaser-canvas',
-			width: max(width * 0.7, 850),
-			height: min(max(height * 0.7, 400), 600),
+			width: max(width * 0.9, 850),
+			height: min(max(height * 0.7, 400), partitionDims[1]),
 			scene: [pianoScene, UIScene],
 			scale: {
 				mode: Phaser.Scale.FIT,