From eadcd770ba99cd729894208a2d9a7d5807e76fb0 Mon Sep 17 00:00:00 2001 From: "Lala, Shahd" Date: Mon, 4 May 2026 21:43:12 +0000 Subject: [PATCH] feat: profile info view (player ID, rating etc) --- src/app/pages/profile/profile.component.css | 435 ++++++++++++++----- src/app/pages/profile/profile.component.html | 92 ++-- src/app/pages/profile/profile.component.ts | 10 + 3 files changed, 401 insertions(+), 136 deletions(-) diff --git a/src/app/pages/profile/profile.component.css b/src/app/pages/profile/profile.component.css index a50dd1c..516ef7a 100644 --- a/src/app/pages/profile/profile.component.css +++ b/src/app/pages/profile/profile.component.css @@ -1,31 +1,299 @@ @import '../welcome/welcome.component.css'; -.profile-card-container { +.profile-building-container { position: absolute; - bottom: 50%; + bottom: 10%; left: 50%; - transform: translate(-50%, 50%); - width: min(500px, 90vw); - background: var(--dlg-bg); - border: 1.5px solid var(--dlg-border); - box-shadow: var(--bb-glow); - border-radius: 4px; - padding: 2rem; + transform: translateX(-50%); z-index: 15; } -.profile-header { +.building-wrapper { + position: relative; + width: clamp(300px, 80vw, 600px); + margin: 0 auto; +} + +.building-structure { + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); + border: 2px solid var(--dlg-border); + border-radius: 8px; + box-shadow: var(--bb-glow), inset 0 0 20px rgba(0, 210, 255, 0.1); + overflow: hidden; +} + +.building-top { + height: 30px; + background: linear-gradient(180deg, #0f3460 0%, #1a1a2e 100%); + border-bottom: 1px solid rgba(0, 210, 255, 0.3); + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: var(--bb-tag); + font-family: 'Bebas Neue', sans-serif; + letter-spacing: 2px; + position: relative; +} + +.building-top::after { + content: 'MY PROFILE'; + font-size: 12px; +} + +.building-main { + display: grid; + grid-template-columns: 80px 1fr 80px; + gap: 0; + padding: 20px; + min-height: 200px; + background: linear-gradient(90deg, rgba(0, 210, 255, 0.03) 0%, transparent 15%, transparent 85%, rgba(0, 210, 255, 0.03) 100%); + align-items: center; +} + +.building-side { + display: flex; + flex-direction: column; + gap: 15px; + justify-content: center; +} + +.building-side.left-side { + border-right: 1px solid rgba(0, 210, 255, 0.2); + padding-right: 15px; +} + +.building-side.right-side { + border-left: 1px solid rgba(0, 210, 255, 0.2); + padding-left: 15px; +} + +.window { + width: 40px; + height: 40px; + background: linear-gradient(135deg, #00d5ff 0%, #0288d1 100%); + border: 1px solid rgba(0, 210, 255, 0.5); + border-radius: 2px; + box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2); + position: relative; + animation: windowFlicker 4s ease-in-out infinite; +} + +@keyframes windowFlicker { + 0%, 100% { + box-shadow: 0 0 10px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2); + } + 50% { + box-shadow: 0 0 15px rgba(0, 210, 255, 0.6), inset 0 0 12px rgba(0, 210, 255, 0.3); + } +} + +.building-center { + display: flex; + justify-content: center; + align-items: center; + padding: 0 20px; +} + +.player-display-window { + background: linear-gradient(135deg, rgba(0, 210, 255, 0.1) 0%, rgba(0, 210, 255, 0.05) 100%); + border: 2px solid var(--bb-tag); + border-radius: 4px; + padding: 30px; + text-align: center; + box-shadow: 0 0 20px rgba(0, 210, 255, 0.3), inset 0 0 15px rgba(0, 210, 255, 0.1); + min-width: 250px; +} + +.player-avatar { + font-size: 4rem; + margin-bottom: 15px; + display: block; + animation: avatarPulse 3s ease-in-out infinite; +} + +@keyframes avatarPulse { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } +} + +.player-name { + font-family: 'Bebas Neue', sans-serif; + font-size: 28px; + font-weight: bold; + color: var(--bb-title); + letter-spacing: 1px; + margin-bottom: 20px; + text-transform: uppercase; + background: linear-gradient(90deg, var(--bb-title), var(--bb-tag)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.player-id-label { + font-family: 'Space Mono', monospace; + font-size: 11px; + font-weight: 700; + letter-spacing: 1px; + text-transform: uppercase; + color: var(--bb-tag); + margin-bottom: 8px; + opacity: 0.8; +} + +.player-id-value { + font-family: 'Space Mono', monospace; + font-size: 18px; + font-weight: 700; + letter-spacing: 2px; + color: #00d5ff; + background: rgba(0, 210, 255, 0.15); + padding: 12px 16px; + border: 1.5px solid var(--bb-tag); + border-radius: 2px; + word-break: break-all; + box-shadow: 0 0 15px rgba(0, 210, 255, 0.4); + text-shadow: 0 0 10px rgba(0, 210, 255, 0.5); + cursor: pointer; + transition: all 0.3s ease; + user-select: text; +} + +.player-id-value:hover { + background: rgba(0, 210, 255, 0.25); + box-shadow: 0 0 20px rgba(0, 210, 255, 0.6); + transform: scale(1.02); +} + +.player-id-value.copied { + background: rgba(76, 175, 80, 0.2); + border-color: #4caf50; + color: #4caf50; + box-shadow: 0 0 15px rgba(76, 175, 80, 0.5); +} + +.copy-notification { + font-family: 'Space Mono', monospace; + font-size: 12px; + font-weight: 700; + letter-spacing: 1px; + color: #4caf50; + margin-top: 12px; + animation: copyNotification 2s ease-in-out forwards; +} + +@keyframes copyNotification { + 0% { + opacity: 1; + transform: translateY(0); + } + 80% { + opacity: 1; + transform: translateY(0); + } + 100% { + opacity: 0; + transform: translateY(-10px); + } +} + +.building-base { + padding: 20px; + background: linear-gradient(180deg, rgba(0, 210, 255, 0.05) 0%, rgba(0, 210, 255, 0.02) 100%); + border-top: 1px solid rgba(0, 210, 255, 0.2); +} + +.stat-panel { + display: flex; + justify-content: space-around; + align-items: center; + gap: 20px; +} + +.stat { display: flex; flex-direction: column; align-items: center; - gap: 1rem; - margin-bottom: 2rem; - border-bottom: 1px solid var(--dlg-border); - padding-bottom: 1.5rem; + gap: 8px; + flex: 1; +} + +.stat-label { + font-family: 'Space Mono', monospace; + font-size: 10px; + font-weight: 700; + letter-spacing: 0.5px; + text-transform: uppercase; + color: var(--bb-tag); + opacity: 0.7; +} + +.stat-value { + font-family: 'Space Mono', monospace; + font-size: 14px; + font-weight: 700; + color: var(--bb-title); + text-align: center; +} + +.stat-divider { + width: 1px; + height: 30px; + background: rgba(0, 210, 255, 0.2); +} + +.building-door { + height: 60px; + background: linear-gradient(90deg, #2a2a3e 0%, #1a1a2e 50%, #2a2a3e 100%); + border-top: 1px solid rgba(0, 210, 255, 0.2); + border-radius: 0 0 8px 8px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +.building-door::before { + content: ''; + position: absolute; + width: 90%; + height: 100%; + border: 1.5px solid rgba(0, 210, 255, 0.3); + border-radius: 4px; + background: linear-gradient(90deg, rgba(0, 210, 255, 0.05), rgba(0, 210, 255, 0.02)); +} + +.door-handle { + width: 12px; + height: 12px; + background: radial-gradient(circle at 30% 30%, rgba(0, 210, 255, 0.8), rgba(0, 210, 255, 0.4)); + border-radius: 50%; + box-shadow: 0 0 10px rgba(0, 210, 255, 0.6); + position: relative; + z-index: 2; + margin-left: 80px; + animation: handleGlow 2s ease-in-out infinite; +} + +@keyframes handleGlow { + 0%, 100% { + box-shadow: 0 0 10px rgba(0, 210, 255, 0.6); + } + 50% { + box-shadow: 0 0 20px rgba(0, 210, 255, 0.9); + } } .back-btn { - align-self: flex-start; + position: absolute; + top: -50px; + left: 0; background: transparent; color: var(--bb-title); border: 1px solid var(--dlg-border); @@ -43,111 +311,70 @@ background: rgba(0, 210, 255, 0.1); border-color: var(--bb-tag); color: var(--bb-tag); + box-shadow: 0 0 15px rgba(0, 210, 255, 0.3); } -.profile-header h1 { - margin: 0; - font-family: 'Bebas Neue', sans-serif; - font-size: 28px; - letter-spacing: 2px; - color: var(--bb-title); - text-align: center; - width: 100%; +.sunset .building-structure { + background: linear-gradient(135deg, #3d2f27 0%, #4a3a30 50%, #5c3d2e 100%); } -.profile-content { - display: grid; - gap: 2rem; -} - -.player-avatar-section { - display: flex; - justify-content: center; -} - -.avatar-placeholder { - width: 100px; - height: 100px; - border: 2px solid var(--dlg-border); - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - background: rgba(0, 210, 255, 0.08); - font-size: 3.5rem; -} - -.player-info-section { - display: grid; - gap: 1.2rem; -} - -.info-row { - display: grid; - grid-template-columns: 150px 1fr; - gap: 1rem; - align-items: center; - padding-bottom: 0.8rem; - border-bottom: 1px solid rgba(0, 210, 255, 0.2); -} - -.info-row:last-child { - border-bottom: none; -} - -.info-label { - color: var(--bb-tag); - font-family: 'Space Mono', monospace; - font-weight: 700; - font-size: 12px; - letter-spacing: 0.5px; - text-transform: uppercase; -} - -.info-value { - color: var(--bb-title); - font-family: 'Space Mono', monospace; - font-size: 13px; - word-break: break-all; -} - -.sunset .profile-card-container { - background: var(--dlg-bg); - border-color: var(--dlg-border); -} - -.sunset .back-btn { - border-color: var(--dlg-border); - color: var(--bb-title); -} - -.sunset .back-btn:hover { - background: rgba(242, 106, 226, 0.1); +.sunset .player-id-value { + color: #f0ad4e; border-color: var(--bb-tag); - color: var(--bb-tag); + box-shadow: 0 0 15px rgba(242, 106, 226, 0.4); + text-shadow: 0 0 10px rgba(242, 106, 226, 0.5); } @media (max-width: 600px) { - .profile-card-container { - padding: 1.5rem; - width: 95vw; + .building-structure { + border-radius: 4px; } - .info-row { - grid-template-columns: 1fr; - gap: 0.3rem; + .building-main { + grid-template-columns: 50px 1fr 50px; + padding: 15px; + gap: 8px; } - .info-label { - font-size: 10px; + .window { + width: 30px; + height: 30px; } - .info-value { - font-size: 12px; + .player-display-window { + min-width: 180px; + padding: 20px; } - .avatar-placeholder { - width: 80px; + .player-avatar { + font-size: 3rem; + margin-bottom: 10px; + } + + .player-name { + font-size: 20px; + margin-bottom: 15px; + } + + .player-id-value { + font-size: 14px; + padding: 8px 12px; + } + + .building-base { + padding: 15px; + } + + .stat-panel { + gap: 10px; + } + + .back-btn { + top: -45px; + font-size: 9px; + padding: 0.4rem 0.8rem; + } +} height: 80px; font-size: 2.5rem; } diff --git a/src/app/pages/profile/profile.component.html b/src/app/pages/profile/profile.component.html index b058eec..c9112c4 100644 --- a/src/app/pages/profile/profile.component.html +++ b/src/app/pages/profile/profile.component.html @@ -20,41 +20,69 @@
-
-
- -

MY PROFILE

-
- +
@if (currentUser; as user) { -
-
-
- 👤 -
-
- -
-
- Player ID: - {{ user.id }} -
- -
- Username: - {{ user.username }} -
- -
- Rating: - {{ user.rating }} -
- -
- Member Since: - {{ user.createdAt | date: 'MMM dd, yyyy' }} + +
+
+ +
+ + +
+ +
+
+
+
+
+
+ + +
+
+
👤
+
{{ user.username }}
+
PLAYER ID
+
{{ user.id }}
+ @if (idCopied) { +
✓ COPIED
+ } +
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+ RATING + {{ user.rating }} +
+
+
+ MEMBER SINCE + {{ user.createdAt | date: 'MMM dd, yyyy' }} +
+
+
+ + +
+
+ + +
}
diff --git a/src/app/pages/profile/profile.component.ts b/src/app/pages/profile/profile.component.ts index 36d522c..6e04a56 100644 --- a/src/app/pages/profile/profile.component.ts +++ b/src/app/pages/profile/profile.component.ts @@ -29,6 +29,7 @@ export class ProfileComponent implements OnInit { currentUser: CurrentUser | null = null; isSunsetMode = false; + idCopied = false; stars: Star[] = []; bgBuildings: BackgroundBuilding[] = []; @@ -57,6 +58,15 @@ export class ProfileComponent implements OnInit { this.router.navigate(['']); } + copyPlayerId(id: string): void { + navigator.clipboard.writeText(id).then(() => { + this.idCopied = true; + setTimeout(() => { + this.idCopied = false; + }, 2000); + }); + } + private generateStars(count: number): void { this.stars = Array.from({ length: count }, () => { const size = Math.random() * 2 + 0.5;