added backend routes for update image elo + get random image and made…

… changes to vote.js

Backend/backend.py

@@ -43,6 +43,39 @@ def generate_image():
 
     return r.json()
 
+#gets a random image from the database
+@app.route("/get_random_image", methods=["GET"])
+def get_random_image():
+    try:
+        # Randomly select an image
+        image = Image.objects.aggregate([{'$sample': {'size': 1}}]).next()
+        return jsonify(image), 200
+    except StopIteration:
+        # No images found in the database
+        return jsonify({"error": "No images available"}), 404
+    except Exception as e:
+        # Handle other exceptions
+        return jsonify({"error": str(e)}), 500
+
+@app.route("/update_image_elo", methods=["POST"])
+def update_image_elo():
+    data = request.get_json()
+    try:
+        # Update Image One
+        image_one = Image.objects.get(id=data["imageIdOne"])
+        image_one.votes = data["newEloOne"]
+        image_one.save()
+
+        # Update Image Two
+        image_two = Image.objects.get(id=data["imageIdTwo"])
+        image_two.votes = data["newEloTwo"]
+        image_two.save()
+
+        return jsonify({"message": "ELO ratings updated successfully"}), 200
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
 
 @app.route("/store_image", methods=["POST"])
 def store_image():

Frontend/src/pages/vote.js

@@ -1,46 +1,71 @@
 import Link from "next/link";
 import { useState, useEffect } from "react";
 import eloRating from "elo-rating";
+import axios from "axios"; // Import axios for API requests
 
 export default function Vote() {
   const [eloOne, setEloOne] = useState(1000);
   const [eloTwo, setEloTwo] = useState(1000);
-  const [imageOne, setImageOne] = useState("/path/to/dummy/image1.jpg");
-  const [imageTwo, setImageTwo] = useState("/path/to/dummy/image2.jpg");
+  const [imageOne, setImageOne] = useState({});
+  const [imageTwo, setImageTwo] = useState({});
 
-  // Function to calculate ELO exchange
-  const vote = (winner) => {
+  // Fetch random images from backend
+  const fetchRandomImages = async () => {
+    try {
+      const responseOne = await axios.get('/get_random_image');
+      const responseTwo = await axios.get('/get_random_image');
+      setImageOne(responseOne.data);
+      setImageTwo(responseTwo.data);
+      // Update ELOs if needed
+      setEloOne(responseOne.data.votes || 1000);
+      setEloTwo(responseTwo.data.votes || 1000);
+    } catch (error) {
+      console.error("Error fetching images:", error);
+    }
+  };
+
+  // Function to calculate ELO exchange and update backend
+  const vote = async (winner) => {
     let result = eloRating.calculate(eloOne, eloTwo, winner === 1);
     setEloOne(result.playerRating);
     setEloTwo(result.opponentRating);
+
+    // API call to update the ELO rating in the backend
+    // You need to create this endpoint in your backend
+    await axios.post('/update_image_elo', {
+      imageIdOne: imageOne.id,
+      newEloOne: result.playerRating,
+      imageIdTwo: imageTwo.id,
+      newEloTwo: result.opponentRating,
+    });
   };
 
-  // Function to load new images and reset ELO on each page load
+
+
+
+  // Load new images on each page load
   useEffect(() => {
-    setImageOne("/image1.png");
-    setImageTwo("/image2.webp");
-    setEloOne(1000);
-    setEloTwo(1000);
+    fetchRandomImages();
   }, []);
 
   return (
     <div className="p-6">
       <nav className="mb-8 flex justify-between items-center bg-gray-800 p-4 text-white rounded-lg">
-        <Link href="/portfolio" className="hover:text-blue-300">Portfolio</Link>
-        <Link href="/vote" className="hover:text-blue-300">Vote</Link>
-        <Link href="/leaderboard" className="hover:text-blue-300">Leaderboard</Link>
+        <Link href="/portfolio">Portfolio</Link>
+        <Link href="/vote">Vote</Link>
+        <Link href="/leaderboard">Leaderboard</Link>
         <button className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
           Sign Out
         </button>
       </nav>
       <h1 className="text-4xl font-bold mb-6 text-center text-gray-700">Voting</h1>
       <div className="flex justify-center gap-10 mb-4">
         <div className="text-center">
-          <img src={imageOne} alt="Image One" className="w-60 h-60 object-cover rounded-lg shadow-lg hover:shadow-2xl cursor-pointer" onClick={() => vote(1)} />
+          <img src={imageOne.url} alt="Image One" className="w-60 h-60 object-cover rounded-lg shadow-lg hover:shadow-2xl cursor-pointer" onClick={() => vote(1)} />
           <p className="mt-2 text-lg font-semibold">ELO: {eloOne}</p>
         </div>
         <div className="text-center">
-          <img src={imageTwo} alt="Image Two" className="w-60 h-60 object-cover rounded-lg shadow-lg hover:shadow-2xl cursor-pointer" onClick={() => vote(2)} />
+          <img src={imageTwo.url} alt="Image Two" className="w-60 h-60 object-cover rounded-lg shadow-lg hover:shadow-2xl cursor-pointer" onClick={() => vote(2)} />
           <p className="mt-2 text-lg font-semibold">ELO: {eloTwo}</p>
         </div>
       </div>