LoboTheDark
6f282a004b
Introduce Cocktail (Shaker) Sort to the sorting visualizer: implement cocktailSort and a helper switchValuesIfCorrect in the SortingService to generate snapshots for the animation. Add SHAKE_SORT_WIKI URL constant and a UI paragraph (with a link) plus German translation text for the algorithm explanation. Expose the new algorithm in the component (availableAlgorithms and switch handling). Also refactor the component to use Angular's inject() for SortingService and ChangeDetectorRef, tighten some typings (timeoutIds -> number[]), adjust default arraySize, and use const where appropriate.
📗 playground-frontend/README.md
🎨 Playground Frontend
This is the frontend of the Playground project.
Built with Angular 21 and Angular Material, including a simple light/dark theme toggle and multi-language support via ngx-translate.
The app is built as a static Single Page Application (SPA) served by NGINX,
deployed at:
👉 https://app.andreas-dahm.eu
🧩 Tech Stack
| Component | Purpose |
|---|---|
| Angular 21 | Frontend framework |
| Angular Material | UI components & theming |
| ngx-translate | i18n / instant translation |
| NGINX | Serves the compiled SPA |
| Docker + GitHub Actions | Automated build & image publishing |
📁 Project Structure
playground-frontend/ ├─ src/ │ ├─ app/ │ │ ├─ app.component.ts │ │ ├─ theme.service.ts │ │ └─ ... │ ├─ assets/i18n/ │ │ ├─ en.json │ │ └─ de.json │ └─ index.html ├─ Dockerfile ├─ nginx.conf └─ .github/workflows/docker.yml
🚀 Local Development
1. Install dependencies
npm install
2. Start development server
ng serve --open
App runs at http://localhost:4200
3. 🐳 Docker Build (local)
docker build -t playground-frontend:local .
docker run -p 8080:80 playground-frontend:local
Then open http://localhost:8080
⚙️ GitHub Actions (CI/CD)
On every push to main, GitHub Actions will:
Build the Angular project
- Create a Docker image
- Push it to Docker Hub (docker.io/andreasdahm/playground-frontend:main)
- Workflow file: .github/workflows/docker.yml
Required repository secrets:
Name Description DOCKERHUB_USERNAME Your Docker Hub username DOCKERHUB_TOKEN Personal access token for Docker Hub
🌐 Deployment
The built image is deployed via https://github.com/lobothedark/playground-deploy
on the Hostinger KVM server using Traefik.
docker compose pull docker compose up -d
✅ Live site at https://app.andreas-dahm.eu
🪄 Maintainer
Andreas Dahm 📧 andreas.dahm@gmail.com 🌐 https://andreas-dahm.eu