From 0ed43ec049d9f539e5d0b2112178098dff39f002 Mon Sep 17 00:00:00 2001
From: Yannik Schmidt <sheppy@atlantishq.de>
Date: Sun, 26 Nov 2023 16:15:18 +0100
Subject: [PATCH] feat: better UI & game selection

---
 server.py                | 18 ++++++++--
 static/site.css          | 55 ++++++++++++++++++++++++++++++
 templates/datatable.html |  2 +-
 templates/head.html      |  3 ++
 templates/index.html     | 73 ++++++++++++++++++++++++++++++----------
 templates/map-info.html  |  2 +-
 6 files changed, 130 insertions(+), 23 deletions(-)
 create mode 100644 static/site.css

diff --git a/server.py b/server.py
index d429e31..0b2f0f6 100755
--- a/server.py
+++ b/server.py
@@ -27,6 +27,7 @@ class Map(db.Model):
 
     map_uid = Column(String, primary_key=True)
     mapname = Column(String)
+    game    = Column(String)
 
     def get_best_replay(self):
 
@@ -268,7 +269,7 @@ def replay_from_path(fullpath, uploader=None):
                         game=ghost.game)
     
     # build database map object from replay #
-    m = Map(map_uid=replay.map_uid, mapname=replay.map_uid)
+    m = Map(map_uid=replay.map_uid, mapname=replay.map_uid, game=replay.game)
 
     # merge the map & commit and return the replay #
     db.session.merge(m)
@@ -323,7 +324,18 @@ def mapnames():
 
     # TODO list by user
     player = flask.request.headers.get("X-Forwarded-Preferred-Username")
-    maps = db.session.query(Map).order_by(asc(Map.mapname)).all()
+    maps_query = db.session.query(Map).order_by(asc(Map.mapname))
+
+    # limit leaderboard to game #
+    game = flask.request.args.get("game")
+    if game == "tm2020":
+        maps_query = maps_query.filter(Map.game=="tm2020")
+    elif game=="tmnf":
+        maps_query = maps_query.filter(Map.game!="tm2020")
+    else:
+        pass
+
+    maps = maps_query.all()
 
     # FIXME better handling for unwanted maps #
     allowed = ("A", "B", "C", "D", "E", "Fall", "Winter", "Spring", "Summer")
@@ -410,4 +422,4 @@ if __name__ == "__main__":
     with app.app_context():
         create_app()
 
-    app.run(host=args.interface, port=args.port)
+    app.run(host=args.interface, port=args.port, debug=True)
diff --git a/static/site.css b/static/site.css
new file mode 100644
index 0000000..daf1c67
--- /dev/null
+++ b/static/site.css
@@ -0,0 +1,55 @@
+body{
+    background: #2b3035;
+}
+
+td{
+    border-bottom: 1px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    font-size: 17px !important;
+    background: #343a40;
+}
+tr{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    color: white;
+}
+th{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    font-weight: bold;
+}
+table{
+    border-collapse:separate;
+    border-spacing: 0 0.25em;
+    border-bottom: 3px solid;
+    border-color: transparent;
+}
+
+.m-auto{
+    margin: auto;
+}
+
+.margin-r{
+    margin-right: 20px;
+}
+
+.margin-l{
+    margin-left: 20px;
+}
+
+.margin-table-mid{
+    margin-left: 20px;
+}
+
+.self-record{
+    background: #354034;
+}
+
+select{
+    background: darkgray !important;
+}
+
+input{
+    background: darkgray !important;
+}
diff --git a/templates/datatable.html b/templates/datatable.html
index 4bc80a5..64584a0 100644
--- a/templates/datatable.html
+++ b/templates/datatable.html
@@ -1,5 +1,5 @@
 <div style="font-size: 16px; font-weight: 300;" class="mt-5 mb-3 ml-2 mr-2" role="main">
-  <table id="tableMain" class="table table-striped table-bordered table-sm"
+  <table id="tableMain" style="width: 100%;" class="table-sm"
           cellspacing="0">
       <thead>
           <tr>
diff --git a/templates/head.html b/templates/head.html
index d4d789a..68e91c6 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -24,5 +24,8 @@
     <!-- mdb -->
     <link href="https://cdn.atlantishq.de/css/mdb.min.css" rel="stylesheet">
     <script defer src="https://cdn.atlantishq.de/js/mdb.min.js"></script>
+
+    <!-- site.css -->
+    <link href="/static/site.css" rel="stylesheet">
     
 </head>
diff --git a/templates/index.html b/templates/index.html
index d28b784..e8d5a13 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,41 +3,78 @@
 </head>
 <body>
     {% include "upload-button.html" %}
-    <table>
+    <button class="ml-4 mt-4 mb-4 btn btn-info" onclick="window.location.href='/?game=tmnf'">
+        TMNF
+    </button>
+    <button class="mt-4 mb-4 btn btn-info" onclick="window.location.href='/?game=tm2020'">
+        TM2020
+    </button>
+    <button class="mt-4 mb-4 btn btn-info" onclick="window.location.href='/'">
+        All
+    </button>
+    <table class="m-auto">
 	<thead>
 		<tr>
-			<th class="px-2">Map</th>
+			<th class="px-2">
+				<div class="margin-table-mid">Map</div>
+			</th>
 			{% if player %}
-			<th class="px-2">Personal Best</th>
+			<th class="px-2">
+				<div class="margin-table-mid">Personal Best</div>
+			</th>
 			{% endif %}
-			<th class="px-2">Record</th>
-			<th class="px-2">Record Holder</th>
-			<th class="px-2">Record Age</th>
-			<th class="px-2">Runner Up (%)</th>
+			<th class="px-2">
+				<div class="margin-table-mid">Record</div>
+			</th>
+			<th class="px-2">
+				<div class="margin-table-mid">Record Holder</div>
+			</th>
+			<th class="px-2">
+				<div class="margin-table-mid">Record Age</div>
+			</th>
+			<th class="px-2">
+				<div class="margin-table-mid">Runner Up (%)</div>
+			</th>
 		</tr>
 	</thead>
 	<tbody>
     {% for map in maps %}
 		<tr>
 			<td class="px-2">
-                <a href="/map-info?map_uid={{ map.map_uid }}">{{ map.mapname }}</a>
+                <a class="margin-l" href="/map-info?map_uid={{ map.map_uid }}">{{ map.mapname }}</a>
             </td>
 			{% if player %}
                 {% set pb = map.get_best_replay_for_player(player) %}
                 {% if pb and pb.race_time != map.get_best_replay().race_time %}
-			<td class="px-2">{{ pb.get_human_readable_time() }}</td>
-                {% elif pb %}
-			<td class="px-2" style="color: darkgreen">CRH</td>
-                {% else %}
-			<td class="px-2">-</td>
-                {% endif %}
+				<td class="px-2">
+            	    <div class="margin-table-mid">{{ pb.get_human_readable_time() }}</div>
+            	</td>
+            	{% elif pb %}
+				<td class="px-2" style="color: darkgreen">
+					<div class="margin-table-mid">CRH</div>
+				</td>
+            	{% else %}
+				<td class="px-2">
+					<div class="margin-table-mid">-</div>
+				</td>
+            	{% endif %}
 			{% endif %}
-			<td class="px-2">{{ map.get_best_replay_repr().split(" ")[0] }}</td>
-			<td class="px-2">{{ map.get_best_replay().clean_login() }}</td>
-			<td class="px-2">{{ map.get_best_replay_age() }} days</td>
-			<td class="px-2">{{ map.get_record_replay_percent_diff() }}</td>
+			<td class="px-2">
+				<div class="margin-table-mid">{{ map.get_best_replay_repr().split(" ")[0] }}</div>
+			</td>
+			<td class="px-2">
+				<div class="margin-table-mid">{{ map.get_best_replay().clean_login() }}</div>
+			</td>
+			<td class="px-2">
+				<div class="margin-table-mid">{{ map.get_best_replay_age() }} days</div>
+			</td>
+			<td class="px-2">
+           		<div class="margin-r">{{ map.get_record_replay_percent_diff() }}</div>
+            </td>
 		</tr>			
 	{% endfor %}
 	</tbody>
     </table>
+	<div style="padding-bottom: 30px;">
+	</div>
 </body>
diff --git a/templates/map-info.html b/templates/map-info.html
index 7b891aa..c657b35 100644
--- a/templates/map-info.html
+++ b/templates/map-info.html
@@ -1,7 +1,7 @@
 <head>
     {% include "head.html" %}
 </head>
-<body>
+<body style="color: white;" >
     {% include "upload-button.html" %}
     {% include "home-button.html" %}
     </br>