Added fix to item quantity, added ability to render rarity (color and…

… text), and fixed sizing issues.
danny-zou18 · Oct 15, 2024 · f2abc7b · f2abc7b
1 parent b16b2a2
commit f2abc7b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 10 deletions.
diff --git a/lifescape-app/app/(app)/(tabs)/character/index.tsx b/lifescape-app/app/(app)/(tabs)/character/index.tsx
@@ -39,17 +39,54 @@ const Inventory = () => {
     fetchInventory();
   }, []);
 
+  // Function to get color based on rarity
+  const getRarityColor = (rarity) => {
+    switch (rarity) {
+      case 1:
+        return "#d3d3d3"; // Common - Light Gray
+      case 2:
+        return "#00ff00"; // Uncommon - Green
+      case 3:
+        return "#0000ff"; // Rare - Blue
+      case 4:
+        return "#800080"; // Epic - Purple
+      case 5:
+        return "#ffa500"; // Legendary - Orange
+      default:
+        return "#ffffff"; // Default - White
+    }
+  };
+
+  // Function to get rarity text based on rarity
+  const getRarityText = (rarity) => {
+    switch (rarity) {
+      case 1:
+        return "Common";
+      case 2:
+        return "Uncommon";
+      case 3:
+        return "Rare";
+      case 4:
+        return "Epic";
+      case 5:
+        return "Legendary";
+      default:
+        return "Default";
+    }
+  };
+
   // Render each item in the inventory
   const renderItem = ({
     item,
   }: {
-    item: { id: string; name: string; quantity: number; URL: string };
+    item: { id: string; name: string; Quantity: number; URL: string; cost: number; rarity: number };
   }) => (
-    <View style={styles.itemContainer}>
+    <View style={[styles.itemContainer, { backgroundColor: getRarityColor(item.rarity) }]}>
       <Image source={{ uri: item.URL }} style={styles.itemImage} />
       <View style={styles.textContainer}>
-        <Text style={styles.itemText}>{item.name}</Text>
-        <Text style={styles.quantityText}>Qty: {item.quantity}</Text>
+        <Text style={styles.itemText}>{item.name} ({getRarityText(item.rarity)})</Text>
+        <Text style={styles.itemText}>Cost: {item.cost}💸</Text>
+        <Text style={styles.quantityText}>Qty: {item.Quantity}</Text>
       </View>
     </View>
   );
@@ -92,28 +129,26 @@ const styles = StyleSheet.create({
     marginBottom: 20,
   },
   itemContainer: {
-    flex: 1,
     flexDirection: "row",
     alignItems: "center",
     padding: 10,
     margin: 5,
-    backgroundColor: "#fff",
     borderRadius: 5,
     shadowColor: "#000",
     shadowOpacity: 0.1,
     shadowRadius: 5,
     elevation: 3,
-    width: "48%", // Set the width to allow 2 columns
+    width: "50%",
   },
   textContainer: {
     flex: 1,
     marginLeft: 10,
   },
   itemText: {
-    fontSize: 18,
+    fontSize: 14,
   },
   quantityText: {
-    fontSize: 16,
+    fontSize: 12,
     fontWeight: "bold",
     marginTop: 5,
   },

diff --git a/lifescape-server/src/routes/items.ts b/lifescape-server/src/routes/items.ts
@@ -102,7 +102,8 @@ router.get("/get/:userId/:characterId", async (req, res) => {
     try {
         const authUser = await auth().verifyIdToken(authToken as string);
         if (authUser.uid !== userId) {
-        res.status(403).json({ error: "Unauthorized" });
+            res.status(403).json({ error: "Unauthorized" });
+            return;
         }
     } catch (e) {
         return res.status(401).json({ error: "Unauthorized" });
@@ -113,6 +114,16 @@ router.get("/get/:userId/:characterId", async (req, res) => {
             where: {
                 CharacterId: parseInt(characterId),
             },
+            select: {
+                id: true,
+                name: true,
+                description: true,
+                cost: true,
+                rarity: true,
+                type: true,
+                URL: true,
+                Quantity: true,
+            },
         });
         res.status(200).json(items);
     } catch (error) {