diff --git a/front/app.json b/front/app.json index e83715f..338c782 100644 --- a/front/app.json +++ b/front/app.json @@ -1,48 +1,44 @@ { - "expo": { - "name": "Chromacase", - "slug": "Chromacase", - "version": "1.0.0", - "orientation": "portrait", - "icon": "./assets/icon.png", - "userInterfaceStyle": "light", - "splash": { - "image": "./assets/splash.png", - "resizeMode": "cover", - "backgroundColor": "#ffffff" - }, - "assetBundlePatterns": [ - "**/*" - ], - "ios": { - "supportsTablet": true - }, - "android": { - "adaptiveIcon": { - "foregroundImage": "./assets/icon.png", - "backgroundColor": "#ffffff" - }, - "permissions": [ - "android.permission.RECORD_AUDIO" - ], - "package": "com.arthichaud.Chromacase" - }, - "web": { - "favicon": "./assets/favicon.png" - }, - "extra": { - "eas": { - "projectId": "dade8e5e-3e2c-49f7-98c5-cf8834c7ebb2" - } - }, - "plugins": [ - [ - "expo-image-picker", - { - "photosPermission": "The app accesses your photos to let you set your personal avatar." - } - ] - ], - "owner": "arthi-chaud" - } + "expo": { + "name": "Chromacase", + "slug": "Chromacase", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/icon.png", + "userInterfaceStyle": "light", + "splash": { + "image": "./assets/splash.png", + "resizeMode": "cover", + "backgroundColor": "#ffffff" + }, + "assetBundlePatterns": ["**/*"], + "ios": { + "supportsTablet": true + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/icon.png", + "backgroundColor": "#ffffff" + }, + "permissions": ["android.permission.RECORD_AUDIO"], + "package": "com.arthichaud.Chromacase" + }, + "web": { + "favicon": "./assets/favicon.png" + }, + "extra": { + "eas": { + "projectId": "dade8e5e-3e2c-49f7-98c5-cf8834c7ebb2" + } + }, + "plugins": [ + [ + "expo-image-picker", + { + "photosPermission": "The app accesses your photos to let you set your personal avatar." + } + ] + ], + "owner": "arthi-chaud" + } } diff --git a/front/components/Play/PartitionMagic.tsx b/front/components/Play/PartitionMagic.tsx index 3392381..cef984c 100644 --- a/front/components/Play/PartitionMagic.tsx +++ b/front/components/Play/PartitionMagic.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { View } from 'react-native'; import API from '../../API'; import { useQuery } from '../../Queries'; -import { PianoCC } from '../../views/PlayView'; import Animated, { useSharedValue, withTiming, Easing } from 'react-native-reanimated'; import { CursorInfoItem } from '../../models/SongCursorInfos'; import { PianoNotes } from '../../state/SoundPlayerSlice'; @@ -15,8 +14,8 @@ export type ParitionMagicProps = { timestamp: number; songID: number; onEndReached: () => void; - onError: (err: string) => void; - onReady: () => void; + onError?: (err: string) => void; + onReady?: () => void; }; const getSVGURL = (songID: number) => { @@ -52,7 +51,6 @@ const PartitionMagic = ({ const [endPartitionReached, setEndPartitionReached] = React.useState(false); const [isPartitionSvgLoaded, setIsPartitionSvgLoaded] = React.useState(false); const partitionOffset = useSharedValue(0); - // const pianoCC = React.useContext(PianoCC); const pianoSounds = React.useRef | null>(null); const cursorPaddingVertical = 10; const cursorPaddingHorizontal = 3; @@ -94,17 +92,17 @@ const PartitionMagic = ({ }, [data]); React.useEffect(() => { - if (isError) { + if (onError && isError) { onError('Error while loading partition'); return; } - }, [isError]); + }, [onError, isError]); React.useEffect(() => { - if (isPartitionSvgLoaded && !isLoading) { + if (onReady && isPartitionSvgLoaded && !isLoading) { onReady(); } - }, [isPartitionSvgLoaded, isLoading]); + }, [onReady, isPartitionSvgLoaded, isLoading]); React.useEffect(() => { if (endPartitionReached) { diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx index cffd7ef..7ca553c 100644 --- a/front/views/PlayView.tsx +++ b/front/views/PlayView.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-mixed-spaces-and-tabs */ import { StackActions } from '@react-navigation/native'; -import React, { useEffect, useRef, useState, createContext } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { SafeAreaView, Platform } from 'react-native'; import Animated, { useSharedValue, @@ -15,7 +15,7 @@ import { Text, Row, View, useToast } from 'native-base'; import { RouteProps, useNavigation } from '../Navigation'; import { useQuery } from '../Queries'; import API from '../API'; -import LoadingComponent, { LoadingView } from '../components/Loading'; +import { LoadingView } from '../components/Loading'; import { useSelector } from 'react-redux'; import { RootState } from '../state/Store'; import { Translate, translate } from '../i18n/i18n'; @@ -24,7 +24,6 @@ import { useStopwatch } from 'react-use-precision-timer'; import { MIDIAccess, MIDIMessageEvent, requestMIDIAccess } from '@arthi-chaud/react-native-midi'; import * as Linking from 'expo-linking'; import url from 'url'; -import { PianoCanvasContext } from '../models/PianoGame'; import PartitionMagic from '../components/Play/PartitionMagic'; import useColorScheme from '../hooks/colorScheme'; import { LinearGradient } from 'expo-linear-gradient'; @@ -82,13 +81,11 @@ const PlayView = ({ songId, route }: RouteProps) => { const stopwatch = useStopwatch(); const [time, setTime] = useState(0); const songHistory = useQuery(API.getSongHistory(songId)); - const [partitionRendered, setPartitionRendered] = useState(false); // Used to know when partitionview can render const [score, setScore] = useState(0); // Between 0 and 100 // const fadeAnim = useRef(new Animated.Value(0)).current; const getElapsedTime = () => stopwatch.getElapsedRunningTime() - 3000; const [midiKeyboardFound, setMidiKeyboardFound] = useState(); // first number is the note, the other is the time when pressed on release the key is removed - const [pressedKeys, setPressedKeys] = useState>(new Map()); // [note, time] // eslint-disable-next-line @typescript-eslint/no-unused-vars const [streak, setStreak] = useState(0); const scoreMessageScale = useSharedValue(0); @@ -177,6 +174,11 @@ const PlayView = ({ songId, route }: RouteProps) => { webSocket.current.onmessage = (message) => { try { const data = JSON.parse(message.data); + if (data.error) { + console.error('Scoro msg: ', data.error); + toast.show({ description: 'Scoro: ' + data.error }); + return; + } if (data.type == 'end') { endMsgReceived = true; webSocket.current?.close(); @@ -229,17 +231,6 @@ const PlayView = ({ songId, route }: RouteProps) => { input.onmidimessage = (message) => { const { command, note } = parseMidiMessage(message); const keyIsPressed = command == 9; - if (keyIsPressed) { - setPressedKeys((prev) => { - prev.set(note, getElapsedTime()); - return prev; - }); - } else { - setPressedKeys((prev) => { - prev.delete(note); - return prev; - }); - } webSocket.current?.send( JSON.stringify({ @@ -428,7 +419,6 @@ const PlayView = ({ songId, route }: RouteProps) => { setPartitionRendered(true)} onEndReached={() => { setTimeout(() => { onEnd(); @@ -443,7 +433,7 @@ const PlayView = ({ songId, route }: RouteProps) => { score={score} time={time} paused={paused} - // disabled={!midiKeyboardFound} + disabled={!midiKeyboardFound} song={song.data} onEnd={onEnd} onPause={onPause}