Move play pages to separate detail view

games/models.py

@@ -1,3 +1,4 @@
+from emus.settings import RETROPIE_WEBRETRO_SYSTEM_MAP
 from enum import Enum
 
 from django.conf import settings
@@ -176,3 +177,7 @@ class Game(BaseModel):
 
     def get_absolute_url(self):
         return reverse("games:game_detail", args=[self.slug])
+
+    def get_play_url(self):
+        if self.game_system.retropie_slug in RETROPIE_WEBRETRO_SYSTEM_MAP.keys():
+            return reverse("games:game_play_detail", args=[self.slug])

games/urls.py

@@ -3,12 +3,13 @@ from games.api.views import GameViewSet
 from rest_framework import routers
 
 # importing views from views..py
-from .views import GameList, GameDetail, GameSystemDetail
+from .views import GameList, GameDetail, GameSystemDetail, GamePlayDetail
 
 app_name = "games"
 
 urlpatterns = [
     path("", GameList.as_view(), name="game_list"),
     path("<str:slug>/", GameDetail.as_view(), name="game_detail"),
+    path("<str:slug>/play/", GamePlayDetail.as_view(), name="game_play_detail"),
     path("system/<str:slug>/", GameSystemDetail.as_view(), name="game_system_detail"),
 ]

games/views.py

@@ -14,5 +14,10 @@ class GameDetail(DetailView):
     model = Game
 
 
+class GamePlayDetail(DetailView):
+    template_name = "games/game_play_detail.html"
+    model = Game
+
+
 class GameSystemDetail(DetailView):
     model = GameSystem

templates/games/game_detail.html

@@ -1,17 +1,12 @@
 {% extends "base.html" %}
 {% load static %}
 
-{% block head_extra %}
-    <script type="text/javascript" src="{% static 'js/webretro/embed/embed.js' %}"></script>
-{% endblock %}
-
 {% block title %}{{object.name}}{% endblock %}
 
 {% block content %}
     <a href="{% url "games:game_list" %}">Back to list</a>
-    <p>
-    <img src={{object.marquee.url}} />
-    </p>
+
+    <p><img src="{{object.screenshot.url}}" /></p>
 
     <dl>
         <dt>Released
@@ -31,9 +26,7 @@
     </dl>
 
     <p>{{object.description}}</p>
-
-    <p><a href="{{object.rom_file.url}}">Download ROM</a></p>
-    <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>
-
+    {% if object.get_play_url  %}
+    <p><a href="{{game.get_play_url}}" class="btn btn-primary">Play</a></p>
+    {% endif %}
 {% endblock %}

templates/games/game_list.html

@@ -13,7 +13,7 @@
                 <div class="card-body">
                     <h5 class="card-title">{{game.name}}</h5>
                     <p class="card-text">{{game.description|truncatechars:220}}</p>
-                    <a href="{{game.get_absolute_url}}" class="btn btn-primary">Play</a>
+                    <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>

templates/games/game_play_detail.html

@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block head_extra %}
+    <script type="text/javascript" src="{% static 'js/webretro/embed/embed.js' %}"></script>
+{% endblock %}
+
+{% block title %}{{object.name}}{% endblock %}
+
+{% block content %}
+    <a href="{% url "games:game_list" %}">Back to list</a>
+
+    <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>
+    <p><a href="{{object.rom_file.url}}">Download ROM</a></p>
+
+    <p><img src={{object.screenshot.url}} /></p>
+
+{% endblock %}