diff --git a/.gitea/workflows/ci.yml b/.gitea/workflows/ci.yml index 6ebfb08..76ac9aa 100644 --- a/.gitea/workflows/ci.yml +++ b/.gitea/workflows/ci.yml @@ -35,38 +35,6 @@ jobs: - name: "Stop Gradle" working-directory: ./backend run: gradle --stop - - test: - name: "Test" - runs-on: "vps-4" - container: - image: "cimg/openjdk:22.0-node" - steps: - - name: "Checkout" - uses: actions/checkout@v3 - - name: Setup Java 22 - uses: actions/setup-java@v3 - with: - distribution: "temurin" - java-version: "22" - - name: "Cache Gradle dependencies" - uses: actions/cache@v3 - with: - path: | - ~/.gradle/caches - ~/.gradle/wrapper - key: gradle-${{ runner.os }}-common - restore-keys: | - gradle-${{ runner.os }}- - - name: "Prepare Gradle" - working-directory: ./backend - run: gradle clean - - name: "Test" - working-directory: ./backend - run: gradle test - - name: "Stop Gradle" - working-directory: ./backend - run: gradle --stop eslint: name: eslint diff --git a/backend/src/main/java/de/szut/casino/deposit/DepositController.java b/backend/src/main/java/de/szut/casino/deposit/DepositController.java index 6bc0fbc..c178867 100644 --- a/backend/src/main/java/de/szut/casino/deposit/DepositController.java +++ b/backend/src/main/java/de/szut/casino/deposit/DepositController.java @@ -3,13 +3,20 @@ package de.szut.casino.deposit; import com.stripe.Stripe; import com.stripe.exception.StripeException; import com.stripe.model.checkout.Session; +import com.stripe.param.InvoiceItemCreateParams; +import com.stripe.param.PriceCreateParams; import com.stripe.param.checkout.SessionCreateParams; import de.szut.casino.deposit.dto.AmountDto; import de.szut.casino.deposit.dto.SessionIdDto; import jakarta.validation.Valid; import org.springframework.beans.factory.annotation.Value; +import org.springframework.boot.autoconfigure.cassandra.CassandraProperties; +import org.springframework.http.HttpHeaders; import org.springframework.http.ResponseEntity; -import org.springframework.web.bind.annotation.*; +import org.springframework.web.bind.annotation.PostMapping; +import org.springframework.web.bind.annotation.RequestBody; +import org.springframework.web.bind.annotation.RequestHeader; +import org.springframework.web.bind.annotation.RestController; @RestController public class DepositController { @@ -31,8 +38,7 @@ public class DepositController { .setQuantity(1L) .setName("Einzahlung") .build()) - .setSuccessUrl(frontendHost+"/home?success=true") - .setCancelUrl(frontendHost+"/home?success=false") + .setSuccessUrl(frontendHost+"/home") .setMode(SessionCreateParams.Mode.PAYMENT) .build(); diff --git a/backend/src/main/java/de/szut/casino/security/KeycloakSecurityConfig.java b/backend/src/main/java/de/szut/casino/security/KeycloakSecurityConfig.java index 6be8b83..8ddcbcb 100644 --- a/backend/src/main/java/de/szut/casino/security/KeycloakSecurityConfig.java +++ b/backend/src/main/java/de/szut/casino/security/KeycloakSecurityConfig.java @@ -14,6 +14,7 @@ import org.springframework.security.web.SecurityFilterChain; import org.springframework.security.web.authentication.session.RegisterSessionAuthenticationStrategy; import org.springframework.security.web.authentication.session.SessionAuthenticationStrategy; import org.springframework.security.web.session.HttpSessionEventPublisher; +import org.springframework.security.web.util.matcher.AntPathRequestMatcher; import java.util.ArrayList; import java.util.List; @@ -23,6 +24,10 @@ import java.util.Map; @EnableWebSecurity class KeycloakSecurityConfig { + private static final String GROUPS = "groups"; + private static final String REALM_ACCESS_CLAIM = "realm_access"; + private static final String ROLES_CLAIM = "roles"; + private final KeycloakLogoutHandler keycloakLogoutHandler; KeycloakSecurityConfig(KeycloakLogoutHandler keycloakLogoutHandler) { diff --git a/backend/src/main/java/de/szut/casino/user/UserEntity.java b/backend/src/main/java/de/szut/casino/user/UserEntity.java index 83d8f44..42b08ce 100644 --- a/backend/src/main/java/de/szut/casino/user/UserEntity.java +++ b/backend/src/main/java/de/szut/casino/user/UserEntity.java @@ -4,6 +4,7 @@ import jakarta.persistence.Column; import jakarta.persistence.Entity; import jakarta.persistence.GeneratedValue; import jakarta.persistence.Id; +import lombok.AllArgsConstructor; import lombok.Getter; import lombok.NoArgsConstructor; import lombok.Setter; diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties index c7ccadf..792244e 100644 --- a/backend/src/main/resources/application.properties +++ b/backend/src/main/resources/application.properties @@ -4,7 +4,7 @@ spring.datasource.password=postgres_pass server.port=8080 spring.jpa.hibernate.ddl-auto=create-drop stripe.secret.key=${STRIPE_SECRET_KEY:sk_test_51QrePYIvCfqz7ANgqam8rEwWcMeKiLOof3j6SCMgu2sl4sESP45DJxca16mWcYo1sQaiBv32CMR6Z4AAAGQPCJo300ubuZKO8I} -app.frontend-host=http://localhost:4200 +app.frontend-host=http://localhost:3000 spring.application.name=lf12_starter #client registration configuration diff --git a/backend/src/test/java/de/szut/casino/health/HealthControllerTest.java b/backend/src/test/java/de/szut/casino/health/HealthControllerTest.java deleted file mode 100644 index 1214c7a..0000000 --- a/backend/src/test/java/de/szut/casino/health/HealthControllerTest.java +++ /dev/null @@ -1,26 +0,0 @@ -package de.szut.casino.health; - -import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get; -import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status; -import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath; - -import org.junit.jupiter.api.Test; -import org.springframework.beans.factory.annotation.Autowired; -import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest; -import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc; -import org.springframework.test.web.servlet.MockMvc; - -@WebMvcTest(HealthController.class) -@AutoConfigureMockMvc(addFilters = false) -public class HealthControllerTest { - - @Autowired - private MockMvc mockMvc; - - @Test - void healthCheckReturnsUpStatus() throws Exception { - mockMvc.perform(get("/health")) - .andExpect(status().isOk()) - .andExpect(jsonPath("$.status").value("UP")); - } -} \ No newline at end of file diff --git a/backend/src/test/java/de/szut/casino/user/UserControllerTest.java b/backend/src/test/java/de/szut/casino/user/UserControllerTest.java deleted file mode 100644 index 2addb43..0000000 --- a/backend/src/test/java/de/szut/casino/user/UserControllerTest.java +++ /dev/null @@ -1,122 +0,0 @@ -package de.szut.casino.user; - -import static org.mockito.ArgumentMatchers.any; -import static org.mockito.ArgumentMatchers.anyString; -import static org.mockito.Mockito.when; -import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get; -import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post; -import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.header; -import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath; -import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status; - -import org.junit.jupiter.api.BeforeEach; -import org.junit.jupiter.api.Test; -import org.springframework.beans.factory.annotation.Autowired; -import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc; -import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest; -import org.springframework.boot.test.mock.mockito.MockBean; -import org.springframework.http.MediaType; -import org.springframework.test.web.servlet.MockMvc; - -import com.fasterxml.jackson.databind.ObjectMapper; - -import de.szut.casino.user.dto.CreateUserDto; -import de.szut.casino.user.dto.GetUserDto; - -@WebMvcTest(UserController.class) -@AutoConfigureMockMvc(addFilters = false) -public class UserControllerTest { - - @Autowired - private MockMvc mockMvc; - - @Autowired - private ObjectMapper objectMapper; - - @MockBean - private UserService userService; - - private GetUserDto getUserDto; - private CreateUserDto createUserDto; - private UserEntity testUser; - private final String TEST_ID = "test-id-123"; - private final String AUTH_TOKEN = "Bearer test-token"; - - @BeforeEach - void setUp() { - getUserDto = new GetUserDto(); - getUserDto.setKeycloakId(TEST_ID); - getUserDto.setUsername("testuser"); - - testUser = new UserEntity(); - testUser.setKeycloakId(TEST_ID); - testUser.setUsername("testuser"); - - createUserDto = new CreateUserDto(); - createUserDto.setKeycloakId(TEST_ID); - createUserDto.setUsername("testuser"); - } - - @Test - void getUserByIdSuccess() throws Exception { - when(userService.exists(TEST_ID)).thenReturn(true); - when(userService.getUser(TEST_ID)).thenReturn(getUserDto); - - mockMvc.perform(get("/user/" + TEST_ID)) - .andExpect(status().isOk()) - .andExpect(jsonPath("$.keycloakId").value(TEST_ID)) - .andExpect(jsonPath("$.username").value("testuser")); - } - - @Test - void getUserByIdNotFound() throws Exception { - when(userService.exists(TEST_ID)).thenReturn(false); - - mockMvc.perform(get("/user/" + TEST_ID)) - .andExpect(status().isNotFound()); - } - - @Test - void createUserSuccess() throws Exception { - when(userService.exists(TEST_ID)).thenReturn(false); - when(userService.createUser(any(CreateUserDto.class))).thenReturn(testUser); - - mockMvc.perform(post("/user") - .contentType(MediaType.APPLICATION_JSON) - .content(objectMapper.writeValueAsString(createUserDto))) - .andExpect(status().isOk()) - .andExpect(jsonPath("$.keycloakId").value(TEST_ID)) - .andExpect(jsonPath("$.username").value("testuser")); - } - - @Test - void createUserAlreadyExists() throws Exception { - when(userService.exists(TEST_ID)).thenReturn(true); - - mockMvc.perform(post("/user") - .contentType(MediaType.APPLICATION_JSON) - .content(objectMapper.writeValueAsString(createUserDto))) - .andExpect(status().isFound()) - .andExpect(header().string("Location", "/user/" + TEST_ID)); - } - - @Test - void getCurrentUserSuccess() throws Exception { - when(userService.getCurrentUser(AUTH_TOKEN)).thenReturn(getUserDto); - - mockMvc.perform(get("/user") - .header("Authorization", AUTH_TOKEN)) - .andExpect(status().isOk()) - .andExpect(jsonPath("$.keycloakId").value(TEST_ID)) - .andExpect(jsonPath("$.username").value("testuser")); - } - - @Test - void getCurrentUserNotFound() throws Exception { - when(userService.getCurrentUser(anyString())).thenReturn(null); - - mockMvc.perform(get("/user") - .header("Authorization", AUTH_TOKEN)) - .andExpect(status().isNotFound()); - } -} \ No newline at end of file diff --git a/frontend/bun.lock b/frontend/bun.lock index 5b0629c..f5631b4 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -19,7 +19,6 @@ "@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", @@ -1069,8 +1068,6 @@ "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=="], diff --git a/frontend/package.json b/frontend/package.json index 0ad0967..646c8a4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,7 +28,6 @@ "@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", diff --git a/frontend/src/app/feature/deposit/deposit.component.html b/frontend/src/app/feature/deposit/deposit.component.html index e8e4dfb..91179a3 100644 --- a/frontend/src/app/feature/deposit/deposit.component.html +++ b/frontend/src/app/feature/deposit/deposit.component.html @@ -1,11 +1,13 @@ -@if (isOpen) { -
-
-

Guthaben aufladen

+ +
+
+

Guthaben aufladen

- @if (errorMsg) { +
{{ errorMsg }} - } +
- - + +
-} + diff --git a/frontend/src/app/feature/deposit/deposit.component.ts b/frontend/src/app/feature/deposit/deposit.component.ts index f0f900a..7a45859 100644 --- a/frontend/src/app/feature/deposit/deposit.component.ts +++ b/frontend/src/app/feature/deposit/deposit.component.ts @@ -1,18 +1,11 @@ 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'; @@ -20,8 +13,6 @@ 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', @@ -30,17 +21,13 @@ import gsap from 'gsap'; templateUrl: './deposit.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DepositComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges { +export class DepositComponent implements OnInit { @Input() isOpen = false; @Output() close = new EventEmitter(); - @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({ @@ -56,40 +43,6 @@ export class DepositComponent implements OnInit, AfterViewInit, OnDestroy, OnCha this.stripe = await loadStripe(environment.STRIPE_KEY); } - ngAfterViewInit() { - if (this.isOpen) { - this.openModal(); - } - } - - ngOnChanges(changes: SimpleChanges) { - if (changes['isOpen']) { - this.cdr.detectChanges(); - 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.'; @@ -106,12 +59,6 @@ export class DepositComponent implements OnInit, AfterViewInit, OnDestroy, OnCha } public closeModal() { - if (this.modalBg?.nativeElement && this.modalCard?.nativeElement) { - this.modalAnimationService.closeModal( - this.modalCard.nativeElement, - this.modalBg.nativeElement, - () => this.close.emit() - ); - } + this.close.emit(); } } diff --git a/frontend/src/app/feature/home/home.component.html b/frontend/src/app/feature/home/home.component.html index fb2424a..cc1ed16 100644 --- a/frontend/src/app/feature/home/home.component.html +++ b/frontend/src/app/feature/home/home.component.html @@ -21,20 +21,14 @@
-
- +
+
-
+

{{ game.name }}

- +
@@ -46,20 +40,14 @@

Alle Spiele

-
- +
+
-
+

{{ game.name }}

- +
@@ -72,7 +60,7 @@

Konto

- +
- -

Letzte Transaktionen

diff --git a/frontend/src/app/feature/home/home.component.ts b/frontend/src/app/feature/home/home.component.ts index 88fe552..6400d5a 100644 --- a/frontend/src/app/feature/home/home.component.ts +++ b/frontend/src/app/feature/home/home.component.ts @@ -1,31 +1,19 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { NavbarComponent } from '../../shared/components/navbar/navbar.component'; import { CurrencyPipe, NgFor } from '@angular/common'; import { Game } from '../../model/Game'; import { Transaction } from '../../model/Transaction'; import { DepositComponent } from '../deposit/deposit.component'; -import { ConfirmationComponent } from '../../shared/components/confirmation/confirmation.component'; -import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-homepage', standalone: true, - imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent, ConfirmationComponent], + imports: [NavbarComponent, CurrencyPipe, NgFor, DepositComponent], templateUrl: './home.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export default class HomeComponent implements OnInit { +export default class HomeComponent { isDepositModalOpen = false; - isDepositSuccessful = false; - - constructor(public route: ActivatedRoute) {} - - ngOnInit() { - this.isDepositSuccessful = this.route.snapshot.queryParams['success'] == 'true'; - if (this.isDepositSuccessful) { - this.openDepositConfirmationModal(); - } - } featuredGames: Game[] = [ { @@ -62,7 +50,26 @@ export default class HomeComponent implements OnInit { allGames: Game[] = [...this.featuredGames]; - recentTransactions: Transaction[] = []; + recentTransactions: Transaction[] = [ + { + id: '1', + type: 'Deposit', + amount: 100.0, + date: '2024-03-20', + }, + { + id: '2', + type: 'Withdrawal', + amount: -50.0, + date: '2024-03-19', + }, + { + id: '3', + type: 'Bonus', + amount: 25.0, + date: '2024-03-18', + }, + ]; openDepositModal() { this.isDepositModalOpen = true; @@ -70,11 +77,4 @@ export default class HomeComponent implements OnInit { closeDepositModal() { this.isDepositModalOpen = false; } - - openDepositConfirmationModal() { - this.isDepositSuccessful = true; - } - closeDepositConfirmationModal() { - this.isDepositSuccessful = false; - } } diff --git a/frontend/src/app/feature/landing/landing.component.html b/frontend/src/app/feature/landing/landing.component.html index bffa9ad..597c71a 100644 --- a/frontend/src/app/feature/landing/landing.component.html +++ b/frontend/src/app/feature/landing/landing.component.html @@ -10,7 +10,7 @@
200% bis zu 500€

+ 200 Freispiele

-
@@ -28,21 +28,21 @@

Slots

Klassische Spielautomaten

- +

Plinko

Spannendes Geschicklichkeitsspiel

- +
@@ -52,21 +52,21 @@

Poker

Texas Hold'em & mehr

- +

Liars Dice

Würfelspiel mit Strategie

- +
diff --git a/frontend/src/app/shared/components/confirmation/confirmation.component.html b/frontend/src/app/shared/components/confirmation/confirmation.component.html deleted file mode 100644 index 193ea9a..0000000 --- a/frontend/src/app/shared/components/confirmation/confirmation.component.html +++ /dev/null @@ -1,11 +0,0 @@ -@if (successful) { -
-
-

Bestätigung

-

Der Vorgang wurde erfolgreich abgeschlossen.

- -
-
-} diff --git a/frontend/src/app/shared/components/confirmation/confirmation.component.ts b/frontend/src/app/shared/components/confirmation/confirmation.component.ts deleted file mode 100644 index d407985..0000000 --- a/frontend/src/app/shared/components/confirmation/confirmation.component.ts +++ /dev/null @@ -1,49 +0,0 @@ -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', - standalone: true, - imports: [], - templateUrl: './confirmation.component.html', -}) -export class ConfirmationComponent implements AfterViewInit, OnDestroy { - @Input() successful = true; - @Output() close = new EventEmitter(); - @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.modalAnimationService.closeModal( - this.modalCard.nativeElement, - this.modalBg.nativeElement, - () => this.close.emit() - ); - } -} diff --git a/frontend/src/app/shared/components/footer/footer.component.html b/frontend/src/app/shared/components/footer/footer.component.html index e886973..87c4682 100644 --- a/frontend/src/app/shared/components/footer/footer.component.html +++ b/frontend/src/app/shared/components/footer/footer.component.html @@ -47,7 +47,7 @@
- Klarna + Klara
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html index daa53f7..bd3229c 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.html +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -11,16 +11,16 @@
@@ -63,10 +63,10 @@ Spiele
@if (!isLoggedIn) { - + } @if (isLoggedIn) { - + }
diff --git a/frontend/src/app/shared/services/modal-animation.service.ts b/frontend/src/app/shared/services/modal-animation.service.ts deleted file mode 100644 index f54c2bc..0000000 --- a/frontend/src/app/shared/services/modal-animation.service.ts +++ /dev/null @@ -1,53 +0,0 @@ -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, - }); - } -} diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 300a61a..bfdb7fb 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -31,14 +31,10 @@ a { @apply bg-deep-blue-contrast rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300; } -.button-primary { +.button-base { @apply bg-emerald hover:bg-emerald-dark text-text-primary transition-all duration-300 active:scale-95 rounded; } -.button-secondary { - @apply bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded my-2; -} - .game-card-content { @apply p-4; } @@ -142,35 +138,3 @@ a { .footer-disclaimer { @apply text-xs; } - -.modal-bg { - @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-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-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; -}