Refactor random button

templates/challenge.html

@@ -260,7 +260,9 @@
       <div class="sidebar-actions">
         {% include 'components/github_icon.html' %}
         {% include 'components/darkmode.html' %}
-        {% include 'components/randomizer.html' %}
+        <div id="sidebar-actions-random">
+          {% include 'components/randomizer.html' %}
+        </div>
       </div>
     </div>
 

templates/components/challenge_area.html

@@ -19,7 +19,7 @@
   </div>
 </div>
 
-<div class="challenge-main">
+<div class="challenge-main" {{challenge_main_htmx}}>
   <div class="codemirror-container">
     <div id="editor">
       <a id="playground-link" target="_blank" rel="noopener noreferrer">

templates/components/randomizer.html

@@ -9,7 +9,8 @@
   }
 </style>
 
-<a href="/random" class="icon" title="Pick a random challenge">
+<a hx-get="{{pathname}}" hx-target=".challenge-area" hx-push-url="true" onclick="removeHighlight(event)"
+   class="icon" title="Pick a random challenge">
   <!-- SVG from https://icons.getbootstrap.com/icons/shuffle/ -->
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shuffle" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5"/>

templates/index.html

@@ -82,7 +82,7 @@ <h1 class="title">Welcome to Python Type Challenges!</h1>
         {% include 'components/challenge_card.html' with context %}
       {% endfor%}
     </div>
-    <div class="random-button"><a href="/random" title="Pick a random challenge">Random Challenge 🔀</a></div>
+    <div class="random-button"><a href="{{pathname}}" title="Pick a random challenge">Random Challenge 🔀</a></div>
   </div>
 
 {% endblock %}

views/challenge.py

@@ -98,10 +98,10 @@ def run_challenge(self, key: ChallengeKey, user_code: str) -> TypeCheckResult:
         # Make sure user code ends with a new line to avoid issue #63.
         return self._type_check_with_pyright(user_code + "\n", challenge.test_code)
 
-    def get_random_challenge(self) -> dict[str, str]:
+    def get_random_challenge_pathname(self) -> str:
         level = random.choice(list(self.challenges_groupby_level.keys()))
         name = random.choice(self.challenges_groupby_level[level])
-        return {"level": level, "name": name}
+        return f"/{level}/{name}"
 
     @staticmethod
     def _load_challenges(root_dir: Path) -> dict[ChallengeKey, Challenge]:

views/views.py

@@ -2,14 +2,7 @@
 import platform
 from functools import wraps
 
-from flask import (
-    abort,
-    Blueprint,
-    jsonify,
-    redirect,
-    render_template,
-    request,
-)
+from flask import Blueprint, abort, jsonify, redirect, render_template, request
 from flask_htmx import HTMX
 
 from .challenge import ChallengeKey, Level, challenge_manager
@@ -38,6 +31,7 @@ def index():
     return render_template(
         "index.html",
         challenges_groupby_level=challenge_manager.challenges_groupby_level,
+        pathname=challenge_manager.get_random_challenge_pathname(),
     )
 
 
@@ -66,7 +60,12 @@ def get_challenge(level: str, name: str):
     if htmx:
         # In this case, challenges_groupby_level is transferred, since it's not
         # used in challenge_area.html
+        params[
+            "challenge_main_htmx"
+        ] = "hx-get=/random hx-target=#sidebar-actions-random hx-trigger=load"
         return render_template("components/challenge_area.html", **params)
+
+    params["pathname"] = challenge_manager.get_random_challenge_pathname()
     return render_template("challenge.html", **params)
 
 
@@ -98,6 +97,13 @@ def run_challenge(level: str, name: str):
 
 
 @app_views.route("/random", methods=["GET"])
-def run_random_challenge():
-    challenge = challenge_manager.get_random_challenge()
-    return redirect(f"/{challenge['level']}/{challenge['name']}")
+def get_random():
+    pathname = challenge_manager.get_random_challenge_pathname()
+
+    if htmx:
+        return render_template(
+            "components/randomizer.html",
+            pathname=pathname,
+        )
+
+    return redirect(pathname)