Add /games page and add checkboxes for subscribing to games

.vscode/settings.json

@@ -3,6 +3,7 @@
         "allauth",
         "appendonly",
         "asgiref",
+        "forloop",
         "logdir",
         "memlock",
         "networkidle",

core/templates/games.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{% block content %}
+    <div class="container mt-4">
+        <div class="row">
+            {% for game in games %}
+                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-4">
+                    <div class="card h-100 shadow-sm">
+                        <img src="{{ game.image_url }}"
+                             class="card-img-top"
+                             alt="{{ game.display_name }}">
+                        <div class="card-body d-flex flex-column">
+                            <h5 class="card-title">{{ game.display_name }}</h5>
+                            <div class="mt-auto">
+                                <div class="form-check form-switch">
+                                    <input class="form-check-input" type="checkbox" role="switch" id="new">
+                                    <label class="form-check-label" for="new">Notify when new</label>
+                                </div>
+                                <div class="form-check form-switch">
+                                    <input class="form-check-input" type="checkbox" role="switch" id="live">
+                                    <label class="form-check-label" for="live">Notify when farmable</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endblock content %}

core/templates/index.html

@@ -18,7 +18,6 @@
                     </div>
                 </div>
             </div>
-            <!-- Games Column -->
             <div class="col-lg-9">
                 {% for game in games %}
                     <div class="card mb-4 shadow-sm" id="game-{{ game.game_id }}">
@@ -36,6 +35,18 @@
                                     <h2 class="card-title h5">
                                         <a href="{{ game.twitch_url }}" class="text-decoration-none">{{ game.display_name }}</a>
                                     </h2>
+                                    <div class="mt-auto">
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input" type="checkbox" role="switch" id="new">
+                                            <label class="form-check-label" for="new">
+                                                Notify when new drop is found on <a href="https://www.twitch.tv/drops/campaigns">Twitch</a>
+                                            </label>
+                                        </div>
+                                        <div class="form-check form-switch">
+                                            <input class="form-check-input" type="checkbox" role="switch" id="live">
+                                            <label class="form-check-label" for="live">Notify when a drop starts</label>
+                                        </div>
+                                    </div>
                                     {% for campaign in game.campaigns %}
                                         {% if not forloop.first %}<br>{% endif %}
                                         <div class="mt-3">

core/templates/partials/header.html

@@ -5,6 +5,9 @@
     </h1>
     <nav>
         <ul class="nav">
+            <li class="nav-item">
+                <a class="nav-link" href='{% url "core:games" %}'>Games</a>
+            </li>
             <li class="nav-item">
                 <a class="nav-link" href='{% url "api-1.0.0:openapi-view" %}'>API</a>
             </li>

core/urls.py

@@ -25,4 +25,9 @@ urlpatterns: list[URLPattern | URLResolver] = [
         view=views.subscription_create,
         name="subscription_create",
     ),
+    path(
+        route="games/",
+        view=views.GameView.as_view(),
+        name="games",
+    ),
 ]

core/views.py

@@ -12,6 +12,7 @@ from django.http import (
 )
 from django.shortcuts import redirect, render
 from django.template.response import TemplateResponse
+from django.views.generic import ListView
 
 from core.discord import send
 from core.models import DiscordSetting
@@ -279,3 +280,10 @@ def subscription_create(request: HttpRequest) -> HttpResponse:
 
     messages.error(request, "Failed to create subscription")
     return redirect("core:index")
+
+
+class GameView(ListView):
+    model = Game
+    template_name: str = "games.html"
+    context_object_name: str = "games"
+    paginate_by = 100

pyproject.toml

@@ -37,6 +37,7 @@ lint.ignore = [
 [tool.djlint]
 profile = "django"
 format_attribute_template_tags = true
+ignore="H006" # Img tag should have height and width attributes.
 
 [tool.pytest.ini_options]
 DJANGO_SETTINGS_MODULE = "config.settings"

static/css/style.css

@@ -60,3 +60,16 @@ a:hover {
 .toc {
     top: 1rem;
 }
+
+/* Checkboxes for subscribing to notifications */
+/* Checked */
+.form-check-input:checked {
+    background-color: #af1548;
+    border-color: #111111;
+}
+
+/* Unchecked */
+.form-check-input {
+    background-color: #0c0c0c;
+    border-color: #111111;
+}