projects/casino
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases 16 Activity

feat: add homepage ui and images #38

Merged
lziemke merged 3 commits from feature/homepage-games-preview into main 2025-02-19 12:06:35 +00:00
Conversation 3 Commits 3 Files Changed 10 +34 -26
2 changed files with 34 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 428c33b000 - Show all commits

40
frontend/src/app/feature/home/home.component.html
View File

@ -1,10 +1,7 @@
<app-navbar></app-navbar>
<div class="container mx-auto px-4 py-6 space-y-8">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
</div>
<div class="flex items-center space-x-4"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
@ -25,10 +22,12 @@
<div class="slider-grid">
<div class="card group" *ngFor="let game of featuredGames">
<div class="relative">
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover" />
<div
class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
>
<div class="absolute bottom-4 left-4 right-4">
<h4 class="game-heading">{{game.name}}</h4>
<h4 class="game-heading">{{ game.name }}</h4>
<button class="button-base w-full py-2">Jetzt Spielen</button>
</div>
</div>
@ -42,10 +41,12 @@
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="card group" *ngFor="let game of allGames">
<div class="relative">
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<img [src]="game.image" [alt]="game.name" class="w-full aspect-[4/3] object-cover" />
<div
class="absolute inset-0 bg-gradient-to-t from-deep-blue/90 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
>
<div class="absolute bottom-4 left-4 right-4">
<h4 class="game-heading">{{game.name}}</h4>
<h4 class="game-heading">{{ game.name }}</h4>
<button class="button-base w-full py-2">Jetzt Spielen</button>
</div>
</div>
@ -59,21 +60,28 @@
<div class="card p-4">
<h3 class="section-heading text-xl mb-4">Konto</h3>
<div class="space-y-4">
<button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">Transaktionen</button>
<button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">Kontoeinstellungen</button>
<button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
Transaktionen
</button>
<button class="bg-deep-blue-light hover:bg-deep-blue-contrast w-full py-2 rounded">
Kontoeinstellungen
</button>
</div>
</div>
<div class="card p-4">
<h3 class="section-heading text-xl mb-4">Letzte Transaktionen</h3>
<div class="space-y-3">
<div class="flex justify-between items-center" *ngFor="let transaction of recentTransactions">
<div
class="flex justify-between items-center"
*ngFor="let transaction of recentTransactions"
>
<div>
<p class="text-sm font-medium">{{transaction.type}}</p>
<p class="text-xs text-text-secondary">{{transaction.date}}</p>
<p class="text-sm font-medium">{{ transaction.type }}</p>
<p class="text-xs text-text-secondary">{{ transaction.date }}</p>
</div>
<span [class]="transaction.amount > 0 ? 'text-emerald' : 'text-accent-red'">
{{transaction.amount | currency:'EUR'}}
{{ transaction.amount | currency: 'EUR' }}
</span>
</div>
</div>

20
frontend/src/app/feature/home/home.component.ts
View File

@ -3,7 +3,7 @@ import { KeycloakService } from 'keycloak-angular';
import { MatDialog } from '@angular/material/dialog';
import { DepositComponent } from '../deposit/deposit.component';
import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
import {CurrencyPipe, NgFor} from "@angular/common";
import { CurrencyPipe, NgFor } from '@angular/common';
interface Game {
id: string;
@ -31,7 +31,7 @@ export default class HomeComponent {
userAvatar = '/assets/images/default-avatar.png';
username = this.keycloakService.getUsername();
vipLevel = 1;
balance = 1000.00;
balance = 1000.0;
featuredGames: Game[] = [
{
@ -63,7 +63,7 @@ export default class HomeComponent {
id: '6',
name: 'Lootboxen',
image: '/lootbox.webp',
}
},
];
allGames: Game[] = [...this.featuredGames];
@ -72,21 +72,21 @@ export default class HomeComponent {
{
id: '1',
type: 'Deposit',
amount: 100.00,
date: '2024-03-20'
amount: 100.0,
date: '2024-03-20',
},
{
id: '2',
type: 'Withdrawal',
amount: -50.00,
date: '2024-03-19'
amount: -50.0,
date: '2024-03-19',
},
{
id: '3',
type: 'Bonus',
amount: 25.00,
date: '2024-03-18'
}
amount: 25.0,
date: '2024-03-18',
},
];
public logout() {