feat: add autoreloading on queue and viewing your own matches

[pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

Author: amcsz

othello/apps/games/urls.py

@@ -12,6 +12,7 @@
     path("watch/<int:game_id>", views.watch, name="watch"),
     path("replay/", views.replay, name="replay"),
     path("queue/", views.queue, name="queue"),
+    path("queue/json/", views.queue_json, name="queue_json"),
     path("request_match/", views.request_match, name="request_match"),
     path("match_replay/<int:match_id>/", views.match_replay, name="match_replay"),
     path("help/", views.help_view, name="help"),

othello/apps/games/views.py

@@ -5,7 +5,7 @@
 from django.contrib.auth.decorators import login_required
 from django.core.paginator import Paginator
 from django.db import models
-from django.http import FileResponse, HttpRequest, HttpResponse
+from django.http import FileResponse, HttpRequest, HttpResponse, JsonResponse
 from django.shortcuts import get_object_or_404, redirect, render
 from django.utils import timezone
 
@@ -173,12 +173,59 @@ def request_match(request: HttpRequest) -> HttpResponse:
 
 
 @login_required
+def queue_json(request: HttpRequest) -> HttpResponse:
+    matches = Match.objects.all().order_by("-created_at")
+    my_matches_only = request.GET.get("my_matches") == "1"
+    if my_matches_only:
+        matches = matches.filter(
+            models.Q(player1__user=request.user) | models.Q(player2__user=request.user)
+        )
+    paginator = Paginator(matches, 10)
+    page_number = request.GET.get("page")
+    page_obj = paginator.get_page(page_number)
+
+    matches_data = []
+    for match in page_obj:
+        matches_data.append(
+            {
+                "id": match.id,
+                "player1_name": match.player1.get_game_name(),
+                "player2_name": match.player2.get_game_name(),
+                "score": f"{match.player1_wins}-{match.ties}-{match.player2_wins}"
+                if match.status == "completed"
+                else "-",
+                "is_ranked": "Yes" if match.is_ranked else "No",
+                "status": match.status,
+                "created_at": match.created_at.isoformat(),
+                "can_view_replay": request.user in [match.player1.user, match.player2.user],
+            }
+        )
+
+    return JsonResponse(
+        {
+            "matches": matches_data,
+            "has_next": page_obj.has_next(),
+            "has_previous": page_obj.has_previous(),
+            "page_number": page_obj.number,
+        }
+    )
+
+
 def queue(request: HttpRequest) -> HttpResponse:
     matches = Match.objects.all().order_by("-created_at")
-    paginator = Paginator(matches, 10)  # 10 per page
+    my_matches_only = request.GET.get("my_matches") == "1"
+    if my_matches_only and request.user.is_authenticated:
+        matches = matches.filter(
+            models.Q(player1__user=request.user) | models.Q(player2__user=request.user)
+        )
+    paginator = Paginator(matches, 10)
     page_number = request.GET.get("page")
     page_obj = paginator.get_page(page_number)
-    return render(request, "games/queue.html", {"page_obj": page_obj})
+    return render(
+        request,
+        "games/queue.html",
+        {"page_obj": page_obj, "my_matches_only": my_matches_only, "request": request},
+    )
 
 
 def watch(request: HttpRequest, game_id: int | None = None) -> HttpResponse:

othello/settings/__init__.py

@@ -144,7 +144,7 @@
 
 # Celery
 CELERY_RESULT_BACKEND = "django-db"
-CELERY_BROKER_URL = "redis://localhost:6379/1"
+CELERY_BROKER_URL = "redis://othello_redis:6379/1"
 CELERY_TIMEZONE = "America/New_York"
 CELERY_BEAT_SCHEDULE = {
     "delete-old-games": {

othello/static/js/games/queue.js

@@ -15,6 +15,7 @@ $(document).ready(function() {
     };
 
     function updateMatch(data) {
+        console.log("websocket update");
         const matchRow = $(`.match[data-match-id="${data.match_id}"]`);
 
         let statusHtml = data.status;
@@ -66,4 +67,81 @@ $(document).ready(function() {
             applyWinLoseClasses(newRow);
         }
     }
-});
+
+    $('#myMatchesCheckbox').change(function() {
+        const url = new URL(window.location);
+        if (this.checked) {
+            url.searchParams.set('my_matches', '1');
+        } else {
+            url.searchParams.delete('my_matches');
+        }
+        window.location.href = url.toString();
+    });
+
+    function pollQueue() {
+        const url = new URL(window.location);
+
+        url.pathname = url.pathname.replace('/queue/', '/queue/json/');
+
+        if (!url.searchParams.has('page')) {
+            url.searchParams.set('page', '1');
+        }
+
+        $.getJSON(url.toString(), function(data) {
+            updateTable(data.matches);
+        });
+    }
+
+
+    function updateTable(matches) {
+        console.log("http update");
+        const tbody = $('#matches');
+        tbody.empty();
+
+        matches.forEach(function(match) {
+            let statusHtml = match.status;
+            if (match.status === 'completed' && match.can_view_replay) {
+                statusHtml += ` <a href="/match_replay/${match.id}/">(Replay)</a>`;
+            }
+
+            const row = $(`
+                <tr class="match" data-match-id="${match.id}">
+                    <td>${match.player1_name}</td>
+                    <td>${match.score}</td>
+                    <td>${match.player2_name}</td>
+                    <td>${match.is_ranked}</td>
+                    <td>${statusHtml}</td>
+                    <td>${match.created_at}</td>
+                </tr>
+            `);
+
+            row.find('td:nth-child(1), td:nth-child(3)')
+                .removeClass('win lose');
+
+            if (match.status === 'completed' && match.score) {
+                const parts = match.score.split('-').map(Number);
+
+                if (parts.length === 3) {
+                    const p1Wins = parts[0];
+                    const p2Wins = parts[2];
+
+                    const p1Cell = row.find('td:nth-child(1)');
+                    const p2Cell = row.find('td:nth-child(3)');
+
+                    if (p1Wins > p2Wins) {
+                        p1Cell.addClass('win');
+                        p2Cell.addClass('lose');
+                    } else if (p2Wins > p1Wins) {
+                        p2Cell.addClass('win');
+                        p1Cell.addClass('lose');
+                    }
+                }
+            }
+
+            tbody.append(row);
+        });
+    }
+
+
+    setInterval(pollQueue, 10000);
+});

othello/templates/games/queue.html

@@ -9,6 +9,15 @@
 
 {% block main %}
 <h1>Running Matches</h1>
+{% with query_params=request.GET.urlencode %}
+<div class="mb-3">
+    <div class="form-check">
+        <input class="form-check-input" type="checkbox" id="myMatchesCheckbox" {% if my_matches_only %}checked{% endif %}>
+        <label class="form-check-label" for="myMatchesCheckbox">
+            Show only my matches
+        </label>
+    </div>
+</div>
 <table class="table table-striped">
     <thead>
         <tr>
@@ -75,4 +84,5 @@ <h1>Running Matches</h1>
         {% endif %}
     </span>
 </div>
+{% endwith %}
 {% endblock %}