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

Front: Play Page: Add correct info in top-right coard

Browse Source
This commit is contained in:
Arthur Jamet
2023-11-19 11:52:26 +01:00
parent 005cc7410f
commit b0b5579cb3
2 changed files with 21 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/views/PlayView.tsx
+21 -37
View File
@@ -20,7 +20,7 @@ import API from '../API';
import LoadingComponent, { LoadingView } from '../components/Loading';
import { useSelector } from 'react-redux';
import { RootState } from '../state/Store';
import { translate } from '../i18n/i18n';
import { Translate, translate } from '../i18n/i18n';
import { ColorSchemeType } from 'native-base/lib/typescript/components/types';
import { useStopwatch } from 'react-use-precision-timer';
import { MIDIAccess, MIDIMessageEvent, requestMIDIAccess } from '@arthi-chaud/react-native-midi';
@@ -35,6 +35,7 @@ import { LinearGradient } from 'expo-linear-gradient';
import { useTheme } from 'native-base';
import PopupCC from '../components/UI/PopupCC';
import ButtonBase from '../components/UI/ButtonBase';
import { Clock, Cup } from 'iconsax-react-native';
type PlayViewProps = {
songId: number;
@@ -77,27 +78,6 @@ export const PianoCC = createContext<PianoCanvasContext>({
messages: [],
});
const infoCardInfos = [
{
icon: <Ionicons name="timer-outline" size={18} color="#6075F9" />,
label: 'Last Score',
id: 'lastScore',
value: 60,
},
{
icon: <Ionicons name="trophy-outline" size={18} color="#6075F9" />,
label: 'Best Score',
id: 'bestScore',
value: 60,
},
{
icon: <Ionicons name="bar-chart-outline" size={18} color="#6075F9" />,
label: 'Level',
id: 'level',
value: 3,
},
] as const;
const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
const [type, setType] = useState<'practice' | 'normal'>();
const accessToken = useSelector((state: RootState) => state.user.accessToken);
@@ -110,6 +90,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
const [paused, setPause] = useState<boolean>(true);
const stopwatch = useStopwatch();
const [time, setTime] = useState(0);
const songHistory = useQuery(API.getSongHistory(songId), { refetchOnWindowFocus: true });
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;
@@ -128,7 +109,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
});
const colorScheme = useColorScheme();
const { colors } = useTheme();
const textColor = colorScheme == 'dark' ? colors.lightText : colors.coolGray;
const textColor = colorScheme == 'dark' ? colors.lightText : colors.coolGray[800];
const onPause = () => {
stopwatch.pause();
@@ -322,7 +303,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
}
}, [song.data, partitionRendered]);
if (!song.data) {
if (!song.data || !songHistory.data) {
return <LoadingView />;
}
return (
@@ -376,9 +357,12 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
/>
</Row>
</PopupCC>
{infoCardInfos.map((info) => (
{/* eslint-disable-next-line react/jsx-key*/}
{([['lastScore', songHistory.data.best ?? 0, <Clock color={textColor.toString()}/>], ['bestScore', songHistory.data.history.at(0)?.score ?? 0, <Cup color={textColor.toString()}/>]] as const)
.map(([label, value, icon]) => (
<View
key={info.id}
key={label}
style={{
display: 'flex',
flexDirection: 'column',
@@ -386,8 +370,8 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
alignItems: 'center',
}}
>
<Text color={textColor[700]} fontSize={12}>
{info.label}
<Text color={textColor} fontSize={12}>
<Translate translationKey={label}/>
</Text>
<View
style={{
@@ -396,9 +380,9 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
gap: 5,
}}
>
{info.icon}
<Text color={textColor[800]} fontSize={12} bold>
{info.value}
{icon}
<Text color={textColor} fontSize={12} bold>
{value}
</Text>
</View>
</View>
@@ -426,7 +410,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
borderRadius: 12,
}}
>
<Text color={textColor[900]} fontSize={24}>
<Text color={textColor} fontSize={24}>
{score}
</Text>
</View>
@@ -444,10 +428,10 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
borderRadius: 12,
}}
>
<Text color={textColor[900]} fontSize={20}>
<Text color={textColor} fontSize={20}>
{lastScoreMessage?.content}
</Text>
<Text color={textColor[900]} fontSize={15} bold>
<Text color={textColor} fontSize={15} bold>
{streak > 0 && `x${streak}`}
</Text>
</View>
@@ -532,7 +516,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
}}
>
<Text
color={textColor[800]}
color={textColor}
fontSize={14}
maxW={'100%'}
isTruncated
@@ -540,7 +524,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
{song.data.name}
</Text>
<Text
color={textColor[900]}
color={textColor}
fontSize={12}
maxW={'100%'}
isTruncated
@@ -586,7 +570,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
/>
</>
)}
<Text color={textColor[900]}>
<Text color={textColor}>
{time < 0
? paused
? '0:00'
front/views/SongLobbyView.tsx
-122
View File
@@ -1,122 +0,0 @@
import { Box, Image, Text, Icon, Stack } from 'native-base';
import { useQuery } from '../Queries';
import { LoadingView } from '../components/Loading';
import { Translate } from '../i18n/i18n';
import { Ionicons } from '@expo/vector-icons';
import API from '../API';
import TextButton from '../components/TextButton';
import { RouteProps, useNavigation } from '../Navigation';
import ScoreGraph from '../components/ScoreGraph';
import DurationComponent from '../components/DurationComponent';
interface SongLobbyProps {
// The unique identifier to find a song
songId: number;
}
const SongLobbyView = (props: RouteProps<SongLobbyProps>) => {
const rootComponentPadding = 30;
const navigation = useNavigation();
// Refetch to update score when coming back from score view
const songQuery = useQuery(API.getSong(props.songId), { refetchOnWindowFocus: true });
const chaptersQuery = useQuery(API.getSongChapters(props.songId), {
refetchOnWindowFocus: true,
});
const scoresQuery = useQuery(API.getSongHistory(props.songId), { refetchOnWindowFocus: true });
if (songQuery.isLoading || scoresQuery.isLoading) return <LoadingView />;
if (songQuery.isError || scoresQuery.isError) {
navigation.navigate('Error');
return <></>;
}
return (
<Box style={{ padding: rootComponentPadding, flexDirection: 'column' }}>
<Box style={{ flexDirection: 'row', height: '30%' }}>
<Box style={{ flex: 3 }}>
<Image
source={{ uri: songQuery.data!.cover }}
alt={songQuery.data?.name}
style={{
height: '100%',
width: undefined,
resizeMode: 'contain',
aspectRatio: 1,
}}
/>
</Box>
<Box style={{ flex: 0.5 }} />
<Box
style={{
flex: 3,
padding: 10,
flexDirection: 'column',
justifyContent: 'space-between',
}}
>
<Stack flex={1} space={3}>
<Text bold isTruncated numberOfLines={2} fontSize="lg">
{songQuery.data!.name}
</Text>
<Text>
<Translate
translationKey="level"
format={(level) =>
`${level}: ${
chaptersQuery.data!.reduce((a, b) => a + b.difficulty, 0) /
chaptersQuery.data!.length
}`
}
/>
</Text>
<DurationComponent length={songQuery.data?.details.length} />
<TextButton
translate={{ translationKey: 'playBtn' }}
width="auto"
onPress={() =>
navigation.navigate('Play', {
songId: songQuery.data!.id,
type: 'normal',
})
}
rightIcon={<Icon as={Ionicons} name="play-outline" />}
/>
<TextButton
translate={{ translationKey: 'practiceBtn' }}
width="auto"
onPress={() =>
navigation.navigate('Play', {
songId: songQuery.data!.id,
type: 'practice',
})
}
rightIcon={<Icon as={Ionicons} name="play-outline" />}
colorScheme="secondary"
/>
</Stack>
</Box>
</Box>
<Box
style={{
flexDirection: 'row',
justifyContent: 'space-between',
padding: 30,
}}
>
<Box style={{ flexDirection: 'column', alignItems: 'center' }}>
<Text bold fontSize="lg">
<Translate translationKey="bestScore" />
</Text>
<Text>{scoresQuery.data?.best ?? 0}</Text>
</Box>
<Box style={{ flexDirection: 'column', alignItems: 'center' }}>
<Text bold fontSize="lg">
<Translate translationKey="lastScore" />
</Text>
<Text>{scoresQuery.data?.history.at(0)?.score ?? 0}</Text>
</Box>
</Box>
<ScoreGraph />
</Box>
);
};
export default SongLobbyView;