mercredi 29 septembre 2010

Konami GWT

Connaissez vous le code Konami ?
Il s'agit d'un code spécial utilisé dans de nombreux jeux de l'éditeur de jeux video Konami. Pour accéder à des options secrètes, il fallait effectuer la séquence suivante sur sa manette : haut, haut, bas, bas, gauche, droite, gauche, droite, b, a. Pour plus d'infos, je vous laisse lire l'article wikipedia.
Vous ne voyez pas le rapport avec GWT ? J'y viens... Certains développeurs web ayant été bercé par ces jeux dans leur enfance ont eu l'idée d'incoporer ce code dans leur site. C'est ainsi que nous les retrouvons sur certains sites que vous connaissez : free.fr, Google Reader, JQuery, ... (essayez, vous verrez) Parmis eux on retrouve bien sûr http://konamicodesites.com où l'execution de ce code est indispensable pour accéder à son contenu.
Pour déctecter l'exécution de ce code, il faut donc surveiller quelles sont les touches appuyées. C'est en javascript que celà se fait. Nous y voilà, personnellement, je préfère l'utilisation de gwt à celle de javascript. Je vous propose de voir comment nous pourrions l'implémenter. Lorsque l'utilisateur va effectuer la séquence de touches, une action devra être déclenchées. C'est le principe d'un handler. Nous aurons donc une interface de ce type :

/**
 * Handler for the Konami Code.
 * @author Nicolas François
 *
 */
public interface KonamiHandler {
        
        /**
         * Call when the konami code is performed.
         */
        void onKonamiCodePerformed();

}

Ensuite on va devoir surveiller les touches au niveau de la plage. Le principal problème est qu'il n'existe pas de de handler à rattacher au niveau de la page. comme on peut On en trouver sur un TextBox. On va donc s'intéresser aux évènements natifs du navigateur, les NativePreviewEvent. Pour cela, nous allons implémenter l'interface NativePreviewHandler. Celle ci, va réagir à l'ensemble des événements navigateur : aussi bien les touches clavier et la souris, mais aussi tous les évènements comme le onload, onblur, onchange, ... D'autre part, nous allons devoir si les dernières appuyées pressées correspondent à la séquence. Pour celà, nous allons enregister les dernières saisies sous forme de chaine ascii, la comparer à la séquence voulue et si elle est bonne appeler la méthode de notre handler. Ce qui nous donne :

/**
 * Konami code monitor.
 * 
 * @author Nicolas François
 *
 */
public class Konami {

        /**
         * The konami code sequence in ascii.
         */
        private final static String KONAMICODE_SEQUENCE = "38384040373937396665";
        
        private final KonamiHandler konamiHandler;
        private String lastInputs = "";
        
        
        /**
         * Constructor with the konami handler.
         * @param konamiHandler
         */
        public Konami(KonamiHandler konamiHandler){
                this.konamiHandler = konamiHandler;
        }

        /**
         * Start the konami code execution monitoring. 
         */
        public void start(){
                final NativePreviewHandler nph = new NativePreviewHandler() {

                        @Override
                        public void onPreviewNativeEvent(NativePreviewEvent event) {
                                if(event.getTypeInt() == Event.ONKEYDOWN){
                                        lastInputs+= event.getNativeEvent().getKeyCode();
                                        if(lastInputs.length()>KONAMICODE_SEQUENCE.length()){
                                                lastInputs = lastInputs.substring(lastInputs.length()-KONAMICODE_SEQUENCE.length());
                                        }
                                        if(KONAMICODE_SEQUENCE.equals(lastInputs)){
                                                lastInputs = "";
                                                konamiHandler.onKonamiCodePerformed();
                                        }
                                }
                        }
                };
                Event.addNativePreviewHandler(nph);
        }               
}


Bien sûr, cette action n'est pas du tout évoluée, c'est à vous de libérer votre imagination.
Je vous propose cette implémentation avec konami-gwt. Si vous souhaitez l'utiliser dans votre projet gwt, il vous suffit de déclarer son module dans votre fichier *.gwt.xml.

Aucun commentaire:

Enregistrer un commentaire