<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="spritesheet.css">
    <script>
        /******************************************************************************
            Short-Hop, Fast Fall   version 0.6
            ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

            Un outil HTML5 pour pratiquer les short hops, full hops et fast fall pour
        Super Smash Bros Ultimate.
        Exercices :
            - Debug
            - Exercice libre (statistiques)
            - Drill
            - Course à obstacle

        À faire :
          - Tableau de référence (basé sur les données du dictPersos)

            Par Nihb (/u/nihb)
        Versions :
          0.6 : Ajout de Banjo & Kazooie, anglicisation de l'interface

        ******************************************************************************/

        // Initialisation
        var dictPersos = { /* SSBU 5.0.0 */
            "01": { "Name": "Mario", "Gravity": 0.087, "FS": 1.5, "FFS": 2.4, "SHH": 17.54, "FHH": 36.33, "SH": 21, "FH": 24 },
            "02": { "Name": "Donkey Kong", "Gravity": 0.085, "FS": 1.63, "FFS": 2.608, "SHH": 17.3, "FHH": 34, "SH": 21, "FH": 24 },
            "03": { "Name": "Link", "Gravity": 0.096, "FS": 1.6, "FFS": 3.04, "SHH": 13.38, "FHH": 27.8, "SH": 18, "FH": 21 },
            "04": { "Name": "Samus", "Gravity": 0.075, "FS": 1.33, "FFS": 2.168, "SHH": 18, "FHH": 37, "SH": 23, "FH": 26 },
            "04e": { "Name": "Dark Samus", "Gravity": 0.075, "FS": 1.33, "FFS": 2.168, "SHH": 18, "FHH": 37, "SH": 23, "FH": 26 },
            "05": { "Name": "Yoshi", "Gravity": 0.08, "FS": 1.29, "FFS": 2.064, "SHH": 14.43, "FHH": 36.09, "SH": 20, "FH": 25 },
            "06": { "Name": "Kirby", "Gravity": 0.064, "FS": 1.23, "FFS": 1.968, "SHH": 12.24, "FHH": 25.37, "SH": 21, "FH": 24 },
            "07": { "Name": "Fox", "Gravity": 0.23, "FS": 2.1, "FFS": 3.36, "SHH": 16.4, "FHH": 35, "SH": 13, "FH": 17 },
            "08": { "Name": "Pikachu", "Gravity": 0.095, "FS": 1.55, "FFS": 2.48, "SHH": 17.12, "FHH": 35.5, "SH": 20, "FH": 23 },
            "09": { "Name": "Luigi", "Gravity": 0.083, "FS": 1.32, "FFS": 2.112, "SHH": 19.98, "FHH": 44, "SH": 23, "FH": 27 },
            "10": { "Name": "Ness", "Gravity": 0.077, "FS": 1.31, "FFS": 2.096, "SHH": 16.65, "FHH": 34.48, "SH": 22, "FH": 24 },
            "11": { "Name": "Captain Falcon", "Gravity": 0.12, "FS": 1.865, "FFS": 2.984, "SHH": 17.98, "FHH": 37.31, "SH": 18, "FH": 22 },
            "12": { "Name": "Jigglypuff", "Gravity": 0.053, "FS": 0.98, "FFS": 1.568, "SHH": 11.26, "FHH": 19.79, "SH": 22, "FH": 23 },
            "13": { "Name": "Peach", "Gravity": 0.07, "FS": 1.19, "FFS": 1.904, "SHH": 14.5, "FHH": 30.03, "SH": 21, "FH": 25 },
            "13e": { "Name": "Daisy", "Gravity": 0.07, "FS": 1.19, "FFS": 1.904, "SHH": 14.5, "FHH": 30.03, "SH": 21, "FH": 25 },
            "14": { "Name": "Bowser", "Gravity": 0.125, "FS": 1.77, "FFS": 2.832, "SHH": 15.7, "FHH": 33, "SH": 17, "FH": 20 },
            "15": { "Name": "Ice Climbers", "Gravity": 0.082, "FS": 1.3, "FFS": 2.08, "SHH": 16.75, "FHH": 34.69, "SH": 21, "FH": 28 },
            "16": { "Name": "Sheik", "Gravity": 0.15, "FS": 1.75, "FFS": 2.8, "SHH": 18.75, "FHH": 39, "SH": 17, "FH": 21 },
            "17": { "Name": "Zelda", "Gravity": 0.071, "FS": 1.35, "FFS": 2.16, "SHH": 15.24, "FHH": 31.55, "SH": 22, "FH": 25 },
            "18": { "Name": "Dr. Mario", "Gravity": 0.087, "FS": 1.5, "FFS": 2.4, "SHH": 17.54, "FHH": 30.88, "SH": 18, "FH": 23 },
            "19": { "Name": "Pichu", "Gravity": 0.14, "FS": 1.9, "FFS": 2.5, "SHH": 17.43, "FHH": 36.75, "SH": 17, "FH": 20 },
            "20": { "Name": "Falco", "Gravity": 0.13, "FS": 1.8, "FFS": 2.88, "SHH": 17.34, "FHH": 50.51, "SH": 17, "FH": 24 },
            "21": { "Name": "Marth", "Gravity": 0.075, "FS": 1.58, "FFS": 2.528, "SHH": 16.26, "FHH": 33.66, "SH": 22, "FH": 25 },
            "21e": { "Name": "Lucina", "Gravity": 0.075, "FS": 1.58, "FFS": 2.528, "SHH": 16.26, "FHH": 33.66, "SH": 22, "FH": 25 },
            "22": { "Name": "Young Link", "Gravity": 0.096, "FS": 1.8, "FFS": 2.88, "SHH": 16.26, "FHH": 33.66, "SH": 19, "FH": 23 },
            "23": { "Name": "Ganondorf", "Gravity": 0.108, "FS": 1.65, "FFS": 2.64, "SHH": 12.24, "FHH": 25.49, "SH": 16, "FH": 20 },
            "24": { "Name": "Mewtwo", "Gravity": 0.082, "FS": 1.55, "FFS": 2.48, "SHH": 17.5, "FHH": 31.11, "SH": 22, "FH": 23 },
            "25": { "Name": "Roy", "Gravity": 0.114, "FS": 1.8, "FFS": 2.88, "SHH": 13, "FHH": 30.97, "SH": 16, "FH": 21 },
            "25e": { "Name": "Chrom", "Gravity": 0.114, "FS": 1.8, "FFS": 2.88, "SHH": 13, "FHH": 30.97, "SH": 16, "FH": 21 },
            "26": { "Name": "Mr. Game & Watch", "Gravity": 0.08, "FS": 1.24, "FFS": 1.984, "SHH": 13.26, "FHH": 27.51, "SH": 19, "FH": 23 },
            "27": { "Name": "Meta Knight", "Gravity": 0.11, "FS": 1.66, "FFS": 2.656, "SHH": 13.92, "FHH": 32, "SH": 17, "FH": 21 },
            "28": { "Name": "Pit", "Gravity": 0.081, "FS": 1.48, "FFS": 2.368, "SHH": 14.96, "FHH": 31, "SH": 20, "FH": 24 },
            "28e": { "Name": "Dark Pit", "Gravity": 0.081, "FS": 1.48, "FFS": 2.368, "SHH": 14.96, "FHH": 31, "SH": 20, "FH": 24 },
            "29": { "Name": "Zero Suit Samus", "Gravity": 0.12, "FS": 1.7, "FFS": 2.72, "SHH": 21.35, "FHH": 44.5, "SH": 20, "FH": 23 },
            "30": { "Name": "Wario", "Gravity": 0.107, "FS": 1.61, "FFS": 2.576, "SHH": 14.7, "FHH": 30.5, "SH": 18, "FH": 21 },
            "31": { "Name": "Snake", "Gravity": 0.08, "FS": 1.73, "FFS": 2.768, "SHH": 13.69, "FHH": 21.62, "SH": 19, "FH": 21 },
            "32": { "Name": "Ike", "Gravity": 0.092, "FS": 1.65, "FFS": 2.64, "SHH": 16, "FHH": 29.9, "SH": 20, "FH": 22 },
            "33": { "Name": "Squirtle", "Gravity": 0.128, "FS": 1.35, "FFS": 2.16, "SHH": 17.03, "FHH": 35.35, "SH": 17, "FH": 21 },
            "34": { "Name": "Ivysaur", "Gravity": 0.082, "FS": 1.38, "FFS": 2.208, "SHH": 15.58, "FHH": 32.25, "SH": 20, "FH": 24 },
            "35": { "Name": "Charizard", "Gravity": 0.11, "FS": 1.52, "FFS": 2.432, "SHH": 15.43, "FHH": 32, "SH": 18, "FH": 21 },
            "36": { "Name": "Diddy Kong", "Gravity": 0.125, "FS": 1.75, "FFS": 2.8, "SHH": 19.9, "FHH": 41.21, "SH": 19, "FH": 22 },
            "37": { "Name": "Lucas", "Gravity": 0.09, "FS": 1.37, "FFS": 2.192, "SHH": 13, "FHH": 29.41, "SH": 18, "FH": 22 },
            "38": { "Name": "Sonic", "Gravity": 0.09, "FS": 1.65, "FFS": 2.64, "SHH": 16.89, "FHH": 35, "SH": 20, "FH": 24 },
            "39": { "Name": "King Dedede", "Gravity": 0.097, "FS": 1.95, "FFS": 3.12, "SHH": 16.02, "FHH": 32.85, "SH": 19, "FH": 22 },
            "40": { "Name": "Olimar", "Gravity": 0.068, "FS": 1.35, "FFS": 2.16, "SHH": 16.19, "FHH": 33.5, "SH": 23, "FH": 26 },
            "41": { "Name": "Lucario", "Gravity": 0.084, "FS": 1.68, "FFS": 2.688, "SHH": 18.19, "FHH": 37.62, "SH": 22, "FH": 25 },
            "42": { "Name": "R.O.B.", "Gravity": 0.085, "FS": 1.6, "FFS": 2.56, "SHH": 18.38, "FHH": 38, "SH": 21, "FH": 24 },
            "43": { "Name": "Toon Link", "Gravity": 0.081, "FS": 1.38, "FFS": 2.208, "SHH": 16.32, "FHH": 33.8, "SH": 21, "FH": 24 },
            "44": { "Name": "Wolf", "Gravity": 0.13, "FS": 1.8, "FFS": 2.88, "SHH": 15.38, "FHH": 32.02, "SH": 16, "FH": 20 },
            "45": { "Name": "Villager", "Gravity": 0.078, "FS": 1.32, "FFS": 2.112, "SHH": 15.69, "FHH": 32.5, "SH": 21, "FH": 24 },
            "46": { "Name": "Mega Man", "Gravity": 0.107, "FS": 1.8, "FFS": 2.88, "SHH": 11.49, "FHH": 32.8, "SH": 16, "FH": 22 },
            "47": { "Name": "Wii Fit Trainer", "Gravity": 0.09, "FS": 1.3, "FFS": 2.08, "SHH": 17.18, "FHH": 35.6, "SH": 21, "FH": 24 },
            "48": { "Name": "Rosalina & Luma", "Gravity": 0.062, "FS": 1.2, "FFS": 1.92, "SHH": 19.37, "FHH": 40, "SH": 26, "FH": 29 },
            "49": { "Name": "Little Mac", "Gravity": 0.09, "FS": 1.95, "FFS": 3.12, "SHH": 12.53, "FHH": 26, "SH": 18, "FH": 21 },
            "50": { "Name": "Greninja", "Gravity": 0.18, "FS": 1.85, "FFS": 2.96, "SHH": 22.11, "FHH": 46, "SH": 17, "FH": 20 },
            "51": { "Name": "Mii Brawler", "Gravity": 0.192, "FS": 1.7, "FFS": 3.072, "SHH": 17, "FHH": 35, "SH": 15, "FH": 19 },
            "52": { "Name": "Mii Swordsman", "Gravity": 0.106, "FS": 1.55, "FFS": 2.48, "SHH": 12.3, "FHH": 28.3, "SH": 16, "FH": 21 },
            "53": { "Name": "Mii Gunner", "Gravity": 0.098, "FS": 1.45, "FFS": 2.32, "SHH": 14.6, "FHH": 30.9, "SH": 18, "FH": 22 },
            "54": { "Name": "Palutena", "Gravity": 0.12, "FS": 1.55, "FFS": 2.48, "SHH": 17.3, "FHH": 35.9, "SH": 18, "FH": 21 },
            "55": { "Name": "Pac-Man", "Gravity": 0.072, "FS": 1.35, "FFS": 2.16, "SHH": 16.48, "FHH": 34.1, "SH": 22, "FH": 26 },
            "56": { "Name": "Robin", "Gravity": 0.089, "FS": 1.5, "FFS": 2.4, "SHH": 16.02, "FHH": 33.21, "SH": 20, "FH": 23 },
            "57": { "Name": "Shulk", "Gravity": 0.098, "FS": 1.58, "FFS": 2.528, "SHH": 16.8, "FHH": 33.5, "SH": 20, "FH": 23 },
            "58": { "Name": "Bowser Jr.", "Gravity": 0.092, "FS": 1.65, "FFS": 2.64, "SHH": 16.59, "FHH": 34.4, "SH": 20, "FH": 23 },
            "59": { "Name": "Duck Hunt", "Gravity": 0.076, "FS": 1.65, "FFS": 2.64, "SHH": 16.48, "FHH": 34, "SH": 22, "FH": 25 },
            "60": { "Name": "Ryu", "Gravity": 0.12, "FS": 1.6, "FFS": 2.24, "SHH": 15, "FHH": 26, "SH": 17, "FH": 19 },
            "60e": { "Name": "Ken", "Gravity": 0.12, "FS": 1.6, "FFS": 2.24, "SHH": 15, "FHH": 26, "SH": 17, "FH": 19 },
            "61": { "Name": "Cloud", "Gravity": 0.098, "FS": 1.68, "FFS": 2.688, "SHH": 17, "FHH": 32.5, "SH": 20, "FH": 22 },
            "62": { "Name": "Corrin", "Gravity": 0.092, "FS": 1.65, "FFS": 2.64, "SHH": 16, "FHH": 33, "SH": 20, "FH": 23 },
            "63": { "Name": "Bayonetta", "Gravity": 0.12, "FS": 1.77, "FFS": 2.832, "SHH": 21.35, "FHH": 39, "SH": 20, "FH": 22 },
            "64": { "Name": "Inkling", "Gravity": 0.087, "FS": 1.58, "FFS": 2.528, "SHH": 17.54, "FHH": 33, "SH": 21, "FH": 23 },
            "65": { "Name": "Ridley", "Gravity": 0.09, "FS": 1.78, "FFS": 2.848, "SHH": 14.2, "FHH": 34, "SH": 19, "FH": 23 },
            "66": { "Name": "Simon", "Gravity": 0.085, "FS": 1.85, "FFS": 2.96, "SHH": 18, "FHH": 30, "SH": 22, "FH": 26 },
            "66e": { "Name": "Richter", "Gravity": 0.085, "FS": 1.85, "FFS": 2.96, "SHH": 18, "FHH": 30, "SH": 22, "FH": 26 },
            "67": { "Name": "King K. Rool", "Gravity": 0.105, "FS": 1.7, "FFS": 2.72, "SHH": 13.5, "FHH": 33, "SH": 17, "FH": 22 },
            "68": { "Name": "Isabelle", "Gravity": 0.07, "FS": 1.3, "FFS": 2.08, "SHH": 15.69, "FHH": 32.5, "SH": 22, "FH": 25 },
            "69": { "Name": "Incineroar", "Gravity": 0.126, "FS": 1.76, "FFS": 2.816, "SHH": 14.4, "FHH": 31.6, "SH": 16, "FH": 20 },
            "70": { "Name": "Piranha Plant", "Gravity": 0.14, "FS": 1.95, "FFS": 2.73, "SHH": 17.5, "FHH": 37.4, "SH": 17, "FH": 21 },
            "71": { "Name": "Joker", "Gravity": 0.127, "FS": 1.63, "FFS": 3.097, "SHH": 14.2, "FHH": 32, "SH": 16, "FH": 20 },
            "72": { "Name": "Hero", "Gravity": 0.094, "FS": 1.57, "FFS": 2.512, "SHH": 15.69, "FHH": 29.9, "SH": 19, "FH": 22 },
            "73": { "Name": "Banjo & Kazooie", "Gravity": 0.11, "FS": 1.76, "FFS": 2.816, "SHH": 17.54, "FHH": 30.03, "SH": 19, "FH": 21 },
            "74": { "Name": "Terry", "Gravity": 0.09, "FS": 1.85, "FFS": 2.96, "SHH": 15, "FHH": 26, "SH": 17, "FH": 19 },
            "75": { "Name": "Geno", "Gravity": 0.106, "FS": 1.3, "FFS": 1.68, "SHH": 12.3, "FHH": 28.3, "SH": 16, "FH": 22 }
        };
        var arrManettes = {};
        var tabEnCours = "tabDebug";

        // Utilisés pour la visualisation.
        var position = 0.0; // Position du personnage
        var positionDernSaut = 0.0; // Position où a été effectué le dernier saut.
        var momentum = 0; // Vitesse actuelle du personnage - influencé par la gravité et la vitesse de descente du perso
        const hauteurDoubleSaut = 80; // Utilisés pour l'affichage 
        const hauteurFullHop = 50;  //   du saut et la course 
        const hauteurShortHop = 20; //       à obstacle
        const zoom = 1;

        // Utilisés pour le calcul des frames.
        var dictFrameData = { "FS": 2.1, "FFS": 3.36, "Gravity": 0.2, "SH": 25, "SHH": 16.4, "FH": 27, "FHH": 35 };
        const nbFramesShortHop = 3; // Période à l'intérieure de laquelle le saut est un short hop.
        var intervaleFrame = 1000 / 60; // 60 frames : 1000/60
        var nbFramesSaut = 0;   // Frames comptabilisés depuis la dernière commande de saut jusqu'au retour au sol.
        var nbFramesTotal = 0;  // Frames comptabilisés entre la première commande et le retour au sol.
        var nbFramesFastFall = 0;   // Frames comptabilisés depuis la dernière commande de fast-fall jusqu'au retour au sol.
        var typeSaut = 0;   // 0: Rien, 1: Short Hop, 2: Full Hop, 3: Double jump - Utilisé pour déterminer quel type de saut est présentement exécuté.
        var etatSaut = 0;   // 0: Rien, 1: Crouch, 2: Saut, 3: Double saut, 4: Fast Fall - Utilisé pour détecter un saut normal ou un double saut.

        // Utilisés pour les contrôles
        var dictCommandes = {}; // Contient les contrôles des x frames précédents dans une queue. Initialiser au début de l'exercice.
        // Tap Jump donne 3(?) frames en déplaçant le joystick vers le haut pour dépasser 50%.
        // Fast Fall donne 4 frames en déplaçant le joystick vers le bas pour dépasser 50%.
        // Le Fast Fall peut être bufferé jusqu'à 3 frames avant le zénith (0 frame)

        // Gestion des états en lien avec les contrôles. Quand un état est actif, on doit vérifier la fin ou le changement de ces états.
        var dictCommandesEtat = {
            "saut": 0, // Commande de saut. 0 si aucun actif, 1 si au moins un bouton enfoncé, 2 si plus d'un bouton (macro), 4 si les boutons sont restés actifs.
            "bas": 0, // Commande d'un fast fall. 0 neutre, 1 si enfoncé. Si la direction est relâchée, retourne à 0.
        }

        const AxeFastFall = "a1+";  // Nom de l'axe à utiliser pour le fast-fall.
        const nbCommandes = 7; // Nombre de commandes à conserver dans la queue.
        const TapJumpFrames = 3;    // Nombre de frames pour activer le tap jump.
        const FastFallFrames = 4;   // Nombre de frames pour activer le fast fall.
        const FastFallBuffer = 3;   // Nombre de frames où le fast fall peut être entré avant de pouvoir être enregistré.

        // Événements en lien avec les commandes.
        var evtSaut = new Event('Saut');    // Quand le joueur initie un saut (tap-jump, bouton)
        var evtShortHop = new Event('ShortHop'); // Quand le saut a été déterminé être un short-hop.
        var evtFullHop = new Event('FullHop'); // Quand le saut a été déterminé être un full-hop.
        var evtSommet = new Event('Sommet'); // Quand le perso atteint le point le plus haut du saut.
        var evtFastFall = new Event('FastFall'); //Quand le fast-fall est enclanché.
        var evtDoubleSaut = new Event('DoubleSaut'); // Un autre saut a été exécuté avant de toucher le sol.
        var evtAtterrissage = new Event('Atterrissage'); // Quand le perso touche le sol.


        // Variables de déboguage
        var debugSaut = 0;
        var debugBas = 0;

        // Variables - Libre
        var libreNbSauts = 0;
        var libreNbSH = 0;
        var libreNbFF = 0;
        var libreNbFrames = 0;
        var libreChute = false;

        // Variables - Drill
        var drillType = 2;  // 0: Short Hop, 1: Full Hop, 2: Échec/En attente, 3: Succès/En attente
        var drillNbSH = 0;
        var drillNbSHSucces = 0;
        var drillNbFH = 0;
        var drillNbFHSucces = 0;
        var drillFastFalls = [0, 0, 0, 0, 0];   // Queue des frames de fast fall manqués des 5 derniers sauts. Utilisé pour la moyenne.
        var drillDelaiMin = 2 * 60;    // Nb Frames minimum entre les drill
        var drillDelaiMax = 5 * 60; // Nb Frames maximum entre les drill
        var drillDelai = 0; // Délai avant la prochaine épreuve - défini à l'atterrissage et soustrait chaque frame.
        var drillAttente = 0;   // Nb Frames depuis la nouvelle commande.
        var drillAttenteMax = 2 * 60; // Nb Frames de réaction (échec si on dépasse), défini dans l'interface.
        var drillSucces = 0;    // Bits. Si le saut est du bon type, marquer 1. Si le fast fall est actionné, marquer 2.
        var drillChute = false; // Mis à true lorsque le sommet est atteint.

        // Variables - Course à obstacles
        var obstaclesNbFrames = 0;
        var obstaclesPaliers = 150;
        var obstaclesVitesse = 3;
        var obstaclesVie = 3;
        var obstaclesScore = 0;
        var obstaclesObstacles = 0;


        // Boucle du jeu.
        var interval;

        window.addEventListener("gamepaddisconnected", function(e) { ListerManette(e, false); }, false);

        window.addEventListener("gamepadconnected", function(e) {
            ListerManette(e, true);

            // Lister les manettes connectées.
            var sel = document.getElementById("selManette");
            AjouterSelectOption(sel, e.gamepad.index + " - " + e.gamepad.id, e.gamepad.index);
        });

        window.onload=function(){
            const selManette = document.getElementById("selManette");

            selManette.addEventListener("change", function(e) {
                var selManette = document.getElementById("selManette");
            });

            document.getElementById("btnBoutonsSaut").addEventListener("click", function(e) {
                AfficherBoutons(ObtenirManette());
            });

            ChargerPerso();

            document.getElementById("selPerso").addEventListener("change", function(e) {
                var sel = document.getElementById("selPerso");
                var perso = sel.options[sel.selectedIndex].value;
                ChargerPersoStats(perso);
            });

            document.getElementById("chkVibration").addEventListener("change", function(e) {
                VibrerManette(100, 0.5);
            });

            // Événements de déboguage
            document.addEventListener("Saut", function (e) {
                if (tabEnCours == "tabDebug") {
                    console.log("Saut");
                };                
            });
            document.addEventListener("ShortHop", function (e) {
                if (tabEnCours == "tabDebug") {
                    console.log("ShortHop");
                    JouerSon("Leger");
                };
            });
            document.addEventListener("FullHop", function (e) {
                if (tabEnCours == "tabDebug") {
                    console.log("FullHop");
                    JouerSon("Mauvais");
                };
            });
            document.addEventListener("Sommet", function (e) {
                if (tabEnCours == "tabDebug") {
                    console.log("Sommet");
                };
            });
            document.addEventListener("FastFall", function (e) {
                if (tabEnCours == "tabDebug") {
                    console.log("FastFall");
                    JouerSon("Ok");
                };
            });
            document.addEventListener("DoubleSaut", function (e) {
                if (tabEnCours == "tabDebug") {
                    console.log("DoubleSaut");
                };
            });
            document.addEventListener("Atterrissage", function (e) {
                if (tabEnCours == "tabDebug") {
                    console.log("Atterrissage");  
                };

                VibrerManette(100, 0.5);
            });

            // Événements d'exercice libre
            document.addEventListener("Saut", function (e) {
                if (tabEnCours == "tabLibre") {
                    Libre_OnSaut();
                };
            });

            document.addEventListener("ShortHop", function (e) {
                if (tabEnCours == "tabLibre") {
                    Libre_OnShortHop();
                };
            });

            document.addEventListener("DoubleSaut", function (e) {
                if (tabEnCours == "tabLibre") {
                    Libre_OnSaut();
                };
            });

            document.addEventListener("Sommet", function (e) {
                if (tabEnCours == "tabLibre") {
                    Libre_OnSommet();
                };
            });

            document.addEventListener("FastFall", function (e) {
                if (tabEnCours == "tabLibre") {
                    Libre_OnFastFall();
                };
            });

            document.addEventListener("Atterrissage", function (e) {
                if (tabEnCours == "tabLibre") {
                    Libre_OnAtterrissage();
                };
            });

            // Événements drill
            document.addEventListener("ShortHop", function (e) {
                if (tabEnCours == "tabDrill") {
                    Drill_OnShortHop();
                };
            });

            document.addEventListener("FullHop", function (e) {
                if (tabEnCours == "tabDrill") {
                    Drill_OnFullHop();
                };
            });

            document.addEventListener("DoubleSaut", function (e) {
                if (tabEnCours == "tabDrill") {
                    Drill_OnDoubleSaut();
                };
            });

            document.addEventListener("Sommet", function (e) {
                if (tabEnCours == "tabDrill") {
                    Drill_OnSommet();
                };
            });

            document.addEventListener("FastFall", function (e) {
                if (tabEnCours == "tabDrill") {
                    Drill_OnFastFall();
                };
            });

            document.addEventListener("Atterrissage", function (e) {
                if (tabEnCours == "tabDrill") {
                    Drill_OnAtterrissage();
                };
            });
            
            // Événements de course à obstacles
            document.addEventListener("ShortHop", function (e) {
                if (tabEnCours == "tabObstacles") {
                    Obstacles_OnShortHop();
                };
            });
            document.addEventListener("FastFall", function (e) {
                if (tabEnCours == "tabObstacles") {
                    Obstacles_OnFastFall();
                };
            });

            document.addEventListener("keydown", function (event) {
                event = event || window.event;

                if (event.keyCode == '38') // Flèche Haut
                {
                    if (event.shiftKey) {
                        debugSaut = 2;
                    }
                    else {
                        debugSaut = 1;
                    };
                    
                }
                else if (event.keyCode == '40') // Flèche bas
                {
                    debugBas = 1;
                };
            });

            document.addEventListener("keyup", function (event) {
                event = event || window.event;

                if (event.keyCode == '38') // Flèche Haut
                {
                    debugSaut = 0;
                }
                else if (event.keyCode == '40') // Flèche bas
                {
                    debugBas = 0;
                };
            });

            // Fin du déboguage

            interval = setInterval(BouclePrincipale, intervaleFrame);

            JouerSon("Ok");
        };

        function AjusterSon(niveau) {
            // Ajuste le niveau dans tous les contrôles audio.
            var listeAudios = document.getElementsByTagName("audio");
            var volume = Number(niveau) / 100;

            for (var index = 0; index < listeAudios.length; index++) {
                listeAudios[index].volume = volume;
            };
        };

        function JouerSon(son)
        {
            var audio = document.getElementById("aud" + son);
            audio.currentTime = 0;
            audio.play();
        };

        function ViderSelect(selectbox)
        {
            var index;

            for(index = selectbox.options.length - 1 ; index >= 0 ; index--)
            {
                selectbox.remove(index);
            }
        };

        function AjouterSelectOption(selectbox, texte, valeur)
        {
            var option = document.createElement("option");

            option.value = valeur;
            option.text = texte;

            selectbox.add(option);
        };

        function ChargerPerso() {
            // Affiche le nom des persos dans la liste selPerso.
            var sel = document.getElementById("selPerso");
            var liste;
            var perso;
            
            ViderSelect(sel);

            liste = Object.keys(dictPersos);
            liste.sort();

            for (var index = 0; index < liste.length; index++)
            {
                perso = liste[index];
                AjouterSelectOption(sel, dictPersos[perso]["Name"], perso);
            };

            ChargerPersoStats(liste[0]);
        };

        function ChargerPersoStats(perso) {
            // Utilise le perso passé pour rechercher la clef et affiche les informations liées.
            param = dictPersos[perso];
            dictFrameData = param;

            document.getElementById("txtGravity").value = param["Gravity"];
            document.getElementById("txtFall").value = param["FS"];
            document.getElementById("txtFastFall").value = param["FFS"];

            document.getElementById("txtSH").value = param["SH"];
            document.getElementById("txtSHH").value = param["SHH"];
            document.getElementById("txtFH").value = param["FH"];
            document.getElementById("txtFHH").value = param["FHH"];

            // Charger le sprite.
            var sprites = document.getElementsByClassName("sprite");
            for (var index = 0; index < sprites.length; index++ ) {
                sprites[index].className = "sprite sprite-" + perso;
            };
        };

        function ChargerPersoStatsManuel() {
            // Utilise les champs entrés par l'utilisateur pour remplir le dictionnaire de frame data.
            var valeur = 0;

            dictFrameData["Gravity"] = parseInt(document.getElementById("txtGravity").value, 10);
            dictFrameData["FS"] = parseInt(document.getElementById("txtFall").value, 10);
            dictFrameData["FFS"] = parseInt(document.getElementById("txtFastFall").value, 10);

            dictFrameData["SH"] = parseInt(document.getElementById("txtSH").value, 10);
            dictFrameData["SHH"] = parseInt(document.getElementById("txtSHH").value, 10);
            dictFrameData["FH"] = parseInt(document.getElementById("txtFH").value, 10);
            dictFrameData["FHH"] = parseInt(document.getElementById("txtFHH").value, 10);
        };

        function LireManettes() {
            // Actualise les manettes pour obtenir les dernières actions.
            var manettes = navigator.getGamepads();
            for(var index = 0; index < manettes.length; index++)
            {
                if(manettes[index]) {
                    if(manettes[index].index in arrManettes)
                    {
                        arrManettes[manettes[index].index] = manettes[index];
                    }
                    else
                    {
                        AjouterManette(manettes[index]);
                    };
                };
            };
        };

        function AjouterManette(manette) {
            arrManettes[manette.index] = manette;
        };

        function ListerManette(event, connexion) {
            // Conserve la liste des manettes connectées.
            var manette = event.gamepad;

            if (connexion) {
                arrManettes[manette.index] = manette;
            }
            else
            {
                delete arrManettes[manette.index];
            }

        };

        function VibrerManette(duree, force)
        {
            var chk = document.getElementById("chkVibration");
            if ( chk.checked )
            {
                var manette = ObtenirManette();
                if (manette) {
                    manette.vibrationActuator.playEffect("dual-rumble",
                        {
                            startDelay: 0,
                            duration: duree,
                            weakMagnitude: 0.5,
                            strongMagnitude: 0.5
                        }
                    );
                };
            };

        }

        function ObtenirManette()
        {
            // Retourne la manette sélectionnée.
            var sel = document.getElementById("selManette");
            
            if (sel.selectedIndex >= 0) {
                return arrManettes[sel.options[sel.selectedIndex].value];
            }
            else {
                return "";
            };
        };

        function AfficherBoutons(manette)
        {
            // Affiche les boutons de la manette ainsi que les axes sélectionnés
            var sel = document.getElementById("selBoutonSaut");
            ViderSelect(sel);

            // Conserve les commandes possibles :
            dictCommandes = {"a1+": [0]}; // Axe 1 positif pour le Fast Fall.

            var index = 0;
            for (index = 0; index < manette.buttons.length; index++)
            {
                if (manette.buttons[index].pressed)
                {
                    AjouterSelectOption(sel, "Button " + index, "b" + index);
                    dictCommandes[index] = [0];
                };
            };

            for (index=0; index < manette.axes.length; index++)
            {
                if (manette.axes[index] <= -0.75)
                {
                    AjouterSelectOption(sel, "Axis " + index + " -", "a" + index + "-");
                    dictCommandes["a" + index + "-"] = [0];
                };
                if (manette.axes[index] >= 0.75)
                {
                    AjouterSelectOption(sel, "Axis " + index + " +", "a" + index + "+");
                    dictCommandes["a" + index + "+"] = [0];
                };
            };
        };

        function AjouterCommandes()
        {
            // Place les commandes actuelles dans la queue. Utilise la manette actuelle et les boutons de saut
            // configurés, et l'axe 1 positif (pour les fast falls).
            var index = 0;
            var dir = 0;    // -1 négatif, 1 positif
            var valeur = 0;
            var manette = ObtenirManette();

            for (var controle in dictCommandes)
            {
                if(controle.substring(0,1) == "a")
                {
                    // La commande est un axe
                    index = controle.substring(1, controle.length - 1);
                    valeur = manette.axes[index];
                    
                    if(controle.substring(controle.length -1) == "-")
                    {
                        // Axe négatif
                        if(valeur < -0.05)
                        {
                            dictCommandes[controle].push(valeur);
                        }
                        else
                        {
                            dictCommandes[controle].push(0.0);
                        }
                    }
                    else
                    {
                        // Axe positif
                        if(valeur > 0.05)
                        {
                            dictCommandes[controle].push(valeur);
                        }
                        else
                        {
                            dictCommandes[controle].push(0.0);
                        }

                    }
                }
                else
                {
                    // La commande est un bouton
                    index = controle;
                    dictCommandes[controle].push(manette.buttons[index].pressed);
                }

                if(dictCommandes[controle].length > nbCommandes)
                {
                    dictCommandes[controle].shift();
                }
            }
        };

        function DetecterTap(manette, axe, frames) {
            // Pour l'axe utilisé, valider si la valeur actuelle (dernière) dépasse 0.5. Si oui, valider si la position 0 se trouve dans un nombre de frames.
            // Retourne vrai si un tap a été détecté, sinon faut.

            if (Math.abs(axe[axe.length - 1]) >= 0.5) 
            {
                if (Math.abs(axe[axe.length - 2]) >= 0.5) {
                    // Le tap a déjà été activé le frame précédent.
                    return false;
                };
                for(var index = axe.length - 2; index > axe.length - 1 - frames; index --)
                {
                    if (Math.abs(axe[index]) < 0.05) {  // Si le frame est considéré au repos, le tap est activé.
                        return true;
                    };
                    if (Math.abs(axe[index]) < Math.abs(axe[index - 1])) {  // Si on revient en arrière est qu'on retourne vers l'avant, considéré une réinitialisation.
                        return true;
                    };
                }
            };

            return false;
        };

        function DetecterSaut(manette) {
            // Détecte si un bouton de saut est activé. Retourne 0 si non, retourne 1 si un bouton de saut est utilisé, retourne 2 si plus d'un bouton est activé.
            // Si Tap-Jump est utilisé, un autre saut peut être utilisé. Le contraire est aussi vrai. Si tap jump est activé, toujours vrai.
            // Si un bouton est utilisé, un autre bouton ne peut être utilisé pour un nouveau saut (s'enregistre plutôt comme la macro de short hop, mais exécuté seulement à l'intérieur des 3 frames).
            var saut = 0;
            var tapJump = false;
            var bouton = 0; // 1: nouveau, 2: ancien
            var multiple = false;

            for(var controle in dictCommandes)
            {
                if (controle.substring(0, 1) == "a") {
                    if (controle != AxeFastFall)
                    tapJump = tapJump | DetecterTap(manette, dictCommandes[controle], TapJumpFrames);
                }
                else {
                    if (dictCommandes[controle][nbCommandes - 1] == true && dictCommandes[controle][nbCommandes - 2] == false) {
                        if (bouton == 1) {
                            multiple = true;
                        };
                        bouton = bouton | 1;
                    };
                    if (dictCommandes[controle][nbCommandes - 1] == true && dictCommandes[controle][nbCommandes - 2] == true) {
                        bouton = bouton | 2;
                    };
                };
            }
            
            if (tapJump) {  // Tap Jump active toujours.
                return 1;
            };
            if (multiple) { // Si on a appuyé sur plus d'un bouton en même temps.
                return 2;
            }
            if (bouton == 1) { // Si un saut est activé par bouton.
                return 1;
            };
            if (bouton == 3) { // Si un bouton était déjà tenu enfoncé et qu'au moins un nouveau a été appuyé, il ne faut pas le considérer comme un nouveau saut.
                return 0;
            };

            return 0;
        };

        function DetecterTapContinu(manette, axe) {
            // Retourne vrai si la direction est maintenue, uniquement si elle était active le frame précédent.
            return DetecterTapContinuTampon(manette, axe, 0);
        };

        function DetecterTapContinuTampon(manette, axe, tampon) {
            // Retourne vrai si la direction est maintenue, uniquement si elle était active le frame précédent, mais pas plus que le nombre de frames tampon.
            // Un tampon de 0 indique aucune limite.
            var actif = true;

            if (Math.abs(axe[axe.length - 1]) >= 0.5 && Math.abs(axe[axe.length - 2]) >= 0.5) {
                if (tampon < 1) {
                    return true;
                }
                else {
                    // Si on utilise un tampon, on valide que la valeur ne dépasse par 0.5 pour plus que le nombre de frames spécifiés.
                    for (var index = axe.length - 2; index > axe.length - 1 - tampon; index--) {
                        actif = Math.abs(axe[index]) >= 0.5;
                        if (actif == false) {
                            break;
                        };
                    };

                    return actif == false;
                };
            };

            return false;
        };

        function DetecterSautContinu(manette)
        {
            // Le contraire de DetecterSaut, retourne si un bouton de saut est toujours activé.
            // Retourne 0 si aucun saut n'est pressé, 1 si un bouton est utilisé, uniquement s'il était activé le frame précédent.
            // Retourne 2 si au moins 2 boutons sont restés pressés.
            var saut = 0;
            var nbSauts = 0;
            
            for (var controle in dictCommandes) {
                if (controle.substring(0, 1) == "a") {
                    if (Math.abs(dictCommandes[controle][nbCommandes - 1]) >= 0.5 && Math.abs(dictCommandes[controle][nbCommandes - 2]) >= 0.5) {
                        saut = 1;
                    };
                }
                else {
                    if (dictCommandes[controle][nbCommandes - 1] == true && dictCommandes[controle][nbCommandes - 2] == true) {
                        saut = 1;
                        nbSauts += 1;
                    };
                };
            };

            if (nbSauts > 1) {
                return 2;
            }
            else {
                return saut;
            };            
        }

        function DeterminerEtat(manette) {
            // Consulte les entrées et conserve l'état actuel.
            var valeur = 0;
            var saut = 0;

            // Détecter si le joueur a actionné un saut.
            saut = DetecterSaut(manette);

            if (typeof saut === "undefined" || typeof dictCommandes[AxeFastFall] === "undefined") {
                return;
            };

            if (dictCommandesEtat["saut"] == 0)  // Au repos. Vérifier si un saut a lieu.
            {
                dictCommandesEtat["saut"] = saut;
            }
            else // Saut actif. Si les boutons ne changent pas, ajouter le bit 4 à l'état.
            {
                // Si on a un nouveau saut, rafraichir l'état.
                if (saut > 0) {
                    dictCommandesEtat["saut"] = saut;
                }
                else {
                    // Sinon, évaluer l'état actuel. Le joueur a peut-être conservé le bouton enfoncé, ou relâché.
                    saut = DetecterSautContinu(manette);
                    if (saut == 0) {
                        // Les boutons ont été relâchés.
                        dictCommandesEtat["saut"] = 0;
                    }
                    else {
                        // Les boutons sont dans le même état.
                        dictCommandesEtat["saut"] = saut | 4;
                    };
                };
            };
            
            // Détecter si le joueur a actionné le fast-fall.
            if (dictCommandesEtat["bas"] == 0) {
                valeur = DetecterTap(manette, dictCommandes[AxeFastFall], FastFallFrames);
                if (valeur | debugBas) {
                    debugBas = 0;
                    dictCommandesEtat["bas"] = 1;
                };
            }
            else {
                valeur = DetecterTapContinu(manette, dictCommandes[AxeFastFall]);
                if (valeur == false) {
                    dictCommandesEtat["bas"] = 0;
                };
            };
        };

        function CalculerPosition(frame, apex, hauteur)
        {
            // Calcule la position dans la première partie d'un saut (avant l'apex).
            // Retourne la valeur pour le frame, ou hauteur si au-delà de l'apex.
            var position;

            if (frame < 1) {
                return 0;
            };
            if (frame >= apex * 2) {
                return 0;
            };

            // Calculer la position
            position = -Math.pow((frame - apex) / apex, 2) * hauteur + hauteur;

            return position;
        }

        function AppliquerLogique()
        {
            // Cette fonction évalue les états et les commandes pour établir quelles actions
            // sont en cours et lever les événements nécessaires.
            var index;
            var saut = false;   // Indique si une commande de saut a été entrée pour ce frame.
            var manette = ObtenirManette();

            // Déterminer les états.
            DeterminerEtat(manette);

            // Déboguage
            if (debugSaut == 2 && dictCommandesEtat["saut"] > 0) {
                dictCommandesEtat["saut"] = 4;
            };
            if (debugSaut > 0 && dictCommandesEtat["saut"] == 0) {
                dictCommandesEtat["saut"] = 1;
            };
            if (debugSaut == 2 && typeSaut == 2) {
                debugSaut == 0;
                dictCommandesEtat["saut"] = 0;
            }
            
            // C'est ici que le traitement du mouvement commence.
            // Déterminer si un saut a été entrée (tap, clic de un ou plusieurs boutons)
            if (dictCommandesEtat["saut"] == 1 || dictCommandesEtat["saut"] == 2) {
                // Si on est au sol, initier un saut.
                if (etatSaut == 0) {
                    saut = true;
                    etatSaut = 1;   // on fait un saut
                    if (dictCommandesEtat["saut"] == 2) {
                        typeSaut = 1;	//La macro de short-hop a été utilisée.
                    }
                    else {
                        typeSaut = 0;   // à déterminer dans quelques frames.
                    };
                    nbFramesSaut = 0;   // premier frame de ce saut (le perso entrerait sans son animation de saut)
                    nbFramesTotal = 0;  // premier frame du saut en entier.
                    nbFramesFastFall = 0;   // initialise le compteur pour les fast fall pour plus tard.

                    document.dispatchEvent(evtSaut);    // Lancer l'événement de Saut.
                }
                    // On est en train de sauter, initier un double saut.
                else if (etatSaut == 1 || etatSaut == 2 || (etatSaut == 4 && typeSaut < 3)) {
                    saut = true;
                    etatSaut = 3;   // on fait un double saut
                    typeSaut = 3;   // on détermine qu'il s'agit d'un double saut.
                    nbFramesSaut = 0;   // premier frame de ce saut (le perso entrerait dans son animation de saut)
                    nbFramesFastFall = 0;   // initialise le compteur pour les fast fall pour plus tard.
                    positionDernSaut = position;    // Conserver la position au début du saut
                    document.dispatchEvent(evtDoubleSaut);  // Lancer l'événement de Double Saut.
                }
                    // On est déjà en double saut - Ne rien faire
                else if (etatSaut == 3) {

                };
            };
            // Si on a gardé le saut enfoncé, déterminer si ça affecte le saut (direction, un ou plusieurs boutons enfoncés)
            if (dictCommandesEtat["saut"] == 5 || dictCommandesEtat["saut"] == 6) {
                // Si le type de saut n'est pas déterminé, on valide les conditions de short ou full hop.
                if (etatSaut == 0) {
                    // Si le saut est 6, c'est qu'on a plus d'un bouton enfoncés. Il s'agit de la macro pour le short-hop.
                    if (dictCommandesEtat["saut"] == 6) {
                        typeSaut = 1;   // on fait un short hop, l'indiquer pour plus tard.
                    };
                };
            };
            // Fin du traitement de l'action de sauter.

            // Début du traitement de fast fall

            // Déboguage
            if (debugBas == 1) {
                dictCommandesEtat["bas"] = 1;
            };

            // Si on active le fast fall et qu'on est pas déjà en fast fall...
            if (dictCommandesEtat["bas"] == 1 && nbFramesFastFall == 0) {
                // Selon le type de saut, on doit s'assurer d'avoir atteint l'apex du saut avant de faire un fast fall.
                if ((typeSaut == 1 && nbFramesSaut >= dictFrameData["SH"]) || (typeSaut == 2 && nbFramesSaut >= dictFrameData["FH"] || (typeSaut == 3 && nbFramesSaut >= dictFrameData["FH"]))) {
                    etatSaut = 4;   // Maintenant en fast fall
                    nbFramesFastFall = 0;   // Premier frame de fast fall
                    momentum = 0 - dictFrameData["FFS"];
                    document.dispatchEvent(evtFastFall);    // Lancer l'événement de Fast Fall
                };
            };
            // Fin du traitement de fast fall

            // Début du traitement passif en lien avec le saut.
            if(etatSaut > 0)
            {
                nbFramesSaut += 1;
                nbFramesTotal += 1;

                // Déterminer la position en montant.
                if (typeSaut == 1 && nbFramesSaut <= dictFrameData["SH"] ) { // Short Hop
                    position = positionDernSaut + CalculerPosition(nbFramesSaut, dictFrameData["SH"], dictFrameData["SHH"]);
                    momentum = 0;
                }
                else if(typeSaut > 1 && nbFramesSaut <= dictFrameData["FH"]) {
                    position = positionDernSaut + CalculerPosition(nbFramesSaut, dictFrameData["FH"], dictFrameData["FHH"]);
                    momentum = 0;
                };
                // Déterminer la position en descendant.
                if (((typeSaut == 1 && nbFramesSaut > dictFrameData["SH"]) || nbFramesSaut > dictFrameData["FH"]) && etatSaut != 4) {
                    momentum = Math.max(momentum - dictFrameData["Gravity"], 0 - dictFrameData["FS"]);
                    position = Math.max(position + momentum, 0);
                };
                if (etatSaut == 4) {
                    position = Math.max(position + momentum, 0);
                };
                
                

                // Déterminer si on fait un short hop.
                if (nbFramesTotal == nbFramesShortHop && (typeSaut == 1 || (typeSaut == 0 && etatSaut == 1 && dictCommandesEtat["saut"] == 0))) {
                    typeSaut = 1;   // Confirmer le short hop
                    etatSaut = 2;   // Le saut est en cours
                    position = 0;   // Initialisation de la position.
                    positionDernSaut = 0;    // Conserver la position au début du saut
                    document.dispatchEvent(evtShortHop);    // Lancer l'événement de Short Hop
                };
                // Déterminer si on fait un full hop.
                if (nbFramesTotal == nbFramesShortHop && typeSaut == 0 && dictCommandesEtat["saut"] > 0) {
                    typeSaut = 2;   // Confirmer le full hop
                    etatSaut = 2;   // Le saut est en cours
                    position = 0;   // Initialisation de la position.
                    positionDernSaut = 0;    // Conserver la position au début du saut
                    document.dispatchEvent(evtFullHop);
                }

                // Si on fait fast fall, traiter.
                if (etatSaut == 4) {
                    nbFramesFastFall += 1;
                };

                // Détection de l'apex
                if ((nbFramesSaut == dictFrameData["SH"] && typeSaut == 1) || (nbFramesSaut == dictFrameData["FH"] && typeSaut == 2) || (nbFramesSaut == dictFrameData["FH"] && typeSaut == 3)) {
                    document.dispatchEvent(evtSommet);
                };

                // Détection de l'atterrissage (fast fall + normal fall)
                if ((typeSaut == 1 || typeSaut == 2 || typeSaut == 3) && (etatSaut > 1) && (position == 0) && nbFramesSaut > 3) {
                    document.dispatchEvent(evtAtterrissage);
                    // Réinitialiser les statistiques de saut.
                    nbFramesSaut = 0;
                    nbFramesTotal = 0;
                    nbFramesFastFall = 0;
                    typeSaut = 0;
                    etatSaut = 0;
                };
            }


            if (debugSaut == 1) {
                dictCommandesEtat["saut"] = 0;
                debugSaut = 0;
            };
            if (debugSaut == 2 && typeSaut == 2) {
                debugSaut == 0;
                dictCommandesEtat["saut"] = 0;
            }
            if (debugBas == 1) {
                dictCommandesEtat["bas"] = 0;
                debugBas = 0;
            };
        };

        function BouclePrincipale()
        {
            // Dans cette fonction, les manettes sont mises à jour, les frames sont calculés et les
            // commandes sont prises en compte. Si un exercice est actif, sa fonction principale est
            // ensuite appelée.
            LireManettes();
            AjouterCommandes();
            AppliquerLogique();

            if (document.getElementById("tabDebug").checked) {
                AfficherDebug();
            };
            
            if (tabEnCours == "tabLibre") {
                Libre_Logique();
            };
            if (tabEnCours == "tabDrill") {
                Drill_Logique();
            };
            if (document.getElementById("tabObstacles").checked) {
                Obstacles_GestionObstacles();
            };
        };

        // ========= DEBUG ================
        function AfficherDebug()
        {
            var conteneur = document.getElementById("divDebug");
            var texte = "";
            var manette = ObtenirManette()

            for (var controle in dictCommandes)
            {
                texte += controle + " : ";
                for(var index = 0; index < dictCommandes[controle].length; index++)
                {
                    texte += dictCommandes[controle][index].toString() + " - ";
                }
                texte += "<br />";
            };
            texte += "<br />------------------------------------------------------------<br />";
            for (var controle in dictCommandesEtat) {
                texte += controle + " : " + dictCommandesEtat[controle] + "<br />";
            };
            texte += "<br />------------------------------------------------------------<br />State : <span style='font-weight: bold;'>";
            switch (typeSaut) {
                case 0:
                    texte += "Ground";
                    break;
                case 1:
                    texte += "Short Hop";
                    break;
                case 2:
                    texte += "Full Hop";
                    break;
                case 3:
                    texte += "Double Jump";
                    break;
            };
            texte += "</span> - ";
            switch (etatSaut) {
                case 0:
                    texte += "Idle";
                    break;
                case 1:
                    texte += "Crouch";
                    break;
                case 2:
                    texte += "Jumping";
                    break;
                case 3:
                    texte += "Double Jump";
                    break;
                case 4:
                    texte += "Fast Fall";
                    break;
            };
            texte += "<br />Position: " + position;


            conteneur.innerHTML = texte;

            var sprite = document.getElementById(tabEnCours + "Sprite");
            var hauteurSprite = position * 5.0; //GetPositionRelative(position);

            if (sprite) {
                sprite.style.bottom = hauteurSprite + "px";
            };

            //if (DetecterSaut(manette) >= 1) {
            //    JouerSon("Ok");
            //}
        };

        function GetPositionRelative(hauteur) {
            // Calcule et retourne la position relative en pixels.
            return hauteur / (dictFrameData["FH"] * 2 + dictFrameData["SH"]) * hauteurDoubleSaut * 5;
        };

        function GetValeurNumerique(valeur) {
            // Prend une chaine de texte avec px et retourne une valeur numérique.
            return Number(valeur.replace("px", ""));
        };

        /* Exerice Libre */
        function Libre_Initialiser() {
            // Prépare les valeurs.
            libreChute = false;
            libreNbFF = 0;
            libreNbFrames = 0;
            libreNbSauts = 0;
            libreNbSH = 0;
            
        };

        function Libre_OnSaut() {
            libreNbSauts += 1;
            libreChute = false;
        };

        function Libre_OnShortHop() {
            libreNbSH += 1;
            JouerSon("Leger");
        };

        function Libre_OnSommet() {
            libreChute = true;
        };

        function Libre_OnFastFall() {
            libreNbFF += 1;
            libreChute = false;
            JouerSon("Ok");
        };

        function Libre_OnAtterrissage() {
            libreChute = false;
            VibrerManette(100, 0.5);
        };

        function Libre_AfficherStats() {
            // Affiche les informations nécessaires pour ce type d'exercice.
            document.getElementById("txtLibreNbSauts").value = libreNbSauts;
            document.getElementById("txtLibreNbSH").value = libreNbSH;
            if (libreNbSauts == 0) {
                document.getElementById("txtLibreRatioSH").value = "0 %";
            }
            else {
                document.getElementById("txtLibreRatioSH").value = Math.round(libreNbSH / libreNbSauts * 100) + " %";
            };

            document.getElementById("txtLibreNbFF").value = libreNbFF;
            document.getElementById("txtLibreNbFrames").value = libreNbFrames;
            if (libreNbSauts == 0) {
                document.getElementById("txtLibreMoyenneFrames").value = "0 %";
            }
            else {
                document.getElementById("txtLibreMoyenneFrames").value = (libreNbFrames / libreNbSauts).toFixed(2);
            };
        };

        function Libre_Logique() {
            // Se charge de calculer le nombre de frames et affiche les statistiques. 

            // Si en chute libre (pas fast fall), incrémenter le nombre de frames.
            if (libreChute) {
                libreNbFrames += 1;
            };

            Libre_AfficherStats();

            var sprite = document.getElementById(tabEnCours + "Sprite");
            var hauteurSprite = position * 5.0; //GetPositionRelative(position);

            sprite.style.bottom = hauteurSprite + "px";
        };

        /* Drill */
        function Drill_Initialiser() {
            // Lit les paramètres et prépare les valeurs.
            drillType = Math.round(Math.random() * 2);
            drillNbSH = 0;
            drillNbSHSucces = 0;
            drillNbFH = 0;
            drillNbFHSucces = 0;
            drillFastFalls = [0, 0, 0, 0, 0];
            drillDelai = 5;
            drillAttenteMax = Number(document.getElementById("sldDrillDelai").value);
            drillAttente = 0;
            drillSucces = 0;

            position = 0;
        };

        function Drill_AfficherStats() {
            // Calcule et affiche les statistiques, incluant le temps restant à l'exercice.
            document.getElementById("txtDrillNbSH").value = drillNbSH;
            document.getElementById("txtDrillNbSHSucces").value = drillNbSHSucces;
            document.getElementById("txtDrillNbFH").value = drillNbFH;
            document.getElementById("txtDrillNbFHSucces").value = drillNbFHSucces;
            document.getElementById("txtDrillFastFall").value = ((drillFastFalls[0] + drillFastFalls[1] + drillFastFalls[2] + drillFastFalls[3] + drillFastFalls[4]) / 5).toFixed(2);

            document.getElementById("txtDrillDelai").value = (Math.max(drillAttenteMax - drillAttente, 0) / 60).toFixed(3);
            switch(drillType)
            {
                case 0:
                    document.getElementById("spanDrillType").innerText = "Short Hop";
                    break;
                case 1:
                    document.getElementById("spanDrillType").innerText = "Full Hop";
                    break;
                default:
                    document.getElementById("spanDrillType").innerText = "";
                    break;
            }
            
        };

        function Drill_Logique() {
            // Se charge de valider les états, valider si les délais sont dépassés.

            // Si le délai est à 0, se préparer pour le prochain saut.
            if (drillDelai == 0) {
                drillDelai = Math.round(Math.random() * (drillDelaiMax - drillDelaiMin) + drillDelaiMin);
                drillSucces = 0;
            };

            // Si le délai est plus que 0, attendre le bon moment.
            if (drillDelai > 0) {
                drillDelai--;
            };

            // Si le délai est maintenant à 0, débuter le traitement du saut.
            if (drillDelai == 0) {
                // Jouer un son différent selon le type de saut à effectuer.
                if (Math.random() < 0.75) {
                    drillType = 0;
                }
                else {
                    drillType = 1;
                };

                if (drillType == 0) {
                    JouerSon("Go");
                    drillNbSH += 1;
                }
                else {
                    JouerSon("Go2");
                    drillNbFH += 1;
                };

                // Débuter l'attente du saut.
                drillAttente = 0;
            };

            drillAttente++;

            // Si l'attente dépasse le délai maximum, considérer un échec.
            if (drillAttente == drillAttenteMax) {
                JouerSon("Mauvais");
                drillDelai = 0;
                drillType = 2;  // Échec, attendre le prochain. Empêche de compter des sauts non sollicités.
            };

            // Si en chute libre, incrémenter le nombre de frames.
            if (drillChute == true) {
                drillFastFalls[drillFastFalls.length - 1] += 1;
            };

            // Affichage
            Drill_AfficherStats();
            var sprite = document.getElementById(tabEnCours + "Sprite");
            var hauteurSprite = position * 2.5; //GetPositionRelative(position);

            sprite.style.bottom = hauteurSprite + "px";
        };

        function Drill_OnShortHop() {
            // Si on attendait un short hop, marquer comme un succès. Sinon, ne pas comptabiliser.
            drillAttente = drillAttenteMax + 1;
            if (drillType == 0) {
                drillSucces |= 1;
                drillNbSHSucces += 1;
                drillType = 3;
            }
            else {
                JouerSon("Mauvais");
                drillSucces &= ~1;
                drillType = 2;
            };
        };

        function Drill_OnFullHop() {
            // Si on attendait un full hop, marquer comme un succès. Sinon, ne pas comptabiliser.
            drillAttente = drillAttenteMax + 1;
            if (drillType == 1) {
                drillSucces |= 1;
                drillNbFHSucces += 1;
                drillType = 3;
            }
            else {
                JouerSon("Mauvais");
                drillSucces &= ~1;
                drillType = 2;
            };
        };

        function Drill_OnDoubleSaut() {
            // Toujours un échec.
            JouerSon("Mauvais");
            drillType = 2;
            drillSucces &= ~1;
        };

        function Drill_OnSommet() {
            // Début de la chute libre.
            // Ajouter une entrée à 0.
            drillFastFalls.push(0);
            // Retirer la plus vieille entrée.
            drillFastFalls.shift();
            drillChute = true;

            if (document.getElementById("chkDrillSonApex").checked) {
                JouerSon("Leger");
            };
        };

        function Drill_OnAtterrissage() {
            // Fin du saut, préparer le prochain saut.
            drillChute = false;
            if (drillSucces == 3) {
                if (document.getElementById("chkDrillSonAtterrisage").checked) {
                    JouerSon("Ok");
                };
            };
            if (drillSucces == 1) {    // Saut réussi seulement
                JouerSon("Mauvais");
            };

            // Préparer le prochain saut.
            drillDelai = 0;
        };

        function Drill_OnFastFall() {
            // Marquer la fin de la chute libre.
            drillChute = false;
            drillSucces |= 2;   // Indiquer que le fast fall a été activé.
            if ((drillSucces && 1) == 1) {
                if (!document.getElementById("chkDrillSonAtterrisage").checked) {
                    JouerSon("Ok");
                };
            };
        };
        
        /* Course à obstacles */
        function Obstables_Initialiser() {
            // Prépare les valeurs et vide le terrain.
            var listeObstacles = document.getElementsByClassName("obstacle");
            
            for (var index = listeObstacles.length - 1; index >= 0; index--) {
                listeObstacles[index].parentElement.removeChild(listeObstacles[index]);
            };

            obstaclesNbFrames = 0;
            obstaclesPaliers = 150;
            obstaclesVitesse = 3;
            obstaclesVie = 3;
            obstaclesScore = 0;
            obstaclesObstacles = 0;
        };

        function Obstacles_CreerNouveauObstacle(typeObstacle, nomObstacle, divConteneur) {
            // Permet de créer des obstacles de différents types :
            // 1 : sol '
            // 2 : short hop .
            // 4 : full hop ,
            // 8 : Double-saut l
            // 16 : Créer un obstacle au-dessus du saut. ¦ (ne s'applique pas à 1 ou 4)
            var objObstacle;
            var ratio = 2.5;

            objObstacle = document.createElement("div");
            objObstacle.style.left = "350px";
            objObstacle.name = nomObstacle;
            objObstacle.className = "obstacle";
            console.log("Obstacle : " + (typeObstacle & 15));
            if ((typeObstacle & 1) == 1) {
                // Passage au sol (créer un obstacle par-dessus).
                objObstacle.style["bottom"] = (32 + 16) + "px";
                objObstacle.style["height"] = "250px";
            };
            if ((typeObstacle & 2) == 2) {
                // Passage dans les airs (la hauteur dépend du short-hop du perso).
                objObstacle.style["bottom"] = "0px";
                objObstacle.style["height"] = (dictFrameData["SHH"] * zoom * ratio - 32) + "px";// (hauteurShortHop - 32) + "px";
            };
            if ((typeObstacle & 4) == 4) {
                // Passage dans les airs (la hauteur dépend du full-hop du perso).
                objObstacle.style["bottom"] = "0px";
                objObstacle.style["height"] = (dictFrameData["FHH"] * zoom * ratio - 32) + "px";// (hauteurFullHop - 32) + "px";
            };
            if ((typeObstacle & 8) == 8) {
                // Passage au sol (créer un obstacle par-dessus).
                objObstacle.style["bottom"] = "0px";
                objObstacle.style["height"] = (dictFrameData["FHH"] * zoom * ratio * 1.5 - 32) + "px";
            };
            // Ajouter l'obstacle
            divConteneur.appendChild(objObstacle);

            // Si un autre obstacle est nécessaire.
            if ((typeObstacle & 16) == 16 && ((typeObstacle & 6) > 0)) {
                objObstacle = document.createElement("div");
                objObstacle.style.left = "350px";
                objObstacle.name = nomObstacle;
                objObstacle.className = "obstacle";

                if ((typeObstacle & 2) == 2) {
                    objObstacle.style["top"] = "0px";
                    objObstacle.style["height"] = (168 - dictFrameData["SHH"] * ratio * zoom - 56) + "px"; //(168 - hauteurShortHop - 64) + "px";
                };
                if ((typeObstacle & 4) == 4) {
                    objObstacle.style["top"] = "0px";
                    objObstacle.style["height"] = (168 - dictFrameData["FHH"] * ratio * zoom - 56) + "px"; //(168 - hauteurFullHop - 64) + "px";
                };
                // Ajouter l'obstacle
                divConteneur.appendChild(objObstacle);
            };
        };

        function Obstacles_AfficherStats() {
            // Affiche les informations nécessaires pour ce type d'exercice.
            document.getElementById("spanObstaclesVie").innerText = "".padStart(obstaclesVie, "♥");
            document.getElementById("spanObstaclesTotal").innerText = obstaclesObstacles;
            document.getElementById("spanObstaclesScore").innerText = obstaclesScore;
        };

        function Obstacles_GestionObstacles() {
            // Se charge de créer, déplacer et décharger les obstacles.
            var dejaCompte = false;

            if (obstaclesVie == 0) {
                return;
            };

            var listeObstacles = document.getElementsByClassName("obstacle");
            var typeObstacle = Math.floor(Math.random() * 4);
            var vitesse = obstaclesVitesse;

            obstaclesNbFrames += 1;

            // Déplacer les obstacles existants
            for (var index = listeObstacles.length - 1; index >= 0; index--) {
                listeObstacles[index].style.left = (GetValeurNumerique(listeObstacles[index].style.left) - vitesse) + "px";

                if (GetValeurNumerique(listeObstacles[index].style.left) < -10) {
                    // L'obstacle a été dépassé. S'il n'a pas été touché, accorder des points.
                    if (listeObstacles[index].className != "obstacle explosion" && dejaCompte == false) {
                        obstaclesScore += 10;
                        obstaclesObstacles += 1;
                        if (obstaclesObstacles % 50 == 0) {
                            obstaclesVie += 1;
                        };
                        JouerSon("Ok");
                        dejaCompte = true;
                    };
                    // Cet obstacle ne sert plus. Le retirer.
                    listeObstacles[index].parentElement.removeChild(listeObstacles[index]);
                };
            };

            // Créer un obstacle si on a atteint un palier.
            if (obstaclesNbFrames % obstaclesPaliers == 0) {
                switch (typeObstacle) {
                    case 0:
                        typeObstacle = 1 + Math.floor(Math.random() * 2) * 16;
                        break;
                    case 1:
                        typeObstacle = 2 + Math.floor(Math.random() * 2) * 16;
                        break;
                    case 2:
                        typeObstacle = 4 + Math.floor(Math.random() * 2) * 16;
                        break;
                    case 3:
                        typeObstacle = 8 + Math.floor(Math.random() * 2) * 16;
                        break;
                };
                Obstacles_CreerNouveauObstacle(typeObstacle, "obstacleMur", document.getElementById("divObstacles"));

                // Accélérer la cadence et la fréquence :
                obstaclesPaliers -= 1;
                obstaclesVitesse += 0.1;
            }

            Obstacles_DetecterCollision();

            var sprite = document.getElementById(tabEnCours + "Sprite");
            var hauteurSprite = position * 2.5; //GetPositionRelative(position);

            sprite.style.bottom = hauteurSprite + "px";
        };

        function Obstacles_OnShortHop() {
            if (obstaclesVie > 0) {
                obstaclesScore += 5;
                JouerSon("Leger");
            };
        };

        function Obstacles_OnFastFall() {
            if (obstaclesVie > 0) {
                obstaclesScore += 1;
                JouerSon("Leger");
            };
        };

        function Obstacles_EnCollision(obj1, obj2) {
            // Les deux objets doivent avoir une position X, Y, une largeur et une hauteur. Retourne vrai si les deux objets s'intersectent.
            return !(((obj1.y + obj1.hauteur) < (obj2.y)) ||
                   (obj1.y > (obj2.y + obj2.hauteur)) ||
                   ((obj1.x + obj1.largeur) < obj2.x) ||
                   (obj1.x > (obj2.x + obj2.largeur)));
        };

        function Obstacles_DetecterCollision() {
            // Pour les obstacles près du perso, valider s'ils touchent au perso.
            var listeObstacles = document.getElementsByClassName("obstacle");
            var perso = document.getElementById(tabEnCours + "Sprite");
            var objObstacle;
            var dejaTrouve = false;

            // Obtenir la position du perso
            var posPerso = new Object();
            
            posPerso.x = GetValeurNumerique(window.getComputedStyle(perso).left) * zoom;
            posPerso.y = GetValeurNumerique(window.getComputedStyle(perso).top) * zoom;
            posPerso.hauteur = 32;
            posPerso.largeur = 32;

            for (var index = 0; index < listeObstacles.length; index++) {
                if (listeObstacles[index].className != "obstacle explosion") {
                    objObstacle = new Object();
                    objObstacle.x = GetValeurNumerique(window.getComputedStyle(listeObstacles[index]).left);
                    objObstacle.y = GetValeurNumerique(window.getComputedStyle(listeObstacles[index]).top);
                    objObstacle.hauteur = GetValeurNumerique(window.getComputedStyle(listeObstacles[index]).height);
                    objObstacle.largeur = GetValeurNumerique(window.getComputedStyle(listeObstacles[index]).width);

                    if (objObstacle.x < posPerso.x + posPerso.largeur) {
                        // Détecter la collision
                        if (Obstacles_EnCollision(posPerso, objObstacle)) {
                            listeObstacles[index].className = "obstacle explosion";
                            if (dejaTrouve == false) {
                                obstaclesVie -= 1;
                            };
                            dejaTrouve = true;
                            JouerSon("Mauvais");
                            VibrerManette(100, 1.0);
                        };
                    };                    
                };
            };

            Obstacles_AfficherStats();
        };

        /* Fin de Course à obstacles */
    </script>
    <style>
        select[multiple] {
            height: auto;
        }

        .frames {
            width: 50px;
        }

        #divTabs input[type=radio]
        {
            display: none;
        }

        /* https://codepen.io/oknoblich/pen/tfjFl */
        #divTabs>label
        {
            display: inline-block;
            margin: 0 0 -1px;
            padding: 15px 25px;
            font-weight: 600;
            text-align: center;
            border: 1px solid transparent;
        }
        #divTabs>label:before
        {
            font-weight: normal;
            margin-right: 10px;
        }
        #divTabs>input:checked + label 
        {
            color: #0af;
            border: 1px solid #abc;
            border-top: 2px solid #0af;
            border-bottom: 1px solid #fff;
        }
        #divTabs>label:hover {
            color: #789;
            cursor: pointer;
        }
        #divTabs>section 
        {
            display: none;
            padding: 20px 0 0;
            border-top: 1px solid #abc;
        }

        #tabDebug:checked ~ #secDebug,
        #tabLibre:checked ~ #secLibre,
        #tabDrill:checked ~ #secDrill,
        #tabObstacles:checked ~ #secObstacles
        {
            display: block;
        }

        /* Libre */
        #divLibreVisualisation {
            height: 168.75px;
            width: 0px;
            border-style: solid;
            border-color: black;
            border-width: 2px;
            display: inline-block;
            padding-right: 32px;

            text-align: center;
            position: relative;
            overflow: hidden;
        }

        #tblLibreStats {
            display: inline-block;
            width: 300px;
            text-align: center;
        }

        #tblLibreStats input {
            width: 100px;
            text-align: right;
        }

        #tblLibreStats label {
            width: 100%;
        }

        /* Drill */
        /* Libre */
        #divDrillVisualisation {
            height: 168.75px;
            width: 0px;
            border-style: solid;
            border-color: black;
            border-width: 2px;
            display: inline-block;
            padding-right: 32px;

            text-align: center;
            position: relative;
            overflow: hidden;
        }

        #tblDrillStats {
            display: inline-block;
            width: 300px;
            text-align: center;
        }

        #tblDrillStats input {
            width: 100px;
            text-align: right;
        }

        #tblDrillStats label {
            width: 100%;
        }

        /* Course à obstacles */
        #divObstacles {
            height: 168.75px;
            width: 300px;
            border-style: solid;
            border-color: black;
            border-width: 2px;
            display: inline-block;

            text-align: center;
            position: relative;
            overflow: hidden;
        }

        #divObstaclesStats {
            display: inline-block;
            width: 300px;
        }

        .obstacle {
            border-color: darkblue;
            border-style: solid;
            border-width: 3px;
            background-color: blue;
            position: absolute;
            display: block;
            min-height: 10px;
            width: 5px;
            /*transition: 0.2s;*/
        }

        .explosion {
            border-color: darkred;
            border-style: solid;
            border-width: 3px;
            background-color: red !important;
            transition: 0.2s;
            opacity: 0.1;
            transform: scale(5) rotate(30deg);
            -moz-transform: scale(5) rotate(30deg);
            -webkit-transform: scale(5) rotate(30deg);
            -o-transform: scale(5) rotate(30deg);
        }
    </style>
</head>

    <body>
        <div>
            <audio src="WiiFitBad.wav" id="audMauvais" preload="metadata"></audio>
            <audio src="WiiFitOk.wav" id="audOk" preload="metadata"></audio>
            <audio src="WiiFitBoard.wav" id="audLeger" preload="metadata"></audio>
            <audio src="WiiFitSifflet.wav" id="audGo" preload="metadata"></audio>
            <audio src="WiiFitSifflet2.wav" id="audGo2" preload="metadata"></audio>
        </div>
        <div>
            <p>Support for Firefox is a bit wonky right now.</p>
            <p>
                Steam might hijack your controller, adding extra features such as controlling your mouse or scrolling the web page. Either configure the controller or exit Steam temporarily.
            </p>
            <p>
                Bluetooth support for Joycons and Switch Pro is broken in recent Android builds and will poll about once a second. Nothing can be done about it, but hear me : if you connect Bluetooth headphones and start a voice conversation in Discord, the phone will poll the controller in real time and allow you to use this tool.
            </p>
            <p>
                Your computer or phone should support the Switch Pro controller via USB and Bluetooth. Just be sure to:<ul>
                    <li>Hold the Sync button while plugging in the USB wire</li>
                    <li>Sync your controller as usual if using Bluetooth</li>
                </ul>
                To begin, press any button on your controller to populate the list.
            </p>
            <h1>Short hop/fast fall training tool</h1>
            <p>For a tool to analyze or practice mashing, click <a href="mashing.htm">here</a>.</p>
            <p>If you use Tap Jump, hold the stick in the up direction while setting up the jump buttons.</p>
        </div>
        <form class="formManette">
            <fieldset>
                <div class="formulaire-element">
                    <label id="lblManette" class="col-md-4 control-label" for="selManette">Gamepad: </label>
                    <div class="col-md-4">
                        <select id="selManette" class="form-control">
                        </select>
                    </div>
                </div>
                <div class="formulaire-element">
                    <label id="lblVibration" class="col-md-4 control-label" for="selManette">Vibration: </label>
                    <input type="checkbox" id="chkVibration" checked="checked" />
                    <label id="lblVolume" class="col-md-4 control-label" for="sldVolume">Volume : </label>
                    <input type="range" id="sldVolume" min="0" max="100" value="100" oninput="AjusterSon(this.value);" />
                </div>
                <div class="formulaire-element">
                    <label id="lblBoutonSaut" class="col-md-4 control-label" for="selBoutonSaut">Jump Buttons: </label>
                    <input type="button" id="btnBoutonsSaut" value="Press buttons and click" />
                    <div class="col-md-4">
                        <select id="selBoutonSaut" multiple="multiple">
                        </select>
                    </div>
                </div>
                <div class="formulaire-element">
                    <label id="lblPerso" class="col-md-4 control-label" for="selPerso">Character: </label>
                    <div class="col-md-4">
                        <select id="selPerso" class="form-control">
                        </select>
                    </div>
                </div>
                
                <div class="formulaire-element">
                    <label id="lblGravity" class="col-md-4 control-label" for="txtGravity">Gravity: </label>
                        <input type="text" id="txtGravity" class="frames" value="0" />

                    <label id="lblFall" class="col-md-4 control-label" for="txtFall">Fall Speed: </label>
                        <input type="text" id="txtFall" class="frames" value="0" />
                    <label id="lblFastFall" class="col-md-4 control-label" for="txtFastFall">Fast Fall Speed: </label>
                        <input type="text" id="txtFastFall" class="frames" value="0" />

                    <label id="lblSH" class="col-md-4 control-label" for="txtSH">Short Hop: </label>
                        <input type="text" id="txtSH" class="frames" value="0" />
                    <label id="lblSHH" class="col-md-4 control-label" for="txtSHH">Height: </label>
                        <input type="text" id="txtSHH" class="frames" value="0" />
                        
                    <label id="lblFH" class="col-md-4 control-label" for="txtFH">Full Hop: </label>
                        <input type="text" id="txtFH" class="frames" value="0" />
                    <label id="lblFHH" class="col-md-4 control-label" for="txtFHH">Height: </label>
                        <input type="text" id="txtFHH" class="frames" value="0" />
                </div>

            </fieldset>
        </form>
        <div id="divTabs">
            <input type="radio" name="tabs" class="tab active" id="tabDebug" onchange="tabEnCours = this.id;" checked  />
            <label for="tabDebug">Debug</label>

            <input type="radio" name="tabs" class="tab" id="tabLibre" onchange="tabEnCours = this.id;" />
            <label for="tabLibre">Free exercise</label>

            <input type="radio" name="tabs" class="tab" id="tabDrill" onchange="tabEnCours = this.id;" />
            <label for="tabDrill">Drill</label>

            <input type="radio" name="tabs" class="tab" id="tabObstacles" onchange="tabEnCours = this.id;" />
            <label for="tabObstacles">Obstacle course</label>

            <section id="secDebug" class="debug">
                <!-- Affiche des informations de deboguage :
                Historique des commandes de saut/fast fall pour les 7 derniers frames
                État actuel des commandes (saut, fast fall)
                État de la simulation (type de saut - étapes de saut)
                Réinitialiser : Annule le saut actuel et charge les statistiques de saut
            -->
                <div id="divDebug"></div>
                <input type="button" onclick="etatSaut = 0; typeSaut = 0; ChargerPersoStatsManuel();" value="Reset" />
            </section>
            <section id="secLibre" class="exercice">
                <!-- Affiche des statistiques :
                Nombre de sauts total
                Nombre de Short Hops
                Ratio de Short Hops : Short Hops / Sauts en %

                Nombre de fast falls : Dès qu'un fast fall est enclanché (après le SH ou FH)
                Nombre de frames perdus : Total du nombre de frames suivant SH ou FH sans FF.
                Moyenne FF : nombre de frames / nombre de fast falls (plus petit = meilleur)

                Actions :
                Réinitialiser : Mets les compteurs à 0, charge les attributs du personnage.
                Son : Actif ou inactif
                Condition de succès : Short Hop, Short Hop Fast Fall (en lien au son)
             -->
                <div id="divLibreVisualisation">
                    <div id="tabLibreSprite" class="sprite sprite-07" style="bottom: 0px;"></div>
                </div>
                <table id="tblLibreStats">
                    <tr>
                        <td><label id="lblLibreNbSauts" for="txtLibreNbSauts">Total jumps</label></td>
                        <td><label id="lblLibreNbSH" for="txtLibreNbSH">Short Hops</label></td>
                        <td><label id="lblLibreRatioSH" for="txtLibreRatioSH">Short Hops rate</label></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="txtLibreNbSauts" value="0" readonly /></td>
                        <td><input type="text" id="txtLibreNbSH" value="0" readonly /></td>
                        <td><input type="text" id="txtLibreRatioSH" value="0 %" readonly /></td>
                    </tr>

                    <tr>
                        <td><label id="lblLibreNbFF" for="txtLibreNbFF">Fast Falls</label></td>
                        <td><label id="lblLibreNbFrames" for="txtLibreNbFrames">Missed frames</label></td>
                        <td><label id="lblLibreMoyenneFrames" for="txtLibreMoyenneFrames">Average by jump</label></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="txtLibreNbFF" value="0" readonly /></td>
                        <td><input type="text" id="txtLibreNbFrames" value="0" readonly /></td>
                        <td><input type="text" id="txtLibreMoyenneFrames" value="0" readonly /></td>
                    </tr>
                    <tr>
                        <td colspan="3"><input type="button" id="btnLibreReinitialiser" value="Reset" onclick="Libre_Initialiser();" /></td>
                    </tr>
                </table>
            </section>
            <section id="secDrill" class="drill">
                <!-- Permet de définir des paramètres du drill et affiche des statistiques :
                    Nb Short Hops
                    Nb Short Hops réussis
                    Nb Full Hops
                    Nb Full Hops réussis
                    Moyenne des frames manqués pour le fast fall

                    Son à l'apex : Case à cocher, sonner le son Leger au sommet du saut
                    Signaler le succès à l'atterrissage : Case à cocher, jouer un son (Ok ou Mauvais) à l'atterrissage sinon à l'action.
                    Délai de réponse : Slider, 1 à 5 secondes de délai avant de recevoir un échec.
                    
                    L'exercice attend que le saut soit terminé avant d'en commander un autre. Le délai est aléatoire entre 2 secondes et 5 secondes.
                    -->
                <div id="divDrillVisualisation">
                    <span id="spanDrillType"></span>
                    <div id="tabDrillSprite" class="sprite sprite-07" style="bottom: 0px;"></div>
                </div>
                <table id="tblDrillStats">
                    <tr>
                        <td><label id="lblDrillNbSH" for="txtDrillNbSH">Short Hops</label></td>
                        <td><label id="lblDrillNbSHSucces" for="txtDrillNbSHSucces">Successful</label></td>
                        <td><label id="lblDrillFastFall" for="txtDrillFastFall">Missed frames</label></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="txtDrillNbSH" value="0" readonly /></td>
                        <td><input type="text" id="txtDrillNbSHSucces" value="0" readonly /></td>
                        <td><input type="text" id="txtDrillFastFall" value="0" readonly /></td>
                    </tr>

                    <tr>
                        <td><label id="lblDrillFH" for="txtDrillNbFH">Full Hops</label></td>
                        <td><label id="lblDrillFHSucces" for="txtDrillNbFHSucces">Success</label></td>
                        <td><label id="lblDrillDelai" for="txtDrillDelai">Delay</label></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="txtDrillNbFH" value="0" readonly /></td>
                        <td><input type="text" id="txtDrillNbFHSucces" value="0" readonly /></td>
                        <td><input type="text" id="txtDrillDelai" value="0" readonly /></td>
                    </tr>

                    <tr>
                        <td><label id="lblDrillSonApex" for="chkDrillSonApex">Sound at apex</label></td>
                        <td><label id="lblDrillSonAtterrisage" for="chkDrillSonAtterrisage">Sound at landing</label></td>
                        <td><label id="lblDrillDelai" for="sldDrillDelai">Leeway</label></td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" id="chkDrillSonApex" checked /></td>
                        <td><input type="checkbox" id="chkDrillSonAtterrisage" checked /></td>
                        <td><input type="range" id="sldDrillDelai" min="30" max="300" value="120" /></td>
                    </tr>
                    <tr>
                        <td colspan="3"><input type="button" id="btnDrillReinitialiser" value="Reset" onclick="Drill_Initialiser();" /></td>
                    </tr>
                </table>
            </section>
            <section id="secObstacles" class="obstacles">
                <div id="divObstacles">
                    <div id="tabObstaclesSprite" class="sprite sprite-07" style="bottom: 0px;"></div>
                </div>
                <div id="divObstaclesStats">
                    <label id="lblObstaclesVie" for="spanObstaclesVie">Lives : </label><span id="spanObstaclesVie">♥♥♥</span><br />
                    <label id="lblObstaclesTotal" for="spanObstaclesTotal">Obstacles : </label><span id="spanObstaclesTotal">0</span><br />
                    <label id="lblObstaclesScore" for="spanObstaclesScore">Score : </label><span id="spanObstaclesScore">0</span><br />
                    <input type="button" id="btnObstaclesReset" value="Restart" onclick="Obstables_Initialiser();" />
                </div>
            </section>
        </div>
    </body>
</html>