Merge pull request #39 from grant-baer/voting

I added the changes for the voting stuff.
gp-sb · Dec 2, 2023 · 71d119e · 71d119e
2 parents 14b2f04 + 9775609
commit 71d119e
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 18 deletions.
diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
diff --git a/Frontend/package.json b/Frontend/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.6.0",
+    "elo-rating": "^1.0.1",
     "next": "^13.5.6",
     "react": "^18",
     "react-dom": "^18",

diff --git a/Frontend/public/image1.png b/Frontend/public/image1.png
diff --git a/Frontend/public/image2.webp b/Frontend/public/image2.webp
diff --git a/Frontend/src/pages/leaderboard.js b/Frontend/src/pages/leaderboard.js
@@ -1,25 +1,47 @@
 import Link from "next/link";
+import { useState, useEffect } from "react";
 
 export default function Leaderboard() {
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    // Generate fake data
+    const fakeData = Array.from({ length: 10 }, (_, index) => ({
+      id: index + 1,
+      username: `User${index + 1}`,
+      elo: 1000 + Math.floor(Math.random() * 500), // Random ELO between 1000 and 1500
+    }));
+    setData(fakeData);
+  }, []);
+
   return (
     <div className="p-6">
-      <nav className="mb-4 flex justify-between">
+      <nav className="mb-8 flex justify-between items-center bg-gray-800 p-4 text-white rounded-lg">
         <Link href="/portfolio">Portfolio</Link>
         <Link href="/vote">Vote</Link>
         <Link href="/leaderboard">Leaderboard</Link>
-        <button className="bg-blue-500 text-white py-1 px-3 rounded">
+        <button className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
           Sign Out
         </button>
       </nav>
-      <h1 className="text-2xl mb-4">Leaderboard</h1>
-      <table className="w-full border">
-        <thead>
+      <h1 className="text-4xl font-bold mb-6 text-center text-gray-700">Leaderboard</h1>
+      <table className="w-full text-left border-collapse border border-gray-400">
+        <thead className="bg-gray-800 text-white">
           <tr>
-            <th className="border p-2">Name</th>
-            <th className="border p-2">Rank</th>
+            <th className="border border-gray-300 p-3">Name</th>
+            <th className="border border-gray-300 p-3">Rank</th>
+            <th className="border border-gray-300 p-3">ELO</th>
           </tr>
         </thead>
-        <tbody>{/* You can map through your data here */}</tbody>
+        <tbody>
+          {data.map((item, index) => (
+            <tr key={item.id} className={`${index % 2 === 0 ? "bg-gray-100" : "bg-white"}`}>
+              <td className="border border-gray-300 p-2">{item.username}</td>
+              <td className="border border-gray-300 p-2">{index + 1}</td>
+              <td className="border border-gray-300 p-2">{item.elo}</td>
+            </tr>
+          ))}
+        </tbody>
       </table>
     </div>
   );

diff --git a/Frontend/src/pages/vote.js b/Frontend/src/pages/vote.js
@@ -1,21 +1,48 @@
-// src/pages/vote.js
-
 import Link from "next/link";
+import { useState, useEffect } from "react";
+import eloRating from "elo-rating";
 
 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");
+
+  // Function to calculate ELO exchange
+  const vote = (winner) => {
+    let result = eloRating.calculate(eloOne, eloTwo, winner === 1);
+    setEloOne(result.playerRating);
+    setEloTwo(result.opponentRating);
+  };
+
+  // Function to load new images and reset ELO on each page load
+  useEffect(() => {
+    setImageOne("/image1.png");
+    setImageTwo("/image2.webp");
+    setEloOne(1000);
+    setEloTwo(1000);
+  }, []);
+
   return (
     <div className="p-6">
-      <nav className="mb-4 flex justify-between">
-        <Link href="/portfolio">Portfolio</Link>
-        <Link href="/vote">Vote</Link>
-        <Link href="/leaderboard">Leaderboard</Link>
-        <button className="bg-blue-500 text-white py-1 px-3 rounded">
+      <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>
+        <button className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded">
           Sign Out
         </button>
       </nav>
-      <h1 className="text-2xl mb-4">Voting</h1>
-      <div className="grid grid-cols-3 gap-4">
-        {/* You can map through your voting items or images here */}
+      <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)} />
+          <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)} />
+          <p className="mt-2 text-lg font-semibold">ELO: {eloTwo}</p>
+        </div>
       </div>
     </div>
   );