progress bar added

- ill make it fancy later if time

frontend/assets/colorConstants.tsx

@@ -13,6 +13,7 @@ const Colors = {
   TRANSGREEN: '#366959',
   BLACKTRANS: '#000000aa',
   BLUE: 'blue',
+  TEAL: '#6bcfca'
 };
 
 export default Colors;

frontend/package.json

@@ -38,7 +38,7 @@
     "react-native-circular-progress-indicator": "^4.4.2",
     "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "^2.13.3",
-    "react-native-paper": "^5.11.1",
+    "react-native-paper": "^5.11.3",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "^4.6.3",
     "react-native-screens": "~3.22.0",

frontend/src/components/expProgressBar.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Colors from '../../assets/colorConstants';
+import { getUserLevel } from '../models/User';
+import { type ExpProgressBarProps } from './types';
+
+const ExpProgressBar: React.FC<ExpProgressBarProps> = ({ thisUser }) => {
+    const lvl = getUserLevel(thisUser); 
+    // testing--const lvl = 7;
+    const lvlThresh = [250, 500, 1000, 2000, 4000, 8000, 16000, 32000, 64000];
+    const maxExp = lvlThresh[lvl - 1];
+
+    const curr = thisUser.score;
+    // testing--const curr = 14039;
+
+  const progress = (curr / maxExp) * 100;
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.progressBar}>
+                <View style={[styles.currProgression, { width: `${progress}%` }]} />
+            </View>
+            <View style={styles.textBox}>
+                <View style={styles.levelContainer}> 
+                    <Text style={styles.texts}> Level: {lvl}</Text>
+                </View>
+                <View style={styles.progContainer}> 
+                    <Text style={styles.texts}> {`${curr}/${maxExp}`}</Text>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: 250,
+        marginVertical: 4,
+    },
+    progressBar: {
+        flexDirection: 'row',
+        height: 5,
+        backgroundColor: Colors.WHITE,
+        borderRadius: 10,
+        overflow: 'hidden',
+    },
+    currProgression:{
+        backgroundColor: Colors.TEAL, 
+        height: '100%', 
+
+    },
+    levelContainer:{
+        flex: 1,
+        justifyContent: 'flex-start',
+        paddingLeft: 5,
+    }, 
+    texts:{
+        marginTop: 5,
+        color: Colors.WHITE, 
+        fontSize: 12,
+    },
+    progContainer:{
+        justifyContent: 'flex-end',
+    },
+    textBox:{
+        flexDirection: 'row'
+    }
+});
+
+export default ExpProgressBar;

frontend/src/components/types.tsx

@@ -44,3 +44,7 @@ export interface challenge {
 export interface challengesProps {
   challenges: challenge[];
 }
+
+export interface ExpProgressBarProps {
+  thisUser: User,
+}

frontend/src/widgets/profileWidget.tsx

@@ -3,7 +3,7 @@ import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';
 import Colors from '../../assets/colorConstants';
 import { type profileWidgetBoxProps } from '../components/types';
 import { useFonts } from 'expo-font';
-import { getUserLevel } from '../models/User';
+import ExpProgressBar from '../components/expProgressBar';
 
 const ProfileWidgetBox: React.FC<profileWidgetBoxProps> = ({ photoURL, user }) => {
   const [loaded] = useFonts({
@@ -20,7 +20,9 @@ const ProfileWidgetBox: React.FC<profileWidgetBoxProps> = ({ photoURL, user }) =
         <Image source={{ uri: photoURL }} style={styles.profilePicture} />
         <View style={styles.nameBox}>
           <Text style={styles.name}> {user.full_name} </Text>
-          <Text style={styles.level}> Level: {getUserLevel(user)} </Text>
+          <View style={styles.progressBar}>
+            <ExpProgressBar thisUser={user}/>
+          </View>
           <View style={styles.buttonsContainer}>
             <TouchableOpacity style={styles.button}> 
               <Text style={styles.buttonText} > Badges </Text>
@@ -70,18 +72,14 @@ const styles = StyleSheet.create({
   buttonText:{
     color: Colors.WHITE,
   },
-  level:{
-    fontSize: 16,
-    color: Colors.WHITE
-  },
   name: {
     fontSize: 20,
     color: Colors.WHITE,
     fontWeight: '700',
   },
   nameBox: {
     top: '20%',
-    flex: 1,
+    flex: 2,
     alignItems: 'center'
   },
   profilePicture: {
@@ -90,8 +88,10 @@ const styles = StyleSheet.create({
     borderRadius: 45,
     alignItems: 'flex-start',
     top: '15%',
-
   },
+  progressBar:{
+  }
+
 });
 
 export default ProfileWidgetBox;