Migrate frontend to SvelteKit with comprehensive deployment (#2)

* Migrate frontend to SvelteKit with comprehensive deployment
documentation

- Create new SvelteKit project structure with routing, stores, and
  components
- Implement complete authentication system with auth store and protected
  routes
- Build all application pages: Home, Login, Register, Dashboard, Games,
  Stats, Commanders, Profile, and Round Counter
- Configure Vite, TailwindCSS, PostCSS, and Nginx for production
  deployment
- Add Dockerfile.svelte for containerized builds with multi-stage
  optimization
- Create comprehensive SVELTE_DEPLOYMENT.md and SVELTE_MIGRATION.md
  guides
- Update deployment scripts and package dependencies for SvelteKit
  ecosystem

* feat: Add user authentication and game tracking pages to EDH Stats
Tracker

* Migrate frontend to SvelteKit and update Docker configuration

- Replace Alpine.js with SvelteKit for improved DX and hot module
  replacement
- Switch frontend service to `Dockerfile.dev` with volume mounts and
  Vite dev server
- Update `docker-compose.yml` to map ports 5173 and use
  `http://localhost:5173` for CORS
- Add `Dockerfile.svelte` for production static builds
- Configure Vite proxy to target `http://backend:3000` in containers and
  `localhost:3002` locally
- Migrate existing components to new routes and update authentication
  store logic
- Add Chart.js integration to stats page and handle field name mapping
  for forms
- Include static assets (`fonts/Beleren-Bold.ttf`) and update deployment
  scripts
- Document migration status, testing checklist, and known minor issues
  in guides

* Refactor frontend state properties from snake_case to camelCase

This commit standardizes frontend property access across Dashboard,
Games, and Stats pages.
Changes include:
- Renaming API data fields (e.g., `commanderName`, `playerCount`,
  `winRate`).
- Updating `startEdit` logic to normalize mixed snake_case/camelCase
  inputs.
- Replacing template literals like `_player_won` with camelCase
  versions.
- Consistent usage of `totalGames` and `wins` instead of snake_case
  variants.

* Update version to 2.1.12 and refactor commander management

- Upgrade application version to 2.1.12
- Add Footer component and include in all pages
- Refactor `/commanders` page to fetch commanders and stats separately
- Fix commander API endpoint to load all commanders instead of only
  those with stats
- Add stats merging logic to calculate wins, win rate, and avg rounds
- Split add/edit command logic into shared `loadCommanders` function
- Fix color toggle logic to work with both new and editing command modes
- Update API methods for update requests to send `PUT` for existing
  commanders
- Enhance commander delete functionality with proper API response
  handling
- Refactor dashboard and stats pages to reuse shared data loading logic
- Add chart cleanup on destroy for both dashboard and stats pages
- Implement Chart.js for Win Rate by Color and Player Count charts
- Reorganize round counter component state and timer functions
- Add localStorage persistence for round counter with pause/resume
  support
- Update game log page to integrate footer component

* Refactor auth store and backend to use stable user ID

*   Backend: Switch user lookup from username to ID in auth routes to
    maintain stability across username changes.
*   Frontend: Update user store to reflect ID-based updates.
*   UI: Refactor user menu Svelte component to use ID-based user data.
*   Profile: Switch profile page to use ID-based user data for
    validation and state management.

* format date formatting options consistently across dashboard and games
pages

* format date formatting options consistently across dashboard and games
pages

* Refactor card action buttons to use icons with semantic text

- Switch "Edit" and "Delete" button text to SVG icons in `commanders`
  and `games` pages
- Update icon colors and font styles to match standard design tokens
  (indigo/red, bold text)
- Improve responsive spacing by adding `lg:grid-cols-3`

* grids
- Clarify hover states and titles for better UX accessibility
  Bump application versions to 2.2.0 and update deployment configuration

* Convert `+page.svelte` to use template strings for multiline strings and
fix syntax errors.

* Update static version to 2.2.2 and tighten nginx cache headers
This commit is contained in:
2026-04-11 10:42:46 +02:00
committed by GitHub
parent 2b69a07cf6
commit d69a14d80b
68 changed files with 5741 additions and 5851 deletions

View File

@@ -133,7 +133,7 @@ check_github_token() {
update_version_file() {
print_header "Updating Version File"
local version_file="./frontend/public/version.txt"
local version_file="./frontend/static/version.txt"
local current_version=""
# Check if version file exists
@@ -172,21 +172,21 @@ build_backend() {
}
build_frontend() {
print_header "Building Frontend Image"
print_header "Building Frontend Image (SvelteKit)"
print_info "Building: ${FRONTEND_IMAGE}"
print_info "Building for architectures: linux/amd64"
# Note: Dockerfile.prod is now a permanent file in the repository
# It uses a multi-stage build to compile Tailwind CSS in production
# SvelteKit multi-stage build with Vite bundler
# Automatically handles cache busting with hashed filenames
docker buildx build \
--platform linux/amd64 \
--file ./frontend/Dockerfile.prod \
--file ./frontend/Dockerfile.svelte \
--tag "${FRONTEND_IMAGE}" \
--tag "${FRONTEND_IMAGE_LATEST}" \
--push \
.
./frontend
print_success "Frontend image built and pushed successfully"
}
@@ -402,10 +402,6 @@ networks:
traefik-network:
external: true
name: traefik-network
x-dockge:
urls:
- https://edh.zlor.fi
EOF
print_success "Deployment configuration generated: ${config_file}"
@@ -442,12 +438,12 @@ print_summary() {
echo "Version: ${VERSION}"
echo ""
echo "Version Management:"
echo " Frontend version file updated: ./frontend/public/version.txt"
echo " Version displayed in footer: v${VERSION#v}"
echo " Frontend version file updated: ./frontend/static/version.txt"
echo " SvelteKit with automatic cache busting (hashed filenames)"
echo ""
echo "Next Steps:"
echo " 1. Commit version update:"
echo " git add frontend/public/version.txt"
echo " git add frontend/static/version.txt"
echo " git commit -m \"Bump version to ${VERSION#v}\""
echo " 2. Pull images: docker pull ${BACKEND_IMAGE}"
echo " 3. Create .env file with PostgreSQL credentials:"