Initial Game Logic 2

2025-04-06 15:57:42 +02:00
parent 3637edce33
commit 3f07ce4ec7
15 changed files with 1506 additions and 151 deletions
--- a/django/templates/base.html
+++ b/django/templates/base.html
@@ -6,12 +6,56 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/t-style.css' %}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <title>qivip</title>
 </head>
 <body>
    {% include 'partials/_nav.html' %}
    {% block content%}{% endblock %}
    {% include 'partials/_footer.html' %}
+    
+    <!-- Toast Container -->
+    <div id="toast-container" class="fixed top-4 right-4 z-50"></div>
+
+    <!-- Base JavaScript -->
+    <script>
+        // WebSocket Utility
+        const wsUtil = {
+            handleClose: function(e) {
+                if (e.code === 1000 || e.code === 1001) {
+                    console.log('Socket closed normally');
+                } else {
+                    console.error('Socket closed unexpectedly', e.code);
+                }
+            }
+        };
+
+        // Toast Notification System
+        const toast = {
+            create: function(message, type = 'info', duration = 3000) {
+                const toast = document.createElement('div');
+                toast.className = `mb-4 p-4 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out
+                    ${type === 'success' ? 'bg-green-100 border-l-4 border-green-500 text-green-700' :
+                      type === 'error' ? 'bg-red-100 border-l-4 border-red-500 text-red-700' :
+                      type === 'warning' ? 'bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700' :
+                      'bg-blue-100 border-l-4 border-blue-500 text-blue-700'}`;
+                toast.innerHTML = message;
+                
+                const container = document.getElementById('toast-container');
+                container.appendChild(toast);
+
+                // Animate in
+                setTimeout(() => toast.classList.add('translate-x-0', 'opacity-100'), 100);
+                toast.classList.add('-translate-x-4', 'opacity-0');
+
+                // Remove after duration
+                setTimeout(() => {
+                    toast.classList.add('-translate-x-4', 'opacity-0');
+                    setTimeout(() => toast.remove(), 300);
+                }, duration);
+            }
+        };
+    </script>
    {% block extra_js %}{% endblock %}
 </body>
 </html>