-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathleaderboard.html
135 lines (123 loc) · 3.84 KB
/
leaderboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leaderboard | Ballbox</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pangolin&display=swap" rel="stylesheet">
<link rel="preload" as="image" href="https://i.gifer.com/J8ra.gif">
<style>
*{
font-family: 'Pangolin', cursive;
margin:0;
padding: 0;
color:orange;
}
body{
overflow: hidden;
background:black;
}
.container{
width:100%;
height:100%;
display:flex;
justify-content: center;
align-items: center;
background-image: url('https://user-images.githubusercontent.com/39765499/56616390-34effc00-6615-11e9-84a2-bcde4ecaaadd.gif');
background-repeat: no-repeat ;
background-size:cover;
background-position:center;
}
.heading{
text-decoration: underline ;
}
.card{
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:72%;
height:90vh;
padding:30px;
box-shadow:1px 0px 10px 0px orange;
background-image:linear-gradient(180deg,grey, transparent,black);
overflow-y: scroll;
}
.leader{
width:100%;
height:5vh;
display:flex;
justify-content: space-between;
align-items: center;
box-shadow:1px 0px 10px 0px grey;
padding:10px;
border-radius: 3%;
background:grey;
margin:3px;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h3 class="heading">Leaderboard</h3>
</div>
</div>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.0.1/firebase-app.js";
import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/11.0.1/firebase-firestore.js";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyD3YvZVubkRDvNcb6Hc3nxOBfhsCWjZh40",
authDomain: "breakout-2fb35.firebaseapp.com",
projectId: "breakout-2fb35",
storageBucket: "breakout-2fb35.appspot.com",
messagingSenderId: "349383454205",
appId: "1:349383454205:web:d0c157b46012fa737afd94"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app); // Pass app as an argument
const colRef = collection(db, 'playerinfo'); // Collection reference
const username = localStorage.getItem("playerusername");
const score = localStorage.getItem("score");
// Function to fetch player info and display sorted leaderboard
async function fetchLeaderboard() {
try {
const snapshot = await getDocs(colRef);
if (snapshot.empty) {
console.warn('No player information found.');
return;
}
// Store player data in an array
let players = [];
snapshot.forEach(doc => {
const data = doc.data();
players.push({
name: data.name,
score: data.score || 0,
color: data.color
});
});
// Sort players by score in descending order
players.sort((a, b) => b.score - a.score);
// Display sorted players
const leaderboardContainer = document.querySelector('.card');
players.forEach(player => {
const leader = document.createElement('div');
leader.classList.add('leader');
leader.innerHTML = `<p id="name">${player.name}</p>
<p id="score">${player.score}</p>`;
leaderboardContainer.appendChild(leader);
});
} catch (error) {
console.error('Error retrieving player info:', error);
}
}
// Call the function to fetch and display the leaderboard
fetchLeaderboard();
</script>
</body>
</html>