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

^^._, work in progress, small changes

Browse Source
This commit is contained in:
kalips003
2026-03-31 05:35:04 +02:00
parent b9c4c817f8
commit e1573ba9f0
5 changed files with 127 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Transcendence/srcs/frontend/src/test/glowing_button.css
+43
View File
@@ -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: '<angle>';
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; }
}
Transcendence/srcs/frontend/src/test/index.html
+5 -2
View File
@@ -1,14 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<link rel="stylesheet" href="../game2/game.css" />
<link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="./style.css" />
<script type="module" src="./index.js"></script> <script type="module" src="./script.js"></script>
</head> </head>
<body> <body style="background-color: black; display: flex; justify-content: center; align-items: center;">
<!-- <!--
<div class="container"> <div class="container">
<div class="item item-1">Item 1</div> <div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div> <div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div> <div class="item item-3">Item 3</div>
</div> --> </div> -->
<div></div>
<div class="box"></div>
</body> </body>
</html> </html>
Transcendence/srcs/frontend/src/test/index.js → Transcendence/srcs/frontend/src/test/script.js
+1 -1
View File
@@ -10,7 +10,7 @@ let b = updateElement({
alignItems: 'center' alignItems: 'center'
} }
}); });
new Sidebar(b); new Sidebar();
// new LoginSidebar(); // new LoginSidebar();
Transcendence/srcs/frontend/src/test/sidebar.js
+55 -33
View File
@@ -1,59 +1,72 @@
import { updateElement } from "./tools.js"; 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 { export class Sidebar {
/* CONSTURCTOR */
constructor(parent = document.body) { constructor(parent = document.body) {
this.parent = parent; this.parent = parent;
this.stateopen = 'closed'; this.stateopen = 'closed';
// this.state = this.checkIfLoggedIn() ? "loggedOut" : "loggedIn"; // this.state = this.checkIfLoggedIn() ? "loggedOut" : "loggedIn";
this.obj = updateElement({ this.obj = updateElement({
parent: parent parent: parent,
id: `login-wrapper`,
classList: [ 'login-wrapper' ],
}) })
this.createAllButtons(); this.createAllButtons();
// this.render(this.state, this.stateopen);
} this.handleClickOutside = (event) => {
if (this.stateopen === 'open' && !this.obj.contains(event.target)) {
checkIfLoggedIn() { this.toggle();
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);
}
} }
/* toogle menu open / closed */
toggle() { toggle() {
this.stateopen = (this.stateopen === 'open') ? 'closed' : 'open'; this.stateopen = (this.stateopen === 'open') ? 'closed' : 'open';
console.log(this.stateopen) console.log(this.stateopen);
this.render(this.stateopen); if (this.stateopen === 'open') {
} this.main_button.style.display = 'none';
this.menu_buttons.forEach(b => b.style.display = 'block');
handleClickOutside = (event) => { // ensure only ONE listener exists
if (this.stateopen === 'open' && !this.obj.contains(event.target)) { document.removeEventListener('click', this.handleClickOutside);
this.toggle(); // close the menu 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() { createAllButtons() {
// not-logged closed button
this.main_button = updateElement({ this.main_button = updateElement({
id: `button-main`,
parent: this.obj, parent: this.obj,
textContent: 'button', textContent: 'LOGIN',
classList: [ 'loggin-button' ], classList: [ 'login-button' ],
}) })
this.main_button.addEventListener('click', () => { this.obj.append(this.main_button);
this.main_button.addEventListener('click', (e) => {
e.stopPropagation();
this.toggle(); this.toggle();
}) })
// menu buttons
const items = ['friends', 'chat', 'rooms', 'settings', 'logout']; const items = ['friends', 'chat', 'rooms', 'settings', 'log','logout'];
this.menu_buttons = []; this.menu_buttons = [];
items.forEach(name => { items.forEach(name => {
@@ -61,11 +74,20 @@ export class Sidebar {
id: `button-${name}`, id: `button-${name}`,
parent: this.obj, parent: this.obj,
textContent: name, textContent: name,
classList: ['item'], classList: ['login-button'],
additionalStyles: { display: 'none'} additionalStyles: { display: 'none'}
}) })
this.menu_buttons.push(this[name]); 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
} }
} }
Transcendence/srcs/frontend/src/test/style.css
+23 -1
View File
@@ -23,6 +23,7 @@ body {
/* justify-content: center; */ /* justify-content: center; */
/* align-items: center; */ /* align-items: center; */
height: 100vh; height: 100vh;
position: relative;
} }
.container { .container {
@@ -91,7 +92,7 @@ body {
} }
/*//////////////////////////////////////////////////////////*/ /*//////////////////////////////////////////////////////////*/
.side-bar { .login-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 7px; gap: 7px;
@@ -113,4 +114,25 @@ body {
height: 35px; height: 35px;
min-width: 50px; 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 {
} }