feat: add reset button

app/core/highscore.py

@@ -4,10 +4,11 @@
 
 
 class Highscore:
-    def __init__(self, request):
+    def __init__(self, request, is_reset: bool = False, max_values: int = 4):
         self.session = request.session
-        scores = self.session.get(secret_key)
+        self.max_values = max_values
 
+        scores = {} if is_reset else self.session.get(secret_key)
         if not scores:
             # save an empty scores dict in the session
             scores = self.session[secret_key] = {}
@@ -35,5 +36,5 @@ def get_highscore(self) -> List[Tuple[float, str]]:
         """
         highscore = sorted(
             self.scores.values(), key=lambda x: x["prediction"], reverse=True
-        )[:5]
+        )[: self.max_values]
         return highscore

app/routers/root.py

@@ -36,7 +36,9 @@ async def get_form(request: Request):
     Returns:
         _type_: _description_
     """
-    highscore = Highscore(request)
+    is_reset = "resetButton" == request.headers.get("HX-Trigger")
+    highscore = Highscore(request, is_reset=is_reset)
+
     payload = {
         "request": request,
         "scores": highscore.get_highscore(),

app/templates/about.html

@@ -1,12 +1,11 @@
 {% extends "shared/base.html" %} {% block layout_base %}
 
-<div class="container">
+
+
+<div class="container-md my-5">
     <div class="row my-5">
         <h3 class="text-left display-4">About</h3>
     </div>
-</div>
-
-<div class="container">
 
     <div class="row my-5">
         <p>

app/templates/partials/highscore.html

@@ -0,0 +1,11 @@
+<hr style="border-bottom: 1px solid #888">
+
+<h4 class="text-left display-10">Highscore</h4>
+<p class="text-left">The training dataset uses streams between 0 and 30.</p>
+
+<ul class="list-group">
+    {% for score in scores %}
+    <li class="list-group-item">{{ score["prediction"] }}: {{ score["header"] }}
+    </li>
+    {% endfor %}
+</ul>

app/templates/partials/songform.html

@@ -1,28 +1,28 @@
-<h3 class="text-left display-5">Let's predict the number of streams for a song</h3>
+<h1 class="text-left display-6">Let's predict the number of streams for a song</h1>
 
-<div class="text-danger font-weight-bold">
-    {% for error in errors %}
-    <li>{{error}}</li>
-    {% endfor %}
-</div>
 
-<h4 class="text-left display-7">Choose a song!</h4>
+
+<h2 class="text-left display-7">Choose a song!</h2>
 <form id="myForm" action="/search_song" method="POST" hx-boost="true" hx-trigger="submit" hx-swap="innerHTML"
     hx-target="#songForm">
 
-    <div class="mb-3">
+    <div class="form-outline h-100 mb-3">
         <input type="text" required placeholder="Choose an artist e.g Queen" name="artist" value="{{artist}}"
             class="form-control">
     </div>
 
-    <div class="mb-3">
+    <div class="form-outline h-100 mb-3">
         <input type="text" required placeholder="Choose a song e.g Don't stop me now" name="song" value="{{song}}"
             class="form-control">
     </div>
 
-    <div class="class text-center">
+    <div class="text-center my-2">
         <button type="submit" hx-trigger="submit">Search</button>
     </div>
-
-
 </form>
+
+<div class="container-fluid text-danger text-left display-6 font-weight-bold">
+    {% for error in errors %}
+    {{error}}
+    {% endfor %}
+</div>

app/templates/partials/success.html

@@ -1,12 +1,5 @@
-<!-- <h2 class="text-center display-7">{{header}}</h2> -->
-
-
-
-
-<h3 class="text-left display-5">{{header}}</h3>
-<hr style="border-bottom: 1px solid #888">
-
-<p class="fw-bold display-6">{{prediction["message"]["text"]}} {{prediction["message"]["emoji"]}}</p>
+<h1 class="text-left display-6">{{header}}</h1>
+<h3 class="text-left display-7">{{prediction["message"]["text"]}} {{prediction["message"]["emoji"]}}</h3>
 
 
 <ul class="list-group">
@@ -30,7 +23,6 @@ <h3 class="text-left display-5">{{header}}</h3>
 </div>
 {% endif %}
 
-<div class="class text-center">
+<div class="text-center my-2">
     <a href="/"><button type="submit">Try it again!</button></a>
-
 </div>

app/templates/prediction.html

@@ -3,26 +3,21 @@
 {% endblock %}
 
 
-<div class="container my-5 mx-5" style="height: 20em" id="songForm">
+<div class="container-md my-5" style="height: 22em" id="songForm">
     <!--  include songform -->
     {% include 'partials/songform.html' %}
 </div>
 
 
-<div class="container my-5 mx-5" id="highscore">
-    <hr style="border-bottom: 1px solid #888">
-
-    <h4 class="text-left display-10">Highscore</h4>
-    <p class="text-left">The training dataset uses streams between 0 and 30.</p>
-
-    <ul class="list-group">
-        {% for score in scores %}
-        <li class="list-group-item">{{ score["prediction"] }}: {{ score["header"] }}
-        </li>
-        {% endfor %}
-    </ul>
+<div class="container-md" id="highscore">
+    <!--  include highscore -->
+    {% include 'partials/highscore.html' %}
+</div>
 
 
+<div id="resetButton" class="text-center my-2" hx-trigger="click" hx-get="/" hx-swap="innerHTML" hx-target="body">
+    <button type="submit">Reset Highscore</button>
 </div>
 
+
 {% endblock %}

app/templates/shared/base.html

@@ -16,7 +16,7 @@
         integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
 
     <!-- <link rel="stylesheet" href="/static/styles.css" /> -->
-    <link rel="stylesheet" href="{{ url_for('static', path='styles.css') }}">
+    <!-- <link rel="stylesheet" href="{{ url_for('static', path='styles.css') }}"> -->
 
 </head>