Skip to content
Snippets Groups Projects
Commit a435785b authored by Sofiane Lasri's avatar Sofiane Lasri
Browse files

Création de l'uiHandler

parent e80c2bb5
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
BrowserAssets/UI/css/window.css
+ 1
− 0
View file @ a435785b
......@@ -59,6 +59,7 @@
.window .content .listContainer .item{
max-height: 3em;
display: flex;
flex-shrink: 0;
flex-direction: row;
padding: .5em;
border-radius: 5px;
......
BrowserAssets/UI/html/window.html 0 → 100644
+ 43
− 0
View file @ a435785b
<div class="window">
<div class="content">
<div class="title">
<h2>Parties en ligne</h2>
</div>
<!--
<div class="textBox">
Blablabla Mr Freeman.
</div>
-->
<span>Choisi ou créé une partie pour pouvoir jouer au jeu.</span>
<div class="listContainer">
<!-- Item à intgérer-->
<div class="item">
<div class="icon">
<img src="images/icons/create-icon.png" alt="create-icon">
</div>
<div class="description">
<h4>Créer une partie</h4>
<span>Les joueurs présents sur ton réseau local pourront te rejoindre. :D</span>
</div>
</div>
<!-- Fin item -->
<!-- Item à intgérer-->
<div class="item">
<div class="icon">
<img src="images/icons/world-icon.png" alt="world-icon">
</div>
<div class="description">
<h4>Partie de CoachFrank007</h4>
<span>3/4 Joueurs - Epreuvre en cours</span>
</div>
</div>
<!-- Fin item -->
</div>
</div>
<div class="actionsBar">
<div class="item">
<span>Rejoindre</span>
</div>
</div>
</div>
\ No newline at end of file
BrowserAssets/UI/js/uiHandler.js 0 → 100644
+ 165
− 0
View file @ a435785b
function UIWindow() {
this.closable = "test";
this.waitAssetsLoading = true;
this.init();
}
UIWindow.prototype.init = function() {
/* Ce code pause problème à cause de son asyncrhonisme
var result;
await fetch("html/window.html").then(response => {
return response.text()
})
.then(data => {
var htmlToInclude = document.createElement("div");
htmlToInclude.id = "uiWindow";
htmlToInclude.style.display = "none";
htmlToInclude.innerHTML = data;
document.body.appendChild(htmlToInclude);
result = htmlToInclude;
console.log(result);
this.elem = result;
});
*/
// Ici on va récréer le code html de la fenêtre
var mainContainer = document.createElement("div");
mainContainer.id = "uiWindow";
mainContainer.className = "window";
mainContainer.style.display = "none";
var contentContainer = document.createElement("div");
contentContainer.className = "content";
contentContainer.id = "uiWindowContent";
var actionContainer = document.createElement("div");
actionContainer.className = "actionsBar";
mainContainer.appendChild(contentContainer);
mainContainer.appendChild(actionContainer);
// Et on l'insère
document.body.appendChild(mainContainer);
this.elem = mainContainer;
}
UIWindow.prototype.show = function() {
document.getElementById("uiWindow").style.display = "flex";
}
// Cette fonction servira à ajouter des élément selon les règles de l'interface
UIWindow.prototype.addElement = function(type, content, parent) {
if(parent == ""){
parent = document.getElementById("uiWindowContent");
}else{
parent = document.getElementById(parent);
}
if(type == "title"){
var titleDiv = document.createElement("div");
titleDiv.className = "title";
titleDiv.id=generateUniqueId();
var titleH = document.createElement("h2");
titleH.innerHTML = content;
titleDiv.appendChild(titleH);
parent.appendChild(titleDiv);
return titleDiv.id;
}else if(type == "textBox"){
var textBoxDiv = document.createElement("div");
textBoxDiv.className = "textBox";
textBoxDiv.id=generateUniqueId();
textBoxDiv.innerHTML = content;
parent.appendChild(textBoxDiv);
return textBoxDiv.id;
}else if(type == "listContainer"){
var listContainerDiv = document.createElement("div");
listContainerDiv.className = "listContainer";
listContainerDiv.id=generateUniqueId();
parent.appendChild(listContainerDiv);
return listContainerDiv.id;
}else if(type == "listContainerItem"){
// Ici content est un objet
var listContainerItemDiv = document.createElement("div");
listContainerItemDiv.className = "item";
listContainerItemDiv.id=generateUniqueId();
// On créé l'icône
var listContainerIcon = document.createElement("div");
listContainerIcon.className = "icon";
var img = document.createElement("img");
if(content.icon != ""){
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";
}
}
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);
return listContainerItemDiv.id;
}
}
// Cette fonction servira à ajouter des élément HTML aux attribus personalisés
UIWindow.prototype.addHTMLElement = function(UIElement, parent) {
if(parent == ""){
parent = document.getElementById("uiWindowContent");
}else{
parent = document.getElementById(parent);
}
parent.appendChild(UIElement);
return UIElement.id;
}
function HTMLUIElement(type, attributes, content) {
var element = document.createElement(type);
for(var key in attributes){
element[key] = attributes[key];
}
if(element.id == ""){
element.id = generateUniqueId();
}
if(content != ""){
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;
}
}
\ No newline at end of file
BrowserAssets/UI/mainMenu.html
+ 34
− 98
View file @ a435785b
......@@ -27,106 +27,42 @@
<span>Quitter</span>
</div>
</div>
<div class="window">
<div class="content">
<div class="title">
<h2>Parties en ligne</h2>
</div>
<!--
<div class="textBox">
Blablabla Mr Freeman.
</div>
-->
<span>Choisi ou créé une partie pour pouvoir jouer au jeu.</span>
<div class="listContainer">
<!-- Item à intgérer-->
<div class="item">
<div class="icon">
<img src="images/icons/create-icon.png" alt="create-icon">
</div>
<div class="description">
<h4>Créer une partie</h4>
<span>Les joueurs présents sur ton réseau local pourront te rejoindre. :D</span>
</div>
</div>
<!-- Fin item -->
<!-- Item à intgérer-->
<div class="item">
<div class="icon">
<img src="images/icons/world-icon.png" alt="world-icon">
</div>
<div class="description">
<h4>Partie de CoachFrank007</h4>
<span>3/4 Joueurs - Epreuvre en cours</span>
</div>
</div>
<!-- Fin item -->
<!-- Item à intgérer-->
<div class="item">
<div class="icon">
<img src="images/icons/world-icon.png" alt="world-icon">
</div>
<div class="description">
<h4>Partie de CoachFrank007</h4>
<span>3/4 Joueurs - Epreuvre en cours</span>
</div>
</div>
<!-- Fin item -->
<!-- Item à intgérer-->
<div class="item">
<div class="icon">
<img src="images/icons/world-icon.png" alt="world-icon">
</div>
<div class="description">
<h4>Partie de CoachFrank007</h4>
<span>3/4 Joueurs - Epreuvre en cours</span>
</div>
</div>
<!-- Fin item -->
<!-- Item à intgérer-->
<div class="item">
<div class="icon">
<img src="images/icons/world-icon.png" alt="world-icon">
</div>
<div class="description">
<h4>Partie de CoachFrank007</h4>
<span>3/4 Joueurs - Epreuvre en cours</span>
</div>
</div>
<!-- Fin item -->
<!-- Item à intgérer-->
<div class="item">
<div class="icon">
<img src="images/icons/world-icon.png" alt="world-icon">
</div>
<div class="description">
<h4>Partie de CoachFrank007</h4>
<span>3/4 Joueurs - Epreuvre en cours</span>
</div>
</div>
<!-- Fin item -->
<!-- Item à intgérer-->
<div class="item">
<div class="icon">
<img src="images/icons/world-icon.png" alt="world-icon">
</div>
<div class="description">
<h4>Partie de CoachFrank007</h4>
<span>3/4 Joueurs - Epreuvre en cours</span>
</div>
</div>
<!-- Fin item -->
</div>
</div>
<div class="actionsBar">
<div class="item">
<span>Rejoindre</span>
</div>
</div>
</div>
<script src="js/uiHandler.js" type="text/javascript"></script>
<script type="text/javascript">
// On créé la fenêtre
var uiWindow = new UIWindow();
// On défini quelques paramètres
uiWindow.closable = "true";
uiWindow.waitAssetsLoading = false;
// On ajoute les éléments à la fenêtre
// Création d'élément selon les normes de la charte graphique
uiWindow.addElement("title", "Parties en ligne", "");
// Création d'élément en HTML
uiWindow.addHTMLElement(new HTMLUIElement("h1", {
style: "color: #77bfda;",
id: "title"
}, "Parties en ligne"), "");
uiWindow.addElement("textBox", "Ceci est du texte. :D", "");
var listContainer = uiWindow.addElement("listContainer", "", "");
uiWindow.addElement("listContainerItem", {
icon: "create-icon",
title: "Créer une partie",
description: "Les joueurs présents sur ton réseau local pourront te rejoindre. :D"
}, listContainer);
uiWindow.addElement("listContainerItem", {
icon: "world-icon",
title: "Partie de CoachFrank007",
description: "3/4 Joueurs - Epreuvre en cours"
}, listContainer);
// Et on l'affiche
uiWindow.show();
</script>
</body>
</html>
\ No newline at end of file
GPUCache/data_0 0 → 100644
+ 0
− 0
View file @ a435785b
File added
GPUCache/data_1 0 → 100644
+ 0
− 0
View file @ a435785b
File added
GPUCache/data_2 0 → 100644
+ 0
− 0
View file @ a435785b
File added
GPUCache/data_3 0 → 100644
+ 0
− 0
View file @ a435785b
File added
GPUCache/index 0 → 100644
+ 0
− 0
View file @ a435785b
File added
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment