You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.3 KiB
121 lines
3.3 KiB
import React from "react"
|
|
import { View, StyleSheet, Dimensions, Text, Image, ImageBackground } from "react-native"
|
|
import { colors, texts } from "../components/Variables"
|
|
|
|
const screen = Dimensions.get("window")
|
|
const imgError = require("../assets/error.jpg")
|
|
const imgUnsafe = require("../assets/unsafe.jpg")
|
|
const imgPassed = require("../assets/passed.jpg")
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
top: 0,
|
|
left: 0,
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
height: screen.height-80,
|
|
width: screen.width,
|
|
backgroundColor: colors.white_alpha
|
|
},
|
|
box: {
|
|
position: "absolute",
|
|
top: (screen.height/2)-220,
|
|
width: screen.width-50,
|
|
borderRadius: 15,
|
|
backgroundColor: colors.white_alpha,
|
|
borderColor: colors.white,
|
|
borderWidth: 4,
|
|
paddingVertical: 30
|
|
},
|
|
text: {
|
|
color: colors.white,
|
|
fontSize: 22,
|
|
textAlign: "center",
|
|
fontWeight: "400",
|
|
lineHeight: 40,
|
|
textShadowColor: 'rgba(0, 0, 0, 0.75)',
|
|
textShadowOffset: {width: -1, height: 1},
|
|
textShadowRadius: 10
|
|
},
|
|
textSmall: {
|
|
marginTop: 20,
|
|
color: colors.white,
|
|
fontSize: 26,
|
|
textAlign: "center",
|
|
fontWeight: "500",
|
|
lineHeight: 30,
|
|
textShadowColor: 'rgba(0, 0, 0, 0.75)',
|
|
textShadowOffset: {width: -1, height: 1},
|
|
textShadowRadius: 10
|
|
},
|
|
textLabel: {
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 20
|
|
},
|
|
correct: {
|
|
color: colors.green
|
|
},
|
|
wrong: {
|
|
color: colors.red
|
|
},
|
|
unsafe: {
|
|
color: colors.yellow
|
|
},
|
|
bg: {
|
|
width: "100%",
|
|
height: "100%",
|
|
borderRadius: 5
|
|
},
|
|
bgStyle: {
|
|
borderRadius: 0,
|
|
opacity: 0.8,
|
|
borderColor: colors.white_alpha,
|
|
borderWidth: 0
|
|
}
|
|
})
|
|
|
|
export const Results = ({ results, visible }) => {
|
|
if (!visible) return null
|
|
|
|
//const percentage = results.totalPoints ? (100/results.totalPoints) * results.points : 0
|
|
const percentage = results.total ? (100/results.total) * results.correct : 0
|
|
let bgImage = results.points >= 80 ? results.points >= 85 ? imgPassed : imgUnsafe : imgError
|
|
//let imgPanoramaResult = results.points >= 80 ? imgPanorama : imgPanorama2
|
|
|
|
if(!results.isExam) {
|
|
bgImage = percentage >= 80 ? percentage >= 85 ? imgPassed : imgUnsafe : imgError
|
|
//imgPanoramaResult = percentage >= 80 ? imgPanorama : imgPanorama2
|
|
}
|
|
|
|
return (
|
|
|
|
<ImageBackground source={bgImage} style={[styles.bg, styles.container]} resizeMode="cover">
|
|
|
|
<View style={styles.box}>
|
|
|
|
<Text style={styles.text}>
|
|
<Text style={styles.textLabel}>{`${texts.corrects}: ${results.correct}`}</Text>
|
|
</Text>
|
|
<Text style={styles.text}>
|
|
<Text style={styles.textLabel}>{`${texts.wrongs}: ${results.wrong}`}</Text>
|
|
</Text>
|
|
<Text style={styles.text}>
|
|
<Text style={styles.textLabel}>{`${texts.percentage}: ${Math.round(percentage)}%`}</Text>
|
|
</Text>
|
|
<Text style={styles.text}>
|
|
<Text style={styles.textLabel}>{`${texts.points}: ${results.points}/${results.totalPoints}`}</Text>
|
|
</Text>
|
|
|
|
{results.isExam ?
|
|
<Text style={styles.textSmall}>
|
|
{results.points >= 80 ? results.points >= 85 ? texts.exam_passed : texts.exam_needs_oral : texts.exam_not_passed}
|
|
</Text> : <Text/>
|
|
}
|
|
|
|
</View>
|
|
|
|
</ImageBackground>
|
|
|
|
)
|
|
}
|