57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { StyleSheet, Text, TextInput, View } from "react-native";
|
|
import Slider from '@react-native-community/slider';
|
|
import { useEffect, useState } from "react";
|
|
|
|
type PercentDamageProps = {
|
|
onSetPercentage: (percent: number) => any;
|
|
}
|
|
|
|
function getDamangeColor(damage : number) {
|
|
if (damage === 0) return "black";
|
|
if (damage <= 20) return "blue";
|
|
if (damage <= 50) return "orange";
|
|
return "red";
|
|
}
|
|
|
|
export default function PercentDamage({ onSetPercentage }: PercentDamageProps) {
|
|
const [damage, setDamage] = useState(0);
|
|
const [damageColor, setDamageColor] = useState("black");
|
|
function doOnChangeText(val: number) {
|
|
setDamage(val || 0);
|
|
onSetPercentage((val / 100) || 0);
|
|
setDamageColor(getDamangeColor(val || 0));
|
|
}
|
|
|
|
return (
|
|
<View style={styles.wrapper}>
|
|
<Slider
|
|
minimumValue={0}
|
|
maximumValue={100}
|
|
step={5}
|
|
onValueChange={doOnChangeText}
|
|
/>
|
|
<Text style={{ ...styles.label, color: damageColor }}> {damage}% Damage</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrapper: {
|
|
padding: 5,
|
|
},
|
|
input: {
|
|
flex: 1,
|
|
margin: 5,
|
|
padding: 5,
|
|
borderWidth: 2,
|
|
borderColor: "lightgrey",
|
|
borderStyle: "solid",
|
|
},
|
|
label: {
|
|
margin: 5,
|
|
alignSelf: "center",
|
|
fontSize: 20,
|
|
fontWeight: "bold",
|
|
fontStyle: "italic",
|
|
}
|
|
}) |