build(Script): Script de lancement projet complet (PS1)

- Utilise Windows Terminal pour ouvrir multiples onglets - Lance le frontend Vue (npm run dev) - Lance automatiquement les services backend (score, quizz, buzzer, session...)
feat(Editor): Nouveau composant SessionSelector
2026-02-08 16:49:29 +01:00 · 2026-02-08 16:49:29 +01:00 · 2026-02-08 16:49:29 +01:00 · 2026-02-08 16:49:29 +01:00 · 2026-02-08 16:49:29 +01:00 · 2026-02-08 16:49:29 +01:00
46 changed files with 3271 additions and 2099 deletions
--- a/Start-FullProject.ps1
+++ b/Start-FullProject.ps1
@@ -0,0 +1,33 @@
 # Chemins de base
 $ServicesPath = "$($PSScriptRoot)\VNode\services"
 $VAppPath = "$($PSScriptRoot)\VApp"
 # Liste des services
 $JsServices = @(
    "score-manager.js",
    "quizz-collector.js",
    "buzzer-manager.js",
    "buzzer-watcher.js",
    "session-manager.js"
 )
 # Utilisation de -d (startingDirectory) pour wt.exe
 # Cela évite de faire le Set-Location manuellement
 $WtArguments = "nt --title VultureGame -d `"$($VAppPath)`" powershell.exe -NoExit -Command `"npm run dev -- --host`""
 # Boucle pour ajouter chaque service
 foreach ($ServiceName in $JsServices) {
    # Recherche du fichier
    $ServiceSearch = Get-ChildItem -Path "$($ServicesPath)" -Filter "$($ServiceName)" -Recurse | Select-Object -First 1
    if ($ServiceSearch) {
        # On définit le répertoire de travail sur le dossier du script trouvé
        $Directory = $ServiceSearch.DirectoryName
        $NodeCommand = "node $($ServiceSearch.FullName)"
        $WtArguments += " `; nt --title $($ServiceName) -d `"$($Directory)`" powershell.exe -NoExit -Command `"$($NodeCommand)`""
    }
 }
 # Lancement final
 Start-Process "wt.exe" -ArgumentList $WtArguments
--- a/VApp/index.html
+++ b/VApp/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="fr">
-  <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Brain Blast</title>
+  <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vulture</title>
    <script src="/config.js"></script>
  </head>
  <body> <div id="app"></div> <script type="module" src="/src/main.js"></script>
--- a/VApp/package-lock.json
+++ b/VApp/package-lock.json
--- a/VApp/package.json
+++ b/VApp/package.json
@@ -14,6 +14,7 @@
  "dependencies": {
    "@mdi/font": "^7.4.47",
    "@videojs-player/vue": "^1.0.0",
    "axios": "^1.13.4",
    "express": "^5.0.0",
    "mqtt": "^5.3.5",
    "ping": "^0.4.4",
@@ -21,6 +22,7 @@
    "video.js": "^8.22.0",
    "vue": "^3.4.19",
    "vue-router": "^4.2.5",
    "vuetify": "^3.11.8",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
--- a/VApp/public/config.js
+++ b/VApp/public/config.js
@@ -1,7 +1,19 @@
 window.APP_CONFIG = {
-    mqttBrokerUrl: 'ws://192.168.73.252:9001',
+    mqttBrokerUrl: 'ws://192.168.1.201:9001',
    redBuzzerIP: '192.168.73.40',
    blueBuzzerIP: '192.168.73.41',
    orangeBuzzerIP: '192.168.73.42',
-    greenBuzzerIP: '192.168.73.43'
+    greenBuzzerIP: '192.168.73.43',
    apiUrl: 'http://192.168.1.178:3001',
    topics: {
        requestList: 'game/session/list/request',
        responseList: 'game/session/list/response',
        requestConfig: 'game/session/config/request',
        getConfig: 'game/session/config/get',
        updateConfig: 'game/session/config/update',
        createSession: 'game/session/create',
        deleteSession: 'game/session/delete',
        deleteMedia: 'game/session/media/delete',
        renameMedia: 'game/session/media/rename'
    }
 };
--- a/VApp/src/components/CardControl.vue
+++ b/VApp/src/components/CardControl.vue
@@ -39,8 +39,7 @@
  const isCardReduced = ref(false);
  // Méthode pour basculer l'état de la carte
-  function toggleCardSize() { isCardReduced.value = !isCardReduced.value;
+  function toggleCardSize() { isCardReduced.value = !isCardReduced.value; }
  }
 </script>
 <style>
--- a/VApp/src/components/MQTTColorPublisher.vue
+++ b/VApp/src/components/MQTTColorPublisher.vue
@@ -53,12 +53,12 @@ import { publishMessage } from '@/services/mqttService';
 const selectedTopic = ref('Selectionnez un topic');
 const selectedColor = ref('#FF0000');
 const topics = ref([
-  '/wled/all',
+  'wled/all/col',
-  '/wled/1',
+  'wled/panel/col',
-  '/wled/2',
+  'wled/2',
-  '/wled/3',
+  'wled/3',
-  '/wled/4',
+  'wled/4',
-  '/wled/5',
+  'wled/5',
 ]);
 const publishCustomColor = () => {
--- a/VApp/src/components/QuestionEditorDialog.vue
+++ b/VApp/src/components/QuestionEditorDialog.vue
@@ -0,0 +1,352 @@
 <template>
    <v-dialog v-model="visible" persistent max-width="800px">
      <v-card rounded="xl" class="pa-3">
        <v-card-title class="text-title-style">
            {{ isNew ? 'Nouvelle question' : 'Éditer la question' }}
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12" md="4">
                <v-text-field color="primary" density="compact" variant="outlined" rounded="xl" v-model="editedItem.QuestionId" label="ID Question" hint="Unique ID, ex: Q-005"></v-text-field>
              </v-col>
              <v-col cols="12" md="4">
                <v-select color="primary" density="compact" variant="outlined" rounded="xl" v-model="editedItem.Type" :items="['video', 'audio', 'picture']" label="Type"></v-select>
              </v-col>
              <v-col cols="12" md="4">
                <v-text-field color="primary" density="compact" variant="outlined" rounded="xl" v-model.number="editedItem.Points" type="number" label="Points"></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-textarea color="primary" variant="outlined" rounded="xl" v-model="editedItem.QuestionText" label="Texte de la question" rows="2"></v-textarea>
              </v-col>
              <!-- Media Section -->
              <v-col cols="12">
                 <div class="d-flex align-center">
                    <!-- Preview Section -->
                    <div v-if="editedItem.MediaUrl" class="preview-box mr-4 text-center">
                        <img v-if="editedItem.Type === 'picture'" :src="getPreviewUrl(editedItem.MediaUrl)" class="preview-content" @click="showFullPreview = true">
                        <video 
                            v-else-if="editedItem.Type === 'video'" 
                            :src="getPreviewUrl(editedItem.MediaUrl)" 
                            class="preview-content"
                            @click="showVideoPreview = true"    
                            @loadedmetadata="(e) => e.target.currentTime = e.target.duration / 3"
                            muted
                        ></video>
                        <div v-else-if="editedItem.Type === 'audio'" class="text-caption" style="cursor: pointer;" @click="showAudioPreview = true">
                            <v-icon size="64" color="primary">mdi-music</v-icon>
                        </div>
                    </div>
                    <v-text-field color="primary" density="compact" variant="outlined" rounded="xl" v-model="editedItem.MediaUrl" label="URL du Média" class="flex-grow-2 mr-2" hide-details></v-text-field>
                    <input 
                        type="file" 
                        ref="fileInputRef" 
                        color="primary"
                        style="display: none;" 
                        @change="onFileSelected"
                        accept="image/*,video/*,audio/*"
                    />
                    <v-btn 
                        rounded="xl"
                        variant="tonal" 
                        color="primary"
                        :loading="uploading"
                        :disabled="!editedItem.Type"
                        @click="$refs.fileInputRef.click()"
                    >
                        <v-icon start>mdi-upload</v-icon>
                        Upload
                    </v-btn>
                    <v-btn
                        v-if="editedItem.MediaUrl"
                        rounded="xl"
                        text="Supprimer"
                        variant="tonal"
                        color="red"
                        class="ml-2"
                        @click="deleteMedia"
                        title="Supprimer le média"
                    ></v-btn>
                 </div>
                 <div v-if="uploadError" class="text-caption text-red">{{ uploadError }}</div>
              </v-col>
              <v-col cols="12"><v-divider></v-divider></v-col>
              <v-col cols="12" class="text-h6">Paramètres</v-col>
              <v-col cols="6" md="4">
                  <v-switch inset v-model="editedItem.Settings.AutoPlay" label="AutoPlay" density="compact" color="primary"></v-switch>
              </v-col>
              <v-col cols="6" md="4">
                  <v-switch inset v-model="editedItem.Settings.Loop" label="Loop" density="compact" color="primary"></v-switch>
              </v-col>
              <v-col cols="6" md="4">
                  <v-text-field color="primary" variant="outlined" rounded="xl" v-model.number="editedItem.Settings.PlayTime" type="number" label="Durée (sec)" density="compact"></v-text-field>
              </v-col>
              <v-col cols="12"><v-divider></v-divider></v-col>
              <v-label class="text-title-style">
                Réponse (Maître du jeu)
              </v-label>
              <v-col cols="12" class="text-h6"></v-col>
              <v-col cols="12">
                <v-text-field color="primary" variant="outlined" rounded="xl" v-model="editedItem.MasterData.CorrectAnswer" label="Réponse Correcte"></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-textarea color="primary" variant="outlined" rounded="xl" v-model="editedItem.MasterData.MasterNotes" label="Notes pour le MJ" rows="2"></v-textarea>
              </v-col>
              <v-col cols="12">
                <v-textarea color="primary" variant="outlined" rounded="xl" v-model="editedItem.MasterData.Help" label="Indice / Aide" rows="2"></v-textarea>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" rounded="xl" variant="outlined" @click="close">Annuler</v-btn>
          <v-btn color="success" rounded="xl" variant="outlined" @click="save">Ok</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- Dialog Preview Image -->
    <v-dialog v-model="showFullPreview" max-width="90vw">
        <v-card rounded="xl" class="pa-2">
            <v-card-text class="d-flex justify-center" style="padding: 16px;">
                <v-img
                    :src="getPreviewUrl(editedItem.MediaUrl)" 
                    max-height="80vh"
                    rounded="lg"
                    @click="showFullPreview = false"
                    style="cursor: pointer;"
                ></v-img>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" variant="text" @click="showFullPreview = false">Fermer</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <!-- Dialog Preview Video -->
    <v-dialog v-model="showVideoPreview" max-width="90vw">
        <v-card rounded="xl" class="pa-2">
            <v-card-text class="d-flex justify-center" style="padding: 16px;">
                <video 
                    :src="getPreviewUrl(editedItem.MediaUrl)" 
                    controls
                    autoplay
                    disablepictureinpicture 
                    disableremoteplayback
                    controlslist="nodownload"
                    style="max-width: 100%; max-height: 80vh; border-radius: 12px;"
                ></video>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" variant="text" @click="showVideoPreview = false">Fermer</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <!-- Dialog Preview Audio -->
    <v-dialog v-model="showAudioPreview" max-width="500px">
        <v-card rounded="xl" class="pa-4">
            <v-card-title class="text-center">
                <v-icon size="64" color="primary">mdi-music-circle</v-icon>
            </v-card-title>
            <v-card-text class="d-flex justify-center" style="padding: 16px;">
                <audio 
                    :src="getPreviewUrl(editedItem.MediaUrl)" 
                    controls
                    controlslist="nodownload"
                    disablepictureinpicture 
                    disableremoteplayback
                    autoplay
                    style="width: 100%;"
                ></audio>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" variant="text" @click="showAudioPreview = false">Fermer</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
 </template>
 <script setup>
 import { ref, reactive, watch, computed } from 'vue';
 import axios from 'axios';
 const props = defineProps({
    modelValue: Boolean,
    question: {
        type: Object,
        default: null
    },
    sessionId: {
        type: String,
        required: true
    },
    apiUrl: {
        type: String,
        required: true
    },
    nextIndex: {
        type: Number,
        default: 1
    }
 });
 const emit = defineEmits(['update:modelValue', 'save', 'delete-media']);
 const visible = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
 });
 const defaultQuestion = {
  QuestionId: '',
  Type: '',
  Points: 1,
  QuestionText: '',
  MediaUrl: '',
  Settings: {
    StartAt: null,
    StopAt: null,
    AutoPlay: false,
    Loop: false,
    PlayTime: null,
    DisplayMode: 'Cover',
    BlurEffect: false
  },
  MasterData: {
    CorrectAnswer: '',
    MasterNotes: '',
    Help: ''
  }
 };
 const editedItem = reactive(JSON.parse(JSON.stringify(defaultQuestion)));
 // Copy question data when opening
 watch(() => props.modelValue, (val) => {
    if (val) {
        if (props.question) {
            Object.assign(editedItem, JSON.parse(JSON.stringify(props.question)));
            // Ensure nested objects exist
            if(!editedItem.Settings) editedItem.Settings = {...defaultQuestion.Settings};
            if(!editedItem.MasterData) editedItem.MasterData = {...defaultQuestion.MasterData};
        } else {
            Object.assign(editedItem, JSON.parse(JSON.stringify(defaultQuestion)));
            // Auto-generate ID: Q-005 for 5th question
            const idNumber = props.nextIndex.toString().padStart(3, '0');
            editedItem.QuestionId = `Q-${idNumber}`; 
        }
        uploadError.value = '';
    }
 });
 const isNew = computed(() => !props.question);
 const showFullPreview = ref(false);
 const showVideoPreview = ref(false);
 const showAudioPreview = ref(false);
 const uploading = ref(false);
 const uploadError = ref('');
 function close() {
    visible.value = false;
 }
 function save() {
    emit('save', JSON.parse(JSON.stringify(editedItem)));
    close();
 }
 function getPreviewUrl(relativePath) {
    if (!relativePath || relativePath.startsWith('http')) return relativePath;
    return `${props.apiUrl}/quizz/${props.sessionId}${relativePath}`;
 }
 // Upload Handling
 const fileInputRef = ref(null);
 function onFileSelected(event) {
    const file = event.target.files[0];
    if (file) handleFileUpload(file);
    event.target.value = '';
 }
 async function handleFileUpload(file) {
    if (!file) return;
    uploading.value = true;
    uploadError.value = '';
    if (!editedItem.Type) {
        uploadError.value = "Veuillez sélectionner un Type avant d'uploader un fichier.";
        uploading.value = false;
        return;
    }
    try {
        const formData = new FormData();
        formData.append('questionId', editedItem.QuestionId);
        formData.append('type', editedItem.Type);
        formData.append('file', file);
        const response = await axios.post(`${props.apiUrl}/upload/${props.sessionId}`, formData);
        if (response.data && response.data.path) {
            editedItem.MediaUrl = response.data.path;
        }
    } catch (e) {
        console.error("Upload error:", e);
        uploadError.value = "Erreur lors de l'upload du fichier.";
    } finally {
        uploading.value = false;
    }
 }
 function deleteMedia() {
    if (!editedItem.MediaUrl) return;
    if (confirm('Voulez-vous vraiment supprimer ce média ? Cette action est irréversible.')) {
        emit('delete-media', editedItem.MediaUrl);
        editedItem.MediaUrl = ''; 
    }
 }
 </script>
 <style scoped>
    .text-title-style {
        color: rgb(var(--v-theme-primary), 1) !important; 
        opacity: 1;
        font-size: 20px;
        font-weight: bold;
    }
    .preview-box {
        width: 120px; 
        height: 120px; 
        background: #333; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        overflow: hidden; 
        border-radius: 8px; 
        position: relative;
        flex-shrink: 0;
    }
    .preview-content {
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        cursor: pointer;
    }
 </style>
--- a/VApp/src/components/SessionDetails.vue
+++ b/VApp/src/components/SessionDetails.vue
@@ -0,0 +1,162 @@
 <template>
    <div>
        <v-alert v-if="error" type="error" closable class="mb-4">{{ error }}</v-alert>
        <v-alert rounded="xl" v-if="success" type="success" closable class="ma-15">{{ success }}</v-alert>
        <v-card class="ma-15 pa-5" rounded="xl">
        <v-card-title class="pb-10">Configuration Générale</v-card-title>
        <v-card-text>
            <v-row>
            <v-col cols="12" md="6">
                <v-text-field color="primary" v-model="config.PackId" label="ID du Pack" readonly variant="outlined" rounded="xl"></v-text-field>
            </v-col>
            <v-col cols="12" md="6">
                <v-text-field color="primary" v-model="config.PackTitle" label="Titre du Pack" variant="outlined" rounded="xl"></v-text-field>
            </v-col>
            </v-row>
        </v-card-text>
        </v-card>
        <v-card rounded="xl" class="pa-5 ma-15">
            <!-- List container without v-list wrapper for clean transition -->
            <SessionQuestionsList 
                :questions="config.Questions"
                :session-id="sessionId"
                :api-url="apiUrl"
                @move="(index, dir) => moveQuestion(index, dir)"
                @update="(q, i) => updateQuestion(q, i)"
                @delete="(i) => deleteQuestion(i)"
                @delete-media="(path) => $emit('delete-media', path)"
            />
        </v-card>
    </div>
 </template>
 <script setup>
 import SessionQuestionsList from '@/components/SessionQuestionsList.vue';
 const props = defineProps({
    config: {
        type: Object,
        required: true
    },
    sessionId: {
        type: String,
        required: true
    },
    apiUrl: {
        type: String,
        required: true
    },
    success: String,
    error: String
 });
 const emit = defineEmits(['delete-media', 'rename-media']);
 const cleanUrl = (url) => url ? url.split('?')[0] : url;
 function deleteQuestion(index) {
    if (confirm('Êtes-vous sûr de vouloir supprimer cette question ? (Le média sera aussi supprimé)')) {
        const question = props.config.Questions[index];
        if (question.MediaUrl) {
            emit('delete-media', cleanUrl(question.MediaUrl));
        }
        props.config.Questions.splice(index, 1);
        reindexQuestions();
    }
 }
 function reindexQuestions() {
    // Step 1: Rename conflict candidates to temporary names
    console.log("reindexQuestions: Starting Step 1 (Rename to TMP)");
    props.config.Questions.forEach((q, i) => {
        const idNumber = (i + 1).toString().padStart(3, '0');
        const newId = `Q-${idNumber}`;
        if (q.QuestionId !== newId && q.MediaUrl) {
            // It will be renamed. Rename to TEMP first.
            const lastDotIndex = q.MediaUrl.lastIndexOf('.');
            if (lastDotIndex !== -1) {
                const ext = q.MediaUrl.substring(lastDotIndex);
                const lastSlashIndex = q.MediaUrl.lastIndexOf('/');
                const folderPath = q.MediaUrl.substring(0, lastSlashIndex + 1);
                const tempId = `TMP-${q.QuestionId}`;
                const tempPath = folderPath + tempId + ext;
                emit('rename-media', {
                    oldPath: cleanUrl(q.MediaUrl),
                    newName: tempId
                });
                console.log(`Step 1: Renaming ${q.MediaUrl} to ${tempId}`);
                // Store temp path but DO NOT update MediaUrl yet to avoid browser locking the file
                q._temp_path = tempPath;
                // Mark for second pass
                q._temp_renamed = true;
            }
        }
    });
    // Step 2: Rename all to final names (Delayed to allow FS to settle)
    setTimeout(() => {
        console.log("reindexQuestions: Starting Step 2 (Rename to Final)");
        props.config.Questions.forEach((q, i) => {
            const idNumber = (i + 1).toString().padStart(3, '0');
            const newId = `Q-${idNumber}`;
            if (q._temp_renamed && q._temp_path) {
                // Rename TMP -> Final
                const lastDotIndex = q.MediaUrl.lastIndexOf('.');
                const ext = q.MediaUrl.substring(lastDotIndex);
                const lastSlashIndex = q.MediaUrl.lastIndexOf('/');
                const folderPath = q.MediaUrl.substring(0, lastSlashIndex + 1);
                console.log(`Step 2: Renaming ${q._temp_path} to ${newId}`);
                emit('rename-media', {
                    oldPath: cleanUrl(q._temp_path), // Use the stored temp path
                    newName: newId
                });
                // Update with timestamp to force refresh
                q.MediaUrl = folderPath + newId + ext + `?t=${Date.now()}`;
                delete q._temp_renamed;
                delete q._temp_path;
            } 
            // Note: QuestionId update is done here inside the timeout
            // This might cause a slight reactive delay but ensures alignment
            q.QuestionId = newId;
        });
    }, 200); // 200ms delay
 }
 function updateQuestion(questionData, index) {
    if (index > -1) {
        Object.assign(props.config.Questions[index], questionData);
    } else {
        // Add new
        if (!questionData._ui_key) {
             Object.defineProperty(questionData, '_ui_key', {
                value: `q-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
                writable: true,
                enumerable: false,
                configurable: true
            });
        }
        props.config.Questions.push(questionData);
        reindexQuestions();
    }
 }
 function moveQuestion(index, direction) {
    const newIndex = index + direction;
    if (newIndex >= 0 && newIndex < props.config.Questions.length) {
        const item = props.config.Questions.splice(index, 1)[0];
        props.config.Questions.splice(newIndex, 0, item);
        reindexQuestions();
    }
 }
 </script>
--- a/VApp/src/components/SessionQuestionsList.vue
+++ b/VApp/src/components/SessionQuestionsList.vue
@@ -0,0 +1,256 @@
 <template>
    <div class="session-questions-list">
        <div class="d-flex justify-space-between align-center mb-5 px-4">
            <span class="text-h6">Questions ({{ questions.length }})</span>
            <v-btn rounded="xl" color="secondary" size="small" prepend-icon="mdi-plus" @click="openDialog()">Ajouter</v-btn>
        </div>
        <div v-if="questions.length === 0" class="text-h5 font-weight-bold text-center text-primary pb-5">
            Aucune question définie.
        </div>
        <!-- List container without v-list wrapper for clean transition -->
        <transition-group name="flip-list" tag="div" class="question-list-container">
            <v-card v-for="(question, index) in questions" :key="question._ui_key" rounded="xl" variant="outlined" class="mb-2 question-item">
            <v-card-text class="d-flex align-center py-2">
                <div class="mr-4 font-weight-bold text-h6 text-primary">{{ index + 1 }}</div>
                <div class="flex-grow-1">
                <div class="text-subtitle-1 font-weight-bold">
                    <span class="text-primary opacity-100 pb-2">{{ question.QuestionId }}</span>
                </div>
                <div class="text-body-2 font-weight-bold"><span class="text-primary opacity-100">Question :</span> {{ question.QuestionText }}</div>
                <div class="text-body-2 font-weight-bold"><span class="text-primary opacity-100">Réponse :</span> {{ question.MasterData.CorrectAnswer }}</div>
                <div class="text-body-2 font-weight-bold"><span class="text-primary opacity-100">Points :</span> {{ question.Points }}</div>
                <div class="text-body-2 font-weight-bold"><span class="text-primary opacity-100">Temps :</span> {{ question.Settings.PlayTime }} secondes</div>
                <div class="text-body-2 font-weight-bold"><span class="text-primary opacity-100">Type :</span> {{ question.Type }}</div>
                </div>
                <div v-if="question.MediaUrl" class="mr-10">
                     <div class="list-preview-box" @click="openPreview(question.Type, question.MediaUrl)" style="cursor: pointer;">
                        <img v-if="question.Type === 'picture'" :src="getPreviewUrl(question.MediaUrl)" class="list-preview-content">
                        <video 
                            v-else-if="question.Type === 'video'" 
                            :src="getPreviewUrl(question.MediaUrl) + '#t=0.1'" 
                            class="list-preview-content"
                            preload="metadata"
                            muted
                        ></video>
                         <div v-else-if="question.Type === 'audio'">
                            <v-icon size="32" color="primary">mdi-music</v-icon>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column gap-1">
                    <v-btn icon="mdi-arrow-up" size="x-large" variant="text" :disabled="index === 0" @click="$emit('move', index, -1)"></v-btn>
                    <v-btn icon="mdi-arrow-down" size="x-large" variant="text" :disabled="index === questions.length - 1" @click="$emit('move', index, 1)"></v-btn>
                </div>
                <div class="d-flex ml-2">
                <v-btn icon="mdi-pencil" size="x-large" variant="text" color="blue" @click="openDialog(question, index)"></v-btn>
                <v-btn icon="mdi-delete" size="x-large" variant="text" color="red" @click="$emit('delete', index)"></v-btn>
                </div>
            </v-card-text>
            </v-card>
        </transition-group>
        <!-- Use persistent prop if needed, though hidden by v-model -->
        <QuestionEditorDialog 
            v-model="dialogVisible"
            :question="editingQuestion"
            :session-id="sessionId"
            :api-url="apiUrl"
            :next-index="nextQuestionIndex"
            @save="onSave"
            @delete-media="onDeleteMedia"
        />
        <!-- Dialog Preview Image -->
        <v-dialog v-model="showFullPreview" max-width="90vw">
            <v-card rounded="xl" class="pa-2">
                <v-card-text class="d-flex justify-center" style="padding: 16px;">
                    <v-img
                        :src="getPreviewUrl(previewMediaUrl)" 
                        max-height="80vh"
                        rounded="lg"
                        @click="showFullPreview = false"
                        style="cursor: pointer;"
                    ></v-img>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" variant="text" @click="showFullPreview = false">Fermer</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- Dialog Preview Video -->
        <v-dialog v-model="showVideoPreview" max-width="90vw">
            <v-card rounded="xl" class="pa-2">
                <v-card-text class="d-flex justify-center" style="padding: 16px;">
                    <video 
                        :src="getPreviewUrl(previewMediaUrl)" 
                        controls
                        autoplay
                        disablepictureinpicture 
                        disableremoteplayback
                        controlslist="nodownload"
                        style="max-width: 100%; max-height: 80vh; border-radius: 12px;"
                    ></video>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" variant="text" @click="showVideoPreview = false">Fermer</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <!-- Dialog Preview Audio -->
        <v-dialog v-model="showAudioPreview" max-width="500px">
            <v-card rounded="xl" class="pa-4">
                <v-card-title class="text-center">
                    <v-icon size="64" color="primary">mdi-music-circle</v-icon>
                </v-card-title>
                <v-card-text class="d-flex justify-center" style="padding: 16px;">
                    <audio 
                        :src="getPreviewUrl(previewMediaUrl)" 
                        controls
                        controlslist="nodownload"
                        disablepictureinpicture 
                        disableremoteplayback
                        autoplay
                        style="width: 100%;"
                    ></audio>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" variant="text" @click="showAudioPreview = false">Fermer</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>
 </template>
 <script setup>
 import { ref } from 'vue';
 import QuestionEditorDialog from './QuestionEditorDialog.vue';
 const props = defineProps({
    questions: {
        type: Array,
        required: true,
        default: () => []
    },
    sessionId: {
        type: String,
        required: true
    },
    apiUrl: {
        type: String,
        required: true
    }
 });
 const emit = defineEmits(['move', 'delete', 'update', 'delete-media']);
 // Dialog state
 const dialogVisible = ref(false);
 const editingQuestion = ref(null);
 const editingIndex = ref(-1);
 const nextQuestionIndex = ref(1);
 function openDialog(question = null, index = -1) {
    editingQuestion.value = question; // if null, dialog treats as new
    editingIndex.value = index;
    // Calculate next index: if editing, use current index + 1, else use length + 1
    if (index >= 0) {
        nextQuestionIndex.value = index + 1;
    } else {
        nextQuestionIndex.value = props.questions.length + 1;
    }
    dialogVisible.value = true;
 }
 function onSave(questionData) {
    emit('update', questionData, editingIndex.value);
 }
 function onDeleteMedia(mediaUrl) {
    emit('delete-media', mediaUrl);
 }
 function getPreviewUrl(relativePath) {
    if (!relativePath || relativePath.startsWith('http')) return relativePath;
    return `${props.apiUrl}/quizz/${props.sessionId}${relativePath}`;
 }
 const showFullPreview = ref(false);
 const showVideoPreview = ref(false);
 const showAudioPreview = ref(false);
 const previewMediaUrl = ref('');
 function openPreview(type, url) {
    previewMediaUrl.value = url;
    if (type === 'picture') showFullPreview.value = true;
    else if (type === 'video') showVideoPreview.value = true;
    else if (type === 'audio') showAudioPreview.value = true;
 }
 </script>
 <style scoped>
    .gap-1 {
        gap: 4px;
    }
    .question-list-container {
        position: relative;
    }
    .question-item {
        transition: all 0.5s ease;
        /* Ensure z-index is handled during move for better visual stack */
        z-index: 1; 
    }
    /* Transition d'animation de liste */
    .flip-list-move {
        transition: transform 0.5s;
    }
    /* Entering items */
    .flip-list-enter-active,
    .flip-list-leave-active {
        transition: all 0.5s ease;
    }
    .flip-list-enter-from,
    .flip-list-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }
    /* Ensure removed items are taken out of flow so others can move up smoothly */
    .flip-list-leave-active {
        position: absolute; 
        width: 100%; /* Important to maintain width when absolute */
    }
    .list-preview-box {
        width: 80px; 
        height: 80px; 
        background: #333; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        overflow: hidden; 
        border-radius: 8px; 
        flex-shrink: 0;
    }
    .list-preview-content {
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
    }
 </style>
--- a/VApp/src/components/SessionSelector.vue
+++ b/VApp/src/components/SessionSelector.vue
@@ -0,0 +1,56 @@
 <template>
    <v-row class="ml-15 mr-15 mt-5 mb-10 align-center">
      <v-col cols="12" md="4" class="d-flex align-center gap-2">
         <v-select
            v-model="internalValue"
            :items="sessions"
            item-title="title"
            item-value="id"
            label="Choisir une session"
            variant="outlined"
            hide-details
            rounded="xl"
            class="flex-grow-1"
         ></v-select>
         <v-btn icon="mdi-plus" color="green" variant="tonal" @click="$emit('create')" title="Nouvelle Session"></v-btn>
         <v-btn icon="mdi-delete" color="red" variant="tonal" @click="$emit('delete')" :disabled="!internalValue" title="Supprimer Session"></v-btn>
      </v-col>
      <v-col class="text-right">
        <v-btn rounded="xl" color="primary" @click="$emit('save')" :loading="saving" :disabled="!internalValue">
          <v-icon start>mdi-content-save</v-icon> Sauvegarder
        </v-btn>
      </v-col>
    </v-row>
 </template>
 <script setup>
 import { computed } from 'vue';
 const props = defineProps({
    modelValue: {
        type: String,
        default: null
    },
    sessions: {
        type: Array,
        default: () => []
    },
    saving: {
        type: Boolean,
        default: false
    }
 });
 const emit = defineEmits(['update:modelValue', 'create', 'delete', 'save']);
 const internalValue = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val)
 });
 </script>
 <style scoped>
    .gap-2 {
        gap: 8px;
    }
 </style>
--- a/VApp/src/config.js
+++ b/VApp/src/config.js
@@ -3,11 +3,23 @@
 // This allows runtime configuration changes without rebuilding the app.
 const defaults = {
-  mqttBrokerUrl: 'ws://192.168.73.252:9001',
+  mqttBrokerUrl: 'ws://192.168.1.201:9001',
  redBuzzerIP: '192.168.73.40',
  blueBuzzerIP: '192.168.73.41',
  orangeBuzzerIP: '192.168.73.42',
-  greenBuzzerIP: '192.168.73.43'
+  greenBuzzerIP: '192.168.73.43',
  apiUrl: 'http://192.168.1.178:3001',
  topics: {
    requestList: 'game/session/list/request',
    responseList: 'game/session/list/response',
    requestConfig: 'game/session/config/request',
    getConfig: 'game/session/config/get',
    updateConfig: 'game/session/config/update',
    createSession: 'game/session/create',
    deleteSession: 'game/session/delete',
    deleteMedia: 'game/session/media/delete',
    renameMedia: 'game/session/media/rename'
  }
 };
 const config = window.APP_CONFIG || defaults;
--- a/VApp/src/plugins/router.js
+++ b/VApp/src/plugins/router.js
@@ -32,6 +32,11 @@ const router = createRouter({
    path: '/settings',
    name: 'Paramètres',
    component: () => import('@/views/SettingsView.vue')
  },
  {
    path: '/session-editor',
    name: 'Éditeur de Session',
    component: () => import('@/views/SessionEditor.vue')
  }
  ]
 })
--- a/VApp/src/views/GameDisplay.vue
+++ b/VApp/src/views/GameDisplay.vue
@@ -1,15 +1,15 @@
 <template>
  <div class="main_div">
    <div>
-      <v-container class="score_div_main">
+      <v-container class="score_div_main" :style="getMainShadow()">
-        <v-container class="score_div color-blue">
+        <v-container class="score_div color-blue" :class="[getDimClass('Blue'), getFlashClass('Blue')]">
          <div class="d-flex flex-column align-center">
            <Transition name="score-fade" mode="out-in">
              <span :key="scores.BlueTotalScore" class="v-label-score">{{ scores.BlueRoundScore }}</span>
            </Transition>
          </div>
        </v-container>
-        <v-container class="score_div color-red">
+        <v-container class="score_div color-red" :class="[getDimClass('Red'), getFlashClass('Red')]">
          <div class="d-flex flex-column align-center">
            <Transition name="score-fade" mode="out-in">
              <span :key="scores.RedTotalScore" class="v-label-score">{{ scores.RedRoundScore }}</span>
@@ -19,14 +19,14 @@
        <v-container class="score_div color-white d-flex align-center justify-center">
          <span class="v-label-time">{{ timerDisplay }}</span>
        </v-container>
-        <v-container class="score_div color-green">
+        <v-container class="score_div color-green" :class="[getDimClass('Green'), getFlashClass('Green')]">
          <div class="d-flex flex-column align-center">
            <Transition name="score-fade" mode="out-in">
              <span :key="scores.GreenTotalScore" class="v-label-score">{{ scores.GreenRoundScore }}</span>
            </Transition>
          </div>
        </v-container>
-        <v-container class="score_div color-yellow">
+        <v-container class="score_div color-yellow" :class="[getDimClass('Yellow'), getFlashClass('Yellow')]">
          <div class="d-flex flex-column align-center">
            <Transition name="score-fade" mode="out-in">
              <span :key="scores.YellowTotalScore" class="v-label-score">{{ scores.YellowRoundScore }}</span>
@@ -129,7 +129,91 @@
    // Demande de rafraîchissement des scores au chargement
    // Cela permet de récupérer les scores actuels même après un rechargement de page
    client.publish('game/score/request', '{}');
    // Abonnement au statut des buzzers
    subscribeToTopic('vulture/buzzer/status', (topic, message) => {
        try {
            const data = JSON.parse(message);
            if (data.status === 'blocked') {
                const color = data.color || '';
                const team = identifyTeamByColor(color);
                activeTeam.value = team;
                // Trigger flash effect
                if (team) {
                    flashingTeam.value = team;
                    setTimeout(() => {
                        if (flashingTeam.value === team) {
                            flashingTeam.value = null;
                        }
                    }, 2000);
                }
                console.log(`Buzzer Blocked: Color=${color}, Identified Team=${activeTeam.value}`);
            } else if (data.status === 'unblocked') {
                activeTeam.value = null;
                flashingTeam.value = null;
                console.log('Buzzer Unblocked');
            }
        } catch (e) {
            console.error('Error parsing buzzer status', e);
        }
    });
  });
  const activeTeam = ref(null);
  const flashingTeam = ref(null);
  function identifyTeamByColor(hexColor) {
      if (!hexColor) return null;
      // Normalisation (retirer le # et mettre en majuscule)
      const color = hexColor.replace('#', '').toUpperCase();
      // Liste des couleurs connues (Theme + Standard)
      // RED
      if (['FF0000', 'D42828'].includes(color)) return 'Red';
      // BLUE
      if (['0000FF', '2867D4'].includes(color)) return 'Blue';
      // GREEN
      if (['00FF00', '28D42E'].includes(color)) return 'Green';
      // YELLOW
      if (['FFFF00', 'D4D100'].includes(color)) return 'Yellow';
      // Fallback: Détection approximative par composante dominante
      const r = parseInt(color.substr(0, 2), 16);
      const g = parseInt(color.substr(2, 2), 16);
      const b = parseInt(color.substr(4, 2), 16);
      if (r > 200 && g > 200 && b < 100) return 'Yellow';
      if (g > r && g > b) return 'Green';
      if (b > r && b > g) return 'Blue';
      if (r > g && r > b) return 'Red';
      return null;
  }
  function getDimClass(team) {
      if (!activeTeam.value) return '';
      return activeTeam.value !== team ? 'dimmed-score' : '';
  }
  function getFlashClass(team) {
      return flashingTeam.value === team ? 'flashing-glow' : '';
  }
  function getMainShadow() {
      if (!activeTeam.value) return {};
      let shadowColor = '';
      switch (activeTeam.value) {
          case 'Blue': shadowColor = 'rgb(40, 103, 212)'; break;
          case 'Red': shadowColor = 'rgb(212, 40, 40)'; break;
          case 'Green': shadowColor = 'rgb(40, 212, 46)'; break;
          case 'Yellow': shadowColor = 'rgb(212, 209, 0)'; break;
          default: return {};
      }
      return { boxShadow: `0px 3px 45px ${shadowColor}` };
  }
 </script>
 <style scoped>
@@ -146,7 +230,7 @@
    background-color: rgb(40, 40, 40);
    padding: 25px 30px;
    border-radius: 0px 0px 30px 30px;
-    box-shadow: 0px 3px 45px rgb(45, 115, 166);
+    box-shadow: 0px 3px 45px rgb(141, 141, 141);
  }
  .score_div {
    height: 100px;
@@ -214,4 +298,22 @@
  .score-fade-leave-to {
    opacity: 0;
  }
  .dimmed-score {
      opacity: 0.3;
      transform: scale(0.95);
      filter: grayscale(100%);
      transition: all 0.3s ease;
  }
  @keyframes flash-glow {
      0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
      10% { box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.9); }
  }
  .flashing-glow {
      animation: flash-glow 0.5s ease-in-out infinite;
      z-index: 10;
      position: relative;
  }
 </style>
--- a/VApp/src/views/ScoreDisplay.vue
+++ b/VApp/src/views/ScoreDisplay.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="score-grid">
-    <div class="score-cell cell-blue color-blue">
+    <div class="score-cell cell-blue color-blue" :class="[getDimClass('Blue'), getFlashClass('Blue')]">
      <div class="score-content">
        <div class="score-info info-left">
          <div class="team-name">Bleue</div>
@@ -16,7 +16,7 @@
        </div>
      </div>
    </div>
-    <div class="score-cell cell-red color-red">
+    <div class="score-cell cell-red color-red" :class="[getDimClass('Red'), getFlashClass('Red')]">
      <div class="score-content">
        <div class="score-main">
          <Transition name="score-pop" mode="out-in">
@@ -32,7 +32,7 @@
        </div>
      </div>
    </div>
-    <div class="score-cell cell-green color-green">
+    <div class="score-cell cell-green color-green" :class="[getDimClass('Green'), getFlashClass('Green')]">
      <div class="score-content">
        <div class="score-info info-left">
          <div class="team-name">Verte</div>
@@ -48,7 +48,7 @@
        </div>
      </div>
    </div>
-    <div class="score-cell cell-yellow color-yellow">
+    <div class="score-cell cell-yellow color-yellow" :class="[getDimClass('Yellow'), getFlashClass('Yellow')]">
      <div class="score-content">
        <div class="score-main">
          <Transition name="score-pop" mode="out-in">
@@ -142,8 +142,72 @@
    });
    // Request score refresh
    client.publish('game/score/request', '{}');
    subscribeToTopic('vulture/buzzer/status', (topic, message) => {
        try {
            const data = JSON.parse(message);
            if (data.status === 'blocked') {
                const color = data.color || '';
                const team = identifyTeamByColor(color);
                activeTeam.value = team;
                // Trigger flash effect
                if (team) {
                    flashingTeam.value = team;
                    setTimeout(() => {
                        if (flashingTeam.value === team) {
                            flashingTeam.value = null;
                        }
                    }, 2000);
                }
            } else if (data.status === 'unblocked') {
                activeTeam.value = null;
                flashingTeam.value = null;
            }
        } catch (e) {
            console.error('Error parsing buzzer status', e);
        }
    });
  });
  const activeTeam = ref(null);
  const flashingTeam = ref(null);
  function identifyTeamByColor(hexColor) {
      if (!hexColor) return null;
      const color = hexColor.replace('#', '').toUpperCase();
      // RED
      if (['FF0000', 'D42828'].includes(color)) return 'Red';
      // BLUE
      if (['0000FF', '2867D4'].includes(color)) return 'Blue';
      // GREEN
      if (['00FF00', '28D42E'].includes(color)) return 'Green';
      // YELLOW
      if (['FFFF00', 'D4D100'].includes(color)) return 'Yellow';
      // Fallback
      const r = parseInt(color.substr(0, 2), 16);
      const g = parseInt(color.substr(2, 2), 16);
      const b = parseInt(color.substr(4, 2), 16);
      if (r > 200 && g > 200 && b < 100) return 'Yellow';
      if (g > r && g > b) return 'Green';
      if (b > r && b > g) return 'Blue';
      if (r > g && r > b) return 'Red';
      return null;
  }
  function getDimClass(team) {
      if (!activeTeam.value) return '';
      return activeTeam.value !== team ? 'dimmed-score' : '';
  }
  function getFlashClass(team) {
      return flashingTeam.value === team ? 'flashing-glow' : '';
  }
  onUnmounted(() => {
    if (client) {
      client.end()
@@ -339,4 +403,23 @@
      opacity: 0;
    }
  }
  .dimmed-score {
      opacity: 0.3;
      transform: scale(0.95);
      filter: grayscale(100%);
      transition: all 0.3s ease;
  }
  @keyframes flash-glow {
      0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
      10% { box-shadow: 0 0 60px 20px rgba(255, 255, 255, 0.9); }
  }
  .flashing-glow {
      animation: flash-glow 0.5s ease-in-out infinite;
      z-index: 10;
      position: relative;
  }
 </style>
--- a/VApp/src/views/SessionEditor.vue
+++ b/VApp/src/views/SessionEditor.vue
@@ -1,260 +1,31 @@
 <template>
  <v-container>
-    <v-row class="mb-4 align-center">
+    <SessionSelector
-      <v-col cols="12" md="4" class="d-flex align-center gap-2">
+        v-model="selectedSessionId"
-         <v-select
+        :sessions="availableSessions"
-            v-model="selectedSessionId"
+        :saving="saving"
-            :items="availableSessions"
+        @update:model-value="loadSession"
-            item-title="title"
+        @create="openCreateDialog"
-            item-value="id"
+        @delete="deleteDialogVisible = true"
-            label="Choisir une session"
+        @save="saveSession"
-            variant="outlined"
+    />
            hide-details
            @update:model-value="loadSession"
            rounded="xl"
            class="flex-grow-1"
         ></v-select>
         <v-btn icon="mdi-plus" color="green" variant="tonal" @click="openCreateDialog" title="Nouvelle Session"></v-btn>
         <v-btn icon="mdi-delete" color="red" variant="tonal" @click="deleteDialogVisible = true" :disabled="!selectedSessionId" title="Supprimer Session"></v-btn>
      </v-col>
      <v-col>
        <h1 class="text-h4 white--text">Éditeur</h1>
      </v-col>
      <v-col class="text-right">
        <v-btn rounded="xl" color="primary" @click="saveSession" :loading="saving" :disabled="!selectedSessionId">
          <v-icon start>mdi-content-save</v-icon> Sauvegarder
        </v-btn>
      </v-col>
    </v-row>
    <div v-if="!selectedSessionId" class="text-center mt-10 text-h5 grey--text">
        Veuillez sélectionner une session pour commencer.
    </div>
    <div v-else>
-        <v-alert v-if="error" type="error" closable class="mb-4">{{ error }}</v-alert>
+        <SessionDetails 
-        <v-alert rounded="xl" v-if="success" type="success" closable class="mb-4">{{ success }}</v-alert>
+            :config="sessionConfig"
-
+            :session-id="selectedSessionId"
-        <v-card class="mb-6" rounded="xl">
+            :api-url="API_URL"
-        <v-card-title>Configuration Générale</v-card-title>
+            :success="success"
-        <v-card-text>
+            :error="error"
-            <v-row>
+            @delete-media="deleteMediaFile"
-            <v-col cols="12" md="6">
+            @rename-media="renameMediaFile"
-                <v-text-field color="primary" v-model="sessionConfig.PackId" label="ID du Pack" readonly variant="outlined" rounded="xl"></v-text-field>
+        />
            </v-col>
            <v-col cols="12" md="6">
                <v-text-field color="primary" v-model="sessionConfig.PackTitle" label="Titre du Pack" variant="outlined" rounded="xl"></v-text-field>
            </v-col>
            </v-row>
        </v-card-text>
        </v-card>
        <v-card>
        <v-card-title class="d-flex justify-space-between align-center">
            Questions ({{ sessionConfig.Questions.length }})
            <v-btn color="secondary" size="small" prepend-icon="mdi-plus" @click="openQuestionDialog()">Ajouter</v-btn>
        </v-card-title>
        <v-card-text>
            <v-list lines="two" bg-color="transparent">
            <v-list-item v-if="sessionConfig.Questions.length === 0">
                <v-list-item-title class="text-center">Aucune question définie.</v-list-item-title>
            </v-list-item>
            <template v-for="(question, index) in sessionConfig.Questions" :key="question.QuestionId">
                <v-card variant="outlined" class="mb-2">
                <v-card-text class="d-flex align-center py-2">
                    <div class="mr-4 font-weight-bold text-h6">{{ index + 1 }}</div>
                    <div class="flex-grow-1">
                    <div class="text-subtitle-1 font-weight-bold">
                        {{ question.QuestionId }} - {{ question.Type }} ({{ question.Points }} pts)
                    </div>
                    <div class="text-body-2">{{ question.QuestionText }}</div>
                    <div class="text-caption grey--text">Réponse: {{ question.MasterData.CorrectAnswer }}</div>
                    </div>
                    <div class="d-flex flex-column gap-1">
                        <v-btn icon="mdi-arrow-up" size="x-small" variant="text" :disabled="index === 0" @click="moveQuestion(index, -1)"></v-btn>
                        <v-btn icon="mdi-arrow-down" size="x-small" variant="text" :disabled="index === sessionConfig.Questions.length - 1" @click="moveQuestion(index, 1)"></v-btn>
                    </div>
                    <div class="d-flex ml-2">
                    <v-btn icon="mdi-pencil" size="small" variant="text" color="blue" @click="openQuestionDialog(question, index)"></v-btn>
                    <v-btn icon="mdi-delete" size="small" variant="text" color="red" @click="deleteQuestion(index)"></v-btn>
                    </div>
                </v-card-text>
                </v-card>
            </template>
            </v-list>
        </v-card-text>
        </v-card>
    </div>
    <!-- Dialog d'édition de question -->
    <v-dialog  v-model="dialogVisible" persistent max-width="800px">
      <v-card rounded="xl" class="pa-3">
        <v-card-title class="text-title-style">
            {{ editingIndex === -1 ? 'Nouvelle Question' : 'Éditer la Question' }}
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12" md="4">
                <v-text-field color="primary" density="compact" variant="outlined" rounded="lg" v-model="editedQuestion.QuestionId" label="ID Question" hint="Unique ID, ex: Q-005"></v-text-field>
              </v-col>
              <v-col cols="12" md="4">
                <v-select color="primary" density="compact" variant="outlined" rounded="lg" v-model="editedQuestion.Type" :items="['video', 'audio', 'picture']" label="Type"></v-select>
              </v-col>
              <v-col cols="12" md="4">
                <v-text-field color="primary" density="compact" variant="outlined" rounded="lg" v-model.number="editedQuestion.Points" type="number" label="Points"></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-textarea color="primary" variant="outlined" rounded="lg" v-model="editedQuestion.QuestionText" label="Texte de la question" rows="2"></v-textarea>
              </v-col>
              <!-- Media Section -->
              <v-col cols="12">
                 <div class="d-flex align-end">
                    <!-- Preview Section -->
                    <div v-if="editedQuestion.MediaUrl" class="mr-4 text-center" style="width: 120px; height: 120px; background: #333; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; position: relative;">
                        <img v-if="editedQuestion.Type === 'picture'" :src="getPreviewUrl(editedQuestion.MediaUrl)" style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;" @click="showFullPreview = true">
                        <video 
                            v-else-if="editedQuestion.Type === 'video'" 
                            :src="getPreviewUrl(editedQuestion.MediaUrl)" 
                            style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;" 
                            @click="showVideoPreview = true"    
                            @loadedmetadata="(e) => e.target.currentTime = e.target.duration / 3"
                            muted
                        ></video>
                        <div v-else-if="editedQuestion.Type === 'audio'" class="text-caption" style="cursor: pointer;" @click="showAudioPreview = true">
                            <v-icon size="64" color="primary">mdi-music</v-icon>
                        </div>
                    </div>
                    <v-text-field color="primary" density="compact" variant="outlined" rounded="lg" v-model="editedQuestion.MediaUrl" label="URL du Média" class="flex-grow-2 mr-2" hide-details></v-text-field>
                    <input 
                        type="file" 
                        ref="fileInputRef" 
                        style="display: none;" 
                        @change="onFileSelected"
                        accept="image/*,video/*,audio/*"
                    />
                    <v-btn 
                        rounded="lg"
                        variant="tonal" 
                        color="primary"
                        :loading="uploading"
                        :disabled="!editedQuestion.Type"
                        @click="$refs.fileInputRef.click()"
                    >
                        <v-icon start>mdi-upload</v-icon>
                        Upload
                    </v-btn>
                 </div>
                 <div v-if="uploadError" class="text-caption text-red">{{ uploadError }}</div>
              </v-col>
              <v-col cols="12"><v-divider></v-divider></v-col>
              <v-col cols="12" class="text-h6">Paramètres</v-col>
              <v-col cols="6" md="4">
                  <v-switch inset v-model="editedQuestion.Settings.AutoPlay" label="AutoPlay" density="compact" color="primary"></v-switch>
              </v-col>
              <v-col cols="6" md="4">
                  <v-switch inset v-model="editedQuestion.Settings.Loop" label="Loop" density="compact" color="primary"></v-switch>
              </v-col>
              <v-col cols="6" md="4">
                  <v-text-field color="primary" variant="outlined" rounded="lg" v-model.number="editedQuestion.Settings.PlayTime" type="number" label="Durée (sec)" density="compact"></v-text-field>
              </v-col>
              <v-col cols="12"><v-divider></v-divider></v-col>
              <v-label class="text-title-style">
                Réponse (Maître du jeu)
              </v-label>
              <v-col cols="12" class="text-h6"></v-col>
              <v-col cols="12">
                <v-text-field color="primary" variant="outlined" rounded="lg" v-model="editedQuestion.MasterData.CorrectAnswer" label="Réponse Correcte"></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-textarea color="primary" variant="outlined" rounded="lg" v-model="editedQuestion.MasterData.MasterNotes" label="Notes pour le MJ" rows="2"></v-textarea>
              </v-col>
              <v-col cols="12">
                <v-textarea color="primary" variant="outlined" rounded="lg" v-model="editedQuestion.MasterData.Help" label="Indice / Aide" rows="2"></v-textarea>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" rounded="xl" variant="outlined" @click="closeDialog">Annuler</v-btn>
          <v-btn color="success" rounded="xl" variant="outlined" @click="saveQuestion">Ok</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- Dialog Preview Image -->
    <v-dialog v-model="showFullPreview" max-width="90vw">
        <v-card rounded="xl" class="pa-2">
            <v-card-text class="d-flex justify-center" style="padding: 16px;">
                <v-img
                    :src="getPreviewUrl(editedQuestion.MediaUrl)" 
                    max-height="80vh"
                    rounded="lg"
                    @click="showFullPreview = false"
                    style="cursor: pointer;"
                ></v-img>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" variant="text" @click="showFullPreview = false">Fermer</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <!-- Dialog Preview Video -->
    <v-dialog v-model="showVideoPreview" max-width="90vw">
        <v-card rounded="xl" class="pa-2">
            <v-card-text class="d-flex justify-center" style="padding: 16px;">
                <video 
                    :src="getPreviewUrl(editedQuestion.MediaUrl)" 
                    controls
                    autoplay
                    disablepictureinpicture 
                    disableremoteplayback
                    controlslist="nodownload"
                    style="max-width: 100%; max-height: 80vh; border-radius: 12px;"
                ></video>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" variant="text" @click="showVideoPreview = false">Fermer</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <!-- Dialog Preview Audio -->
    <v-dialog v-model="showAudioPreview" max-width="500px">
        <v-card rounded="xl" class="pa-4">
            <v-card-title class="text-center">
                <v-icon size="64" color="primary">mdi-music-circle</v-icon>
            </v-card-title>
            <v-card-text class="d-flex justify-center" style="padding: 16px;">
                <audio 
                    :src="getPreviewUrl(editedQuestion.MediaUrl)" 
                    controls
                    controlslist="nodownload"
                    disablepictureinpicture 
                    disableremoteplayback
                    autoplay
                    style="width: 100%;"
                ></audio>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" variant="text" @click="showAudioPreview = false">Fermer</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
    <!-- Dialog Création de session -->
    <v-dialog v-model="createDialogVisible" persistent max-width="500px">
        <v-card rounded="xl">
@@ -294,121 +65,103 @@
 </template>
 <script setup>
 import SessionSelector from '@/components/SessionSelector.vue';
 import SessionDetails from '@/components/SessionDetails.vue';
 import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import mqtt from 'mqtt';
 import config from '@/config.js';
 import axios from 'axios'; 
 // --- État de l'Application ---
 // Liste des sessions disponibles récupérées via MQTT
 const availableSessions = ref([]);
 // ID de la session actuellement sélectionnée
 const selectedSessionId = ref(null);
 // Configuration de la session active (Lié au formulaire)
 const sessionConfig = reactive({
  PackId: '',
  PackTitle: '',
  Questions: []
 });
-const defaultQuestion = {
+// --- Gestion des Dialogues et États de Chargement ---
  QuestionId: '',
  Type: '',
  Points: 1,
  QuestionText: '',
  MediaUrl: '',
  Settings: {
    StartAt: null,
    StopAt: null,
    AutoPlay: false,
    Loop: false,
    PlayTime: null,
    DisplayMode: 'Cover',
    BlurEffect: false
  },
  MasterData: {
    CorrectAnswer: '',
    MasterNotes: '',
    Help: ''
  }
 };
-const dialogVisible = ref(false);
+// Création de session
 const editingIndex = ref(-1);
 const editedQuestion = reactive(JSON.parse(JSON.stringify(defaultQuestion)));
 // Creation Session
 const createDialogVisible = ref(false);
 const newSessionName = ref('');
 const deleteDialogVisible = ref(false);
 const showFullPreview = ref(false);
 const showVideoPreview = ref(false);
 const showAudioPreview = ref(false);
 // Suppression de session
 const deleteDialogVisible = ref(false);
 // États UI
 const saving = ref(false);
 const uploading = ref(false);
 const error = ref('');
 const success = ref('');
 const uploadError = ref('');
-// MQTT
+// --- Configuration MQTT & API ---
 const mqttBrokerUrl = config.mqttBrokerUrl;
 // Guess HTTP URL from MQTT URL (assuming typical setup or localhost fallback)
 // Ideally this should be in config too
 const httpBaseUrl = mqttBrokerUrl.replace('ws://', 'http://').replace('wss://', 'https://').split(':')[0] + ':' + (config.mqttBrokerUrl.includes('localhost') ? '3000' : '3000'); 
 // Warning: This URL construction is brittle. Better to put api URL in config. But for now we assume port 3000 next to MQTT.
 // Correct logic: take protocol://hostname from mqtt, add :3000.
 function getApiUrl() {
    // Port 3001 to avoid conflict with Vite (3000)
    // Use the same hostname as the current page to avoid "Private Network Access" blocks
    return `http://192.168.1.178:3001`;
 }
 const API_URL = getApiUrl();
 function getPreviewUrl(relativePath) {
    if (!relativePath || relativePath.startsWith('http')) return relativePath;
    // Construct full URL: API_URL + /quizz/ + sessionId + relativePath
    // relativePath starts with /assets/...
    return `${API_URL}/quizz/${selectedSessionId.value}${relativePath}`;
 }
 // URL API (Backend Express) définie dans config.js
 const API_URL = config.apiUrl;
 let client = null;
-const topics = {
+
-    requestList: 'game/session/list/request',
+// Topics MQTT utilisés pour la communication avec le backend
-    responseList: 'game/session/list/response',
+const topics = config.topics;
-    requestConfig: 'game/session/config/request',
+
-    getConfig: 'game/session/config/get',
+// --- Cycle de Vie du Composant ---
    updateConfig: 'game/session/config/update',
    createSession: 'game/session/create',
    deleteSession: 'game/session/delete'
 };
 onMounted(() => {
    // Connexion au broker MQTT
    client = mqtt.connect(mqttBrokerUrl);
    client.on('connect', () => {
-        console.log('SessionEditor: Connected to MQTT');
+        console.log('SessionEditor: Connecté à MQTT');
        client.subscribe(topics.responseList);
        client.subscribe(topics.getConfig);
-        // Request list of sessions
+        // Demande initiale de la liste des sessions
        client.publish(topics.requestList, '{}');
    });
    client.on('message', (topic, message) => {
        if (topic === topics.responseList) {
            try {
                // Mise à jour de la liste des sessions
                availableSessions.value = JSON.parse(message.toString());
-                console.log("Sessions received:", availableSessions.value);
+                console.log("Sessions reçues:", availableSessions.value);
            } catch (e) { console.error(e); }
        }
        else if (topic === topics.getConfig) {
            try {
                // Chargement de la configuration de la session reçue
                const data = JSON.parse(message.toString());
-                // Reset config
+                
                // Réinitialisation et peuplement de sessionConfig
                sessionConfig.Questions = [];
                // Ajout d'une clé UI unique pour chaque question (pour les animations de liste)
                if (Array.isArray(data.Questions)) {
                    data.Questions.forEach(q => {
                        if (!q._ui_key) {
                            Object.defineProperty(q, '_ui_key', {
                                value: `q-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
                                writable: true,
                                enumerable: false,
                                configurable: true
                            });
                        }
                    });
                }
                // Fusion des données reçues dans l'objet réactif
                Object.assign(sessionConfig, data);
-                console.log('Session config loaded');
+                console.log('Configuration de session chargée');
            } catch (e) {
-                console.error('Error parsing session config', e);
+                console.error('Erreur parsing config session', e);
                error.value = "Erreur lors du chargement de la configuration.";
            }
        }
@@ -419,116 +172,55 @@ onUnmounted(() => {
    if (client) client.end();
 });
 // --- Méthodes Métier ---
 // Charge la configuration de la session sélectionnée
 function loadSession() {
    if (!selectedSessionId.value) return;
-    console.log("Loading session:", selectedSessionId.value);
+    console.log("Chargement session:", selectedSessionId.value);
    client.publish(topics.requestConfig, JSON.stringify({ SessionId: selectedSessionId.value }));
 }
-function openQuestionDialog(item, index) {
+// Envoie une requête pour supprimer un fichier média spécifique
-    if (item) {
+function deleteMediaFile(mediaPath) {
        editingIndex.value = index;
        Object.assign(editedQuestion, JSON.parse(JSON.stringify(item)));
        if(!editedQuestion.Settings) editedQuestion.Settings = {...defaultQuestion.Settings};
        if(!editedQuestion.MasterData) editedQuestion.MasterData = {...defaultQuestion.MasterData};
    } else {
        editingIndex.value = -1;
        Object.assign(editedQuestion, JSON.parse(JSON.stringify(defaultQuestion)));
        editedQuestion.QuestionId = "Q-NEW"; 
    }
    dialogVisible.value = true;
    uploadError.value = '';
 }
 function closeDialog() {
    dialogVisible.value = false;
    setTimeout(() => {
        Object.assign(editedQuestion, JSON.parse(JSON.stringify(defaultQuestion)));
        editingIndex.value = -1;
    }, 300);
 }
 function saveQuestion() {
    if (editingIndex.value > -1) {
        Object.assign(sessionConfig.Questions[editingIndex.value], editedQuestion);
    } else {
        sessionConfig.Questions.push(JSON.parse(JSON.stringify(editedQuestion)));
    }
    closeDialog();
 }
 function deleteQuestion(index) {
    if (confirm('Êtes-vous sûr de vouloir supprimer cette question ?')) {
        sessionConfig.Questions.splice(index, 1);
    }
 }
 function moveQuestion(index, direction) {
    const newIndex = index + direction;
    if (newIndex >= 0 && newIndex < sessionConfig.Questions.length) {
        const item = sessionConfig.Questions.splice(index, 1)[0];
        sessionConfig.Questions.splice(newIndex, 0, item);
    }
 }
 function onFileSelected(event) {
    const file = event.target.files[0];
    if (file) {
        handleFileUpload(file);
    }
    // Reset input so same file can be selected again
    event.target.value = '';
 }
 async function handleFileUpload(files) {
    if (!files) return;
    // Vuetify v-file-input can return a single object or an array depending on version/props
    const file = Array.isArray(files) ? files[0] : files;
    if (!file) return;
    uploading.value = true;
    uploadError.value = '';
    // Validation: Type is mandatory for folder sorting
    if (!editedQuestion.Type) {
        uploadError.value = "Veuillez sélectionner un Type avant d'uploader un fichier.";
        uploading.value = false;
        // Reset input (optional but cleanest)
        return;
    }
    try {
-        const formData = new FormData();
+        const payload = JSON.stringify({
-        // Append metadata BEFORE file so multer can read them first for destination/filename
+            SessionId: selectedSessionId.value,
-        formData.append('questionId', editedQuestion.QuestionId);
+            MediaPath: mediaPath
-        formData.append('type', editedQuestion.Type);
+        });
-        formData.append('file', file);
+        client.publish(topics.deleteMedia, payload);
-        
+        console.log("Requête suppression média envoyée:", payload);
        // Upload to backend
        const response = await axios.post(`${API_URL}/upload/${selectedSessionId.value}`, formData);
        if (response.data && response.data.path) {
            editedQuestion.MediaUrl = response.data.path;
            console.log("File uploaded successfully:", response.data.path);
        }
    } catch (e) {
-        console.error("Upload error:", e);
+        console.error("Erreur suppression média", e);
        uploadError.value = "Erreur lors de l'upload du fichier.";
    } finally {
        uploading.value = false;
    }
 }
 // Envoie une requête pour renommer un fichier média
 function renameMediaFile({ oldPath, newName }) {
    try {
        const payload = JSON.stringify({
            SessionId: selectedSessionId.value,
            OldPath: oldPath,
            NewName: newName
        });
        client.publish(topics.renameMedia, payload);
        console.log("Requête renommage média envoyée:", payload);
    } catch (e) {
        console.error("Erreur renommage média", e);
    }
 }
 // Ouvre le dialogue de création
 function openCreateDialog() {
    newSessionName.value = '';
    createDialogVisible.value = true;
 }
 // Crée une nouvelle session via MQTT
 function createSession() {
    if (!newSessionName.value) return;
-    console.log("Creating session:", newSessionName.value);
+    console.log("Création session:", newSessionName.value);
    try {
        const payload = JSON.stringify({ SessionName: newSessionName.value });
@@ -539,15 +231,16 @@ function createSession() {
        createDialogVisible.value = false;
    } catch (e) {
-        console.error("Error creating session", e);
+        console.error("Erreur création session", e);
        error.value = "Erreur lors de la création.";
    }
 }
 // Supprime la session actuellement sélectionnée
 function confirmDeleteSession() {
    if (!selectedSessionId.value) return;
-    console.log("Deleting session:", selectedSessionId.value);
+    console.log("Suppression session:", selectedSessionId.value);
    try {
        const payload = JSON.stringify({ SessionId: selectedSessionId.value });
@@ -562,11 +255,12 @@ function confirmDeleteSession() {
        sessionConfig.PackId = '';
        sessionConfig.PackTitle = '';
    } catch (e) {
-        console.error("Error deleting session", e);
+        console.error("Erreur suppression session", e);
        error.value = "Erreur lors de la suppression.";
    }
 }
 // Sauvegarde la configuration actuelle via MQTT
 function saveSession() {
    if (!selectedSessionId.value) return;
    saving.value = true;
@@ -576,7 +270,15 @@ function saveSession() {
    try {
        const payload = JSON.stringify({
            SessionId: selectedSessionId.value,
-            Config: sessionConfig
+            Config: JSON.parse(JSON.stringify(sessionConfig, (key, value) => {
                // Filter out keys starting with underscore (internal UI state)
                if (key.startsWith('_')) return undefined;
                // Filter out cache busting querystring
                if (key === 'MediaUrl' && typeof value === 'string') {
                    return value.split('?')[0];
                }
                return value;
            }))
        });
        client.publish(topics.updateConfig, payload);
        success.value = "Sauvegarde envoyée."; 
@@ -607,4 +309,6 @@ function saveSession() {
        font-size: 20px;
        font-weight: bold;
    }
 </style>
--- a/VNode/package-lock.json
+++ b/VNode/package-lock.json
--- a/VNode/package.json
+++ b/VNode/package.json
@@ -1,6 +1,9 @@
 {
  "dependencies": {
-    "mqtt": "^5.10.1",
+    "cors": "^2.8.6",
    "express": "^5.2.1",
    "mqtt": "^5.14.1",
    "multer": "^2.0.2",
    "ping": "^0.4.4",
    "ws": "^8.18.0"
  }
--- a/VNode/quizz/Quizz-1/festival/MysteryLand.jpg
+++ b/VNode/quizz/Quizz-1/festival/MysteryLand.jpg
--- a/VNode/quizz/Quizz-1/geography-history/Q-1.jpeg
+++ b/VNode/quizz/Quizz-1/geography-history/Q-1.jpeg
--- a/VNode/quizz/Quizz-1/geography-history/Q-2.jpeg
+++ b/VNode/quizz/Quizz-1/geography-history/Q-2.jpeg
--- a/VNode/quizz/Quizz-1/geography-history/Q-3.jpeg
+++ b/VNode/quizz/Quizz-1/geography-history/Q-3.jpeg
--- a/VNode/quizz/Quizz-1/geography-history/Q-4.jpeg
+++ b/VNode/quizz/Quizz-1/geography-history/Q-4.jpeg
--- a/VNode/quizz/Quizz-1/geography-history/Q-5.jpeg
+++ b/VNode/quizz/Quizz-1/geography-history/Q-5.jpeg
--- a/VNode/quizz/Quizz-1/geography-history/config.yml
+++ b/VNode/quizz/Quizz-1/geography-history/config.yml
@@ -1,27 +0,0 @@
 name: "Histoire & Géographie"
 questions:  
  1:
    Q:  "Quelle bataille célèbre s'est déroulée en 1815, marquant la défaite de Napoléon Bonaparte ?"
    T:  "Elle a eu lieu en Belgique"
    R:  "La bataille de Waterloo."
    P:  "Q-1.jpeg"
  2:
    Q:  "Quelle est la capitale de l'Australie ?"
    T:  "Le nom de cette ville commence par la lettre 'C'"
    R:  "Canberra."
    P:  "Q-2.jpeg"
  3:
    Q:  "En quelle année la Seconde Guerre mondiale a-t-elle pris fin ?"
    T:  "C'est au milieu des années 40."
    R:  "En 1945."
    P:  "Q-3.jpeg"
  4:
    Q:  "Quel fleuve traverse la ville du Caire en Égypte ?"
    T:  "C'est l'un des plus longs fleuves du monde"
    R:  "Le Nil."
    P:  "Q-4.jpeg"
  5:
    Q:  "Quel pays a été divisé par un mur de 1961 à 1989 ?"
    T:  "Sa chute a marqué la fin de la guerre froide."
    R:  "L'Allemagne (le mur de Berlin)."
    P:  "Q-5.jpeg"
--- a/VNode/quizz/Quizz-1/geography-history/originales/Q-1.webp
+++ b/VNode/quizz/Quizz-1/geography-history/originales/Q-1.webp
--- a/VNode/quizz/Quizz-1/geography-history/originales/Q-2.webp
+++ b/VNode/quizz/Quizz-1/geography-history/originales/Q-2.webp
--- a/VNode/quizz/Quizz-1/geography-history/originales/Q-3.webp
+++ b/VNode/quizz/Quizz-1/geography-history/originales/Q-3.webp
--- a/VNode/quizz/Quizz-1/geography-history/originales/Q-4.webp
+++ b/VNode/quizz/Quizz-1/geography-history/originales/Q-4.webp
--- a/VNode/quizz/Quizz-1/geography-history/originales/Q-5.webp
+++ b/VNode/quizz/Quizz-1/geography-history/originales/Q-5.webp
--- a/VNode/quizz/Quizz-1/video-games/Original/Q-1.jpg
+++ b/VNode/quizz/Quizz-1/video-games/Original/Q-1.jpg
--- a/VNode/quizz/Quizz-1/video-games/Original/Q-2.jpg
+++ b/VNode/quizz/Quizz-1/video-games/Original/Q-2.jpg
--- a/VNode/quizz/Quizz-1/video-games/Original/Q-3.webp
+++ b/VNode/quizz/Quizz-1/video-games/Original/Q-3.webp
--- a/VNode/quizz/Quizz-1/video-games/Original/Q-4.webp
+++ b/VNode/quizz/Quizz-1/video-games/Original/Q-4.webp
--- a/VNode/quizz/Quizz-1/video-games/Original/Q-5.webp
+++ b/VNode/quizz/Quizz-1/video-games/Original/Q-5.webp
--- a/VNode/quizz/Quizz-1/video-games/Q-1.jpeg
+++ b/VNode/quizz/Quizz-1/video-games/Q-1.jpeg
--- a/VNode/quizz/Quizz-1/video-games/Q-2.jpeg
+++ b/VNode/quizz/Quizz-1/video-games/Q-2.jpeg
--- a/VNode/quizz/Quizz-1/video-games/Q-3.jpeg
+++ b/VNode/quizz/Quizz-1/video-games/Q-3.jpeg
--- a/VNode/quizz/Quizz-1/video-games/Q-4.jpeg
+++ b/VNode/quizz/Quizz-1/video-games/Q-4.jpeg
--- a/VNode/quizz/Quizz-1/video-games/Q-5.jpeg
+++ b/VNode/quizz/Quizz-1/video-games/Q-5.jpeg
--- a/VNode/quizz/Quizz-1/video-games/config.yml
+++ b/VNode/quizz/Quizz-1/video-games/config.yml
@@ -1,27 +0,0 @@
 name: "Jeux vidéos"
 questions:  
  1:
    Q:  "Quel personnage de jeu vidéo est un plombier moustachu qui saute sur des ennemis pour sauver une princesse ?"
    T:  "C’est le personnage le plus célèbre de Nintendo, son nom commence par 'M'."
    R:  "Mario."
    P:  "Q-1.jpeg"
  2:
    Q:  "Quel jeu vidéo multijoueur de football avec des voitures est très populaire ?"
    T:  "Il s'agit d'un mélange de sport et de voitures rapides."
    R:  "Rocket League."
    P:  "Q-2.jpeg"
  3:
    Q:  "Quel jeu vidéo mobile consiste à faire exploser des bonbons en alignant trois pièces identiques ?"
    T:  "Son nom fait référence aux bonbons."
    R:  "Candy Crush Saga."
    P:  "Q-3.jpeg"
  4:
    Q:  "Quel est le nom du célèbre personnage bleu de SEGA qui court à une vitesse incroyable ?"
    T:  "Son nom commence par la lettre 'S' et c'est un hérisson."
    R:  "Sonic"
    P:  "Q-4.jpeg"
  5:
    Q:  "Quel jeu permet de construire et explorer un monde fait de blocs, tout en survivant face à des monstres ?"
    T:  "Le monde est entièrement fait de blocs carrés."
    R:  "Minecraft."
    P:  "Q-5.jpeg"
--- a/VNode/services/buzzer/buzzer-manager.js
+++ b/VNode/services/buzzer/buzzer-manager.js
@@ -188,10 +188,10 @@ client.on('message', (topic, message) => {
    if (topic === 'vulture/buzzer/unlock') {
        console.log('[INFO] Buzzer unlock requested');
-        // Notify the light manager to change to the team's color
+        // Notify the light manager to change to the default color
        client.publish('vulture/light/change', JSON.stringify({
-            color: "#FFFFFF",
+            color: "#FF00FF",
-            effect: 'rainbow'
+            effect: 'none'
        }));
        // Reset buzzer manager state
--- a/VNode/services/config/configuration.json
+++ b/VNode/services/config/configuration.json
@@ -22,7 +22,9 @@
                "mqttSessionListTopic": "game/session/list/request",
                "mqttSessionListResponseTopic": "game/session/list/response",
                "mqttSessionCreateTopic": "game/session/create",
-                "mqttSessionDeleteTopic": "game/session/delete"
+                "mqttSessionDeleteTopic": "game/session/delete",
                "mqttSessionDeleteMediaTopic": "game/session/media/delete",
                "mqttSessionRenameMediaTopic": "game/session/media/rename"
            },
            "httpPort": 3001
        }
--- a/VNode/services/game/quizz-collector.js
+++ b/VNode/services/game/quizz-collector.js
@@ -15,19 +15,19 @@ const folderPath = 'quizz'; // Remplace par le chemin de ton dossier
 const client = mqtt.connect(mqttHost);
 client.on('connect', () => {
-    console.log('Connecté au broker MQTT');
+    console.log('[INFO] Connecté au broker MQTT');
    client.subscribe(mqttQuizzCollectorCmdTopic, (err) => {
        if (err) {
-            console.error("Erreur lors de l'abonnement au topic de commande:", err);
+            console.error("[ERREUR] Erreur lors de l'abonnement au topic de commande:", err);
        } else {
-            console.log(`Abonné au topic ${mqttQuizzCollectorCmdTopic}`);
+            console.log(`[INFO] Abonné au topic ${mqttQuizzCollectorCmdTopic}`);
        }
    });
 });
 client.on('message', (topic, message) => {
    if (topic === mqttQuizzCollectorCmdTopic) {
-        console.log('Commande reçue, lecture du dossier en cours...');
+        console.log('[INFO] Commande reçue, lecture du dossier en cours...');
        Collect();
    }
 });
@@ -36,17 +36,17 @@ client.on('message', (topic, message) => {
 function Collect() {
    fs.readdir(folderPath, (err, files) => {
        if (err) {
-            console.error('Erreur lors de la lecture du dossier:', err);
+            console.error('[ERREUR] Erreur lors de la lecture du dossier:', err);
            return;
        }
-        console.log('Dossiers trouvés:', files);
+        console.log('[INFO] Dossiers trouvés:', files);
        const message = JSON.stringify(files);
        client.publish(mqttQuizzCollectorListTopic, message, { qos: 1 }, (err) => {
            if (err) {
-                console.error('Erreur lors de la publication MQTT:', err);
+                console.error('[ERREUR] Erreur lors de la publication MQTT:', err);
            } else {
-                console.log('Liste des fichiers publiée sur MQTT');
+                console.log('[INFO] Liste des fichiers publiée sur MQTT');
            }
        });
    });
--- a/VNode/services/game/session-manager.js
+++ b/VNode/services/game/session-manager.js
@@ -21,7 +21,9 @@ const {
                mqttSessionListTopic,
                mqttSessionListResponseTopic,
                mqttSessionCreateTopic,
-                mqttSessionDeleteTopic
+                mqttSessionDeleteTopic,
                mqttSessionDeleteMediaTopic,
                mqttSessionRenameMediaTopic
            },
            httpPort
        }
@@ -116,6 +118,8 @@ client.on('connect', () => {
    client.subscribe(mqttSessionListTopic);
    client.subscribe(mqttSessionCreateTopic);
    client.subscribe(mqttSessionDeleteTopic);
    client.subscribe(mqttSessionDeleteMediaTopic);
    client.subscribe(mqttSessionRenameMediaTopic);
    console.log(`[INFO] Abonné aux topics session`);
 });
@@ -163,6 +167,26 @@ client.on('message', (topic, message) => {
        } catch (e) {
            console.error('[ERREUR] Impossible de parser la demande de suppression', e);
        }
    } else if (topic === mqttSessionDeleteMediaTopic) {
        try {
            const payload = JSON.parse(message.toString());
            console.log(`[INFO] Demande de suppression de média: ${payload.MediaPath} pour session: ${payload.SessionId}`);
            if (payload.SessionId && payload.MediaPath) {
                deleteMedia(payload.SessionId, payload.MediaPath);
            }
        } catch (e) {
            console.error('[ERREUR] Impossible de parser la demande de suppression de média', e);
        }
    } else if (topic === mqttSessionRenameMediaTopic) {
        try {
            const payload = JSON.parse(message.toString());
            console.log(`[INFO] Demande de renommage de média: ${payload.OldPath} -> ${payload.NewName}`);
            if (payload.SessionId && payload.OldPath && payload.NewName) {
                renameMedia(payload.SessionId, payload.OldPath, payload.NewName);
            }
        } catch (e) {
            console.error('[ERREUR] Impossible de parser la demande de renommage', e);
        }
    }
 });
@@ -285,6 +309,91 @@ function deleteSession(sessionId) {
    }
 }
 function deleteMedia(sessionId, relativePath) {
    // Sécuriser le chemin
    // relativePath devrait être du type "/assets/..."
    if (!relativePath) return;
    // Nettoyer le chemin (retirer le slash initial s'il existe)
    if (relativePath.startsWith('/')) relativePath = relativePath.substring(1);
    const fullPath = path.join(quizzDir, sessionId, relativePath);
    // Vérifier que le chemin reste dans le dossier de la session (protection directory traversal)
    if (!fullPath.startsWith(path.join(quizzDir, sessionId))) {
        console.error(`[ERREUR] Tentative de suppression hors session: ${fullPath}`);
        return;
    }
    if (!fs.existsSync(fullPath)) {
        console.error(`[ERREUR] Le fichier ${fullPath} n'existe pas`);
        return;
    }
    try {
        fs.unlinkSync(fullPath);
        console.log(`[INFO] Média supprimé: ${fullPath}`);
    } catch (e) {
        console.error(`[ERREUR] Impossible de supprimer le fichier ${fullPath}`, e);
    }
 }
 client.on('error', (error) => {
    console.error('[ERREUR] Erreur de connexion au broker MQTT:', error.message);
 });
 // Helper pour les renames tenaces sur Windows
 function renameWithRetry(oldPath, newPath, retries = 5, delay = 100) {
    try {
        fs.renameSync(oldPath, newPath);
        console.log(`[INFO] Média renommé : ${oldPath} -> ${newPath}`);
    } catch (e) {
        if (retries > 0) {
            console.log(`[WARN] Échec renommage, nouvel essai dans ${delay}ms... (${retries} restants)`);
            setTimeout(() => {
                renameWithRetry(oldPath, newPath, retries - 1, delay * 2);
            }, delay);
        } else {
            console.error(`[ERREUR] Impossible de renommer le fichier après plusieurs essais`, e);
        }
    }
 }
 function renameMedia(sessionId, oldRelativePath, newName) {
    if (!oldRelativePath || !newName) return;
    // Clean paths
    if (oldRelativePath.startsWith('/')) oldRelativePath = oldRelativePath.substring(1);
    const oldFullPath = path.join(quizzDir, sessionId, oldRelativePath);
    // Security check
    if (!oldFullPath.startsWith(path.join(quizzDir, sessionId))) {
        console.error(`[ERREUR] Tentative de renommage hors session`);
        return;
    }
    if (!fs.existsSync(oldFullPath)) {
        console.error(`[ERREUR] Fichier à renommer introuvable: ${oldFullPath}`);
        return;
    }
    const dir = path.dirname(oldFullPath);
    const ext = path.extname(oldFullPath);
    // newName comes as "Q-005", we add the extension
    const newFilename = newName + ext;
    const newFullPath = path.join(dir, newFilename);
    // Prevent overwriting existing files (check & delete)
    if (fs.existsSync(newFullPath)) {
        console.log(`[INFO] Le fichier de destination existe déjà, on supprime : ${newFullPath}`);
        try {
            fs.unlinkSync(newFullPath);
        } catch (e) {
            console.error(`[ERREUR] Impossible de supprimer le fichier existant ${newFullPath}`, e);
            // On continue quand même pour tenter le rename (le rename écrasera peut-être ou échouera)
        }
    }
    renameWithRetry(oldFullPath, newFullPath);
 }
--- a/VNode/services/light/light-manager.js
+++ b/VNode/services/light/light-manager.js
@@ -2,7 +2,7 @@
 const mqtt = require('mqtt');
 // Configuration du broker MQTT et de WLED
-const brokerUrl = 'mqtt://nanomq';  // Change ce lien si nécessaire
+const brokerUrl = 'mqtt://192.168.1.201';  // Change ce lien si nécessaire
 const clientId = 'light_manager_wled';
 const wledTopicBase = 'wled/all';  // Le topic de base pour ton ruban WLED
 const options = {
@@ -11,7 +11,7 @@ const options = {
 };
 // État des lumières
-let currentColor = '#FFFFFF';  // Couleur par défaut (blanc)
+let currentColor = '#FF00FF';  // Couleur par défaut
 let currentEffect = 'none';  // Pas d'effet par défaut
 // Connexion au broker MQTT
@@ -25,6 +25,12 @@ client.on('connect', () => {
        if (err) console.error('[ERROR] Subscription to light topics failed');
        else console.log('[INFO] Successfully subscribed to light topics');
    });
    // Souscription aux topics des buzzers pour synchronisation directe
    client.subscribe('vulture/buzzer/pressed/#', (err) => {
        if (err) console.error('[ERROR] Subscription to buzzer topics failed');
        else console.log('[INFO] Successfully subscribed to buzzer topics');
    });
 });
 // Fonction pour envoyer un message au ruban WLED
@@ -65,9 +71,9 @@ function applyLightChange(color, effect, intensity) {
 function getWLEDEffectId(effect) {
    const effectsMap = {
        'none': 0,
-        'blink': 1,      // Effet de fondu
+        'blink': 0,      // Effet de fondu
-        'fade': 12,     // Clignotement
+        'fade': 0,     // Clignotement
-        'rainbow': 9    // Effet arc-en-ciel
+        'rainbow': 0    // Effet arc-en-ciel
    };
    return effectsMap[effect] || 0;  // Par défaut, aucun effet
 }
@@ -116,7 +122,7 @@ client.on('message', (topic, message) => {
    } else if (topic === 'vulture/light/reset') {
        // Réinitialisation des lumières à la couleur et l'effet par défaut
        console.log('[INFO] Resetting lights to default state');
-        applyLightChange('#FFFFFF', 'reset', 255);
+        applyLightChange('#FF00FF', 'reset', 255);
    } else if (topic === 'vulture/light/status/request') {
        // Répondre à la requête de statut
@@ -125,6 +131,23 @@ client.on('message', (topic, message) => {
    } else if (topic === 'vulture/light/status/response') {
        // Répondre à la requête de statut
        console.log('[INFO] Light status response received');
    } else if (topic.startsWith('vulture/buzzer/pressed/')) {
        // Synchronisation directe Buzzer -> WLED
        const { color } = payload;
        if (color && /^#[0-9A-F]{6}$/i.test(color)) {
            console.log(`[INFO] Buzzer pressed, syncing WLED color to ${color}`);
            // Envoi direct de la couleur (format hex avec #)
            sendToWLED('col', color);
            // Mise à jour de l'état interne
            currentColor = color;
            currentEffect = 'none'; // Reset effect on direct color set
        } else {
            console.warn(`[WARN] Invalid color in buzzer payload: ${color}`);
        }
    } else {
        console.error(`[ERROR] Unrecognized topic: ${topic}`);
    }
Author	SHA1	Message	Date
Jérémy CHOMAZ	b4ca539e7b	build(Script): Script de lancement projet complet (PS1) - Utilise Windows Terminal pour ouvrir multiples onglets - Lance le frontend Vue (npm run dev) - Lance automatiquement les services backend (score, quizz, buzzer, session...)	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	a632ca98b0	feat(Editor): Nouveau composant SessionSelector - Dropdown de sélection des sessions - Boutons d'actions rapides (Créer, Supprimer, Sauvegarder) - Interface simplifiée avec Vuetify (arrondis, icônes)	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	cdb3cdf642	feat(Editor): Refactor liste des questions (SessionQuestionsList) - Affichage liste avec previews média (Image/Vidéo/Audio) - Fix génération miniature vidéo via le hack #t=0.1 - Boutons de ré-ordonnancement (Monter/Descendre) - Intégration du dialogue d'édition QuestionEditorDialog	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	1ce14eca13	feat(Editor): Refactor et Renommage avancé des médias - Algorithme de renommage en 2 passes (TMP -> Final) pour éviter les verrous fichiers - Gestion propre de la suppression des questions et médias associés - Délégation de l'affichage de la liste à SessionQuestionsList	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	46bd3f5917	feat(Editor): Nouveau composant QuestionEditorDialog - Dialogue modal pour l'ajout/édition de questions - Support complet de l'upload et preview des médias (Image/Vidéo/Audio) - Gestion des paramètres de question (points, autoplay, loop...) - Gestion des notes pour le maître du jeu	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	eae80c0c39	build(deps): Mise à jour package.json et package-lock.json	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	c0f5b35398	build(deps): Mise à jour package.json et package-lock.json	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	f5dbd08565	feat(Config): Centralisation topics MQTT et MAJ IPs - Mise à jour IP Broker MQTT (192.168.1.201) - Ajout API URL (192.168.1.178) - Ajout objet 'topics' pour centraliser les routes MQTT (session, media...)	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	7586095bd5	feat(SessionManager): Gestion avancée des médias (Rename/Delete) - Implémentation renameMedia avec retry (fix Windows file locking) - Implémentation deleteMedia via MQTT - Sécurisation des chemins d'accès (Directory Traversal prevention)	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	bcaa97e7e2	feat(MQTTPublisher): Mise à jour liste topics WLED - Correction format topics (suppression slash initial) - Ajout topics spécifiques couleur (wled/all/col, wled/panel/col)	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	b1b7080fbe	style(QuizzCollector): Amélioration formatage des logs ([INFO]/[ERREUR])	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	ce8d859126	feat(Router): Ajout de la route vers l'éditeur de session (/session-editor)	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	f800262278	feat(Config): Ajout topics MQTT gestion média - Ajout mqttSessionDeleteMediaTopic (game/session/media/delete) - Ajout mqttSessionRenameMediaTopic (game/session/media/rename)	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	2dbb270e17	feat(BuzzerManager): Alignement couleur déblocage avec WLED - Changement de la couleur de déblocage vers Magenta (#FF00FF) - Suppression de l'effet rainbow au déblocage pour éviter les conflits visuels	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	f3fc94cab3	fix(SessionEditor): Nettoyage config avant sauvegarde et traductions - Suppression des timestamps (cache-busting) dans les MediaUrl avant l'envoi au serveur - Filtrage des propriétés internes (commençant par _) pour ne pas polluer le JSON - Traduction des logs console en français	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	92daf14a09	(update) ScoreDisplay : Feedback visuel lors des buzzer - Ajout de l'état 'activeTeam' et flashingTeam' basé sur les messages MQT - Implémentation du grisement (dimming) des équipes inactives - Ajout d'une lueur blanche clignotante (flash-glow) de 2s sur l'équipe active	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	c62f76aeec	(update) GameDisplay : Feedback visuel lors des buzzer - Ajout de l'état 'activeTeam' et 'flashingTeam' basé sur les messages MQTT - Implémentation du grisement (dimming) des équipes inactives - Ajout d'une lueur blanche clignotante (flash-glow) de 2s sur l'équipe active - La box-shadow du panneau des scores prend la couleur de l'équipe active	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	74c0448dfc	(update): Formatage mineur (one-line function)	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	922b7850ea	(update) Changement du nom de l'onglet en Vulture	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	cdf0952ca1	(delete) Suppression du vieux style de quizz	2026-02-08 16:49:29 +01:00
Jérémy CHOMAZ	ab102ed1df	feat(light): Sync buzzers vers WLED et maj des defaults - Modification de la couleur par défaut vers Magenta (#FF00FF) - Ajout de la synchronisation directe : la couleur du buzzer est envoyée immédiatement au bandeau LED - Désactivation des effets (rainbow, blink...) pour stabiliser l'affichage - Abonnement au topic vulture/buzzer/pressed/#	2026-02-08 16:49:28 +01:00