Add video system with questions - exclude large video files from Git tracking

Author: ahmedooo1

assets/France3.mp4

@@ -1618,11 +1618,114 @@ input:checked + .slider:before {
 /* Déjà vu précédemment, au cas où */
 .success-amount { color: #2ecc71; }
 .danger-amount { color: #e74c3c; }
+
+/* Styles pour la modale vidéo avec questions */
+.video-quiz-content {
+    max-width: 800px;
+    width: 90%;
+}
+
+.video-section {
+    margin-bottom: 2rem;
+}
+
+.video-player {
+    margin: 1rem 0;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+.video {
+border: 1px solid white;
+border-radius: 8px;
+background-color: violet;
+}
+.video-player video {
+    width: 100%;
+    height: auto;
+    max-height: 400px;
+    
+
+}
+
+.video-questions-section {
+    border-top: 2px solid var(--primary-color);
+    padding-top: 1.5rem;
+}
+
+.video-questions-section h3 {
+    color: var(--accent-color);
+    margin-bottom: 1rem;
+}
+
+#video-question-text {
+    font-size: 1.1rem;
+    margin-bottom: 1.5rem;
+    line-height: 1.5;
+}
+
+/* Styles pour les réponses du quiz vidéo */
+#video-quiz-answers {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.quiz-answer {
+    background: var(--secondary-color);
+    color: var(--light-color);
+    border: 2px solid var(--primary-color);
+    border-radius: 8px;
+    padding: 1rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+.quiz-answer:hover:not(.disabled) {
+    background: var(--primary-color);
+    border-color: var(--accent-color);
+    box-shadow: 0 4px 12px rgba(74, 105, 189, 0.3);
+    transform: translateY(-2px);
+}
+
 .quiz-answer.disabled {
     pointer-events: none;
     opacity: 0.6;
 }
 
+.quiz-answer.correct {
+    background: var(--success-color) !important;
+    border-color: var(--success-color) !important;
+    color: #2c3e50 !important;
+    font-weight: bold;
+}
+
+.quiz-answer.wrong {
+    background: var(--danger-color) !important;
+    border-color: var(--danger-color) !important;
+    color: var(--light-color) !important;
+    font-weight: bold;
+}
+
+/* Adaptation pour mobile */
+@media (max-width: 768px) {
+    .video-quiz-content {
+        width: 95%;
+        margin: 1rem;
+    }
+    
+    .video-player video {
+        max-height: 250px;
+    }
+    
+    #video-quiz-answers {
+        grid-template-columns: 1fr;
+    }
+}
+
 .team-option {
     border: 2px solid var(--accent-color);
     /* box-shadow: 0 0 10px rgba(246, 185, 59, 0.5); */
@@ -1633,10 +1736,4 @@ input:checked + .slider:before {
 .team-option.current-team::after {
     content: " 👑";
     font-size: 0.8em;
-}
-
-@media (max-width: 768px) {
-    .quiz-answers {
-        grid-template-columns: 1fr;
-    }
 }

css/style.css

@@ -218,6 +218,31 @@ <h3 id="property-name">Maison du directeur</h3>
             </div>
         </div>
 
+        <!-- Modal Vidéo avec Questions -->
+        <div id="video-quiz-modal" class="modal">
+            <div class="modal-content video-quiz-content">
+                <div class="video-section">
+                    <h3 id="video-title">Vidéo</h3>
+                    <div class="video-player">
+                        <video id="main-video-player" controls>
+                            <source src="" type="video/mp4">
+                            Votre navigateur ne supporte pas la lecture vidéo.
+                        </video>
+                    </div>
+                    <p id="video-description"></p>
+                </div>
+                
+                <!-- Section questions (cachée pendant la vidéo) -->
+                <div id="video-questions-section" class="video-questions-section" style="display: none;">
+                    <h3>Question sur la vidéo</h3>
+                    <p id="video-question-text"></p>
+                    <div id="video-quiz-answers" class="quiz-answers">
+                        <!-- Les réponses seront ajoutées dynamiquement -->
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div id="win-modal" class="modal">
             <div class="modal-content">
                 <div class="win-badge">
@@ -333,6 +358,7 @@ <h3>Félicitation !</h3>
         </div>
     </div>    <script src="js/gameData.js"></script>
     <script src="js/cardData.js"></script>
+    <script src="js/videoData.js"></script>
     <script src="js/gameUtils.js"></script>
     <script src="js/gameState.js"></script>
     <script src="js/modalCardFlip.js"></script>

index.html

@@ -6,6 +6,7 @@ const CARD_TYPES = {
     BIENS: "biens",
     PDB: "pdb",
     REDEVANCE: "redevance",
+    VIDEO: "video",
     LOGO: "logo",
 };
 
@@ -17,16 +18,18 @@ function generateInitialBoard() {
         CARD_TYPES.FACTURE,
         CARD_TYPES.INTERACTION,
         CARD_TYPES.BIENS,
+        CARD_TYPES.VIDEO,
     ];
 
     // Distribution des types de cartes (comme dans l'image) ---
     const typeDistribution = {
         [CARD_TYPES.BONUS]: 6, //  cartes bonus (cadeaux)
         [CARD_TYPES.PDB]: 5, //  cartes PDB (pdb)
         [CARD_TYPES.FACTURE]: 7, //  cartes facture
-        [CARD_TYPES.INTERACTION]: 5, //  cartes interaction
+        [CARD_TYPES.INTERACTION]: 4, //  cartes interaction (réduit de 1)
         [CARD_TYPES.BIENS]: 6, //  cartes biens
         [CARD_TYPES.REDEVANCE] : 3, // cartes redevance
+        [CARD_TYPES.VIDEO] : 1, // 1 carte vidéo
     };
 
     // Crée un tableau avec tous les types selon leur distribution

js/gameData.js

@@ -492,6 +492,9 @@ function handleCellClick(cellId, cellType) {
         case CARD_TYPES.REDEVANCE:
             handleRedevanceCard();
             break;
+        case CARD_TYPES.VIDEO:
+            handleVideoCard();
+            break;
     }
 }
 /**
@@ -1349,3 +1352,168 @@ function showNotification(message, duration = 3000) {
         notification.classList.remove('show');
     }, duration);
 }
+
+/**
+ * Gère l'affichage et le traitement des cartes Vidéo
+ */
+function handleVideoCard() {
+    // Vérifier s'il reste des vidéos non vues
+    if (!hasUnwatchedVideos()) {
+        // Toutes les vidéos ont été vues, donner un bonus par défaut
+        showNotification("Toutes les vidéos ont déjà été visionnées ! Bonus automatique.");
+        
+        const gameState = getGameState();
+        const bonusAmount = 100;
+        updateTeamScore(gameState.activeTeam, bonusAmount);
+        
+        const activeTeam = gameState.teams[gameState.activeTeam];
+        const currentPlayer = activeTeam.players[activeTeam.currentPlayer];
+        if (currentPlayer) {
+            updatePlayerTurn(
+                currentPlayer,
+                `Tour: +${bonusAmount} K (toutes les vidéos vues)`,
+            );
+        }
+        
+        updateTeamsDisplay();
+        return;
+    }
+
+    // Obtenir une vidéo aléatoire non vue
+    const video = getRandomUnwatchedVideo();
+    if (!video) {
+        console.error("Aucune vidéo disponible");
+        return;
+    }
+
+    // Marquer la vidéo comme vue
+    markVideoAsWatched(video.id);
+
+    // Configurer et afficher la modale vidéo
+    document.getElementById("video-title").textContent = video.title;
+    document.getElementById("video-description").textContent = video.description;
+    
+    // Configurer le lecteur vidéo
+    const videoPlayer = document.getElementById("main-video-player");
+    videoPlayer.src = `assets/${video.filename}`;
+    
+    // Cacher la section questions au début
+    document.getElementById("video-questions-section").style.display = "none";
+    
+    // Afficher la modale
+    toggleModal("video-quiz-modal", true);
+    
+    // Stocker les données de la vidéo pour les questions
+    window.currentVideoData = video;
+    
+    // Écouter la fin de la vidéo
+    videoPlayer.onended = () => {
+        showVideoQuestions(video);
+    };
+    
+    // Permettre de passer la vidéo (pour les tests)
+    videoPlayer.onclick = () => {
+        if (videoPlayer.paused) {
+            videoPlayer.play();
+        } else {
+            videoPlayer.pause();
+        }
+    };
+}
+
+/**
+ * Affiche les questions après la fin d'une vidéo
+ */
+function showVideoQuestions(video) {
+    if (!video.questions || video.questions.length === 0) {
+        // Pas de questions, donner un bonus automatique
+        showNotification("Vidéo visionnée ! Bonus automatique.");
+        const gameState = getGameState();
+        updateTeamScore(gameState.activeTeam, 50);
+        toggleModal("video-quiz-modal", false);
+        updateTeamsDisplay();
+        return;
+    }
+
+    // Choisir une question aléatoire
+    const randomQuestion = video.questions[Math.floor(Math.random() * video.questions.length)];
+    
+    // Afficher la section questions
+    document.getElementById("video-questions-section").style.display = "block";
+    document.getElementById("video-question-text").textContent = randomQuestion.question;
+    
+    // Créer les boutons de réponse
+    const answersContainer = document.getElementById("video-quiz-answers");
+    answersContainer.innerHTML = "";
+    
+    randomQuestion.answers.forEach((answer, index) => {
+        const answerButton = document.createElement("div");
+        answerButton.className = "quiz-answer";
+        answerButton.textContent = answer.text;
+        answerButton.onclick = (event) => handleVideoQuizAnswer(
+            answer.correct, 
+            randomQuestion, 
+            event.target
+        );
+        answersContainer.appendChild(answerButton);
+    });
+    
+    // Faire défiler vers les questions
+    document.getElementById("video-questions-section").scrollIntoView({
+        behavior: 'smooth'
+    });
+}
+
+/**
+ * Gère la réponse à une question vidéo
+ */
+function handleVideoQuizAnswer(isCorrect, question, clickedButton) {
+    const gameState = getGameState();
+    
+    // Désactiver tous les boutons de réponse
+    const answerButtons = document.querySelectorAll('#video-quiz-answers .quiz-answer');
+    answerButtons.forEach(button => {
+        button.classList.add('disabled');
+    });
+    
+    // Marquer visuellement la bonne/mauvaise réponse
+    answerButtons.forEach(button => {
+        const buttonAnswer = question.answers.find(a => a.text === button.textContent);
+        if (buttonAnswer && buttonAnswer.correct) {
+            button.classList.add('correct');
+        } else if (button === clickedButton && !isCorrect) {
+            button.classList.add('wrong');
+        }
+    });
+    
+    // Attendre un peu pour que l'utilisateur voie le résultat
+    setTimeout(() => {
+        toggleModal("video-quiz-modal", false);
+        
+        // Calculer le bonus/malus
+        const amount = isCorrect ? question.correctReward : -question.wrongPenalty;
+        const resultText = isCorrect ? "Bonne réponse !" : "Mauvaise réponse...";
+        
+        // Mettre à jour le score
+        updateTeamScore(gameState.activeTeam, amount);
+        
+        // Ajouter à l'historique
+        const activeTeam = gameState.teams[gameState.activeTeam];
+        const currentPlayer = activeTeam.players[activeTeam.currentPlayer];
+        if (currentPlayer) {
+            updatePlayerTurn(
+                currentPlayer,
+                `Tour: ${amount > 0 ? '+' : ''}${amount} K pour Vidéo Quiz - ${resultText}`,
+            );
+        }
+        
+        // Afficher le résultat
+        if (isCorrect) {
+            showNotification(`${resultText} +${question.correctReward} K`);
+        } else {
+            showNotification(`${resultText} -${question.wrongPenalty} K`);
+        }
+        
+        updateTeamsDisplay();
+    }, 2000); // Attendre 2 secondes pour voir le résultat
+}

js/main.js

@@ -252,8 +252,14 @@ function renderGameBoard() {
                 case CARD_TYPES.LOGO:
                     iconSvg = `La Bonne Gestion Immobilière`;
                     break;
+                case CARD_TYPES.VIDEO:
+                    iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M8 5v14l11-7z"/>
+                        <circle cx="12" cy="12" r="11" stroke="currentColor" stroke-width="2" fill="none"/>
+                    </svg>`;
+                    break;
                 default:
-                    console.log("Type de carte non reconnu:", cellType);
+                    console.log("Type de carte non reconnu:", cell.type);
             }
 
             iconElement.innerHTML = iconSvg;