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; } }