Merge pull request 'feat: add homepage ui and images' (!38) from feature/homepage-games-preview into main
Reviewed-on: https://git.simonis.lol/projects/casino/pulls/38 Reviewed-by: We ball <jan@kjan.email> Reviewed-by: Huy <ptran@noreply@simonis.lol>
This commit is contained in:
lziemke
commit
cc8f553d66
10 changed files with 174 additions and 24 deletions
BIN
frontend/public/blackjack.webp
Normal file
BIN
frontend/public/blackjack.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
frontend/public/liars-dice.webp
Normal file
BIN
frontend/public/liars-dice.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
frontend/public/lootbox.webp
Normal file
BIN
frontend/public/lootbox.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
BIN
frontend/public/plinko.webp
Normal file
BIN
frontend/public/plinko.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
frontend/public/poker.webp
Normal file
BIN
frontend/public/poker.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
frontend/public/slots.webp
Normal file
BIN
frontend/public/slots.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
|
|
@ -1,19 +1,91 @@
|
|||
<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>
|
||||
|
||||
<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 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>
|
||||
</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 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>
|
||||
|
|
|
|||
|
|
@ -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.0;
|
||||
|
||||
featuredGames: Game[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Poker',
|
||||
image: '/poker.webp',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Blackjack',
|
||||
image: '/blackjack.webp',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Slots',
|
||||
image: '/slots.webp',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'Plinko',
|
||||
image: '/plinko.webp',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'Liars Dice',
|
||||
image: '/liars-dice.webp',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'Lootboxen',
|
||||
image: '/lootbox.webp',
|
||||
},
|
||||
];
|
||||
|
||||
allGames: Game[] = [...this.featuredGames];
|
||||
|
||||
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',
|
||||
},
|
||||
];
|
||||
|
||||
public logout() {
|
||||
const baseUrl = window.location.origin;
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue