Archived

This repository has been archived on 2025-06-18. You can view files and clone it, but you cannot make any changes to its state, such as pushing and creating new issues, pull requests or comments.

History

jank 16b052c0f3 Some checks failed CI / Get Changed Files (pull_request) Successful in 12s Details CI / Backend Tests (pull_request) Has been skipped Details Label PRs based on size / Check PR size (pull_request) Successful in 12s Details CI / Checkstyle Main (pull_request) Has been skipped Details CI / Docker backend validation (pull_request) Has been skipped Details Pull Request Labeler / labeler (pull_request_target) Successful in 17s Details Claude PR Review / claude-code (pull_request) Successful in 49s Details CI / prettier (pull_request) Successful in 53s Details CI / oxlint (pull_request) Successful in 1m7s Details CI / eslint (pull_request) Successful in 1m10s Details CI / test-build (pull_request) Failing after 1m8s Details CI / Docker frontend validation (pull_request) Failing after 1m18s Details chore: Combine some renovate pr's		2025-06-04 08:30:26 +02:00
..
.docker	fix: Fix frontend build bc apparently they changed the node version	2025-06-01 11:09:07 +02:00
public	fix: Make user not able to enter too much money	2025-05-21 11:03:52 +02:00
src	style(dice.component.html): fix whitespace in HTML file	2025-05-21 14:07:03 +02:00
.dockerignore	feat(docker): add Docker configuration for frontend app	2025-04-24 14:23:17 +02:00
.editorconfig	first	2024-09-11 10:40:00 +02:00
.gitignore	first	2024-09-11 10:40:00 +02:00
.postcssrc.json	feat: add TailwindCSS and PostCSS configuration (!6)	2025-02-05 10:26:15 +00:00
.prettierignore	chore(setup): Add and configure prettier (!4)	2025-02-05 10:01:05 +00:00
.prettierrc	chore(setup): Add and configure prettier (!4)	2025-02-05 10:01:05 +00:00
angular.json	feat(docker): add Docker configuration for frontend app	2025-04-24 14:23:17 +02:00
eslint.config.js	style: Configure and run eslint	2025-02-13 10:58:13 +01:00
package.json	chore: Combine some renovate pr's	2025-06-04 08:30:26 +02:00
README.md	feat: add MIT License and update README for clarity	2025-03-12 14:29:21 +01:00
tsconfig.app.json	first	2024-09-11 10:40:00 +02:00
tsconfig.json	style(tsconfig): update path mappings to array syntax	2025-04-02 10:12:29 +02:00
tsconfig.spec.json	first	2024-09-11 10:40:00 +02:00

README.md

Casino Gaming Platform - Frontend

This is the frontend application for the Casino Gaming Platform. It's built with Angular 18 and TailwindCSS, providing a responsive and modern UI for the casino gaming experience.

Development

Commands

Build: bun run build or bunx @angular/cli build
Start Dev Server: bun run start or bunx @angular/cli serve --proxy-config src/proxy.conf.json
Format Code: bun run format or prettier --write "src/**/*.{ts,html,css,scss}"
Lint: bun run lint or ng lint
Test: bun run test or bunx @angular/cli test
Test Single File: bunx @angular/cli test --include=path/to/test.spec.ts

Style Guide

Color Palette

Primary Colors

Deep Blue: #0a1219 (background)
Deep Blue Light: #121e27 (secondary background)
Deep Blue Contrast: #1a2835 (cards, elements)

Accent Colors

Emerald: #10b981 (primary buttons)
Emerald Dark: #059669 (button hover)
Emerald Light: #34d399 (highlights)

Text Colors

Primary Text: #ffffff (white)
Secondary Text: #94a3b8 (light gray)
Tertiary Text: #64748b (darker gray)

Additional Accents

Yellow: #fbbf24
Red: #ef4444
Purple: #8b5cf6

Typography

Font Sizes

Extra Small: Text-xs (footer disclaimers)
Small: Text-sm (navigation links, footer links)
Base: Text-base (general text)
Large: Text-lg (section headings)
Extra Large: Text-xl (stat numbers, game headings)
Display: Text-4xl/5xl/7xl (welcome bonus text)

Font Weights

Normal: General text
Medium: Labels
Semibold: Navigation brand
Bold: Headings, stats
Extrabold: Welcome bonus text

Components

Buttons

Primary: Emerald background with hover state
Secondary: Deep blue light background with hover state
All buttons have active scale effect (95%)
Transition duration: 200-300ms

Cards

Background: Deep blue contrast
Rounded corners (lg)
Shadow effects with hover transition
Consistent padding (p-4)

Desktop: Horizontal links with hover effects
Mobile: Collapsible menu with toggle
Links have color and background transitions

Modals

Backdrop blur with dark overlay
Card-style container with emerald focus rings
Consistent form styling with transitions

Forms

Inputs

Dark background with border
Focus states with emerald accent
Consistent padding and rounded corners
Clear label positioning

Layout

Grid System

Mobile-first responsive grid
Breakpoints: sm, md, lg
Grid columns: 1 (mobile), 2 (tablet), 3 (desktop)
Consistent gap spacing (gap-4)

Spacing

Consistent margin/padding scale
Mobile-responsive spacing adjustments

Animation

Transitions: 200-500ms duration
Hover/active state animations
Scale transformations (95-110%)
Opacity transitions for navigation elements

Components & Classes

Common UI Elements

.card - Base card container
.button-primary - Main CTA buttons
.button-secondary - Alternative action buttons
.section-heading - Section titles
.nav-link - Navigation links
.modal-card - Modal container

Game Elements

.game-card-content - Game information container
.game-heading-sm - Small game titles
.game-heading-xl - Large game titles
.game-text - Game descriptions
.slider-container - Game carousel container

Responsive Design

Mobile-first approach
Tailwind breakpoints (sm, md, lg)
Different layouts based on screen size
Responsive text sizing and spacing
Hidden/visible elements using responsive classes

CSS Framework

Tailwind CSS for utility classes
Custom utility classes with @apply directive
CSS variables for theming
Component-based styling approach