|
@ -1,4 +1,4 @@ |
|
|
import React, { useEffect, useRef } from "react"; |
|
|
import React, { useEffect, useRef, useState } from "react"; |
|
|
import { BackHandler, SafeAreaView, Text, TouchableOpacity, View } from "react-native"; |
|
|
import { BackHandler, SafeAreaView, Text, TouchableOpacity, View } from "react-native"; |
|
|
import { styles } from './styles/AppStyles'; |
|
|
import { styles } from './styles/AppStyles'; |
|
|
import Slider from "../components/Slider"; |
|
|
import Slider from "../components/Slider"; |
|
@ -8,36 +8,65 @@ import DbAPI from "../realm/DbAPI"; |
|
|
|
|
|
|
|
|
function HighScore(){ |
|
|
function HighScore(){ |
|
|
const dispatch = useDispatch(); |
|
|
const dispatch = useDispatch(); |
|
|
const scores = useRef(DbAPI.getHighScores()); |
|
|
const scores = useRef([]); |
|
|
|
|
|
const [scoresLoaded, setScoresLoaded] = useState(false); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
BackHandler.addEventListener('hardwareBackPress', () => {return true}); |
|
|
BackHandler.addEventListener('hardwareBackPress', () => {return true}); |
|
|
}, []) |
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
if (!scoresLoaded) { |
|
|
|
|
|
loadScores() |
|
|
|
|
|
.then(() => { |
|
|
|
|
|
setTimeout( () => { |
|
|
|
|
|
setScoresLoaded(true); |
|
|
|
|
|
}, 1000) |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}, [scoresLoaded]) |
|
|
|
|
|
|
|
|
function onPressMainMenu(){ |
|
|
function onPressMainMenu(){ |
|
|
dispatch(goHome()); |
|
|
dispatch(goHome()); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const now = new Date(Date.now()); |
|
|
async function loadScores(){ |
|
|
|
|
|
scores.current = DbAPI.getHighScores(); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function renderScore(score, index){ |
|
|
return ( |
|
|
return ( |
|
|
<SafeAreaView style={[styles.flex]}> |
|
|
<Text key={index} style={[styles.largeFont, styles.darkText, styles.leftText]}> |
|
|
<View style={[styles.flex, styles.spaceAround]}> |
|
|
{(index+1) + '. '} |
|
|
<Text style={[styles.headerTitleFont, styles.centeredText, styles.darkText]}> |
|
|
<Text style={[styles.greyText]}> |
|
|
Not Implemented |
|
|
{score.value + ' - ' + score.user} |
|
|
</Text> |
|
|
</Text> |
|
|
</View> |
|
|
</Text> |
|
|
|
|
|
) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function renderScores(){ |
|
|
|
|
|
return scores.current.map((score, index) => { |
|
|
|
|
|
return renderScore(score, index); |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
|
<SafeAreaView style={[styles.flex]}> |
|
|
<View style={[styles.flex, styles.centeredItems, styles.spaceEvenly]}> |
|
|
<View style={[styles.flex, styles.centeredItems, styles.spaceEvenly]}> |
|
|
<Slider origin={400} duration={750} delay={0}> |
|
|
<Slider origin={400} duration={750} delay={0}> |
|
|
<TouchableOpacity |
|
|
<TouchableOpacity |
|
|
onPress={onPressMainMenu} |
|
|
onPress={onPressMainMenu} |
|
|
style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow]} |
|
|
style={[styles.centeredJustify, styles.darkGreen, styles.menuButton, styles.dropShadow, styles.smallMargin]} |
|
|
> |
|
|
> |
|
|
<Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}> |
|
|
<Text style={[styles.lightText, styles.headerTitleFont, styles.boldText, styles.centeredText]}> |
|
|
Main Menu |
|
|
Main Menu |
|
|
</Text> |
|
|
</Text> |
|
|
</TouchableOpacity> |
|
|
</TouchableOpacity> |
|
|
</Slider> |
|
|
</Slider> |
|
|
|
|
|
<View style={[styles.flex]}> |
|
|
|
|
|
{renderScores()} |
|
|
|
|
|
</View> |
|
|
</View> |
|
|
</View> |
|
|
</SafeAreaView> |
|
|
</SafeAreaView> |
|
|
) |
|
|
) |
|
|