From fb726f61c3d70d231030ca9e86a2aab1328aabf5 Mon Sep 17 00:00:00 2001
From: JonathanMM <jonathanmm@free.fr>
Date: Sat, 29 Jan 2022 15:02:15 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20d'un=20g=C3=A9n=C3=A9rateur=20d'item?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/jeu.css           | 11 +++++++++++
 ts/configurationPanel.ts | 32 ++++++++++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/public/jeu.css b/public/jeu.css
index 3399c14..bbf7855 100644
--- a/public/jeu.css
+++ b/public/jeu.css
@@ -270,3 +270,14 @@ h1 {
     width: 90%;
   }
 }
+
+.config-panel #panel-fenetre-contenu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.config-item {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/ts/configurationPanel.ts b/ts/configurationPanel.ts
index bea5f31..f2f80c8 100644
--- a/ts/configurationPanel.ts
+++ b/ts/configurationPanel.ts
@@ -20,10 +20,38 @@ export default class ConfigurationPanel {
 
   public afficher(): void {
     let titre = "Configuration";
-    let contenu = "";
+    let contenu = document.createElement("div");
+    contenu.appendChild(
+      this.genererConfigItem("Volume du son (si activé)", {
+        1: "Faible",
+        2: "Normal",
+        3: "Fort",
+      })
+    );
 
-    this._panelManager.setContenu(titre, contenu);
+    this._panelManager.setContenu(titre, contenu.innerHTML);
     this._panelManager.setClasses(["config-panel"]);
     this._panelManager.afficherPanel();
   }
+
+  private genererConfigItem(nomConfig: string, options: { [value: number]: string }): HTMLElement {
+    let div = document.createElement("div");
+    div.className = "config-item";
+
+    let label = document.createElement("label");
+    label.innerText = nomConfig;
+    div.appendChild(label);
+
+    let select = document.createElement("select");
+    for (let optionKey in options) {
+      let optionLabel = options[optionKey];
+      let optionElement = document.createElement("option");
+      optionElement.value = optionKey;
+      optionElement.innerText = optionLabel;
+      select.appendChild(optionElement);
+    }
+    div.appendChild(select);
+
+    return div;
+  }
 }