haumdaucher_de/GEMINI.md

2.8 KiB

GEMINI.md - Haumdaucher Project Handbook

This document serves as the "Source of Truth" for the Haumdaucher website. It outlines the design principles, technical architecture, and specialized features to ensure consistent future development.

🦢 Project Essence

Haumdaucher is a community project from Regensburg, Germany. The website is designed to be humorous, culturally rich (Bavarian), and technically "surprising."

🎨 Design Principles

  • Vibrant Aesthetics: Each theme must feel like a completely different app.
  • Glassmorphism: Use backdrop-filter and semi-transparent backgrounds for a premium feel.
  • Micro-interactions: Subtle entrance animations (logo spin, hero text slide) and consistent hover states.
  • Accessibility: Mobile-first design with safe-area support for PWA usage on iOS/Android.

🛠 Technical Specifications

  • Framework: Vue 3 (Composition API) + Vite + TypeScript.
  • State Management: Centralized in App.vue using standard ref hooks. Persisted in localStorage.
  • Theming System:
    • Driven by data-theme attribute on :root.
    • Defined in src/assets/styles/global.css.
    • Themes: Classic, Unicorn, Luxury, Win95, NAT.
  • Localization:
    • Centralized in src/locales/i18n.ts.
    • Supports de (Standard German) and bar (Bavarian Dialect).
  • PWA:
    • Managed via vite-plugin-pwa.
    • Custom icons and standalone manifest for "Add to Home Screen" support.

🕹 The Haumdaucher Game

  • Engine: HTML5 Canvas rendering.
  • Controls: Touch-responsive (horizontal drag) and Keyboard (Arrow Keys).
  • Thematization: The game visual style (backgrounds, player, obstacles) changes dynamically based on the site's active theme.
  • Difficulty: Balanced (10 levels). Level 10 triggers a "Boar Rain" supermode.

🔐 Progression & Gating

  • NAT Mode: This theme is locked by default to maintain the "collectible" feel.
  • Unlocking:
    • Natural: Reach Level 10 in the game.
    • Backdoor: Single 1x1 pixel in the bottom-left corner of the site. Clicking it triggers a prompt. Type nat mode to unlock.

🚢 Deployment & DevOps

  • Docker: Dual-stage build (Node build -> Nginx serving).
  • Registry: registry.haumdaucher.de.
  • Kubernetes:
    • Managed via k8s-manifests.yaml.
    • Features cert-manager for SSL and registry-haumdaucher-de pull secret.
  • CI/CD Logic: The deploy.sh script handles builds, pushes, and triggers a kubectl rollout restart to force deployment updates when utilizing the latest image tag.

📝 Ongoing Maintenance

  • Assets: Static images should be placed in public/images/ to avoid bundling issues in production containers.
  • Style Overrides: Mobile-first approach is mandatory. Always test with max-width: 375px.