Master/Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #3 from OlaketalAmigo/hexplor_branch

Browse Source 
Modulârisation du fichier app.js et ajout de méthode pour inscription et connexion
This commit is contained in:
H3XploR
2026-01-10 00:18:49 +01:00
committed by GitHub
parent c054ad51d9 4130e55f74
commit f00152523f
5 changed files with 244 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
srcs/frontend/src/app.js
+9 -129
View File
@@ -1,138 +1,13 @@
import {Element, MenuElement} from "./element.js";
import {Grid} from "./grid.js";
import {fenetre, LoginWindow} from "./windows.js";
function direBonjour() {
alert("clicked !");
}
class Element {
constructor(id) {
this.element = document.getElementById(id);
this.element.addEventListener("mouseenter", () => {
console.log("La souris est sur le bouton " + id + " !");
});
this.element.addEventListener("mouseleave", () => {
console.log("La souris a quitté le bouton " + id + ".");
});
}
}
class MenuElement extends Element {
constructor(id) {
super(id);
this.element.addEventListener("click", () => {
console.log("Le bouton " + id + " a été cliqué !");
});
this.element.addEventListener("mouseenter", () => {
this.element.style.backgroundColor = "lightgrey";
this.element.style.fontSize = "1.2em";
this.element.style.cursor = "move";
});
this.element.addEventListener("mouseleave", () => {
this.element.style.backgroundColor = "";
this.element.style.fontSize = "";
this.element.style.cursor = "";
this.element.getAnimations().forEach(animation => animation.cancel());
});
}
}
class Grid {
constructor(color = '#143a0fff', zIndex = 1, gridSize = 25, speed = 0.35, sens = "normal") {
// Initialisation des propriétés de l'instance
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.offset = 0;
this.gridSize = gridSize;
this.speed = speed;
this.color = color;
// Configuration du style
document.body.appendChild(this.canvas);
this.canvas.style.position = 'fixed';
this.canvas.style.top = '0';
this.canvas.style.left = '0';
this.canvas.style.zIndex = zIndex;
this.canvas.style.pointerEvents = 'none'; // Pour ne pas bloquer les clics sur les boutons
// Gestion du redimensionnement
window.addEventListener('resize', () => this.resize());
this.resize();
this.draw(sens);
}
resize() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
}
draw(sens = "normal") {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.strokeStyle = this.color;
this.ctx.lineWidth = 1;
// Mise à jour de l'offset
this.offset = (this.offset + this.speed) % this.gridSize;
if (sens === "normal") {
// Lignes verticales
for (let x = this.offset; x < this.canvas.width; x += this.gridSize) {
this.ctx.beginPath();
this.ctx.moveTo(x, 0);
this.ctx.lineTo(x, this.canvas.height);
this.ctx.stroke();
}
// Lignes horizontales
for (let y = this.offset; y < this.canvas.height; y += this.gridSize) {
this.ctx.beginPath();
this.ctx.moveTo(0, y);
this.ctx.lineTo(this.canvas.width, y);
this.ctx.stroke();
}
}
//pareillement pour le sens reverse
else if (sens === "reverse") {
// Lignes verticales
for (let x = this.gridSize - this.offset; x < this.canvas.width; x += this.gridSize) {
this.ctx.beginPath();
this.ctx.moveTo(x, 0);
this.ctx.lineTo(x, this.canvas.height);
this.ctx.stroke();
}
// Lignes horizontales
for (let y = this.gridSize - this.offset; y < this.canvas.height; y += this.gridSize) {
this.ctx.beginPath();
this.ctx.moveTo(0, y);
this.ctx.lineTo(this.canvas.width, y);
this.ctx.stroke();
}
}
// Appel récursif pour l'animation
requestAnimationFrame(() => this.draw(sens));
}
}
class fenetre{
constructor(width = 300, height = 150) {
this.width = width;
this.height = height;
this.main = document.createElement("div");
this.main.style.width = this.width + "px";
this.main.style.height = this.height + "px";
this.main.style.position = "absolute";
this.main.style.top = "50%";
this.main.style.left = "50%";
this.main.style.transform = "translate(-50%, -50%)";
this.main.style.backgroundColor = '#000000ff';
this.main.style.border = "1.4mm ridge white";
this.body = document.createElement("div");
this.body.style.width = "50%";
this.body.style.height = "50%";
this.body.style.backgroundColor = '#faeaea';
document.body.appendChild(this.main);
this.main.appendChild(this.body);
}
}
const menuElement = new Element("menu");
const loginElement = new MenuElement("login");
@@ -145,4 +20,9 @@ const gridgreen = new Grid('#143a0fff', -1, 25, 0.12, "normal");
const gridReverseRed = new Grid('#3a0f0f75', -1, 12.5, 0.09, "reverse");
//Ajouter les fenetres
const loginWindow = new fenetre();
const test = new fenetre();
const loginWindow = new LoginWindow();
document.getElementById("login").addEventListener("click", () => {
loginWindow.show();
});
srcs/frontend/src/element.js
+31
View File
@@ -0,0 +1,31 @@
export class Element {
constructor(id) {
this.element = document.getElementById(id);
this.element.addEventListener("mouseenter", () => {
console.log("La souris est sur le bouton " + id + " !");
});
this.element.addEventListener("mouseleave", () => {
console.log("La souris a quitté le bouton " + id + ".");
});
}
}
export class MenuElement extends Element {
constructor(id) {
super(id);
this.element.addEventListener("click", () => {
console.log("Le bouton " + id + " a été cliqué !");
});
this.element.addEventListener("mouseenter", () => {
this.element.style.backgroundColor = "lightgrey";
this.element.style.fontSize = "1.2em";
this.element.style.cursor = "move";
});
this.element.addEventListener("mouseleave", () => {
this.element.style.backgroundColor = "";
this.element.style.fontSize = "";
this.element.style.cursor = "";
this.element.getAnimations().forEach(animation => animation.cancel());
});
}
}
srcs/frontend/src/grid.js
+75
View File
@@ -0,0 +1,75 @@
export class Grid {
constructor(color = '#143a0fff', zIndex = 1, gridSize = 25, speed = 0.35, sens = "normal") {
// Initialisation des propriétés de l'instance
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.offset = 0;
this.gridSize = gridSize;
this.speed = speed;
this.color = color;
// Configuration du style
document.body.appendChild(this.canvas);
this.canvas.style.position = 'fixed';
this.canvas.style.top = '0';
this.canvas.style.left = '0';
this.canvas.style.zIndex = zIndex;
this.canvas.style.pointerEvents = 'none'; // Pour ne pas bloquer les clics sur les boutons
// Gestion du redimensionnement
window.addEventListener('resize', () => this.resize());
this.resize();
this.draw(sens);
}
resize() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
}
draw(sens = "normal") {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.strokeStyle = this.color;
this.ctx.lineWidth = 1;
// Mise à jour de l'offset
this.offset = (this.offset + this.speed) % this.gridSize;
if (sens === "normal") {
// Lignes verticales
for (let x = this.offset; x < this.canvas.width; x += this.gridSize) {
this.ctx.beginPath();
this.ctx.moveTo(x, 0);
this.ctx.lineTo(x, this.canvas.height);
this.ctx.stroke();
}
// Lignes horizontales
for (let y = this.offset; y < this.canvas.height; y += this.gridSize) {
this.ctx.beginPath();
this.ctx.moveTo(0, y);
this.ctx.lineTo(this.canvas.width, y);
this.ctx.stroke();
}
}
//pareillement pour le sens reverse
else if (sens === "reverse") {
// Lignes verticales
for (let x = this.gridSize - this.offset; x < this.canvas.width; x += this.gridSize) {
this.ctx.beginPath();
this.ctx.moveTo(x, 0);
this.ctx.lineTo(x, this.canvas.height);
this.ctx.stroke();
}
// Lignes horizontales
for (let y = this.gridSize - this.offset; y < this.canvas.height; y += this.gridSize) {
this.ctx.beginPath();
this.ctx.moveTo(0, y);
this.ctx.lineTo(this.canvas.width, y);
this.ctx.stroke();
}
}
// Appel récursif pour l'animation
requestAnimationFrame(() => this.draw(sens));
}
}
srcs/frontend/src/index.html
+3 -6
View File
@@ -14,13 +14,10 @@
<li><button id="accueil">Accueil</button></li>
<li><button id="explorer">Explorer</button></li>
<li><button id="registered">Enregistré</button></li>
<svg id ="login" version="1.1" width="15" height="15" >
<circle cx="50%" cy="30%" r="5" fill="black" />
<circle cx="50%" cy="100%" r="7" fill="black" />
</svg>
<li><button id="login">Login</button></li>
</menu>
<button onclick="direBonjour()" style="position: absolute; top: 20%; left: 50%; z-index: 1;">Click me !</button>
<button onclick="direBonjour()" style="position: absolute; top: 20%; left: 50%; z-index: 1;">Dont click !</button>
</body>
<script src="app.js"></script>
<script type= "module" src="app.js"></script>
</html>
srcs/frontend/src/windows.js
+126
View File
@@ -0,0 +1,126 @@
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";
}
connexion(){
console.log("methode connexion lancée");
}
inscription(){
console.log("methode inscription lancée");
}
bindEvents() {
this.switch.onclick = () => this.toggleMode();
this.submit.onclick = () => {
this.message.innerText = this.mode === "login"
? "Tentative de connexion..."
: "Tentative d'inscription...";
if (this.mode === "login"){
this.connexion();
}
else {
this.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";
}
}
}