uiHandler.js

function UIWindow() {
    this.id="uiWindow-"+generateUniqueId();
    this.closable = true;
    this.acceptable = false; // Ça n'a pas été implémenté au début, alors on va laisser false
    this.preferHide = false;
    this.waitAssetsLoading = true;
    this.showAnimation = null;
    this.hideAnimation = null;
    this.debug = false;
    this.closeAction = null;
    this.acceptAction = null;
    //this.init();

    // Détecter les touches du clavier appuyées
    //var preferHide = this.preferHide;
    document.addEventListener('keydown', (event) => {
        if(event.key == "Escape"){
            if(this.preferHide == true){
                this.hide();
            }else{
                this.close();
            }
        }else if(event.key == "Enter"){
            if(this.acceptable == true){
                this.accept();
            }
        }
    }, false);
}

UIWindow.prototype.init = function() {
    if(this.debug == true) console.log("UIWindow created with id " + this.id);

    // On va vérifier qu'aucune window existe déjà
    if(document.getElementById(this.id) != null){
        throw "The id " + this.id + " is already used";
    }
    // Ici on va récréer le code html de la fenêtre
    var mainContainer = document.createElement("div");

    mainContainer.className = "window";

    if(this.showAnimation != null || this.hideAnimation != null){
        mainContainer.className += " animate__animated ";

        if(this.showAnimation != null){
            mainContainer.className += " " + this.showAnimation;
        }
        if(this.hideAnimation != null){
            mainContainer.className += " " + this.hideAnimation;
        }
    }

    mainContainer.id = this.id;
    mainContainer.style.display = "none";

    var contentContainer = document.createElement("div");
    contentContainer.className = "content";
    contentContainer.id = "uiWindowContent-" + this.id;

    var actionContainer = document.createElement("div");
    actionContainer.className = "actionsBar";

    if(this.closable == true){
        var closeButton = document.createElement("div");
        closeButton.className = "item";
        var closeIconDiv = document.createElement("div");
        closeIconDiv.className = "icon";
        var closeIcon = document.createElement("icon");
        closeIcon.className = "keyboard-key esc dark";

        var text = document.createElement("span");
        text.innerHTML = "Fermer";

        closeIconDiv.appendChild(closeIcon);
        closeButton.appendChild(closeIconDiv);
        closeButton.appendChild(text);
        if(this.preferHide == true){
            closeButton.onclick = function(){
                this.hide();
            }.bind(this);
        }else{
            closeButton.addEventListener("click", function(){
                this.close();
            }.bind(this));
        }
        actionContainer.appendChild(closeButton);
    }

    if(this.acceptable == true){
        var acceptButton = document.createElement("div");
        acceptButton.className = "item";
        var acceptIconDiv = document.createElement("div");
        acceptIconDiv.className = "icon";
        var acceptIcon = document.createElement("icon");
        acceptIcon.className = "keyboard-key enter dark";

        var text = document.createElement("span");
        text.innerHTML = "Valider";

        acceptIconDiv.appendChild(acceptIcon);
        acceptButton.appendChild(acceptIconDiv);
        acceptButton.appendChild(text);
        acceptButton.addEventListener("click", function(){
            this.accept();
        }.bind(this));
        actionContainer.appendChild(acceptButton);
    }

    mainContainer.appendChild(contentContainer);
    mainContainer.appendChild(actionContainer);

    // Et on l'insère
    document.body.appendChild(mainContainer);
    this.elem = mainContainer;
}

UIWindow.prototype.show = function() {
    document.getElementById(this.id).style.display = "flex";
    if(this.debug == true) console.log("UIWindow with id " + this.id + " showed up");
}
UIWindow.prototype.close = function() {
    PlaySound("clickQuit");
    document.getElementById(this.id).remove();
    if(this.closeAction != null){
        eval(this.closeAction);
    }
    if(this.debug == true) console.log("UIWindow with id " + this.id + " closed");
}
UIWindow.prototype.hide = function() {
    PlaySound("clickQuit");
    document.getElementById(this.id).style.display = "none";
    if(this.closeAction != null){
        eval(this.closeAction);
    }
    if(this.debug == true) console.log("UIWindow with id " + this.id + " hided");
}

UIWindow.prototype.accept = function() {
    if(this.acceptAction != null){
        eval(this.acceptAction);
    }
    if(this.debug == true) console.log("UIWindow with id " + this.id + " accepted");
}

// Cette fonction servira à ajouter des élément selon les règles de l'interface
UIWindow.prototype.addElement = function(type, content, parent) {
    if(parent == null){
        parent = document.getElementById("uiWindowContent-" + this.id);
    }else{
        parent = document.getElementById(parent);
    }
    if(type == null){
        throw "Type is null";
    }

    if(type == "title"){
        var titleDiv = document.createElement("div");
        titleDiv.className = "title";
        titleDiv.id=generateUniqueId();

        if(content != null){
            var titleH = document.createElement("h2");
            titleH.innerHTML = content;
            titleDiv.appendChild(titleH);
        }

        parent.appendChild(titleDiv);

        if(this.debug == true) console.log("Added pre-defined element of type titleDiv with id " + titleDiv.id +" to UIWindow with id " + this.id);

        return titleDiv.id;
    }else if(type == "textBox"){
        var textBoxDiv = document.createElement("div");
        textBoxDiv.className = "textBox";
        textBoxDiv.id=generateUniqueId();
        textBoxDiv.innerHTML = content;

        parent.appendChild(textBoxDiv);

        if(this.debug == true) console.log("Added pre-defined element of type textBoxDiv with id " + textBoxDiv.id +" to UIWindow with id " + this.id);

        return textBoxDiv.id;
    }else if(type == "listContainer"){
        var listContainerDiv = document.createElement("div");
        listContainerDiv.className = "listContainer";
        listContainerDiv.id=generateUniqueId();

        parent.appendChild(listContainerDiv);

        if(this.debug == true) console.log("Added pre-defined element of type listContainerDiv with id " + listContainerDiv.id +" to UIWindow with id " + this.id);

        return listContainerDiv.id;
    }else if(type == "listContainerItem"){
        // Ici content est un objet
        var listContainerItemDiv = document.createElement("div");
        listContainerItemDiv.className = "item";
        listContainerItemDiv.id=generateUniqueId();
        if (content.hasOwnProperty("onClick") && content.onClick != null){
            // On créé l'action
            listContainerItemDiv.onclick = function(){
                eval(content.onClick);
            }
        }

        if(content.hasOwnProperty("icon") && content.icon != null){
            // On créé l'icône
            var listContainerIcon = document.createElement("div");
            listContainerIcon.className = "icon";
            var img = document.createElement("img");

            if(content.icon == "create-icon"){
                img.src = "images/icons/create-icon.png";
                img.alt = "create-icon";
            }else if(content.icon == "world-icon"){
                img.src = "images/icons/world-icon.png";
                img.alt = "world-icon";
            }else{
                throw 'Unknown icon ' + content.icon;
            }

            listContainerItemDiv.addEventListener("mouseenter", function(){
                PlaySound("changeSelection");
            });

            listContainerIcon.appendChild(img);
            listContainerItemDiv.appendChild(listContainerIcon);
        }

        // On créé la description
        var listContainerDescription = document.createElement("div");
        listContainerDescription.className = "description";

        var listContainerItemTitle = document.createElement("h4");
        listContainerItemTitle.innerHTML = content.title;

        var listContainerSpan = document.createElement("span");
        listContainerSpan.innerHTML = content.description;

        listContainerDescription.appendChild(listContainerItemTitle);
        listContainerDescription.appendChild(listContainerSpan);
        listContainerItemDiv.appendChild(listContainerDescription);

        parent.appendChild(listContainerItemDiv);

        if(this.debug == true) console.log("Added pre-defined element of type listContainer with id " + listContainerItemDiv.id +" to UIWindow with id " + this.id);
        return listContainerItemDiv.id;
    }else if(type == "horizontalContainer"){
        var horizontalContainerDiv = document.createElement("div");
        horizontalContainerDiv.className = "horizontalContainer";
        horizontalContainerDiv.id=generateUniqueId();

        parent.appendChild(horizontalContainerDiv);

        if(this.debug == true) console.log("Added pre-defined element of type horizontalContainer with id " + horizontalContainerDiv.id +" to UIWindow with id " + this.id);

        return horizontalContainerDiv.id;
    } else if(type == "presentationImage"){
        var presentationImageDiv = document.createElement("div");
        presentationImageDiv.className = "presentationImage";
        presentationImageDiv.id=generateUniqueId();
        presentationImageDiv.style = "background-image: url('" + content + "')";

        parent.appendChild(presentationImageDiv);

        if(this.debug == true) console.log("Added pre-defined element of type presentationImage with id " + presentationImageDiv.id +" to UIWindow with id " + this.id);

        return presentationImageDiv.id;
    }
}
// Cette fonction servira à ajouter des élément HTML aux attribus personalisés
UIWindow.prototype.addHTMLElement = function(UIElement, parent) {
    if(parent == null){
        parent = document.getElementById("uiWindowContent-" + this.id);
    }else{
        parent = document.getElementById(parent);
    }
    parent.appendChild(UIElement);
    return UIElement.id;
}

function HTMLUIElement(type, attributes, content) {
    var element = document.createElement(type);

    // On vérifie qu'il y a bien des attributs
    if(attributes != null){
        for(var key in attributes){
            element[key] = attributes[key];
        }
    }
    // Pareil pour l'id
    if(!element.hasOwnProperty('id') || element.id == null){
        element.id = generateUniqueId();
    }
    // Et le content
    if(content != null){
        element.innerHTML = content;
    }
    return element;
}

// A insérer peut-être ailleurs
function generateUniqueId(){
    // https://stackoverflow.com/a/1349426
    var length = 6;
    var result = '';
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() *
        charactersLength));
    }
    if(document.getElementById(result)){
        return generateUniqueId();
    }else{
        return result;
    }
}