SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 64 Wiki Activity Actions

feat(deposit): implement modal animations with GSAP

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-03-06 11:52:31 +01:00
parent c651337d30
commit 08a1a5e877
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
9 changed files with 177 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/bun.lock
View file

@ -19,6 +19,7 @@
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@stripe/stripe-js": "^5.6.0",
"@tailwindcss/postcss": "^4.0.3",
"gsap": "^3.12.7",
"keycloak-angular": "^16.0.1",
"keycloak-js": "^25.0.5",
"postcss": "^8.5.1",
@ -1068,6 +1069,8 @@
"graphemer": ["graphemer@1.4.0", "", {}, "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="],
"gsap": ["gsap@3.12.7", "", {}, "sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg=="],
"handle-thing": ["handle-thing@2.0.1", "", {}, "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="],
"has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],

1
frontend/package.json
View file

@ -28,6 +28,7 @@
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@stripe/stripe-js": "^5.6.0",
"@tailwindcss/postcss": "^4.0.3",
"gsap": "^3.12.7",
"keycloak-angular": "^16.0.1",
"keycloak-js": "^25.0.5",
"postcss": "^8.5.1",

4
frontend/src/app/feature/deposit/deposit.component.html
View file

@ -1,6 +1,6 @@
@if (isOpen) {
<div class="modal-bg">
<div class="modal-card">
<div #modalBg class="modal-bg">
<div #modalCard class="modal-card">
<h2 class="modal-heading">Guthaben aufladen</h2>
<form [formGroup]="form">
@if (errorMsg) {

60
frontend/src/app/feature/deposit/deposit.component.ts
View file

@ -1,11 +1,18 @@
import {
ChangeDetectionStrategy,
Component,
ElementRef,
EventEmitter,
inject,
Input,
OnInit,
Output,
ViewChild,
AfterViewInit,
OnDestroy,
OnChanges,
SimpleChanges,
ChangeDetectorRef,
} from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { loadStripe, Stripe } from '@stripe/stripe-js';
@ -13,6 +20,8 @@ import { DepositService } from '../../service/deposit.service';
import { debounceTime } from 'rxjs';
import { environment } from '../../../environments/environment';
import { NgIf } from '@angular/common';
import { ModalAnimationService } from '../../shared/services/modal-animation.service';
import gsap from 'gsap';
@Component({
selector: 'app-deposit',
@ -21,13 +30,17 @@ import { NgIf } from '@angular/common';
templateUrl: './deposit.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DepositComponent implements OnInit {
export class DepositComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
@Input() isOpen = false;
@Output() close = new EventEmitter<void>();
@ViewChild('modalBg') modalBg!: ElementRef;
@ViewChild('modalCard') modalCard!: ElementRef;
protected form!: FormGroup;
protected errorMsg = '';
private stripe: Stripe | null = null;
private service: DepositService = inject(DepositService);
private modalAnimationService: ModalAnimationService = inject(ModalAnimationService);
private cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
async ngOnInit() {
this.form = new FormGroup({
@ -43,6 +56,43 @@ export class DepositComponent implements OnInit {
this.stripe = await loadStripe(environment.STRIPE_KEY);
}
ngAfterViewInit() {
if (this.isOpen) {
this.openModal();
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes['isOpen']) {
// Force change detection to ensure DOM is updated
this.cdr.detectChanges();
// Small delay to ensure DOM is ready
setTimeout(() => {
if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) {
if (changes['isOpen'].currentValue) {
this.openModal();
} else {
this.closeModal();
}
}
}, 0);
}
}
ngOnDestroy() {
gsap.killTweensOf([this.modalBg?.nativeElement, this.modalCard?.nativeElement]);
}
private openModal() {
if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) {
this.modalAnimationService.openModal(
this.modalCard.nativeElement,
this.modalBg.nativeElement
);
}
}
submit() {
if (!this.stripe) {
this.errorMsg = 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
@ -59,6 +109,12 @@ export class DepositComponent implements OnInit {
}
public closeModal() {
this.close.emit();
if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) {
this.modalAnimationService.closeModal(
this.modalCard.nativeElement,
this.modalBg.nativeElement,
() => this.close.emit()
);
}
}
}

4
frontend/src/app/shared/components/confirmation/confirmation.component.html
View file

@ -1,6 +1,6 @@
@if (successful) {
<div class="modal-bg">
<div class="modal-card">
<div #modalBg class="modal-bg">
<div #modalCard class="modal-card">
<h2 class="modal-heading text-center">Bestätigung</h2>
<p class="py-2">Der Vorgang wurde erfolgreich abgeschlossen.</p>
<button type="button" class="button-primary w-full py-2 my-auto" (click)="closeModal()">

33
frontend/src/app/shared/components/confirmation/confirmation.component.ts
View file

@ -1,4 +1,6 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { ModalAnimationService } from '../../services/modal-animation.service';
import gsap from 'gsap';
@Component({
selector: 'app-confirmation',
@ -6,11 +8,36 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
imports: [],
templateUrl: './confirmation.component.html',
})
export class ConfirmationComponent {
export class ConfirmationComponent implements AfterViewInit, OnDestroy {
@Input() successful = true;
@Output() close = new EventEmitter<void>();
@ViewChild('modalBg') modalBg!: ElementRef;
@ViewChild('modalCard') modalCard!: ElementRef;
constructor(private modalAnimationService: ModalAnimationService) {}
ngAfterViewInit() {
if (this.successful) {
this.openModal();
}
}
ngOnDestroy() {
gsap.killTweensOf([this.modalBg?.nativeElement, this.modalCard?.nativeElement]);
}
private openModal() {
this.modalAnimationService.openModal(
this.modalCard.nativeElement,
this.modalBg.nativeElement
);
}
public closeModal() {
this.close.emit();
this.modalAnimationService.closeModal(
this.modalCard.nativeElement,
this.modalBg.nativeElement,
() => this.close.emit()
);
}
}

10
frontend/src/app/shared/components/navbar/navbar.component.html
View file

@ -11,15 +11,15 @@
</div>
<div class="hidden md:flex items-center space-x-4">
<div
class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300"
>
<span>Balance: {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
</div>
@if (!isLoggedIn) {
<button (click)="login()" class="button-primary px-4 py-1.5">Anmelden</button>
}
@if (isLoggedIn) {
<div
class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300"
>
<span>Balance: {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
</div>
<button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
}
</div>

53
frontend/src/app/shared/services/modal-animation.service.ts Normal file
View file

@ -0,0 +1,53 @@
import { Injectable } from '@angular/core';
import gsap from 'gsap';
@Injectable({
providedIn: 'root'
})
export class ModalAnimationService {
private readonly defaultDuration = 0.3;
private readonly defaultEase = 'power2.out';
openModal(modalElement: HTMLElement, overlayElement: HTMLElement) {
gsap.set(overlayElement, { opacity: 0, display: 'block' });
gsap.set(modalElement, {
opacity: 0,
scale: 0.95,
y: 20,
display: 'block'
});
gsap.to(overlayElement, {
opacity: 1,
duration: this.defaultDuration,
ease: this.defaultEase
});
gsap.to(modalElement, {
opacity: 1,
scale: 1,
y: 0,
duration: this.defaultDuration,
ease: this.defaultEase
});
}
closeModal(modalElement: HTMLElement, overlayElement: HTMLElement, onComplete?: () => void) {
gsap.to([overlayElement, modalElement], {
opacity: 0,
duration: this.defaultDuration,
ease: this.defaultEase,
onComplete: () => {
gsap.set([overlayElement, modalElement], { display: 'none' });
onComplete?.();
}
});
gsap.to(modalElement, {
scale: 0.95,
y: 20,
duration: this.defaultDuration,
ease: this.defaultEase
});
}
}

26
frontend/src/styles.css
View file

@ -144,13 +144,33 @@ a {
}
.modal-bg {
@apply fixed inset-0 bg-black/70 z-50 focus:outline-none focus:ring-2 focus:ring-emerald-light;
@apply fixed inset-0 bg-black/80 backdrop-blur-sm z-50 focus:outline-none focus:ring-2 focus:ring-emerald-light;
}
.modal-card {
@apply bg-deep-blue-contrast overflow-hidden hover:shadow-xl transition-shadow duration-300 p-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 rounded-lg shadow-lg z-50 min-w-[300px];
@apply bg-deep-blue-contrast overflow-hidden hover:shadow-xl transition-shadow duration-300 p-6 rounded-xl shadow-2xl z-50 min-w-[300px] max-w-[400px] w-full mx-auto border border-deep-blue-light/20 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}
.modal-heading {
@apply text-xl font-bold text-text-primary;
@apply text-2xl font-bold text-text-primary mb-4;
}
.modal-card input {
@apply w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200;
}
.modal-card label {
@apply text-text-secondary text-sm font-medium mb-1 block;
}
.modal-card button {
@apply transition-all duration-200;
}
.modal-card .button-primary {
@apply bg-emerald hover:bg-emerald-dark text-text-primary transition-all duration-300 active:scale-95 shadow-lg shadow-emerald/20;
}
.modal-card .button-secondary {
@apply bg-deep-blue-light/50 hover:bg-deep-blue-light w-full py-2.5 my-2 border border-deep-blue-light/30 hover:border-deep-blue-light/50;
}