Add featured game and clean up templates

emus/settings.py

@@ -28,6 +28,8 @@ SECRET_KEY = "l2-2d4dmvb0un0s)=5z%c87t*tg_hu&bt6*o^ks9r7f-3(mp$$"
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = os.getenv("EMUS_DEBUG", False)
 
+FEATURED_GAME_DURATION = os.getenv("EMUS_FEATURED_GAME_DURATION", 60 * 60 * 18)
+
 ALLOWED_HOSTS = ["*"]
 CSRF_TRUSTED_ORIGINS = [os.getenv("EMUS_TRUSTED_ORIGINS", "http://localhost:8000")]
 X_FRAME_OPTIONS = "SAMEORIGIN"

games/models.py

@@ -232,6 +232,14 @@ class Game(BaseModel):
             return int(100 * self.rating)
         return int(0)
 
+    @property
+    def rating_class(self):
+        if self.rating_by_100 > 70:
+            return "high"
+        if self.rating_by_100 > 50:
+            return "medium"
+        return "low"
+
     @property
     def retroarch_core_path(self):
         path = None

games/views.py

@@ -2,6 +2,7 @@ import json
 import logging
 
 from celery import states
+from django.core.cache import cache
 from django.conf import settings
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.mixins import LoginRequiredMixin
@@ -23,8 +24,21 @@ IN_PROGRESS_STATES = [states.PENDING, states.STARTED, states.RETRY]
 
 class RecentGameList(LoginRequiredMixin, ListView):
     model = Game
-    paginate_by = 20
-    queryset = Game.objects.order_by("-created")[:200]
+    paginate_by = 12
+    queryset = Game.objects.order_by("-created")[:64]
+
+    def get_context_data(self, **kwargs):
+        cached_game_id = cache.get("todays_game_id", None)
+        if not cached_game_id:
+            todays_game = Game.objects.filter(rating__gte=0.7).order_by("?").first()
+            cache.set("todays_game_id", todays_game.id, settings.FEATURED_GAME_DURATION)
+        else:
+            todays_game = Game.objects.get(id=cached_game_id)
+
+        return super(RecentGameList, self).get_context_data(
+            todays_game=todays_game,
+            **kwargs,
+        )
 
 
 class LibraryGameList(ListView, LoginRequiredMixin):

templates/base.html

@@ -35,6 +35,21 @@
         .card-block { padding: 1em 0 1em 0; }
         .system-badge { padding: 1em; font-size: normal; }
         .updating { color:#aaa; margin-right: 8px; }
+        .high { color: green; }
+        .medium { color: #aaa;}
+        .low { color: red; }
+        .card {
+            height: auto;
+            display: flex;
+        }
+        .card-columns{
+            display: grid;
+            overflow: hidden;
+            grid-template-columns: repeat(2, 1fr);
+            grid-auto-rows: 1fr;
+            grid-column-gap: 20px;
+            grid-row-gap: 10px;
+        }
         {% for system in game_systems %}
         .{{system.retropie_slug}} { background: #{{system.get_color}}; }
         {% endfor %}
@@ -108,7 +123,7 @@
             {% endif %}
             </nav>
 
-            <h2>{% block title %}{% endblock %}</h2>
+            <h1>{% block title %}{% endblock %}</h1>
 
             <div>
                 {% block content %}

templates/games/_game_card.html

@@ -1,36 +1,43 @@
-<div class="card" >
+<div class="card">
     <div class="row no-gutters">
         <div class="col-auto">
-        {% if game.screenshot %}
-        <img src="{{game.screenshot.url}}" class="img-fluid" alt="Screenshot of {{game.name}}">
-        {% elif game.marquee %}
-        <img src="{{game.marquee.url}}" class="img-fluid" alt="Title of {{game.name}}">
-        {% else %}
-        <h2>{{game.name}}</h2>
-        {% endif %}
+            <div>
+                <a href="{{game.game_system.get_absolute_url}}">
+                    <span class="system-badge badge badge-success {{game.game_system.retropie_slug}}">{{game.game_system.name|upper}}</span>
+                </a>
+            </div>
+            <a href="{{game.get_absolute_url}}">
+                {% if game.screenshot %}
+                <img src="{{game.screenshot.url}}" style="width:34em;" class="" alt="Screenshot of {{game.name}}">
+                {% elif game.marquee %}
+                <img src="{{game.marquee.url}}" style="width:34em;" class="" alt="Title of {{game.name}}">
+                {% else %}
+                {% if featured != "true" %}
+                <h3>{{game.name}}</h3>
+                {% else %}
+                <h2>{{game.name}}</h2>
+                {% endif %}
+                {% endif %}
+            </a>
         </div>
+        {% if featured == "true" %}
         <div class="col">
             <div class="card-block px-2">
-                <h4 class="card-title">{{game.name}}{% if game.region %} [{{game.region}}]{% endif %}</h4>
-                <p class="card-text">{{game.description|truncatechars:220}}</p>
+                <p class="card-text m-10">{{game.description}}</p>
                 <a href="{{game.get_absolute_url}}" class="btn btn-primary">More</a>
                 <a href="{{game.rom_file.url}}" class="btn btn-alert">Download</a>
             </div>
         </div>
-    </div>
-    <div class="card-footer w-100 text-muted">
-        <a href="{{game.game_system.get_absolute_url}}">
-            <span class="system-badge badge badge-success {{game.game_system.retropie_slug}}">{{game.game_system.name|upper}}</span>
-        </a>
-        <b>&nbsp;&nbsp;{{game.rating_by_100}}/100</b>
-
-        <div id="genre-badges" style="float:right">
-        {% for genre in game.genre.all %}
-        <a href="{{genre.get_absolute_url}}">
-            <span class="badge">{{genre.name}}</span>
-        </a>
-        {% endfor %}
+        {% endif %}
+        <div class="card-footer w-100 text-muted">
+            <em class="{{game.rating_class}}">{{game.rating_by_100}}/100</em>
+            <div id="genre-badges" style="float:right">
+                {% for genre in game.genre.all %}
+                <a href="{{genre.get_absolute_url}}">
+                    <span class="badge">{{genre.name}}</span>
+                </a>
+                {% endfor %}
+            </div>
         </div>
     </div>
 </div>
-<br />

templates/games/game_list.html

@@ -1,15 +1,24 @@
 {% extends "base.html" %}
 
-{% block title %}Recently added games{% endblock %}
+{% block title %}Games{% endblock %}
 
 {% block content %}
+    {% if todays_game %}
      <div class="d-flex flex-column">
         <div class="image-grid-container">
-            {% for  game in object_list %}
-            <h4>{{game.created}}</h4>
-            {% include 'games/_game_card.html' %}
-            {% endfor %}
+            <h2>Featured</h2>
+            {% include 'games/_game_card.html' with game=todays_game featured="true" %}
         </div>
+     </div>
+    {% endif %}
+
+
+    <h2>Recently added</h2>
+
+    <div class="card-columns">
+    {% for game in object_list %}
+      {% include 'games/_game_card.html' %}
+    {% endfor %}
     </div>
 
      {% include "games/_pagination.html" %}

templates/games/game_play_detail.html

@@ -12,7 +12,7 @@
     </head>
     <body>
         <div id="webretro-container" style="width:800px; height:600px"></div>
-        <script>webretroEmbed(document.getElementById("webretro-container"), "{% static 'js/webretro/index.html' %}", {core: "{{object.game_system.webretro_core}}", rom:"{{request.scheme}}://{{request.META.HTTP_HOST}}{{object.rom_file.url}}"});</script>
+        <script>webretroEmbed(document.getElementById("webretro-container"), "{% static 'js/webretro/index.html' %}", {core: "{{object.game_system.webretro_core}}", rom:"https://{{request.META.HTTP_HOST}}{{object.rom_file.url}}"});</script>
         <p><a href="{{object.rom_file.url}}">Download ROM</a></p>
     </body>
 </html>