Merge pull request #32 from ReflectionsProjections/prizeSVG

Prize svg

Components/CurrentEventCard.tsx

@@ -18,7 +18,7 @@ import CustomModal from "./CustomModal"; // Import the custom modal
 // import AppLoading from "expo-app-loading";
 import Colors from "../constants/Colors";
 
-import {formatTime} from "../navigation/DayEvent";
+import { formatTime } from "../navigation/DayEvent";
 
 import EvilIcons from "@expo/vector-icons/EvilIcons";
 
@@ -52,9 +52,9 @@ const CurrentEventCard = ({
   const start = new Date(startTime);
   const end = new Date(endTime);
 
-//   console.log("CURRENT", currentTime);
-//   console.log("START", start);
-//   console.log("END", end);
+  //   console.log("CURRENT", currentTime);
+  //   console.log("START", start);
+  //   console.log("END", end);
   // Check if current time is within the event's duration
   const isOngoing = currentTime >= start && currentTime <= end;
 
@@ -78,7 +78,7 @@ const CurrentEventCard = ({
               </View>
               <View style={styles.infoItem}>
                 <Image
-                  source={require("../assets/token.png")}
+                  source={require("../assets/pixel.png")}
                   style={styles.tokenImage}
                 ></Image>
                 <Text style={styles.infoText}> x{points}</Text>

Components/PrizeSVG.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { StyledText } from "./Text";
+
+import Question1 from "../assets/SVGs/myRP/blue-question.svg";
+import Question2 from "../assets/SVGs/myRP/purple-question.svg";
+import Question3 from "../assets/SVGs/myRP/pink-question.svg";
+import Button from "../assets/SVGs/myRP/button.svg";
+import ToteBag from "../assets/SVGs/myRP/tote-bag.svg";
+import Cap from "../assets/SVGs/myRP/cap.svg";
+
+interface PrizeSVGProps {
+  prizeNum: number;
+  attendeePoints: number;
+  token: string;
+}
+
+const PrizeSVG: React.FC<PrizeSVGProps> = ({
+  prizeNum,
+  attendeePoints,
+  token,
+}) => {
+  const size = 100;
+
+  const getSVG = () => {
+    if (token) {
+      // Map SVGs based on prizeNum and attendeePoints
+      const svgMap: { [key: number]: JSX.Element } = {
+        1: attendeePoints >= 20 ? <Button width={size} height={size}/> : <Question1 width={size} height={size}/>,
+        2: attendeePoints >= 35 ? <ToteBag width={size} height={size}/> : <Question2 width={size} height={size}/>,
+        3: attendeePoints >= 50 ? <Cap width={size} height={size}/> : <Question3 width={size} height={size}/>,
+      };
+      return svgMap[prizeNum] || <Text>No SVG available</Text>;
+    } else {
+      const svgMap: { [key: number]: JSX.Element } = {
+        1: <Question1 width={size} height={size}/>,
+        2: <Question2 width={size} height={size}/>,
+        3: <Question3 width={size} height={size}/>,
+      };
+      return svgMap[prizeNum] || <Text>No SVG available</Text>;
+    }
+  };
+
+  return getSVG();
+};
+
+export default PrizeSVG;

components/EventCard.tsx

@@ -56,7 +56,7 @@ const EventCard = ({ name, time, location, description, points }) => {
               </View>
               <View style={styles.infoItem}>
                 <Image
-                  source={require("../assets/token.png")}
+                  source={require("../assets/pixel.png")}
                   style={styles.tokenImage}
                 ></Image>
                 <Text style={styles.infoText}> x{points}</Text>
@@ -123,7 +123,7 @@ const styles = StyleSheet.create({
     fontWeight: "bold",
   },
   tokenImage: {
-    width: 20, 
+    width: 20,
     height: 20,
   },
   description: {

components/EventModal.tsx

@@ -35,7 +35,7 @@ const EventModal = ({ title, location, time, points, description }) => {
             </View> */}
           <View style={styles.infoItem}>
             <Image
-              source={require("../assets/token.png")}
+              source={require("../assets/pixel.png")}
               style={styles.tokenImage}
             ></Image>
             <Text style={styles.infoText}> x{points}</Text>
@@ -69,7 +69,7 @@ const styles = StyleSheet.create({
     paddingRight: 25,
     color: "black",
     fontFamily: "Kufam_700Bold",
-    paddingRight: 25
+    paddingRight: 25,
   },
   info: {
     flexDirection: "row",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rp-mobile-2024",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",

screens/Login.tsx

@@ -34,19 +34,19 @@ const Login: React.FC<LoginProps> = ({ navigation }) => {
   }, [token, navigation]);
 
   const handleLoginPress = () => {
-     WebBrowser.openAuthSessionAsync(
-       `${authUrl}?redirect_uri=${redirectURL}`,
-       redirectURL
-     )
-       .then((result) => {
-         if (result.type === "success") {
-           Linking.openURL(result.url);
-         }
-       })
-       .catch((err) => {
-         console.error("Failed to open URL:", err.message);
-         alert("Failed to open URL");
-       });
+    WebBrowser.openAuthSessionAsync(
+      `${authUrl}?redirect_uri=${redirectURL}`,
+      redirectURL
+    )
+      .then((result) => {
+        if (result.type === "success") {
+          Linking.openURL(result.url);
+        }
+      })
+      .catch((err) => {
+        console.error("Failed to open URL:", err.message);
+        alert("Failed to open URL");
+      });
   };
 
   return (

screens/Shop.tsx

@@ -9,11 +9,9 @@ import {
 } from "@expo-google-fonts/press-start-2p";
 import AppLoading from "expo-app-loading";
 
-import Question1 from "../assets/SVGs/question_1.svg"
-import Question2 from "../assets/SVGs/purple-question_1.svg"
-import Question3 from "../assets/SVGs/pink-question_1.svg"
+import PrizeSVG from "../Components/PrizeSVG";
 
-import VerticalProgressBar from '../Components/VerticalProgressBar';
+import VerticalProgressBar from "../Components/VerticalProgressBar";
 import { getPoints } from "../api/getPoints";
 
 const Shop: React.FC = () => {
@@ -31,14 +29,14 @@ const Shop: React.FC = () => {
       } catch (error) {
         console.error("error fetching points for user:", error);
       }
-    }
+    };
     fetchUserPoints(); // Fetch points when component mounts
   }, [token]); // Empty dependency array means this effect runs once on mount
 
   if (!fontsLoaded) {
     return <AppLoading />;
   }
-
+  
   return (
     <SafeAreaView style={styles.safeArea}>
       <View style={styles.container}>
@@ -48,49 +46,48 @@ const Shop: React.FC = () => {
         <View style={styles.pointsContainer}>
           <Text style={styles.points}>Your Points:</Text>
           <Image
-            source={require("../assets/token.png")}
+            source={require("../assets/pixel.png")}
             style={styles.tokenImage}
           />
           <Text style={styles.myPoints}>x{userPoints}</Text>
         </View>
         <View style={styles.photoContainer}>
           <View style={styles.leftSide}>
             <View style={styles.photoWithPoints}>
-              {/* <Image
-                source={{ uri: "https://via.placeholder.com/100" }}
-                style={styles.smallPhoto}
-              /> */}
-              <Question1 //might have to consolidate this into single component
-                width={100}
-                height={100}
+              <PrizeSVG
+                prizeNum={3}
+                attendeePoints={userPoints}
+                token={token}
               />
               <Image
-                source={require("../assets/token.png")}
+                source={require("../assets/pixel.png")}
                 style={styles.tokenImage}
               />
               <Text style={styles.points}>x{50}</Text>
             </View>
             <View style={styles.photoWithPoints}>
-              <Question2
-                width={100}
-                height={100}
+              <PrizeSVG
+                prizeNum={2}
+                attendeePoints={userPoints}
+                token={token}
               />
               <Image
-                source={require("../assets/token.png")}
+                source={require("../assets/pixel.png")}
                 style={styles.tokenImage}
               />
               <Text style={styles.points}>x{35}</Text>
             </View>
             <View style={styles.photoWithPoints}>
-            <Question3
-              width={100}
-              height={100}
+              <PrizeSVG
+                prizeNum={1}
+                attendeePoints={userPoints}
+                token={token}
               />
               <Image
-                source={require("../assets/token.png")}
+                source={require("../assets/pixel.png")}
                 style={styles.tokenImage}
               />
-              <Text style={styles.points}>x{25}</Text>
+              <Text style={styles.points}>x{20}</Text>
             </View>
           </View>
           <View style={styles.progressBarContainer}>
@@ -155,7 +152,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     marginBottom: 10,
-    // backgroundColor: 'red'
+    // backgroundColor: 'green'
   },
   smallPhoto: {
     width: 100,