diff --git a/Transcendence/srcs/frontend/src/test/glowing_button.css b/Transcendence/srcs/frontend/src/test/glowing_button.css new file mode 100644 index 0000000..7dba571 --- /dev/null +++ b/Transcendence/srcs/frontend/src/test/glowing_button.css @@ -0,0 +1,43 @@ + +/* ////////////////////////////////////////// */ +.box { + background: #142d4a; + height: 200px; + aspect-ratio: 1/1; + border-radius: 10px; + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +@property --deg { + syntax: ''; + inherits: true; + initial-value: 0deg; +} + +.box::before, +.box::after { + content: ""; + position: absolute; + height: 100%; + width: 100%; + background: conic-gradient( + from var(--deg) at center, + #00c3ff, + #4d0199, + #6300c6, + #009dcd + ); + border-radius: inherit; + z-index: -2; + padding: 2px; + animation: autoRotate 2s linear infinite; +} +.box::after { + filter: blur(10px); +} +@keyframes autoRotate { + to{ --deg: 360deg; } +} \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/test/index.html b/Transcendence/srcs/frontend/src/test/index.html index e73372a..cf5349b 100644 --- a/Transcendence/srcs/frontend/src/test/index.html +++ b/Transcendence/srcs/frontend/src/test/index.html @@ -1,14 +1,17 @@ + - + - + +
+
\ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/test/index.js b/Transcendence/srcs/frontend/src/test/script.js similarity index 95% rename from Transcendence/srcs/frontend/src/test/index.js rename to Transcendence/srcs/frontend/src/test/script.js index a2cf621..0ef8934 100644 --- a/Transcendence/srcs/frontend/src/test/index.js +++ b/Transcendence/srcs/frontend/src/test/script.js @@ -10,7 +10,7 @@ let b = updateElement({ alignItems: 'center' } }); -new Sidebar(b); +new Sidebar(); // new LoginSidebar(); diff --git a/Transcendence/srcs/frontend/src/test/sidebar.js b/Transcendence/srcs/frontend/src/test/sidebar.js index bdfc57f..d0c480c 100644 --- a/Transcendence/srcs/frontend/src/test/sidebar.js +++ b/Transcendence/srcs/frontend/src/test/sidebar.js @@ -1,59 +1,72 @@ import { updateElement } from "./tools.js"; +import { windowRegistry } from '../core/windows.js'; +import { LoginWindow } from '../windows/login.js'; +import { LogoutWindow } from '../windows/logout.js'; +import { GlobalChat } from '../windows/global_chat.js'; +import { AvatarWindow } from '../windows/avatar.js'; +import { FriendsWindow } from '../windows/friends.js'; +import { GameRoomWindow } from '../windows/game_room.js'; +import { StatsWindow } from '../windows/stats.js'; + export class Sidebar { +/* CONSTURCTOR */ constructor(parent = document.body) { this.parent = parent; this.stateopen = 'closed'; // this.state = this.checkIfLoggedIn() ? "loggedOut" : "loggedIn"; this.obj = updateElement({ - parent: parent + parent: parent, + id: `login-wrapper`, + classList: [ 'login-wrapper' ], }) this.createAllButtons(); - // this.render(this.state, this.stateopen); - } - - checkIfLoggedIn() { - return true; - } - - render(stateopen) { - this.obj.textContent = ''; - if (this.stateopen === 'open') { - // Show the menu buttons - this.menu_buttons.forEach(btn => this.obj.appendChild(btn)); - } else { - // Show only main login button - this.obj.appendChild(this.main_button); - } + + this.handleClickOutside = (event) => { + if (this.stateopen === 'open' && !this.obj.contains(event.target)) { + this.toggle(); + } + }; } +/* toogle menu open / closed */ toggle() { - this.stateopen = (this.stateopen === 'open') ? 'closed' : 'open'; - console.log(this.stateopen) - this.render(this.stateopen); - } - - handleClickOutside = (event) => { - if (this.stateopen === 'open' && !this.obj.contains(event.target)) { - this.toggle(); // close the menu - } + console.log(this.stateopen); + if (this.stateopen === 'open') { + this.main_button.style.display = 'none'; + this.menu_buttons.forEach(b => b.style.display = 'block'); + // ensure only ONE listener exists + document.removeEventListener('click', this.handleClickOutside); + document.addEventListener('click', this.handleClickOutside); + + } + else { + this.menu_buttons.forEach(b => b.style.display = 'none'); + this.main_button.style.display = 'block'; + document.removeEventListener('click', this.handleClickOutside); + } } +/* create all element, append to div */ createAllButtons() { + // not-logged closed button this.main_button = updateElement({ + id: `button-main`, parent: this.obj, - textContent: 'button', - classList: [ 'loggin-button' ], + textContent: 'LOGIN', + classList: [ 'login-button' ], }) - this.main_button.addEventListener('click', () => { + this.obj.append(this.main_button); + this.main_button.addEventListener('click', (e) => { + e.stopPropagation(); this.toggle(); }) - - - const items = ['friends', 'chat', 'rooms', 'settings', 'logout']; + + // menu buttons + const items = ['friends', 'chat', 'rooms', 'settings', 'log','logout']; this.menu_buttons = []; items.forEach(name => { @@ -61,11 +74,20 @@ export class Sidebar { id: `button-${name}`, parent: this.obj, textContent: name, - classList: ['item'], + classList: ['login-button'], additionalStyles: { display: 'none'} }) this.menu_buttons.push(this[name]); + this.obj.append(this[name]); }) + this.loginWindow = new LoginWindow(); + this.obj.append(this.loginWindow.form); + this.loginWindow.form.style.display = 'none'; + this['log'].addEventListener('click', () => { + this.menu_buttons.forEach(b => b.style.display = 'none'); + this.loginWindow.form.style.display = 'block'; + }) + // menu elements } } \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/test/style.css b/Transcendence/srcs/frontend/src/test/style.css index 7f1b742..bbea3fb 100644 --- a/Transcendence/srcs/frontend/src/test/style.css +++ b/Transcendence/srcs/frontend/src/test/style.css @@ -23,6 +23,7 @@ body { /* justify-content: center; */ /* align-items: center; */ height: 100vh; + position: relative; } .container { @@ -91,7 +92,7 @@ body { } /*//////////////////////////////////////////////////////////*/ -.side-bar { +.login-wrapper { display: flex; flex-direction: column; gap: 7px; @@ -113,4 +114,25 @@ body { height: 35px; min-width: 50px; +} +/*//////////////////////////////////////////////////////////*/ +/* LOGIN */ + +.login-button { + width: 150px; + height: 150px; + background-color: #fb7185; + padding: 1em; + font-weight: 700; + color: var(--clr-light); + text-align: center; + border: 10px solid var(--clr-accent); + border-radius: 10px; + + margin-left: -50px + +} + +.login-element { + } \ No newline at end of file