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 +166 -23
4 changed files with 166 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a933f0b397 - Show all commits

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

@ -1,19 +1,84 @@
<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="grid grid-cols-3">
<div class="w-1/3 h-1/4">
<p>Spiel Vorschau</p>
<p>Spiel Name</p>
<button type="button" class="btn-primary">Jetzt spielen</button>
</div>
<div class="w-1/3 h-1/4">
<p>Spiel Vorschau</p>
<p>Spiel Name</p>
<button type="button" class="btn-primary">Jetzt spielen</button>
</div>
<div class="w-1/3 h-1/4">
<p>Spiel Vorschau</p>
<p>Spiel Name</p>
<button type="button" class="btn-primary">Jetzt spielen</button>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<div class="lg:col-span-3">
<div class="flex justify-between items-center mb-6">
<h3 class="section-heading text-2xl">Beliebte Spiele</h3>
<div class="flex space-x-2">
<button class="nav-button left-0">
<span class="material-icons">chevron_left</span>
</button>
<button class="nav-button right-0">
<span class="material-icons">chevron_right</span>
</button>
</div>
</div>
<div class="slider-container">
<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">
<div class="absolute bottom-4 left-4 right-4">
<h4 class="game-heading">{{game.name}}</h4>
<button class="button-base w-full py-2">Jetzt Spielen</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="section-heading text-2xl mb-6">Alle Spiele</h3>
<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">
<div class="absolute bottom-4 left-4 right-4">
<h4 class="game-heading">{{game.name}}</h4>
<button class="button-base w-full py-2">Jetzt Spielen</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lg:col-span-1 space-y-6">
<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-accent-red hover:bg-accent-red/90 w-full py-2 rounded">Abmelden</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>
<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'}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>

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

@ -2,12 +2,25 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
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";
interface Game {
id: string;
name: string;
image: string;
}
interface Transaction {
id: string;
type: string;
amount: number;
date: string;
}
@Component({
selector: 'app-homepage',
standalone: true,
imports: [NavbarComponent],
imports: [NavbarComponent, CurrencyPipe, NgFor],
templateUrl: './home.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
@ -15,6 +28,67 @@ export default class HomeComponent {
private keycloakService: KeycloakService = inject(KeycloakService);
public dialog: MatDialog = inject(MatDialog);
userAvatar = '/assets/images/default-avatar.png';
username = this.keycloakService.getUsername();
vipLevel = 1;
balance = 1000.00;
featuredGames: Game[] = [
{
id: '1',
name: 'Poker',
image: '/assets/images/games/poker.jpg',
},
{
id: '2',
name: 'Blackjack',
image: '/assets/images/games/blackjack.jpg',
},
{
id: '3',
name: 'Slots',
image: '/assets/images/games/slots.jpg',
},
{
id: '4',
name: 'Plinko',
image: '/assets/images/games/plinko.jpg',
},
{
id: '5',
name: 'Liars Dice',
image: '/assets/images/games/liars-dice.jpg',
},
{
id: '6',
name: 'Lootboxen',
image: '/assets/images/games/lootboxen.jpg',
}
];
allGames: Game[] = [...this.featuredGames];
recentTransactions: Transaction[] = [
{
id: '1',
type: 'Deposit',
amount: 100.00,
date: '2024-03-20'
},
{
id: '2',
type: 'Withdrawal',
amount: -50.00,
date: '2024-03-19'
},
{
id: '3',
type: 'Bonus',
amount: 25.00,
date: '2024-03-18'
}
];
public logout() {
const baseUrl = window.location.origin;

12
frontend/src/app/feature/landing/landing.component.html
View File

@ -26,21 +26,21 @@
<div class="slider-grid">
<div class="card">
<div class="game-card-content">
<h3 class="game-heading">Slots</h3>
<h3 class="game-heading-sm">Slots</h3>
<p class="game-text">Klassische Spielautomaten</p>
<button class="button-base w-full py-2">Jetzt Spielen</button>
</div>
</div>
<div class="card">
<div class="game-card-content">
<h3 class="game-heading">Plinko</h3>
<h3 class="game-heading-sm">Plinko</h3>
<p class="game-text">Spannendes Geschicklichkeitsspiel</p>
<button class="button-base w-full py-2">Jetzt Spielen</button>
</div>
</div>
<div class="hidden lg:block card">
<div class="game-card-content">
<h3 class="game-heading">Blackjack</h3>
<h3 class="game-heading-sm">Blackjack</h3>
<p class="game-text">Klassisches Kartenspiel</p>
<button class="button-base w-full py-2">Jetzt Spielen</button>
</div>
@ -50,21 +50,21 @@
<div class="slider-grid">
<div class="card">
<div class="game-card-content">
<h3 class="game-heading">Poker</h3>
<h3 class="game-heading-sm">Poker</h3>
<p class="game-text">Texas Hold'em & mehr</p>
<button class="button-base w-full py-2">Jetzt Spielen</button>
</div>
</div>
<div class="card">
<div class="game-card-content">
<h3 class="game-heading">Liars Dice</h3>
<h3 class="game-heading-sm">Liars Dice</h3>
<p class="game-text">Würfelspiel mit Strategie</p>
<button class="button-base w-full py-2">Jetzt Spielen</button>
</div>
</div>
<div class="hidden lg:block card">
<div class="game-card-content">
<h3 class="game-heading">Lootboxen</h3>
<h3 class="game-heading-sm">Lootboxen</h3>
<p class="game-text">Überraschungskisten</p>
<button class="button-base w-full py-2">Jetzt Spielen</button>
</div>

6
frontend/src/styles.css
View File

@ -63,10 +63,14 @@ a {
@apply font-bold text-text-primary;
}
.game-heading {
.game-heading-sm {
@apply font-bold text-text-primary text-sm mb-2;
}
.game-heading-xl {
@apply font-bold text-text-primary text-xl mb-2;
}
.game-text {
@apply text-text-secondary text-sm mb-4;
}