ChromeGaming · ayush-t02 · Aug 8, 2024 · Aug 7, 2024 · Aug 7, 2024 · Aug 8, 2024
diff --git a/js/game.js b/js/game.js
@@ -113,6 +113,14 @@ class Game {
 			this.playerTurnBgUI.style.background = winner.color;
 		}
 
+		// Storing winner data for leaderboard
+		const playerData = JSON.parse(localStorage.getItem("playerData"));
+		const player = playerData.find((player) => player.name === winner.name);
+		const playerIndex = playerData.indexOf(player);
+		playerData[playerIndex].score = winner.filledBoxes;
+		playerData[playerIndex].winner = true;
+		localStorage.setItem("winnerData", JSON.stringify(playerData));
+
 		// Open the win overlay
 		document.getElementById("win-overlay").style.height = "100%";
 	}

diff --git a/js/leaderboard.js b/js/leaderboard.js
@@ -0,0 +1,69 @@
+// Random Data
+const entries = [
+	{ name: "Alice", score: 356, avatar: "/assets/avatars/1.png" },
+	{ name: "Bob", score: 258, avatar: "/assets/avatars/2.png" },
+	{ name: "Charlie", score: 312, avatar: "/assets/avatars/17.png" },
+	{ name: "David", score: 167, avatar: "/assets/avatars/4.png" },
+	{ name: "Eve", score: 481, avatar: "/assets/avatars/9.png" },
+	{ name: "Frank", score: 573, avatar: "/assets/avatars/8.png" },
+	{ name: "Grace", score: 345, avatar: "/assets/avatars/7.png" },
+	{ name: "Heidi", score: 254, avatar: "/assets/avatars/6.png" },
+	{ name: "Ivan", score: 491, avatar: "/assets/avatars/5.png" },
+	{ name: "Judy", score: 587, avatar: "/assets/avatars/10.png" },
+	{ name: "Jassi", score: 342, avatar: "/assets/avatars/18.png" },
+	{ name: "Kevin", score: 456, avatar: "/assets/avatars/11.png" },
+	{ name: "Michael", score: 398, avatar: "/assets/avatars/13.png" },
+	{ name: "Nancy", score: 359, avatar: "/assets/avatars/14.png" },
+	{ name: "Oliver", score: 275, avatar: "/assets/avatars/15.png" },
+	{ name: "Peggy", score: 493, avatar: "/assets/avatars/16.png" },
+	{ name: "Quincy", score: 567, avatar: "/assets/avatars/3.png" },
+	{ name: "Robert", score: 321, avatar: "/assets/avatars/12.png" },
+	{ name: "Tom", score: 512, avatar: "/assets/avatars/19.png" },
+	{ name: "Victor", score: 512, avatar: "/assets/avatars/20.png" },
+];
+
+// Data after game ends
+try {
+	const winnerData = JSON.parse(localStorage.getItem("winnerData"));
+	const winner = winnerData.find((player) => player.winner === true);
+	const winnerEntry = {
+		name: winner.name,
+		avatar: winner.avatarID,
+		score: winner.score * 20 + 100,
+	};
+	entries.push(winnerEntry);
+} catch (e) {
+	console.log("No winner data found");
+}
+
+// Sort entries by score
+entries.sort((a, b) => b.score - a.score);
+
+// Max Limit -> 25 entries
+entries.splice(25);
+
+const ranking = document.getElementById("ranking");
+
+entries.forEach((entry, index) => {
+	const template = document.createElement("div");
+	template.classList.add("entry");
+	template.innerHTML = `
+        <div class="rank">${index + 1}</div>
+        <div class="name">
+        <img src="${entry.avatar}" alt="avatar" class="avatar">
+        ${entry.name}</div>
+        <div class="score">${entry.score}</div>
+    `;
+
+	ranking.appendChild(template);
+
+	if (index == 0) {
+		template.id = "gold";
+	}
+	if (index == 1) {
+		template.id = "silver";
+	}
+	if (index == 2) {
+		template.id = "bronze";
+	}
+});
diff --git a/pages/game.html b/pages/game.html
@@ -143,6 +143,7 @@ <h2>Scoreboard</h2>
 			<div class="overlay-content">
 				<a href="../index.html">Go Back to Home</a>
 				<a href="../pages/game.html">Play Again</a>
+				<a href="../pages/leaderboard.html">See Leaderboard</a>
 			</div>
 		</div>
 

diff --git a/pages/leaderboard.html b/pages/leaderboard.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Leaderboard</title>
+
+		<!-- Logo of the game -->
+		<link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
+		<link
+			rel="shortcut icon"
+			href="../assets/favicon.ico"
+			type="image/x-icon"
+		/>
+
+		<link rel="stylesheet" href="/styles/global.css" />
+		<link rel="stylesheet" href="/styles/leaderboard.css" />
+	</head>
+	<body>
+		<script src="/js/global.js"></script>
+
+		<video autoplay muted class="video" loop id="myVideo">
+			<source src="/assets/videos/1.mp4" type="video/mp4" />
+		</video>
+
+		<div class="container">
+			<div id="leaderboard">
+				<h1>Leaderboard</h1>
+				<div id="ranking">
+					<!-- Dynamically add data from Js -->
+				</div>
+				<a href="/index.html" id="home-btn">Home</a>
+			</div>
+		</div>
+
+		<script src="/js/leaderboard.js"></script>
+	</body>
+</html>
diff --git a/styles/global.css b/styles/global.css
@@ -18,6 +18,15 @@
 	z-index: 9999;
 }
 
+#myVideo {
+	position: fixed;
+	right: 0;
+	bottom: 0;
+	min-width: 100%;
+	min-height: 100%;
+	z-index: -1;
+}
+
 ::-webkit-scrollbar {
 	width: 4px;
 	background: #333;

diff --git a/styles/leaderboard.css b/styles/leaderboard.css
@@ -0,0 +1,137 @@
+body {
+	font-family: monospace;
+	margin: 0;
+	padding: 0;
+}
+
+.container {
+	width: 50%;
+	margin: 0.5rem auto;
+}
+
+#leaderboard {
+	height: 95vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	border: 8px solid #3d0c02;
+	border-radius: 50px;
+	padding: 0 0.5rem;
+	background: #733635;
+}
+
+#leaderboard h1 {
+	font-size: 2rem;
+	color: #fff;
+	background-color: #ce2029;
+	padding: 1rem 1.5rem 0.25rem 1.5rem;
+	margin: 0;
+	border-radius: 25px;
+	border-top-right-radius: 100%;
+	border-top-left-radius: 100%;
+	position: relative;
+	top: 0.5rem;
+}
+
+#leaderboard h1:hover {
+	background-color: #ff0000;
+}
+
+#ranking {
+	background-color: #905d5d;
+	width: 95%;
+	height: fit-content;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1rem;
+	padding: 1.25rem 1rem;
+	border-radius: 50px;
+	overflow-x: auto;
+}
+
+.entry {
+	width: 95%;
+	font-size: 1.5rem;
+	display: grid;
+	grid-template-columns: 3rem 2fr 0.5fr;
+	align-items: center;
+	gap: 1rem;
+	padding: 0.25rem 1rem;
+	border-radius: 25px;
+	color: #fff;
+	background-color: #c9a394;
+	box-shadow: #824950 3px 3px 0px 2px;
+}
+
+.rank {
+	padding: 0.5rem;
+	border-radius: 5px;
+}
+
+.name {
+	display: flex;
+	align-items: center;
+	gap: 1.5rem;
+}
+
+.avatar {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+}
+
+#gold {
+	background-color: #e6a817;
+	box-shadow: #c19a6b 3px 3px 0px 2px;
+}
+
+#silver {
+	background-color: #c0c0c0;
+	box-shadow: #848482 3px 3px 0px 2px;
+}
+
+#bronze {
+	background-color: #cd7f32;
+	box-shadow: #7b3f00 3px 3px 0px 2px;
+}
+
+#home-btn {
+	text-decoration: none;
+	font-size: 1.6rem;
+	color: #fff;
+	background-color: #ce2029;
+	padding: 0.25rem 2rem 0.5rem 2rem;
+	margin: 0;
+	position: relative;
+	top: -0.5rem;
+	border-radius: 25px;
+	border-bottom-left-radius: 100%;
+	border-bottom-right-radius: 100%;
+}
+
+#home-btn:hover {
+	background-color: #ff0000;
+}
+
+#home-btn::before {
+	content: "🏠";
+	margin-right: 0.5rem;
+}
+
+@media screen and (max-width: 768px) {
+	.container {
+		width: 85%;
+	}
+}
+
+@media screen and (max-width: 425px) {
+	.container {
+		width: 95%;
+	}
+}
+
+::-webkit-scrollbar {
+	display: none;
+}