From 0881a4e6e00ba45cb9947107bfa0acaa55709e9d Mon Sep 17 00:00:00 2001
From: Rob Walker <hi@robwalker.co>
Date: Sat, 4 Nov 2023 17:43:52 +0000
Subject: [PATCH] Step 3

---
 App.js | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/App.js b/App.js
index 369539b..d962eae 100644
--- a/App.js
+++ b/App.js
@@ -55,7 +55,18 @@ const Game = () => {
     ],
   }));
 
-  // Setup the device motion sensor listener
+  // Start with the target in a random position
+  const targetAnimation = useSharedValue(getRandomTargetPosition());
+
+  // Create the target styles based on the current ballAnimation value
+  const targetPosition = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: targetAnimation.value.x },
+      { translateY: targetAnimation.value.y },
+    ],
+  }));
+
+  // Setup the device motion sensor listner
   React.useEffect(() => {
     // Set the update interval to 16ms (60fps)
     DeviceMotion.setUpdateInterval(16);
@@ -79,6 +90,8 @@ const Game = () => {
 
   return (
     <View style={styles.container}>
+      <Reanimated.View style={[styles.target, targetPosition]} />
+
       <Reanimated.View style={[styles.ball, ballPosition]} />
     </View>
   );
@@ -96,4 +109,12 @@ const styles = StyleSheet.create({
     borderRadius: BALL_WIDTH,
     backgroundColor: "red",
   },
+  target: {
+    position: "absolute",
+    width: TARGET_WIDTH,
+    height: TARGET_WIDTH,
+    borderRadius: TARGET_WIDTH,
+    borderWidth: TARGET_BORDER_WIDTH,
+    borderColor: "blue",
+  },
 });