From b9c4c817f82ea0f9811279ac721e84e0a54afb4d Mon Sep 17 00:00:00 2001 From: kalips003 Date: Mon, 30 Mar 2026 22:33:13 +0200 Subject: [PATCH] ^^._, work in progress, small changes --- Transcendence/srcs/frontend/src/index.css | 45 ++++++++++++++- Transcendence/srcs/frontend/src/index.html | 9 ++- Transcendence/srcs/frontend/src/index.js | 35 ++++++++++-- Transcendence/srcs/frontend/src/tools.js | 32 +++++++++++ .../srcs/frontend/src/trans/index2.html | 7 +++ .../srcs/frontend/src/trans/script.js | 57 +++++++++++++++++++ .../srcs/frontend/src/trans/style.css | 51 +++++++++++++++++ 7 files changed, 224 insertions(+), 12 deletions(-) create mode 100644 Transcendence/srcs/frontend/src/tools.js create mode 100644 Transcendence/srcs/frontend/src/trans/script.js create mode 100644 Transcendence/srcs/frontend/src/trans/style.css diff --git a/Transcendence/srcs/frontend/src/index.css b/Transcendence/srcs/frontend/src/index.css index 789dc92..5ce3ece 100644 --- a/Transcendence/srcs/frontend/src/index.css +++ b/Transcendence/srcs/frontend/src/index.css @@ -43,8 +43,13 @@ body { .container-1 { display: flex; + justify-content: center; + align-items: center; + width: 100%; margin: 5px; + position: relative; + min-height: 200px; } /* ///////////////////////////////////////////////////////// */ @@ -75,17 +80,55 @@ body { color: black; } +/* ///////////////////////////////////////////////////////// */ .button-trans { +/* SIZE */ position: absolute; left: 50%; transform: translateX(-50%); + + width: 500px; + height: 200px; + +/* TEXT */ + font-family: "Roboto"; + font-size: 62px; + letter-spacing: -10px; + display: flex; + align-items: center; + justify-content: center; + +/* Background */ + background-image: url("./assets/background.png"); + background-position: center; + background-repeat: no-repeat; + background-size: 150%; +/* Borders */ + border-radius: 20px; + border-radius: 20px; + border: 5px solid transparent; /* keep space for the shadow */ + background-clip: padding-box; + /* metallic effect */ + box-shadow: + 0 0 0 5px #c0c0c0 inset, /* inner shine */ + 0 0 0 2px rgba(255,255,255,0.3) inset; /* subtle highlight */ + +/* OTHER */ + cursor: pointer; + transition: transform 0.3s ease, box-shadow 0.3s ease; } + .button-trans:hover { - + transform: translateX(-50%) scale(1.02); + box-shadow: + 0 0 20px 5px #fff inset, + 0 0 20px 5px rgba(255,255,255,0.3) inset; } +/* ///////////////////////////////////////////////////////// */ .button-test { margin-right: auto; + margin-left: 20px; } /* ///////////////////////////////////////////////////////// */ diff --git a/Transcendence/srcs/frontend/src/index.html b/Transcendence/srcs/frontend/src/index.html index 5273c3e..b01b60c 100644 --- a/Transcendence/srcs/frontend/src/index.html +++ b/Transcendence/srcs/frontend/src/index.html @@ -7,9 +7,8 @@
-
place-1
-
place-2
-
+
TEST
+
TRANSCENDENCE
@@ -29,9 +28,9 @@
-
-
diff --git a/Transcendence/srcs/frontend/src/index.js b/Transcendence/srcs/frontend/src/index.js index 277bf92..95a6506 100644 --- a/Transcendence/srcs/frontend/src/index.js +++ b/Transcendence/srcs/frontend/src/index.js @@ -1,4 +1,5 @@ import { updateElement } from "./test/tools.js"; +import { colorizeText } from "./tools.js"; // //////////////////////////////////////////] let div2 = document.createElement('div') @@ -15,12 +16,7 @@ button2.textContent = 'tetris' button2.addEventListener('click', () => { window.location.href = './tetris/tetris.html'; }) -let button3 = document.createElement('button') -div2.append(button3) -button3.textContent = 'transcendance' -button3.addEventListener('click', () => { - window.location.href = './trans/index2.html'; -}) + let button4 = document.createElement('button') div2.append(button4) button4.textContent = 'test' @@ -29,3 +25,30 @@ button4.addEventListener('click', () => { }) let img = document.getElementById('wiskas'); img.before(div2) + +// apply multicolor to .multicolor +colorizeText(); + + +/* ///////////////////////////////////////////////////////// */ +// make transcendence button move via: .button-trans +function updateButtonTranscendence(move) { + + const btn = document.querySelector('.button-trans'); + btn.addEventListener('mousemove', e => { + const rect = btn.getBoundingClientRect(); + const x = ((e.clientX - rect.left) / rect.width - 0.5) * move; + const y = ((e.clientY - rect.top) / rect.height - 0.5) * move; + btn.style.backgroundPosition = `calc(50% + ${x}px) calc(50% + ${y}px)`; + }); + + btn.addEventListener('mouseleave', () => { + btn.style.backgroundPosition = 'center'; + }); + + btn.addEventListener('click', () => { + window.location.href = './trans/index2.html'; + }); +} +/* ///////////////////////////////////////////////////////// */ +updateButtonTranscendence(100); \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/tools.js b/Transcendence/srcs/frontend/src/tools.js new file mode 100644 index 0000000..55ea037 --- /dev/null +++ b/Transcendence/srcs/frontend/src/tools.js @@ -0,0 +1,32 @@ +// render in color the text of all .multicolor +export function colorizeText() { + + const elements = document.querySelectorAll(".multicolor"); + + const colorizeText = (el) => { + const text = el.textContent; + el.innerHTML = ""; + + const baseHue = Math.random() * 360; + + // 🎲 random step = makes rainbow "scrambled" + const step = (Math.random() * 60) + 10; // 10 → 70 + + // 🎲 random direction (left or right rainbow) + const direction = Math.random() < 0.5 ? 1 : -1; + + [...text].forEach((char, i) => { + const span = document.createElement("span"); + span.textContent = char; + + const hue = baseHue + (i * step * direction); + + span.style.color = `hsl(${hue}, 90%, 60%)`; + + span.style.textShadow = `1px 1px 0 rgba(0,0,0,0.3)`; + + el.appendChild(span); + }); + }; + elements.forEach(colorizeText); +} diff --git a/Transcendence/srcs/frontend/src/trans/index2.html b/Transcendence/srcs/frontend/src/trans/index2.html index 73b9fa4..89b0dc6 100644 --- a/Transcendence/srcs/frontend/src/trans/index2.html +++ b/Transcendence/srcs/frontend/src/trans/index2.html @@ -5,6 +5,7 @@ Transcendence + @@ -29,6 +30,12 @@ onclick="window.location.href='../wiscat/wiscat.html'">Wiscat +
+ + + +
+ diff --git a/Transcendence/srcs/frontend/src/trans/script.js b/Transcendence/srcs/frontend/src/trans/script.js new file mode 100644 index 0000000..2654561 --- /dev/null +++ b/Transcendence/srcs/frontend/src/trans/script.js @@ -0,0 +1,57 @@ +const container = document.querySelector('.container-gamelinks'); +const buttons = document.querySelectorAll('.game-button'); + +function initButtons() { + const rect = container.getBoundingClientRect(); + + buttons.forEach(btn => { + // Ensure size is known + const bw = btn.offsetWidth; + const bh = btn.offsetHeight; + + // Random start position INSIDE container + btn.x = Math.random() * (rect.width - bw); + btn.y = Math.random() * (rect.height - bh); + + // Better velocity (avoid super slow) + btn.vx = (Math.random() * 2 + 1) * (Math.random() < 0.5 ? -1 : 1); + btn.vy = (Math.random() * 2 + 1) * (Math.random() < 0.5 ? -1 : 1); + + btn.style.left = btn.x + 'px'; + btn.style.top = btn.y + 'px'; + }); +} + +function animateButtons() { + const rect = container.getBoundingClientRect(); + + buttons.forEach(btn => { + btn.x += btn.vx; + btn.y += btn.vy; + + const bw = btn.offsetWidth; + const bh = btn.offsetHeight; + + // Bounce inside container + if (btn.x <= 0 || btn.x + bw >= rect.width) { + btn.vx *= -1; + btn.x = Math.max(0, Math.min(btn.x, rect.width - bw)); // clamp + } + + if (btn.y <= 0 || btn.y + bh >= rect.height) { + btn.vy *= -1; + btn.y = Math.max(0, Math.min(btn.y, rect.height - bh)); // clamp + } + + btn.style.left = btn.x + 'px'; + btn.style.top = btn.y + 'px'; + }); + + requestAnimationFrame(animateButtons); +} + +// 🔥 IMPORTANT: wait for layout to be ready +window.addEventListener('load', () => { + initButtons(); + animateButtons(); +}); \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/trans/style.css b/Transcendence/srcs/frontend/src/trans/style.css new file mode 100644 index 0000000..327e642 --- /dev/null +++ b/Transcendence/srcs/frontend/src/trans/style.css @@ -0,0 +1,51 @@ +html { + height: 100%; +} + +body { + height: 100%; +} + +.link-button { + +} + +.link-game { + +} + +.link-tetris { + +} + +.link-wiscat { + +} + +.container-gamelinks { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; +} + +.game-button { + position: absolute; /* allow movement */ + padding: 15px 30px; + font-size: 20px; + font-family: "Roboto"; + border-radius: 15px; + border: 4px solid #c0c0c0; + background-color: #111; + color: white; + cursor: pointer; + + /* metallic shine effect */ + box-shadow: inset 0 0 8px rgba(255,255,255,0.4), 0 0 5px rgba(255,255,255,0.2); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.game-button:hover { + transform: scale(1.1); + box-shadow: inset 0 0 12px rgba(255,255,255,0.5), 0 0 8px rgba(255,255,255,0.3); +} \ No newline at end of file