<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="spritesheet.css">
    <script>
        /******************************************************************************
            Mashing   version 0.1
            ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

            Un outil HTML5 pour analyser et pratiquer le mashing pour 
               Super Smash Bros Ultimate.
        
        À faire :
          - Configurer les boutons par action et les directions
          - Lancer l'exercice avec un délai aléatoire
          - Proposer différents tests (joystick seulement, bouton unique, tous les boutons)
          - Analyse du dernier mash (nombre de boutons appuyés inutiles, nombre de frames avec input)

            Par Nihb (/u/nihb)

        ******************************************************************************/

        // Initialisation
        var arrManettes = {};
        var tabEnCours = "tabDebug";
        var dictActions = { "attack": false, "special": false, "jump": false, "shield": false, "up": false, "down": false, "left": false, "right": false };
        // Un seul état est conservé. Par exemple, si deux boutons sont configurés pour le saut, si un est relâché pendant le même frame que l'autre est
        // appuyé, l'état de l'action restera active et ne sera pas enregistré comme une entrée. Il en est de même si le deuxième est appuyé alors que le
        // premier est toujours actif. Il est donc uniquement possible d'avoir une entrée par action par 2 frames (1- action, 2- relâcher, 3- action...)
        var intervaleFrame = 1000 / 60; // 60 frames : 1000/60
        var dictCommandesHistorique = { "attack": [0, 0], "special": [0, 0], "jump": [0, 0], "shield": [0, 0], "up": [0, 0], "down": [0, 0], "left": [0, 0], "right": [0, 0] }; // Contient l'historique des actions activées ainsi que les actions qui n'ont pas été prises en compte.
        // Par exemple, si une entrée d'action a été entrée en même temps qu'une entrée directionnelle, l'entrée directionnelle n'est pas pris en compte.
        // Si deux boutons de saut sont activés en même temps, un seul est pris en compte.
        var dictActionsHistorique = { "attack": [0, 0], "special": [0, 0], "jump": [0, 0], "shield": [0, 0], "up": [0, 0], "down": [0, 0], "left": [0, 0], "right": [0, 0] }; // Contient le frame actuel [1] et le frame précédent [0]
        // Utilisé pour déterminer une nouvelle action
        
        // Utilisés pour les contrôles
        var dictCommandes = { "attack": [], "special": [], "jump": [], "shield": [], "up": [], "down": [], "left": [], "right": [] }; // Contient les contrôles des x frames précédents dans une queue. Initialiser au début de l'exercice.
        // Le C-stick n'est pas comptabilisé, mais le d-pad l'est (sauf Taunt)
        var elementCourant = "";

        // Événements en lien avec les commandes.
        var evtNouvelleEntree = new Event('NouvelleEntree');    // Quand une nouvelle action a été activée. La fonction doit recevoir le nom de l'action (chaîne).
        var evtFinEntree = new Event('FinEntree'); // Quand une action active n'a plus aucun bouton appuyé et est désactivée. La fonction doit recevoir le nom de l'action (chaîne).
        var evtDebutAnalyse = new Event('DebutAnalyse'); // Quand l'analyse est démarrée.
        var evtFinAnalyse = new Event('FinAnalyse'); // Quand l'analyse est terminée.

        // Variables de déboguage

        // Boucle du jeu.
        var interval;
        var etape = 0; // 0: En attente, 1: Préparation, 2: MASHING!, 3: Fin
        var delaiAttente = 0;   // Modifié quand on prépare le test avec une valeur aléatoire. Modifié pendant le test par une entrée enregistrée.
        var dureeTest = 10 * 60; // 10 secondes * 60 frames (par seconde)
        var framesParEntree = 0.85; // Chaque entrée réduit le nombre de frames en plus du 1 de base.

        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");
            });

            // Événements de déboguage

            // Fin du déboguage

            interval = setInterval(BouclePrincipale, intervaleFrame);

            JouerSon("Leger");
        };

        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 AjouterControle(nom, valeur) {
            // Ajoute une entrée à une liste si elle n'existe pas.
            if(!dictCommandes[nom].includes(valeur))
            {
                dictCommandes[nom].push(valeur);
            };
        };

        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)
        {
            if (!EstPresentSelect(selectbox, valeur)) {
                var option = document.createElement("option");

                option.value = valeur;
                option.text = texte;

                selectbox.add(option);
            };
        };

        function EstPresentSelect(selectbox, valeur) {
            // Retourne vrai si la valeur est dans les options d'un selectbox.
            var index = 0;

            for (index = 0; index < selectbox.options.length; index++) {
                if (valeur == selectbox.options[index].value) {
                    return true;
                }
            };

            return false;
        };

        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 EntreeEstActivee(manette, entree) {
            // Retourne si l'entrée est activée (true) ou non.
            var retour = false;
            var index = 0;

            if (entree.substring(0, 1) == "b") { // Bouton.
                index = entree.substring(1, entree.length);
                retour = manette.buttons[index].pressed;
            };
            if (entree.substring(0, 1) == "a") { // Axe
                index = entree.substring(1, entree.length - 1);
                if (entree.substring(entree.length - 1) == "-") {
                    retour = manette.axes[index] < -0.5;
                } else {
                    retour = manette.axes[index] > 0.5;
                };
            };
            
            return retour;
        };

        function AjouterCommandes(manette) {
            // Si un élément est sélectionné, lire le ou les entrées pour les ajouter.
            var entree = "";
            var index = 0;
            var element;

            if (elementCourant != "") {
                // Déterminer s'il s'agit de la direction ou d'un bouton.
                element = document.getElementById(elementCourant);

                if (elementCourant.substring(0, 3) == "txt") {
                    // Un seul axe peut être utilisé pour la direction. On remplace la valeur si on trouve un axe actif.
                    for (index = 0; index < manette.axes.length; index++) {
                        if (Math.abs(manette.axes[index]) >= 0.75) {
                            // Le côté n'est pas important en autant qu'on serve des valeurs opposées.
                            document.getElementById(elementCourant).value = "Axis " + index;
                            if (elementCourant == "txtDirectionX") {
                                dictCommandes["left"] = ["a" + index + "-"];
                                dictCommandes["right"] = ["a" + index + "+"];
                            }
                            else {
                                dictCommandes["up"] = ["a" + index + "-"];
                                dictCommandes["down"] = ["a" + index + "+"];
                            };                            
                        };
                    };
                }
                else {
                    // Les boutons sont ajoutés s'ils ne sont pas déjà dans la liste. L'utilisateur doit vider la section manuellement.
                    for (index = 0; index < manette.buttons.length; index++) {
                        if (manette.buttons[index].pressed) {
                            AjouterSelectOption(element, "Button " + index, "b" + index);
                            switch (elementCourant) {
                                case "selAttack":
                                    AjouterControle("attack", "b" + index);
                                    break;
                                case "selSpecial":
                                    AjouterControle("special", "b" + index);
                                    break;
                                case "selJump":
                                    AjouterControle("jump", "b" + index);
                                    break;
                                case "selShield":
                                    AjouterControle("shield", "b" + index);
                                    break;

                            };
                        };
                    };
                };
            };
        };

        function AppliquerLogique()
        {
            // Cette fonction évalue les états et les commandes pour établir quelles actions
            var nbFrames = 1;
            var entreeTraitee = false;
            var etatEntree = false;
            var index, idxControle;
            var clef;
            var manette = ObtenirManette();

            if (etape == 0) {
                // Quitter la fonction; rien à faire.
                return;
            };
            if (etape == 1) {
                // Réduire le délai d'attente.
                delaiAttente -= 1;
                
                // Si on est à 0, on passe à l'étape suivante.
                if (delaiAttente == 0) {
                    etape = 2;
                    delaiAttente = dureeTest;
                    JouerSon("Go");
                    document.getElementById("divInstructions").innerHTML += "MASH!<br>";
                };
                return;
            };
            if (etape == 2) {
                // Présentement en train de masher. Analyser chaque entrée, en commençant par les boutons et finissant avec les directions.
                // Commencer par pousser les états du dernier frame.
                for (index in dictActionsHistorique) {
                    dictActionsHistorique[index].push(0);
                    dictActionsHistorique[index].shift();
                };

                // Enregistrer les entrées courantes.
                for (idxControle in dictCommandes) {
                    for (index in dictCommandes[idxControle]) {
                        etatEntree = EntreeEstActivee(manette, dictCommandes[idxControle][index]);
                        if (etatEntree) {
                            // Si cette action n'était pas active au frame précédent et qu'elle est déjà active, compter comme entrée inutile.
                            if (dictActionsHistorique[idxControle][0] == 0 && dictActionsHistorique[idxControle][1] == 1) {
                                dictCommandesHistorique[idxControle][1] += 1;
                            }
                            else {
                                // Si une autre entrée a été activée, compter comme entrée inutile.
                                if (entreeTraitee) {
                                    dictCommandesHistorique[idxControle][1] += 1;
                                }
                                else {
                                    dictActionsHistorique[idxControle][1] = 1;
                                    dictCommandesHistorique[idxControle][0] += 1;
                                    delaiAttente -= framesParEntree;
                                    entreeTraitee = true;
                                };                                
                            };
                            
                        };
                    };
                };

                delaiAttente -= 1;

                // Détecter la fin du test.
                if (delaiAttente <= 0) {
                    etape = 3;  // Fin!
                    JouerSon("Go");
                    document.getElementById("divInstructions").innerHTML += "Test completed!<br>";

                    // Analyser les résultats...
                    var nbEntreesSucces = 0;
                    var nbEntreesEchec = 0;
                    var texteSortie = "";
                    var texteSortieHeader = "";

                    texteSortieHeader += "<table class='resultats'><thead><tr>";
                    for (idxControle in dictCommandesHistorique) {
                        nbEntreesSucces += dictCommandesHistorique[idxControle][0];
                        nbEntreesEchec += dictCommandesHistorique[idxControle][1];
                        texteSortieHeader += "<td>" + idxControle + "</td>";
                        texteSortie += "<td>" + dictCommandesHistorique[idxControle][0] + " / " + dictCommandesHistorique[idxControle][1] + "</td>";
                    };
                    document.getElementById("divInstructions").innerHTML += texteSortieHeader + "</tr></thead><tr>" + texteSortie + "</tr></table>";
                    document.getElementById("divInstructions").innerHTML += "Registered inputs : " + nbEntreesSucces + " / " + dureeTest + " (" + Math.round(nbEntreesSucces * 100 / dureeTest) + "%)<br>";
                    document.getElementById("divInstructions").innerHTML += "Useless inputs : " + nbEntreesEchec + " / " + nbEntreesSucces + " (" + Math.round(nbEntreesEchec * 100 / dureeTest) + "%)<br>";

                };
            };
        };

        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(ObtenirManette());
            AppliquerLogique();
        };

        // Fonctions liées à l'interface
        function ChangerControle(element, focus) {
            // Utilisé par les champs de contrôles. Conserve l'élément actif.
            if (focus) {
                elementCourant = element.id;
            }
            else {
                elementCourant = "";
            };
        };

        function DemarrerTest() {
            // Si le test est en cours, le bouton annule tout et recommence.
            
            // Réinitialise les variables.
            dictCommandesHistorique = { "attack": [0, 0], "special": [0, 0], "jump": [0, 0], "shield": [0, 0], "up": [0, 0], "down": [0, 0], "left": [0, 0], "right": [0, 0] }; // Contient l'historique des actions activées ainsi que les actions qui n'ont pas été prises en compte.
            dictActionsHistorique = { "attack": [0, 0], "special": [0, 0], "jump": [0, 0], "shield": [0, 0], "up": [0, 0], "down": [0, 0], "left": [0, 0], "right": [0, 0] };  // Contient le frame actuel [1] et le frame précédent [0]
            dictActions = { "attack": 0, "special": 0, "jump": 0, "shield": 0, "up": 0, "down": 0, "left": 0, "right": 0 };

            // Initie le test.
            etape = 1;
            delaiAttente = Math.round(Math.random() * 10 * 60) + 240;

            document.getElementById("divInstructions").innerHTML += "<br>Get ready and wait for the signal...<br>";
        };
    </script>
    <style>
        select[multiple] {
            height: auto;
        }

        .frames {
            width: 50px;
        }

        #divTabs input[type=radio]
        {
            display: none;
        }

        .formulaire-element .col-md-4 {
            width: 40%;
            display: inline-block;
        }

        .formulaire-element select {
            width: 33%;
        }

        .formulaire-element .controle:focus {
            outline: solid;
        }

        /* 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;
        }

       #divInstructions {
           border: solid;
           min-height: 300px;
           overflow-y: scroll;
       }
       .resultats {
           border: 1px solid;
            width: 100%;
            text-align: center;
            border-collapse: collapse;
       }

       .resultats thead {
           font-weight: bold;
           text-align: center;
           border: 1px solid
       }
       
       .resultats th, .resultats td {
           border: 1px solid;
       }
    </style>
</head>

    <body>
        <div>
            <audio src="WiiFitBoard.wav" id="audLeger" preload="metadata"></audio>
            <audio src="WiiFitSifflet.wav" id="audGo" 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>Mashing analysis and training tool</h1>
            <p>For a tool to analyze or practice short hopping and fast falling, click <a href="index.htm">here</a>.</p>
            <p>
                Mashing in Super Smash Bros Ultimate reduces the amount of frames you are in grab, inhale, shield break stun, etc. Each frame, you can input a command :<ul>
                    <li>A single direction (up, down, left, right)</li>
                    <li>An action (attack, special, jump, shield)</li>
                </ul>
                Multiple commands at once count as only one. If a command was used last frame, it cannot be used the next frame (X and Y as jumping, or A and Z as attack/grab) and has to be released in order to be counted again.
            </p>
            <p>
                There are two types of mashing :
                <ul>
                    <li>Button mashing : Using only action buttons is quick, but an action will probably be buffered once you break free. Better on stage.</li>
                    <li>Joystick circling : Slower for most people, but gives more control out of stun. Better off stage.</li>
                </ul>
                Combining both methods might slightly improve your speed, but is more tiring and leads to less control. Using the trigger buttons is usually a bad idea since only one input per frame will be used. Setting actions to the D-Pad seems to be the most effective way to mash, but at what cost?
            </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="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="lblDirectionX" class="control-label" for="txtDirectionX">Horizontal : </label>
                    <input id="txtDirectionX" type="text" class="controle" value="" onfocus="ChangerControle(this, true);" onblur="ChangerControle(this, false);" readonly />

                    <label id="lblDirectionY" class="control-label" for="txtDirectionY">Vertical : </label>
                    <input id="txtDirectionY" type="text" class="controle" value="" onfocus="ChangerControle(this, true);" onblur="ChangerControle(this, false);" readonly />

                    <div class="col-md-4">
                        <label id="lblAttack" class="control-label" for="selAttack">Attack :</label>
                        <select id="selAttack" multiple="multiple" class="controle" onfocus="ChangerControle(this, true);" onblur="ChangerControle(this, false);">
                        </select>
                        <input type="button" id="btnAttackClear" value="Clear" onclick="dictCommandes['attack'] = []; ViderSelect(document.getElementById('selAttack'));" />
                    </div>
                    <div class="col-md-4">
                        <label id="lblSpecial" class="control-label" for="selSpecial">Special :</label>
                        <select id="selSpecial" multiple="multiple" class="controle" onfocus="ChangerControle(this, true);" onblur="ChangerControle(this, false);"></select>
                        <input type="button" id="btnSpecialClear" value="Clear" onclick="dictCommandes['special'] = []; ViderSelect(document.getElementById('selSpecial'));" />
                    </div>
                    <div class="col-md-4">
                        <label id="lblJump" class="control-label" for="selJump">Jump :</label>
                        <select id="selJump" multiple="multiple" class="controle" onfocus="ChangerControle(this, true);" onblur="ChangerControle(this, false);"></select>
                        <input type="button" id="btnJumpClear" value="Clear" onclick="dictCommandes['jump'] = []; ViderSelect(document.getElementById('selJump'));" />
                    </div>
                    <div class="col-md-4">
                        <label id="lblShield" class="control-label" for="selShield">Shield :</label>
                        <select id="selShield" multiple="multiple" class="controle" onfocus="ChangerControle(this, true);" onblur="ChangerControle(this, false);"></select>
                        <input type="button" id="btnShieldClear" value="Clear" onclick="dictCommandes['shield'] = []; ViderSelect(document.getElementById('selShield'));" />
                    </div>
                </div>
            </fieldset>
        </form>
        <div id="divAnalyse">
            <input id="btnAnalyser" type="button" value="Start..." onclick="DemarrerTest();" />
            <div id="divInstructions"></div>
        </div>
    </body>
</html>