72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import { StyleSheet, Text, View } from 'react-native';
|
|
|
|
type LevelIndicatorProps = {
|
|
isLevel: boolean;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
|
|
export function LevelIndicator({ isLevel, x, y }: LevelIndicatorProps) {
|
|
const bubbleOffsetX = Math.max(-44, Math.min(44, x * 4));
|
|
const bubbleOffsetY = Math.max(-44, Math.min(44, y * 4));
|
|
|
|
return (
|
|
<View style={[styles.wrapper, isLevel ? styles.level : styles.notLevel]}>
|
|
<View style={styles.crosshairHorizontal} />
|
|
<View style={styles.crosshairVertical} />
|
|
<View style={[styles.bubble, { transform: [{ translateX: bubbleOffsetX }, { translateY: bubbleOffsetY }] }]} />
|
|
<Text style={styles.status}>{isLevel ? 'Gerade' : 'Nicht gerade'}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrapper: {
|
|
alignItems: 'center',
|
|
alignSelf: 'center',
|
|
borderRadius: 999,
|
|
borderWidth: 10,
|
|
height: 230,
|
|
justifyContent: 'center',
|
|
marginVertical: 26,
|
|
overflow: 'hidden',
|
|
width: 230,
|
|
},
|
|
level: {
|
|
backgroundColor: '#052e16',
|
|
borderColor: '#22c55e',
|
|
},
|
|
notLevel: {
|
|
backgroundColor: '#431407',
|
|
borderColor: '#f97316',
|
|
},
|
|
crosshairHorizontal: {
|
|
backgroundColor: 'rgba(248, 250, 252, 0.28)',
|
|
height: 2,
|
|
position: 'absolute',
|
|
width: '100%',
|
|
},
|
|
crosshairVertical: {
|
|
backgroundColor: 'rgba(248, 250, 252, 0.28)',
|
|
height: '100%',
|
|
position: 'absolute',
|
|
width: 2,
|
|
},
|
|
bubble: {
|
|
backgroundColor: '#f8fafc',
|
|
borderRadius: 999,
|
|
height: 54,
|
|
shadowColor: '#000',
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 12,
|
|
width: 54,
|
|
},
|
|
status: {
|
|
bottom: 28,
|
|
color: '#f8fafc',
|
|
fontSize: 18,
|
|
fontWeight: '900',
|
|
position: 'absolute',
|
|
},
|
|
});
|