django/play/views.py

@@ -3,6 +3,7 @@ from django.shortcuts import render, redirect, get_object_or_404, reverse
 from play.models import QuizGame, QuizGameParticipant
 from library.models import QivipQuiz, QivipQuestion
 from django.http import HttpResponseRedirect, HttpResponseNotFound
+from django.contrib import messages
 
 import json
 
@@ -102,8 +103,7 @@ def join_game(request):
                 return redirect('play:create_participant', join_code=join_code)
             return redirect('play:lobby', join_code=join_code)
         except QuizGame.DoesNotExist:
-            # TODO: Mit message eine Fehlermeldung weitergeben (und im entsprechenden Template Designen)
+            messages.error(request, "Dieses Spiel existiert nicht.")
-            pass
     return render(request, 'play/join_game.html')
 
 def finished(request, join_code):

django/static/css/t-input.css

@@ -55,9 +55,14 @@ a.qp-a-button-small {
 
 
 
+ul.messages li {
+    @apply p-3 rounded-full bg-gray-200 hover:scale-105 transition duration-200 font-black 
+    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100;
+}
 
-
+ul.messages li.error {
-
+    @apply bg-red-200;
+}
 
 
 

django/templates/play/join_game.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<div class="grid place-items-center min-h-[calc(100vh-5rem)] py-6 m-2">
+<div class="sm:grid sm:place-items-center sm:min-h-[calc(100vh-5rem)] flex justify-center py-6 m-2">
     <div class="max-w-md w-full p-8 rounded-2xl border-2 border-blue-400 bg-white">
         <h1 class="text-2xl text-center font-bold mb-4">Spiel beitreten</h1>
         <form action="{% url 'play:join_game' %}" method="post" class="flex flex-col gap-4">
@@ -15,6 +15,13 @@
                     </svg>
                 </button>
             </div>
+            {% if messages %}
+                <ul class="messages">
+                    {% for message in messages %}
+                    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
+                    {% endfor %}
+                </ul>
+            {% endif %}
         </form>
         <script>
             const input = document.querySelector('input[name="game_code"]');