From 580716e01d45c05db02c09a69c65a523f3dc16e6 Mon Sep 17 00:00:00 2001
From: davidni <davidni055@gmail.com>
Date: Wed, 21 Jun 2023 17:24:59 -0400
Subject: [PATCH] Add leaderboard

---
 components/AppNavigator.js   |  15 +++--
 screens/HomeScreen.js        |  61 --------------------
 screens/LeaderboardScreen.js | 105 +++++++++++++++++++++++++++++++++++
 screens/ProfileScreen.js     |   2 +-
 screens/index.js             |   6 +-
 5 files changed, 119 insertions(+), 70 deletions(-)
 delete mode 100644 screens/HomeScreen.js
 create mode 100644 screens/LeaderboardScreen.js

diff --git a/components/AppNavigator.js b/components/AppNavigator.js
index c98b79c10..4c6322b17 100644
--- a/components/AppNavigator.js
+++ b/components/AppNavigator.js
@@ -21,11 +21,6 @@ const AppNavigator = () => {
         component={Screens.LoginScreen}
         options={{ headerShown: false }}
       />
-      <Stack.Screen
-        name="hometab"
-        component={Screens.HomeScreen}
-        options={{ headerShown: false }}
-      />
       <Stack.Screen
         name="signup"
         component={Screens.SignupScreen}
@@ -98,6 +93,16 @@ const AppNavigator = () => {
           headerTransparent: true,
         })}
       />
+      <Stack.Screen
+        name="leaderboard"
+        component={Screens.LeaderboardScreen}
+        options={({ navigation }) => ({ 
+          title: "",
+          headerShown: true,
+          headerLeft: () => <BackArrowNavigator page={"profile"} navigation={navigation}/>,
+          headerTransparent: true,
+        })}
+      />
     </Stack.Navigator>
   );
 };
diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
deleted file mode 100644
index 1ac612c67..000000000
--- a/screens/HomeScreen.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { View, Text, StyleSheet, TouchableWithoutFeedback, TouchableOpacity, Keyboard } from "react-native";
-import { useNavigation } from "@react-navigation/native";
-import { getAuth, signOut, onAuthStateChanged } from "firebase/auth";
-
-const HomeScreen = () => {
-  const navigation = useNavigation();
-  
-  /*const handleSignOut = () => {
-    const auth = getAuth();
-    signOut(auth)
-      .then(() => {
-        onAuthStateChanged(auth, (user) => {
-          if (user) {
-            console.log(`Signed out of ${user.email}`);
-          }
-        });
-        
-        let toast = Toast.show('You have signed out', {
-          duration: Toast.durations.SHORT,
-          backgroundColor: 'red',
-        });
-        
-        setTimeout(function hideToast() {
-          Toast.hide(toast);
-        }, 1500);
-        
-        navigation.navigate("login");
-      })
-      .catch((error) => {
-        alert(error.message);
-      });
-  };
-  */
-
-  return (
-    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
-      <View style={styles.container}>
-        <Text>Hello this is home screen!</Text>
-        <Text>I just created my first React App</Text>
-        <TouchableOpacity
-          style={styles.backbtn}
-          onPress={handleSignOut}
-        >
-          <Text>Click me</Text>
-        </TouchableOpacity>
-      </View>
-    </TouchableWithoutFeedback>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    marginTop: 10,
-    justifyContent: "center",
-  },
-});
-
-export default HomeScreen;
diff --git a/screens/LeaderboardScreen.js b/screens/LeaderboardScreen.js
new file mode 100644
index 000000000..dff2d679b
--- /dev/null
+++ b/screens/LeaderboardScreen.js
@@ -0,0 +1,105 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+const Leaderboard = () => {
+  const leaderboardData = [
+    { position: 1, name: "Peter", score: 1000 },
+    { position: 2, name: "Eric", score: 900 },
+    { position: 3, name: "Benedict", score: 800 },
+    { position: 4, name: "David", score: 700 },
+    { position: 5, name: "Evan", score: 600 },
+    { position: 6, name: "Wen Jun", score: 500 },
+    { position: 7, name: "Shenghan", score: 400 },
+  ];
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.podiumContainer}>
+        {leaderboardData.slice(0, 3).map((player, index) => (
+          <View key={index} style={[styles.podiumItem, podiumColors[index]]}>
+            <Text style={styles.position}>{player.position}</Text>
+            <Text style={styles.name}>{player.name}</Text>
+            <Text style={styles.score}>{player.score}</Text>
+          </View>
+        ))}
+      </View>
+      <View style={styles.listContainer}>
+        {leaderboardData.slice(3).map((player, index) => (
+          <View key={player.position} style={styles.listItem}>
+            <Text style={styles.listPosition}>{player.position}</Text>
+            <Text style={styles.listName}>{player.name}</Text>
+            <Text style={styles.listScore}>{player.score}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const podiumColors = [
+  { backgroundColor: "#FFD700", height: 100 }, // Gold for 1st position
+  { backgroundColor: "#C0C0C0", height: 70 }, // Silver for 2nd position
+  { backgroundColor: "#CD7F32", height: 50 }, // Bronze for 3rd position
+];
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#8C54FF",
+    paddingTop: "50%",
+    paddingVertical: 20,
+    paddingHorizontal: 16,
+  },
+  podiumContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 60,
+    padding: 20,
+  },
+  podiumItem: {
+    alignItems: "center",
+    width: 100,
+    height: 100,
+  },
+  podiumPosition: {
+    fontSize: 40,
+    fontWeight: "bold",
+    color: "#FFD700",
+  },
+  podiumName: {
+    fontSize: 20,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+  },
+  podiumScore: {
+    fontSize: 30,
+    color: "#FFFFFF",
+    fontWeight: "bold",
+  },
+  listContainer: {
+    flex: 1,
+  },
+  listItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 60,
+  },
+  listPosition: {
+    fontSize: 30,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+    marginRight: 10,
+  },
+  listName: {
+    flex: 1,
+    fontSize: 30,
+    color: "#FFFFFF",
+  },
+  listScore: {
+    fontSize: 30,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+  },
+});
+
+export default Leaderboard;
diff --git a/screens/ProfileScreen.js b/screens/ProfileScreen.js
index c930209e1..83efe60d1 100644
--- a/screens/ProfileScreen.js
+++ b/screens/ProfileScreen.js
@@ -79,7 +79,7 @@ const ProfileScreen = () => {
       </View>
 
       <View style={styles.tabsContainer}>
-        <TouchableOpacity style={styles.tab}>
+        <TouchableOpacity style={styles.tab} onPress={() => navigation.navigate("leaderboard")}>
           <Text style={styles.tabText}>Leaderboard</Text>
         </TouchableOpacity>
         <TouchableOpacity style={styles.tab} onPress={() => navigation.navigate("achievement")}>
diff --git a/screens/index.js b/screens/index.js
index ea45527b3..91bd324b2 100644
--- a/screens/index.js
+++ b/screens/index.js
@@ -1,4 +1,3 @@
-import HomeScreen from "./HomeScreen";
 import LoginScreen from "./LoginScreen";
 import ProfileScreen from "./ProfileScreen";
 import PushUpScreen from "./PushUpScreen";
@@ -8,8 +7,8 @@ import SignupScreen from "./SignupScreen";
 import MapScreen from "./MapScreen";
 import FriendScreen from "./FriendScreen";
 import AchievementScreen from "./AchievementScreen";
+import LeaderboardScreen from "./LeaderboardScreen";
 export {
-  HomeScreen,
   LoginScreen,
   SignupScreen,
   ProfileScreen,
@@ -18,5 +17,6 @@ export {
   RunScreen,
   MapScreen,
   FriendScreen,
-  AchievementScreen
+  AchievementScreen,
+  LeaderboardScreen
 };
\ No newline at end of file