visual updates

README.md

@@ -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``
 
 

database.py

@@ -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):

server.py

@@ -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>')

static/buttons.js

@@ -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");
+//var gotoRankInputField = document.getElementById("gotoRank");
-gotoRankInputField.addEventListener("keyup", function(event) {
+//gotoRankInputField.addEventListener("keyup", function(event) {
-    if (event.key == "Enter") {
+//    if (event.key == "Enter") {
-        event.preventDefault();
+//        event.preventDefault();
-        var rank = gotoRankInputField.value
+//        var rank = gotoRankInputField.value
-        var page = Math.trunc((rank - 1)/100)
+//        var page = Math.trunc((rank - 1)/100)
-        url.searchParams.set("page", page)
+//        url.searchParams.set("page", page)
-        url.searchParams.set("goto", rank)
+//        url.searchParams.set("goto", rank)
-        window.location.href = url.href
+//        window.location.href = url.href
-    }
+//    }
-});
+//});
 
 var getPlayerInputField = document.getElementById("getPlayer");
 getPlayerInputField.addEventListener("keyup", function(event) {

static/site.css

@@ -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;
-}
+    color: black;
-
-/* #################### LEADERBOARDS ##################### */
-.leaderboard-container{
-    margin-top: 10px;
-    margin-bottom: 50px;
-    margin-left: auto;
-    margin-right: auto;
-    min-width: 250px;
-    width: 80%;
-    max-width: 800px;
 }
 
 .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;

templates/base.html

@@ -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">
+        {% include 'navbar_leaderboard.html' %}
-            <button id="button-backward" type="button" onclick=backward() 
+        <div class="container mt-3 mb-3" role="main">
-                    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">
             <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">
+    {% include 'footer.html' %}
-        	<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> 
     </body>
 </html>

templates/footer.html

@@ -1,6 +1,9 @@
-<div class=footer role="contentinfo">
+<div class="footer-copyright text-center py-3 bg-dark" role="contentinfo">
-	<a class="footerLink" href="https://blog.atlantishq.de/about">Impressum/Legal</a>
+	<a style="color: rgba(255,255,255,.5);" 
-	<a class="footerLink mid" href="https://blog.atlantishq.de/post/insurgency-rating-1/">
+            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> 

templates/navbar.html

@@ -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>
+

templates/navbar_leaderboard.html

@@ -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>

templates/player.html

@@ -22,11 +22,9 @@
         <script src="static/bootstrap/js/mdb.min.js"></script>
 
     </head>
-    <body>
+    <body class="bg-special">
-        <div class=top-bar role="navigation">
+        {% include 'navbar.html' %}
-            <button id="button-backward" type="button" href="/" class=top-button>Back</button>
+        <div class="container mt-3 mb-3" role="main">
-        </div>
-        <div class=leaderboard-container 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>