code modulaire

2026-01-09 23:58:57 +01:00
parent 581085b26b
commit 60a31051e3
5 changed files with 223 additions and 222 deletions
@@ -0,0 +1,113 @@
+export class fenetre {
+    constructor(width = 320, height = 220, title = "Window") {
+        this.main = document.createElement("div");
+        this.main.style.width = width + "px";
+        this.main.style.height = height + "px";
+        this.main.style.position = "fixed";
+        this.main.style.top = "50%";
+        this.main.style.left = "50%";
+        this.main.style.transform = "translate(-50%, -50%)";
+        this.main.style.backgroundColor = "#000";
+        this.main.style.border = "2px ridge white";
+        this.main.style.color = "white";
+        this.main.style.zIndex = "100";
+        this.main.style.display = "none";
+
+        // Header
+        this.header = document.createElement("div");
+        this.header.innerText = title;
+        this.header.style.padding = "6px";
+        this.header.style.background = "#222";
+        this.header.style.cursor = "move";
+
+        // Close
+        this.closeBtn = document.createElement("span");
+        this.closeBtn.innerText = "✖";
+        this.closeBtn.style.float = "right";
+        this.closeBtn.style.cursor = "pointer";
+        this.closeBtn.onclick = () => this.hide();
+
+        this.header.appendChild(this.closeBtn);
+
+        // Body
+        this.body = document.createElement("div");
+        this.body.style.padding = "10px";
+
+        this.main.append(this.header, this.body);
+        document.body.appendChild(this.main);
+    }
+
+    show() {
+        this.main.style.display = "block";
+    }
+
+    hide() {
+        this.main.style.display = "none";
+    }
+}
+
+export class LoginWindow extends fenetre {
+    constructor() {
+        super(320, 240, "Connexion");
+
+        this.mode = "login"; // login | register
+
+        this.username = document.createElement("input");
+        this.username.placeholder = "Username";
+
+        this.password = document.createElement("input");
+        this.password.type = "password";
+        this.password.placeholder = "Password";
+
+        this.submit = document.createElement("button");
+        this.submit.innerText = "Se connecter";
+
+        this.switch = document.createElement("button");
+        this.switch.innerText = "S'inscrire";
+
+        this.message = document.createElement("div");
+        this.message.style.fontSize = "0.8em";
+
+        this.body.append(
+            this.username,
+            this.password,
+            this.submit,
+            this.switch,
+            this.message
+        );
+
+        this.applyStyles();
+        this.bindEvents();
+    }
+
+    applyStyles() {
+        this.body.style.display = "flex";
+        this.body.style.flexDirection = "column";
+        this.body.style.gap = "8px";
+    }
+
+    bindEvents() {
+        this.switch.onclick = () => this.toggleMode();
+
+        this.submit.onclick = () => {
+            this.message.innerText =
+                this.mode === "login"
+                    ? "Tentative de connexion..."
+                    : "Tentative d'inscription...";
+        };
+    }
+
+    toggleMode() {
+        if (this.mode === "login") {
+            this.mode = "register";
+            this.header.firstChild.textContent = "Inscription";
+            this.submit.innerText = "S'inscrire";
+            this.switch.innerText = "Se connecter";
+        } else {
+            this.mode = "login";
+            this.header.firstChild.textContent = "Connexion";
+            this.submit.innerText = "Se connecter";
+            this.switch.innerText = "S'inscrire";
+        }
+    }
+}