Initial Expo MVP

src/components/LevelIndicator.tsx

@@ -0,0 +1,71 @@
+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',
+  },
+});