Skip to content

Commit

Permalink
Merge pull request #92 from codersforcauses/colour
Browse files Browse the repository at this point in the history 
added leaderboard pagination to go through entire leaderboard
  • Loading branch information
@Anay-Joshi26
Anay-Joshi26 authored Feb 15, 2024
2 parents a016383 + a6bab7c commit 47d4109
Show file tree
Hide file tree
Showing 5 changed files with 200 additions and 35 deletions.
3 changes: 2 additions & 1 deletion app/backend/api.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,9 @@ async def discoveries_leaderboard():
@router.get("/all")
async def discoveries_leaderboard():
leaderboard = get_leaderboard('city', 'all')
response = {i + 1: list(val) for i, val in enumerate(leaderboard)}
response = [{'pos': i + 1, 'score': val[0], 'usern': val[1]} for i, val in enumerate(leaderboard)]
return JSONResponse(content=response)

'''
NOTICE:
DO NOT REFACTOR/MERGE THESE APIS; IF WE DYNAMICALLY SELECT LEADERBORADS VIA DYNAMIC USER INPUT - THIS MEANS WE NEED TO VALIDATE/SANITISE SUCH INPUT, THIS IS NOT DONE VIA THESE FUNCTIONS THAT INTERACT WITH THE DB
Expand Down
2 changes: 1 addition & 1 deletion app/backend/database.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,4 +119,4 @@ def update_game(game_mode, username, totalscore):
if newmax:
return {"score":"complete", "alert":"new high score"}
else:
return {"score":"complete", "alert":"no new high score"}
return {"score":"complete", "alert":"no new high score"}
46 changes: 24 additions & 22 deletions app/frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,21 +88,14 @@
function enterMainPage(selectedMode) {
const username = document.getElementById('username').value;

// const matcher = new RegExpMatcher({
// ...englishDataset.build(),
// ...englishRecommendedTransformers,
// });
// const hasMatch = matcher.hasMatch(username);

const usernameRegex = new RegExp('^[a-zA-Z0-9._ ]+$', 'i');
const usernameRegex = new RegExp('^[a-zA-Z0-9._]{1,15}$', 'i');

if (!usernameRegex.test(username)) {
notValidUsername();
return;
}
// if (hasMatch) {
// profaneUsername();
// return;
// }


localStorage.setItem("game_mode", selectedMode);
localStorage.setItem("username", username);
if (selectedMode === "city") {
Expand All @@ -127,6 +120,17 @@
}

}

@media screen and (max-width: 600px){

.game-modes {

margin-left: 2vw;
margin-right: 2vw;

}

}
</style>
</head>
<body >
Expand Down Expand Up @@ -154,11 +158,10 @@ <h1 class = 'landing-title heading' style = 'margin-top: 0; margin-bottom: 0;'><
if you get a top score.</p>
<input type="text" id="username" name="username" required placeholder="Enter a Username...">
<div style = 'display: none; color: red; line-height: 1.8;'class='username-rules' id = 'username-rules'>
<p>The username must contain only:</p>
<p>The username must be less than 15 characters long and contain only:</p>
<ul>
<li>Letters</li>
<li>Numbers</li>
<li>Spaces</li>
<li>Underscores (_)</li>
<li>Periods (.)</li>
</ul>
Expand All @@ -183,7 +186,7 @@ <h1 class = 'landing-title heading' style = 'margin-top: 0; margin-bottom: 0;'><
<div class= "game-modes-submit">
<div class="game-modes">
<div class="game-mode-title sub-heading heading" style = 'color: black; margin-bottom: 0;'>Select a Game Mode</div>
<p style = 'color: black; text-align: center; line-height: 1.8; margin-top: 0; margin-bottom: 15px;'>
<p style = 'color: black; text-align: center; line-height: 1.8; margin-top: 0; margin-bottom: 15px; margin-left: 10px; margin-right: 10px;'>
Select a game mode to play.<br> Each game mode has a different objective and different rules.
Visit the <a href="/tutorial">tutorial page</a> to learn more about each game mode.
</p>
Expand All @@ -207,8 +210,7 @@ <h1 class = 'landing-title heading' style = 'margin-top: 0; margin-bottom: 0;'><
<div class = 'game-card-info-text'>
<div class="game-mode-label heading">Street Sleuth</div>
<p class = 'game-mode-card-description' style = ''>
Find the location of the street you are playing in.
The closer you are to the location, the more points you get.
Find the streets presented to you, and locate them on a satellite map.
</p>
<button class = 'game-submit' onclick= "enterMainPage('sleuth')">Play Now</button>
</div>
Expand All @@ -220,8 +222,8 @@ <h1 class = 'landing-title heading' style = 'margin-top: 0; margin-bottom: 0;'><
<div class = 'game-card-info-text'>
<div style = 'font-size: 70px;' class="game-mode-label heading">Local Landmark</div>
<p class = 'game-mode-card-description' style = ''>
Find the location of the landmark you are playing in.
The closer you are to the location, the more points you get.
Find the different locations and landmarks presented to you.
You must nagivate the Street View and use your own knowledge to find the locations.
</p>
<button class = 'game-submit' onclick= "enterMainPage('landmark')">Play Now</button>
</div>
Expand All @@ -235,10 +237,10 @@ <h1 class = 'landing-title heading' style = 'margin-top: 0; margin-bottom: 0;'><

<br><br>
<center>
<footer>
<p>2023/24 CFC Summer Project (Beginners) | <a href="https://github.com/codersforcauses/beginner-2023summer-g4">Github</a><br>
<a href="mailto:contact@perthpinpoint.city">contact@perthpinpoint.city</a></p><br>
</footer>
<footer>
<p>2023/24 CFC Summer Project (Beginners) | <a href="https://github.com/codersforcauses/beginner-2023summer-g4">Github</a><br>
<a href="mailto:contact@perthpinpoint.city">contact@perthpinpoint.city</a></p><br>
</footer>
</center>

</body>
Expand Down
176 changes: 165 additions & 11 deletions app/frontend/results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
grid-template-columns: 1fr;
width: 95%;
align-self: center;
padding: 20px;
}

.leaderboard-header,
Expand Down Expand Up @@ -88,6 +87,55 @@
color: white;
}

.next-page-leaderboard {

background: transparent;
color: white;
padding: 15px 30px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
position: relative;
left: 50%;
transform: translateX(-50%);
text-decoration: underline;
}

.pagination {
display: flex;
list-style: none;
padding: 0;
position: relative;
left: 50%;
transform: translateX(-50%);
justify-content: center;
gap: 50px;
}

.page-label-container a {
text-decoration: none;
width: 100%;
height: 100%;
}

.page-label-container {
display: flex;
justify-content: center;
align-self: center;
padding: 10px;
text-decoration: none;
color: #333;
background-color: #f2f2f2;
border: 1px solid #ddd;
cursor: pointer;
border-radius: 4px;
}

.page-label-container:hover {
background-color: #ddd;
}

@media screen and (max-width: 700px) {
.leaderboard-info-container {
flex-wrap: wrap;
Expand Down Expand Up @@ -143,9 +191,9 @@ <h1 class = 'title heading' style = 'margin-top: 0; margin-bottom: 0;'><a style
<a href="/leaderboard">Leaderboard</a>
</nav>

<div style = 'margin-bottom: 50px;' class = 'leaderboard-container'>
<div style = 'margin-bottom: 25px;' class = 'leaderboard-container' id = 'leaderboard-container'>
<h2 class = 'leaderboard heading'>Leaderboard</h2>
<div class = 'leaderboard-info-container'>
<div style = 'margin-bottom: 25px;'class = 'leaderboard-info-container'>
<img src="/static/assets/trophy.png" alt="trophy image">
<p style = 'line-height: 1.8;'>
Welcome to the competitive Classic City leaderboard!
Expand All @@ -158,6 +206,7 @@ <h2 class = 'leaderboard heading'>Leaderboard</h2>
</p>
</div>
<div class = 'leaderboard-elements' id = 'leaderboard-elements'>
<div id = 'leaderboard-type-title' style = 'font-size: 40px; margin-bottom: 12px;' class = 'heading'>Top 10 Classic City</div>
<div class="leaderboard-header heading">
<div>Position</div>
<div>Username</div>
Expand All @@ -166,11 +215,72 @@ <h2 class = 'leaderboard heading'>Leaderboard</h2>
</div>
</div>

<script>var toggle = 0;</script>
<script>
var toggle = 0;
let startIndexOfLeaderboard = 0;
let leaderboard = document.getElementById('leaderboard-elements');
let reachedEndOfLeaderboard = false;
</script>
<script>

function changeStartOfLeaderboardIndex(arg) {
if (arg === 'next') {
startIndexOfLeaderboard += 15;
}
else if (arg === 'prev' && startIndexOfLeaderboard !== 0) {
startIndexOfLeaderboard -= 15;
} else {
startIndexOfLeaderboard = (arg - 1) * 15;
}
}


function get15LeaderboardElements() {
const endpoint = '/api/all';
const itemsPerPage = 15; // this is for the full leaderboard to minise the number of button clicks
//const leaderboard = document.getElementById('leaderboard-elements');
const endIndex = startIndexOfLeaderboard + itemsPerPage;

fetch(endpoint)
.then(response => response.json())
.then(data => {

const result = data.slice(startIndexOfLeaderboard, endIndex);


for (const obj of result) {

const listItem = document.createElement('div');

listItem.classList.add('leaderboard-item');

listItem.innerHTML = `
<div>${obj['pos']}</div>
<div>${obj['usern']}</div>
<div>${obj['score']}</div>
`;

leaderboard.appendChild(listItem);

}

if (result.length < 15) {
document.getElementById('next-page').style.display = 'none';
}
else {
document.getElementById('next-page').style.display = 'block';
}
})
.catch(error => {
console.error('Error fetching JSON:', error);
});
}

function parseboard(endpoint) {
const leaderboard = document.getElementById('leaderboard-elements');
function getTopTen() {

const endpoint = '/api/top';

//const leaderboard = document.getElementById('leaderboard-elements');

fetch(endpoint)
.then(response => response.json())
Expand All @@ -194,28 +304,72 @@ <h2 class = 'leaderboard heading'>Leaderboard</h2>
.catch(error => {
console.error('Error fetching JSON:', error);
});

}

parseboard('/api/top');
getTopTen();

function switchview() {

const leaderboard = document.getElementById('leaderboard-elements');

leaderboard.replaceChildren(leaderboard.firstElementChild);

if (toggle === 0) {
parseboard('/api/all');
get15LeaderboardElements();
document.querySelector('#game-button strong').innerHTML = 'See Top 10';
document.getElementById('pagination').style.display = '';
document.getElementById('leaderboard-type-title').innerHTML = 'Full Classic City Leaderboard';
toggle = 1;
} else {
parseboard('/api/top');
getTopTen();
document.querySelector('#game-button strong').innerHTML = 'See Full Leaderboard';
toggle = 0;
document.getElementById('pagination').style.display = 'none';
document.getElementById('leaderboard-type-title').innerHTML = 'Top 10 Classic City';
startIndexOfLeaderboard = 0;
}
}


function handleClick(arg) {

let anchorElement = document.querySelector('.page-label-container a');
if (anchorElement) {
anchorElement.click();
}

if (startIndexOfLeaderboard === (arg -1)) return

changeStartOfLeaderboardIndex(arg);

leaderboard.replaceChildren(leaderboard.firstElementChild);

get15LeaderboardElements();

if (startIndexOfLeaderboard === 0) {
document.getElementById('prev-page').style.display = 'none';
}
else {
document.getElementById('prev-page').style.display = 'block';
}

if (startIndexOfLeaderboard === 20) {

}

}
</script>

<div style='display: none;' class="pagination" id = 'pagination'>

<div title = 'Previous page' style='font-size:24px; display: none;' class = 'page-label-container' id = 'prev-page' onclick="handleClick('prev')">
&#10229
</div>
<div title = 'Next page' style='font-size:24px;' class = 'page-label-container' id = 'next-page'onclick="handleClick('next')">
&#10230
</div>

</div>

<div style = 'margin-bottom: 100px;' class="start-button-container">
<p style="color: white; margin-bottom: 30px;"><strong>Thank you for Playing PerthPinpoint!</strong></p>
<button id="game-button" onclick="switchview()"><strong>See Full Leaderboard</strong></button>
Expand Down
8 changes: 8 additions & 0 deletions app/frontend/tutorial.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
function toggleMenu() {
let menu = document.querySelector('.menu');
if (menu.style.right === '0px') {
console.log('closing');
menu.style.right = '-300px';
} else {
menu.style.right = '0px';
Expand All @@ -59,7 +60,14 @@

document.addEventListener('click', function(event) {
let menu = document.querySelector('.menu');
const computedStyles = window.getComputedStyle(menu);
const rightValue = computedStyles.getPropertyValue('right');
console.log(rightValue);
console.log("AHHHHHH");
let menuBar = document.querySelector('.menu-bar');
if (rightValue === '-300px') {
return;
}
if (event.target !== menu && event.target !== menuBar) {
// Close the menu when clicking outside of it
menu.style.right = '-300px';
Expand Down

0 comments on commit 47d4109

Please sign in to comment.