Ajout d'une catégorie jeux dans le tryouts, chacun des jeux offre des rôles différents pour les membres d'équipes. Remodelage du code un peu et ajout de docu

static/js/main.js

@@ -1,4 +1,19 @@
-// Dark Mode Toggle
+/**
+ * Team Tryouts - Main JavaScript Module
+ * 
+ * This module provides core UI functionality including:
+ * - Dark mode toggle and persistence
+ * - Sidebar mobile toggle
+ * - Draggable dashboard blocks
+ * - Auto-dismissing alerts
+ */
+
+/**
+ * Toggle dark mode theme.
+ * 
+ * Switches between light and dark themes, updates the toggle button icon,
+ * and persists the preference in localStorage.
+ */
 function toggleDarkMode() {
     const body = document.documentElement;
     const isDark = body.getAttribute('data-theme') === 'dark';
@@ -15,7 +30,11 @@ function toggleDarkMode() {
     }
 }
 
-// Load saved theme preference
+/**
+ * Load saved theme preference from localStorage.
+ * 
+ * Called on page load to restore the user's preferred theme.
+ */
 function loadTheme() {
     const savedTheme = localStorage.getItem('theme');
     const toggle = document.getElementById('darkModeToggle');
@@ -28,13 +47,22 @@ function loadTheme() {
     }
 }
 
-// Sidebar toggle for mobile
+/**
+ * Toggle sidebar visibility on mobile devices.
+ * 
+ * Adds/removes 'open' class on sidebar to show/hide it.
+ */
 function toggleSidebar() {
     const sidebar = document.getElementById('sidebar');
     sidebar.classList.toggle('open');
 }
 
-// Close sidebar when clicking outside on mobile
+/**
+ * Handle click outside sidebar to close it on mobile.
+ * 
+ * Listens for document clicks and closes sidebar when clicking
+ * outside of it, but only on screens smaller than 768px.
+ */
 document.addEventListener('click', function(event) {
     const sidebar = document.getElementById('sidebar');
     const toggle = document.getElementById('sidebarToggle');
@@ -45,7 +73,11 @@ document.addEventListener('click', function(event) {
     }
 });
 
-// Confirm delete actions
+/**
+ * Initialize confirmation dialogs for elements with data-confirm attribute.
+ * 
+ * Adds click handler to show confirmation dialog before submitting forms.
+ */
 document.querySelectorAll('[data-confirm]').forEach(function(el) {
     el.addEventListener('click', function(e) {
         if (!confirm(this.getAttribute('data-confirm'))) {
@@ -54,7 +86,12 @@ document.querySelectorAll('[data-confirm]').forEach(function(el) {
     });
 });
 
-// Draggable Blocks Functionality
+/**
+ * Initialize draggable blocks functionality on dashboard pages.
+ * 
+ * Adds drag handles to card headers and enables drag-and-drop
+ * reordering of cards. Saves layout to localStorage.
+ */
 function initDraggableBlocks() {
     const grids = document.querySelectorAll('.dashboard-grid');
     
@@ -90,6 +127,13 @@ function initDraggableBlocks() {
     });
 }
 
+/**
+ * Make a card header draggable.
+ * 
+ * @param {HTMLElement} header - The card header element
+ * @param {HTMLElement} card - The card element being dragged
+ * @param {HTMLElement} grid - The parent grid container
+ */
 function makeHeaderDraggable(header, card, grid) {
     let draggedElement = null;
     let placeholder = null;
@@ -147,6 +191,11 @@ function makeHeaderDraggable(header, card, grid) {
         ghost.style.top = (e.clientY - offsetY) + 'px';
         ghost.style.left = (e.clientX - offsetX) + 'px';
         
+        /**
+         * Update ghost position during drag.
+         * @param {number} clientY - Mouse Y coordinate
+         * @param {number} clientX - Mouse X coordinate
+         */
         function updateGhostPosition(clientY, clientX) {
             // Position ghost directly at cursor position
             ghost.style.top = (clientY - offsetY) + 'px';
@@ -158,7 +207,11 @@ function makeHeaderDraggable(header, card, grid) {
         const gridStyle = window.getComputedStyle(grid);
         const gridGap = parseInt(gridStyle.gap) || 20;
         
-        // Calculate column positions for 2D grid
+        /**
+         * Calculate which column the X position falls into.
+         * @param {number} x - X coordinate relative to grid
+         * @returns {number} Column index
+         */
         function getColumnFromX(x) {
             // Calculate which column the x position falls into
             const relativeX = x - gridRect.left;
@@ -166,6 +219,10 @@ function makeHeaderDraggable(header, card, grid) {
             return Math.floor(relativeX / (colWidth + gridGap));
         }
         
+        /**
+         * Handle mouse movement during drag.
+         * @param {MouseEvent} e - Mouse event
+         */
         function onMouseMove(e) {
             e.preventDefault();
             
@@ -249,6 +306,10 @@ function makeHeaderDraggable(header, card, grid) {
             });
         }
         
+        /**
+         * Handle mouse release to complete drag.
+         * @param {MouseEvent} e - Mouse event
+         */
         function onMouseUp(e) {
             if (animationFrame) {
                 cancelAnimationFrame(animationFrame);
@@ -291,6 +352,11 @@ function makeHeaderDraggable(header, card, grid) {
     });
 }
 
+/**
+ * Save the current card layout order to localStorage.
+ * 
+ * @param {HTMLElement} grid - The grid container to save layout for
+ */
 function saveLayout(grid) {
     const pageKey = getPageKey();
     const cards = grid.querySelectorAll('.card');
@@ -298,6 +364,11 @@ function saveLayout(grid) {
     localStorage.setItem('blockLayout_' + pageKey, JSON.stringify(order));
 }
 
+/**
+ * Load saved card layout from localStorage.
+ * 
+ * @param {HTMLElement} grid - The grid container to load layout for
+ */
 function loadLayout(grid) {
     const pageKey = getPageKey();
     const saved = localStorage.getItem('blockLayout_' + pageKey);
@@ -320,6 +391,11 @@ function loadLayout(grid) {
     }
 }
 
+/**
+ * Get the current page key for layout storage.
+ * 
+ * @returns {string} Page identifier based on URL path
+ */
 function getPageKey() {
     const path = window.location.pathname;
     if (path.includes('/tryouts/')) {
@@ -331,7 +407,11 @@ function getPageKey() {
     return 'dashboard';
 }
 
-// Initialize draggable blocks on DOM ready
+/**
+ * Initialize on DOM ready.
+ * 
+ * Loads theme preference and initializes draggable blocks.
+ */
 document.addEventListener('DOMContentLoaded', function() {
     // Load theme preference
     loadTheme();
@@ -339,6 +419,9 @@ document.addEventListener('DOMContentLoaded', function() {
     // Initialize draggable blocks
     initDraggableBlocks();
     
+    /**
+     * Auto-dismiss flash alerts after 5 seconds.
+     */
     const alerts = document.querySelectorAll('.alert-dismissible');
     alerts.forEach(function(alert) {
         setTimeout(function() {