sheppy/open-web-leaderboard
1
0
Fork 0
mirror of https://github.com/FAUSheppy/open-web-leaderboard.git synced 2025-12-06 15:11:35 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

visual updates

Browse Source
This commit is contained in:
Yannik Schmidt
2020-09-27 10:37:07 +02:00
parent 25ccb083f9
commit 8e52eec70c
10 changed files with 137 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -9,6 +9,7 @@ The system was developed to be used with the [skillbird-framwork](https://github
# Requirements
- [MDB Jquery](https://mdbootstrap.com/docs/jquery/getting-started/download/) (unpack to ./static/bootstrap/)
- [Fontawesome](https://fontawesome.com/download) (move to static/boostrap/fontawesome.css)
- ``python3 -m pip install -r req.txt``

2
database.py
View File

@@ -99,7 +99,7 @@ class DatabaseConnection:
return (None, None)
playerInLeaderboard = player.PlayerInLeaderboard(playerRow)
player.rank = getPlayerRank(playerInLeaderboard)
playerInLeaderboard.rank = self.getPlayerRank(playerInLeaderboard)
return playerInLeaderboard
def getPlayerRank(self, player):

11
server.py
View File

@@ -85,8 +85,12 @@ def leaderboard():
db = DatabaseConnection(app.config["DB_PATH"])
if page:
pageInt = int(page)
if pageInt < 0:
pageInt = 0
start = SEGMENT * int(page)
else:
pageInt = 0
start = 0
# handle find player request #
@@ -94,7 +98,8 @@ def leaderboard():
searchName = ""
if playerName:
playerInLeaderboard, rank = db.findPlayerByName(playerName)
playerInLeaderboard = db.findPlayerByName(playerName)
rank = playerInLeaderboard.rank
if not playerInLeaderboard:
cannotFindPlayer = flask.Markup("<div class=noPlayerFound>No player of that name</div>")
start = 0
@@ -136,7 +141,9 @@ def leaderboard():
start=start, \
endOfBoardIndicator=endOfBoardIndicator, \
findPlayer=cannotFindPlayer, \
searchName=searchName)
searchName=searchName,
nextPageNumber=int(pageInt)+1,
prevPageNumber=int(pageInt)-1)
return finalResponse
@app.route('/static/<path:path>')

26
static/buttons.js
View File

@@ -4,7 +4,6 @@ var page = url.searchParams.get("page")
var player = url.searchParams.get("string")
var buttonBackward = document.getElementById("button-backward")
var buttonForward = document.getElementById("button-forward")
var buttonFirst = document.getElementById("button-first")
var isLastPage = document.getElementById("eof")
/* clean URL from unessesary parameters */
@@ -14,10 +13,7 @@ url.searchParams.delete("string")
/* disable buttons if nessesary */
if(!page || page == "0"){
buttonBackward.disabled = true
buttonFirst.disabled = true
buttonBackward.classList.add("disabled")
buttonFirst.classList.add("disabled")
}
if(isLastPage){
@@ -76,17 +72,17 @@ function firstPage(){
}
/* input fields */
var gotoRankInputField = document.getElementById("gotoRank");
gotoRankInputField.addEventListener("keyup", function(event) {
if (event.key == "Enter") {
event.preventDefault();
var rank = gotoRankInputField.value
var page = Math.trunc((rank - 1)/100)
url.searchParams.set("page", page)
url.searchParams.set("goto", rank)
window.location.href = url.href
}
});
//var gotoRankInputField = document.getElementById("gotoRank");
//gotoRankInputField.addEventListener("keyup", function(event) {
// if (event.key == "Enter") {
// event.preventDefault();
// var rank = gotoRankInputField.value
// var page = Math.trunc((rank - 1)/100)
// url.searchParams.set("page", page)
// url.searchParams.set("goto", rank)
// window.location.href = url.href
// }
//});
var getPlayerInputField = document.getElementById("getPlayer");
getPlayerInputField.addEventListener("keyup", function(event) {

34
static/site.css
View File

@@ -1,6 +1,6 @@
/* general */
body{
background: #323232;
background: #323232 !important;
}
/* ############### TOP NAVBAR ############# */
@@ -80,23 +80,30 @@ body{
display: none;
}
}
/* ############# PLAYER INFORMATION IN LINES ############# */
/* ############# PLAYER INFORMATION IN LINES ############# */
.playerRank{
margin-left:1%;
float: left;
width: 10%;
color: black;
}
.playerName{
float: left;
width: 25%;
color: black;
}
.playerName:hover{
opacity: 0.8;
}
.playerRating{
float: right;
width: 15%;
text-align: right;
color: black;
}
.playerGames{
@@ -104,23 +111,14 @@ body{
text-align: right;
margin-right: 1%;
width: 20%;
color: black;
}
.playerWinratio{
float: right;
width: 20%;
text-align: center;
}
/* #################### LEADERBOARDS ##################### */
.leaderboard-container{
margin-top: 10px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
min-width: 250px;
width: 80%;
max-width: 800px;
color: black;
}
.colum-names{
@@ -133,15 +131,21 @@ body{
.line-even{
width: 100%;
background-color: #999999; /* 60% grey */
color: black;
background-color: #999999 !important; /* 60% grey */
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
}
.bg-special{
background-color: #eae9e9 !important;
}
.line-odd{
width: 100%;
background-color: lightgrey;
color: black;
background-color: lightgrey !important;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;

40
templates/base.html
View File

@@ -3,49 +3,45 @@
<head>
<title>Leaderboard</title>
<meta name="Description" content="Open Web Leaderboard">
<link rel="stylesheet" type="text/css" href="/static/site.css">
<link rel="shortcut icon" href="/static/defaultFavicon.ico">
<script src="static/buttons.js" defer></script>
<!-- needed for @media-css mofiers -->
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="/static/bootstrap/fontawesome.css">
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/bootstrap/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/site.css">
<script src="/static/bootstrap/js/jquery.js"></script>
<script src="/static/bootstrap/js/popper.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<script src="/static/bootstrap/js/mdb.min.js"></script>
</head>
<body>
<div class=top-bar role="navigation">
<button id="button-backward" type="button" onclick=backward()
class=top-button>Backward </button>
<button id="button-forward" type="button" onclick=forward()
class=top-button>Forward</button>
<button id="button-first" type="button" onclick=firstPage()
class=top-button>Top 100 </button>
<input id="getPlayer" type="text" class=input-field
aria-label="search for player" placeholder="search player...">
<input id="gotoRank" type="number" class=input-field-number
aria-label="goto rank" placeholder="goto rank...">
{{ findPlayer }}
</div>
<div class=leaderboard-container role="main">
{% include 'navbar_leaderboard.html' %}
<div class="container mt-3 mb-3" role="main">
<div class=colum-names>{{ columNames }}</div>
{% for player in playerList %}
{% set count = loop.index + start %}
{% if count % 2 == 0 %}
<div class="line-even {% if searchName == player.name %}targetPlayer{% endif %}">
<a href="/player?id={{ player.playerId }}">
{{ player.getLineHTML(count) }}
</a>
</div>
{% else %}
<div class="line-odd {% if searchName == player.name %}targetPlayer{% endif %}">
<a href="/player?id={{ player.playerId }}">
{{ player.getLineHTML(count) }}
</a>
</div>
{% endif %}
{% endfor %}
{{ endOfBoardIndicator }}
</div>
<div class=footer role="contentinfo">
<a class="footerLink" href="https://blog.atlantishq.de/about">Impressum/Legal</a>
<a class="footerLink mid" href="https://blog.atlantishq.de/post/insurgency-rating-1/">
How does it work?</a>
<a class="footerLink" href="https://github.com/FAUSheppy/skillbird">Star on GitHub</a>
</div>
{% include 'footer.html' %}
</body>
</html>

11
templates/footer.html
View File

@@ -1,6 +1,9 @@
<div class=footer role="contentinfo">
<a class="footerLink" href="https://blog.atlantishq.de/about">Impressum/Legal</a>
<a class="footerLink mid" href="https://blog.atlantishq.de/post/insurgency-rating-1/">
<div class="footer-copyright text-center py-3 bg-dark" role="contentinfo">
<a style="color: rgba(255,255,255,.5);"
class="footerLink" href="https://blog.atlantishq.de/about">Impressum/Legal</a>
<a style="color: rgba(255,255,255,.5);"
class="footerLink mid" href="https://blog.atlantishq.de/post/insurgency-rating-1/">
How does it work?</a>
<a class="footerLink" href="https://github.com/FAUSheppy/skillbird">Star on GitHub</a>
<a style="color: rgba(255,255,255,.5);"
class="footerLink" href="https://github.com/FAUSheppy/skillbird">Star on GitHub</a>
</div>

25
templates/navbar.html Normal file
View File

@@ -0,0 +1,25 @@
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<!-- left side -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar" style="visibility: hidden;">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">placeholder</a>
</li>
</ul>
</nav>

40
templates/navbar_leaderboard.html Normal file
View File

@@ -0,0 +1,40 @@
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="z-index: 10;">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<!-- left side -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Top 100</a>
</li>
<li class="nav-item">
<a id="button-backward" class="nav-link" href="/?page={{ prevPageNumber }}">Backward</a>
</li>
<li class="nav-item">
<a id="button-forward" class="nav-link" href="/?page={{ nextPageNumber }}">Forward</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item right">
<input id="getPlayer" type="text" aria-label="search for player"
placeholder="search player...">
</li>
{{ findPlayer }}
<!--- <li class="nav-item right">
<input id="gotoRank" type="number" aria-label="goto rank"
placeholder="goto rank...">
</li> -->
</ul>
</div>
</nav>
<nav class="navbar" style="visibility: hidden;">
<li class="nav-item">
<a class="nav-link">placeholder</a>
</li>
</nav>

11
templates/player.html
View File

@@ -22,11 +22,9 @@
<script src="static/bootstrap/js/mdb.min.js"></script>
</head>
<body>
<div class=top-bar role="navigation">
<button id="button-backward" type="button" href="/" class=top-button>Back</button>
</div>
<div class=leaderboard-container role="main">
<body class="bg-special">
{% include 'navbar.html' %}
<div class="container mt-3 mb-3" role="main">
<div class="player-headline">
<h1>
{{ player.name }}
@@ -40,6 +38,9 @@
<canvas id="lineChart">
</canvas>
</div>
<p class="mt-5 mb-3">
*Historical data was not recorded before 06/2020
</p>
</div>
{% include 'footer.html' %}
<script defer>