zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prettied

Browse Source
This commit is contained in:
Clément Le Bihan
2023-09-05 15:37:55 +02:00
parent b76d496034
commit a2494ce498
2 changed files with 94 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/components/PartitionVisualizer/PhaserCanvas.tsx
+2 -2
View File
@@ -24,7 +24,7 @@ const myFindLast = <T,>(a: T[], p: (_: T, _2: number) => boolean) => {
} }
} }
return undefined; return undefined;
} };
const playNotes = (notes: PianoCursorNote[], soundPlayer: SplendidGrandPiano) => { const playNotes = (notes: PianoCursorNote[], soundPlayer: SplendidGrandPiano) => {
notes.forEach(({ note, duration }) => { notes.forEach(({ note, duration }) => {
@@ -68,7 +68,7 @@ const getPianoScene = (
if (status === 'playing') { if (status === 'playing') {
const transitionTime = 75; const transitionTime = 75;
const cP = myFindLast(cursorPositions, (cP: { timestamp: number; }, idx: number) => { const cP = myFindLast(cursorPositions, (cP: { timestamp: number }, idx: number) => {
if ( if (
cP.timestamp < currentTimestamp + transitionTime && cP.timestamp < currentTimestamp + transitionTime &&
idx > this.cursorPositionsIdx idx > this.cursorPositionsIdx
front/views/PlayView.tsx
+92 -97
View File
@@ -152,7 +152,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
console.log('Websocket closed', endMsgReceived); console.log('Websocket closed', endMsgReceived);
if (!endMsgReceived) { if (!endMsgReceived) {
toast.show({ description: 'Connection lost with Scorometer' }); toast.show({ description: 'Connection lost with Scorometer' });
// the special case when the front send the end message succesfully // the special case when the front send the end message succesfully
// but the websocket is closed before the end message is received // but the websocket is closed before the end message is received
// is not handled // is not handled
return; return;
@@ -268,109 +268,104 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
} }
return ( return (
<SafeAreaView style={{ flexGrow: 1, flexDirection: 'column' }}> <SafeAreaView style={{ flexGrow: 1, flexDirection: 'column' }}>
<HStack <HStack
width="100%" width="100%"
justifyContent="center" justifyContent="center"
p={3} p={3}
style={{ position: 'absolute', top: 1 }} style={{ position: 'absolute', top: 1 }}
> >
<Animated.View style={{ opacity: fadeAnim }}> <Animated.View style={{ opacity: fadeAnim }}>
<TextButton <TextButton
disabled disabled
label={lastScoreMessage?.content ?? ''} label={lastScoreMessage?.content ?? ''}
colorScheme={lastScoreMessage?.color} colorScheme={lastScoreMessage?.color}
rounded="sm" rounded="sm"
/>
</Animated.View>
</HStack>
<View style={{ flexGrow: 1, justifyContent: 'center' }}>
<PartitionCoord
file={musixml.data}
timestamp={time}
onEndReached={onEnd}
onPause={onPause}
onResume={onResume}
onPartitionReady={() => setPartitionRendered(true)}
/> />
{!partitionRendered && <LoadingComponent />} </Animated.View>
</View> </HStack>
<View style={{ flexGrow: 1, justifyContent: 'center' }}>
<PartitionCoord
file={musixml.data}
timestamp={time}
onEndReached={onEnd}
onPause={onPause}
onResume={onResume}
onPartitionReady={() => setPartitionRendered(true)}
/>
{!partitionRendered && <LoadingComponent />}
</View>
<Box <Box
shadow={4} shadow={4}
style={{ style={{
height: '12%', height: '12%',
width: '100%', width: '100%',
borderWidth: 0.5, borderWidth: 0.5,
margin: 5, margin: 5,
display: !partitionRendered ? 'none' : undefined, display: !partitionRendered ? 'none' : undefined,
}} }}
> >
<Row <Row justifyContent="space-between" style={{ flexGrow: 1, alignItems: 'center' }}>
justifyContent="space-between" <Column
style={{ flexGrow: 1, alignItems: 'center' }} space={2}
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
> >
<Column <Text style={{ fontWeight: 'bold' }}>Score: {score}%</Text>
space={2} <Progress value={score} style={{ width: '90%' }} />
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} </Column>
> <Center style={{ flex: 1, alignItems: 'center' }}>
<Text style={{ fontWeight: 'bold' }}>Score: {score}%</Text> <Text style={{ fontWeight: '700' }}>{song.data.name}</Text>
<Progress value={score} style={{ width: '90%' }} /> </Center>
</Column> <Row
<Center style={{ flex: 1, alignItems: 'center' }}> style={{
<Text style={{ fontWeight: '700' }}>{song.data.name}</Text> flex: 1,
</Center> height: '100%',
<Row justifyContent: 'space-evenly',
style={{ alignItems: 'center',
flex: 1, }}
height: '100%', >
justifyContent: 'space-evenly', {midiKeyboardFound && (
alignItems: 'center', <>
}} <IconButton
> size="sm"
{midiKeyboardFound && ( variant="solid"
<> icon={<Icon as={Ionicons} name={paused ? 'play' : 'pause'} />}
<IconButton onPress={() => {
size="sm" if (paused) {
variant="solid" onResume();
icon={ } else {
<Icon as={Ionicons} name={paused ? 'play' : 'pause'} /> onPause();
} }
onPress={() => { }}
if (paused) { />
onResume(); <Text>
} else { {time < 0
onPause(); ? paused
} ? '0:00'
}} : Math.floor((time % 60000) / 1000)
/>
<Text>
{time < 0
? paused
? '0:00'
: Math.floor((time % 60000) / 1000)
.toFixed(0)
.toString()
: `${Math.floor(time / 60000)}:${Math.floor(
(time % 60000) / 1000
)
.toFixed(0) .toFixed(0)
.toString() .toString()
.padStart(2, '0')}`} : `${Math.floor(time / 60000)}:${Math.floor(
</Text> (time % 60000) / 1000
<IconButton )
size="sm" .toFixed(0)
colorScheme="coolGray" .toString()
variant="solid" .padStart(2, '0')}`}
icon={<Icon as={Ionicons} name="stop" />} </Text>
onPress={() => { <IconButton
onEnd(); size="sm"
}} colorScheme="coolGray"
/> variant="solid"
</> icon={<Icon as={Ionicons} name="stop" />}
)} onPress={() => {
</Row> onEnd();
}}
/>
</>
)}
</Row> </Row>
</Box> </Row>
</Box>
</SafeAreaView> </SafeAreaView>
); );
}; };