Final project polish: Refined game, added NAT gating, and GEMINI.md handbook.

GEMINI.md

@@ -0,0 +1,50 @@
+# 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`.

deploy.sh

@@ -2,7 +2,7 @@
 
 # Configuration
 NAMESPACE="haumdaucher"
-REGISTRY="registry.moritzgraf.de"
+REGISTRY="registry.haumdaucher.de"
 IMAGE_BASE_NAME="haumdaucher-website"
 IMAGE_NAME="$REGISTRY/$IMAGE_BASE_NAME"
 TAG="latest"
@@ -24,5 +24,9 @@ docker push $IMAGE_NAME:$TAG
 echo "🎡 Applying Kubernetes manifests..."
 kubectl apply -f k8s-manifests.yaml
 
+# Force rollout restart to pick up the new 'latest' image
+echo "🔄 Restarting deployment to pull latest image..."
+kubectl rollout restart deployment/haumdaucher-website -n $NAMESPACE
+
 echo "✅ Deployment complete!"
 echo "Check status with: kubectl get pods -n $NAMESPACE"

k8s-manifests.yaml

@@ -19,7 +19,7 @@ spec:
       - name: registry-haumdaucher-de
       containers:
       - name: haumdaucher
-        image: registry.moritzgraf.de/haumdaucher-website:latest
+        image: registry.haumdaucher.de/haumdaucher-website:latest
         imagePullPolicy: Always
         ports:
         - containerPort: 80

src/App.vue

@@ -12,6 +12,7 @@ const theme = ref('classic')
 const lang = ref<'de' | 'bar'>('de')
 const showGame = ref(false)
 const showBSOD = ref(false)
+const isNatUnlocked = ref(false)
 const boars = ref<{id: number, top: number}[]>([])
 
 const toggleTheme = (newTheme: string) => {
@@ -24,6 +25,19 @@ const toggleTheme = (newTheme: string) => {
   }
 }
 
+const unlockNat = () => {
+  isNatUnlocked.value = true
+  localStorage.setItem('haumdaucher-nat-unlocked', 'true')
+}
+
+const handleBackdoor = () => {
+  const secret = prompt('Bitte Geheimcode eigem (Unlock NAT):')
+  if (secret?.toLowerCase() === 'nat mode') {
+    unlockNat()
+    alert('🐗 NAT-Modus freigschaltet! Wiedaschaun, reinghaun!')
+  }
+}
+
 const startBoarRun = () => {
   setInterval(() => {
     if (theme.value === 'nat') {
@@ -54,6 +68,9 @@ onMounted(() => {
 
   const savedLang = localStorage.getItem('haumdaucher-lang') as 'de' | 'bar'
   if (savedLang) lang.value = savedLang
+
+  const savedNat = localStorage.getItem('haumdaucher-nat-unlocked')
+  if (savedNat === 'true') isNatUnlocked.value = true
 })
 
 const t = (key: string) => {
@@ -71,6 +88,7 @@ const t = (key: string) => {
   <Header 
     :currentTheme="theme" 
     :currentLang="lang" 
+    :isNatUnlocked="isNatUnlocked"
     @update:theme="toggleTheme" 
     @update:lang="toggleLang"
     @open:game="showGame = true"
@@ -81,9 +99,18 @@ const t = (key: string) => {
     <About :t="t" />
     <History :t="t" />
     <Beer :t="t" />
+    
+    <!-- Hidden Backdoor Pixel -->
+    <div class="backdoor" @click.stop="handleBackdoor"></div>
   </main>
   
-  <HaumdaucherGame v-if="showGame" :t="t" @close="showGame = false" />
+  <HaumdaucherGame 
+    v-if="showGame" 
+    :t="t" 
+    :theme="theme"
+    @close="showGame = false" 
+    @unlock-nat="unlockNat"
+  />
   
   <div v-if="showBSOD" class="bsod">
     <h1>:(</h1>
@@ -126,4 +153,15 @@ const t = (key: string) => {
   0% { left: -100px; }
   100% { left: 100vw; }
 }
+
+.backdoor {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 10px;
+  height: 10px;
+  cursor: pointer;
+  z-index: 9999;
+  opacity: 0;
+}
 </style>

src/components/layout/HaumdaucherGame.vue

@@ -1,24 +1,67 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 
 const props = defineProps<{
   t: (key: string) => string
+  theme: string
 }>()
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'unlock-nat'])
 
 const canvas = ref<HTMLCanvasElement | null>(null)
 const gameState = ref<'start' | 'playing' | 'gameOver' | 'win'>('start')
 const score = ref(0)
 const level = ref(1)
+const TOTAL_LEVELS = 10
 
 let ctx: CanvasRenderingContext2D | null = null
 let animationId: number
-let playerX = 200
+let playerX = 180
 const playerY = 500
 const playerWidth = 40
 const playerHeight = 40
 
+// Theme-based configurations
+const themeConfig = computed(() => {
+  switch (props.theme) {
+    case 'unicorn':
+      return { 
+        bg: '#fff0fb', 
+        player: '🦄', 
+        obstacles: { trash: '🍬', boat: '🍭', boar: '🧁' },
+        waves: 'rgba(255, 105, 180, 0.3)'
+      }
+    case 'luxury':
+      return { 
+        bg: '#0a0a0a', 
+        player: '👑', 
+        obstacles: { trash: '💎', boat: '💍', boar: '💰' },
+        waves: 'rgba(212, 175, 55, 0.4)'
+      }
+    case 'win95':
+      return { 
+        bg: '#c0c0c0', 
+        player: '🖱️', 
+        obstacles: { trash: '🗑️', boat: '📁', boar: '💣' },
+        waves: 'rgba(0,0,0,0.1)'
+      }
+    case 'nat':
+      return { 
+        bg: '#1a2f1a', 
+        player: '🐗', 
+        obstacles: { trash: '🪵', boat: '🛶', boar: '🦢' },
+        waves: 'rgba(255,255,255,0.1)'
+      }
+    default:
+      return { 
+        bg: '#1e3a8a', 
+        player: '🦢', 
+        obstacles: { trash: '🗑️', boat: '🚤', boar: '🐗' },
+        waves: 'rgba(255,255,255,0.2)'
+      }
+  }
+})
+
 interface Obstacle {
   x: number
   y: number
@@ -29,6 +72,16 @@ interface Obstacle {
 const obstacles = ref<Obstacle[]>([])
 const keys = ref<Record<string, boolean>>({})
 
+// Touch handling
+const handleTouchMove = (e: TouchEvent) => {
+  if (gameState.value !== 'playing') return
+  const touchX = e.touches[0].clientX
+  const canvasRect = canvas.value?.getBoundingClientRect()
+  if (canvasRect) {
+    playerX = Math.max(0, Math.min(360, (touchX - canvasRect.left) * (400 / canvasRect.width) - (playerWidth / 2)))
+  }
+}
+
 const initGame = () => {
   gameState.value = 'playing'
   score.value = 0
@@ -40,25 +93,26 @@ const initGame = () => {
 
 const gameLoop = () => {
   if (gameState.value !== 'playing') return
-  
   update()
   draw()
   animationId = requestAnimationFrame(gameLoop)
 }
 
 const update = () => {
-  // Move player
+  // Move player (Keyboard)
-  if (keys.value['ArrowLeft'] && playerX > 0) playerX -= 5
+  const speed = 7 // Made slightly faster for easier control
-  if (keys.value['ArrowRight'] && playerX < 360) playerX += 5
+  if (keys.value['ArrowLeft'] && playerX > 0) playerX -= speed
+  if (keys.value['ArrowRight'] && playerX < 360) playerX += speed
 
-  // Spawn obstacles
+  // Spawn obstacles - Adjusted frequency for better balance
-  if (Math.random() < 0.012 + level.value * 0.003) {
+  const spawnChance = 0.01 + level.value * 0.002
-    const type = level.value === 10 ? 'boar' : (Math.random() > 0.5 ? 'trash' : 'boat')
+  if (Math.random() < spawnChance) {
+    const type = level.value === TOTAL_LEVELS ? 'boar' : (Math.random() > 0.6 ? 'trash' : 'boat')
     obstacles.value.push({
-      x: Math.random() * 360,
+      x: Math.random() * 370,
       y: -50,
       type: type,
-      speed: 2 + level.value * 0.4
+      speed: 1.5 + level.value * 0.45 // Slightly slower for level 1 but scales up
     })
   }
 
@@ -66,12 +120,13 @@ const update = () => {
   obstacles.value.forEach(obs => {
     obs.y += obs.speed
     
-    // Collision detection
+    // Collision detection (with a bit of buffer for better feel)
+    const buffer = 10
     if (
-      playerX < obs.x + 30 &&
+      playerX + buffer < obs.x + 30 &&
-      playerX + playerWidth > obs.x &&
+      playerX + playerWidth - buffer > obs.x &&
-      playerY < obs.y + 30 &&
+      playerY + buffer < obs.y + 30 &&
-      playerY + playerWidth > obs.y
+      playerY + playerHeight - buffer > obs.y
     ) {
       gameState.value = 'gameOver'
     }
@@ -81,12 +136,14 @@ const update = () => {
 
   // Score and level up
   score.value += 1
-  if (score.value % 500 === 0 && level.value < 10) {
+  if (score.value % 500 === 0 && level.value < TOTAL_LEVELS) {
     level.value += 1
   }
   
-  if (score.value > 5500) {
+  // Win condition
+  if (score.value >= TOTAL_LEVELS * 500 + 500) {
     gameState.value = 'win'
+    emit('unlock-nat')
   }
 }
 
@@ -94,28 +151,30 @@ const draw = () => {
   if (!ctx) return
   ctx.clearRect(0, 0, 400, 600)
 
-  // Draw River (Donube)
+  // Draw Background
-  ctx.fillStyle = '#1e3a8a'
+  ctx.fillStyle = themeConfig.value.bg
   ctx.fillRect(0, 0, 400, 600)
   
   // Draw Waves
-  ctx.strokeStyle = 'rgba(255,255,255,0.2)'
+  ctx.strokeStyle = themeConfig.value.waves
+  ctx.lineWidth = 2
   for (let i = 0; i < 5; i++) {
+    const y = (Date.now() / 20 + i * 120) % 650
     ctx.beginPath()
-    ctx.moveTo(0, (Date.now() / 20 + i * 120) % 650)
+    ctx.moveTo(0, y)
-    ctx.lineTo(400, (Date.now() / 20 + i * 120) % 650)
+    ctx.bezierCurveTo(100, y - 10, 300, y + 10, 400, y)
     ctx.stroke()
   }
 
-  // Draw Player (Bird)
+  // Draw Player
   ctx.font = '40px Arial'
-  ctx.fillText('🦢', playerX, playerY)
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'top'
+  ctx.fillText(themeConfig.value.player, playerX, playerY)
 
   // Draw Obstacles
   obstacles.value.forEach(obs => {
-    let emoji = '🗑️'
+    const emoji = themeConfig.value.obstacles[obs.type]
-    if (obs.type === 'boat') emoji = '🚤'
-    if (obs.type === 'boar') emoji = '🐗'
     ctx.fillText(emoji, obs.x, obs.y)
   })
 }
@@ -147,29 +206,45 @@ onUnmounted(() => {
       </div>
       
       <div class="canvas-container">
-        <canvas ref="canvas" width="400" height="600"></canvas>
+        <canvas 
+          ref="canvas" 
+          width="400" 
+          height="600"
+          @touchmove.prevent="handleTouchMove"
+        ></canvas>
         
         <div v-if="gameState === 'start'" class="overlay-content">
           <h2>{{ t('game.title') }}</h2>
           <p>Weich am Schmarrn in da Donau aus!</p>
+          <p style="font-size: 0.8rem; margin-top: 10px; opacity: 0.8;">Desktop: Pfeile | Mobile: Wischen</p>
           <button @click="initGame">{{ t('game.start') }}</button>
         </div>
 
         <div v-if="gameState === 'gameOver'" class="overlay-content">
-          <h2 style="color: #ff4444">{{ t('game.gameOver') }}</h2>
+          <h2 style="color: #ff4444; margin-bottom: 5px;">{{ t('game.gameOver') }}</h2>
+          <p>Level: {{ level }} / {{ TOTAL_LEVELS }}</p>
           <p>Score: {{ score }}</p>
           <button @click="initGame">No amoi!</button>
         </div>
 
         <div v-if="gameState === 'win'" class="overlay-content">
-          <h2 style="color: #44ff44">🏆 {{ t('game.win') }}</h2>
+          <h2 style="color: #44ff44; margin-bottom: 10px;">🏆 {{ t('game.win') }}</h2>
-          <p>Du hosd es gschafft!</p>
+          <p>Du hosd an NATinator bsiegt!</p>
+          <p style="color: #ffd700; font-weight: bold; margin-top: 10px;">🐗 NAT-Modus freigschaltet!</p>
           <button @click="emit('close')">Zruck zur Website</button>
         </div>
 
         <div v-if="gameState === 'playing'" class="game-stats">
-          <span>{{ t('game.level') }}: {{ level === 10 ? 'NATinator' : level }}</span>
+          <div class="stats-left">
-          <span>Score: {{ score }}</span>
+            <span class="level-badge">{{ t('game.level') }} {{ level }}/{{ TOTAL_LEVELS }}</span>
+            <span v-if="level === TOTAL_LEVELS" class="boar-alert">🐗 BOAR RAIN! 🐗</span>
+          </div>
+          <span class="score-display">Score: {{ score }}</span>
+        </div>
+        
+        <!-- Progress Bar -->
+        <div v-if="gameState === 'playing'" class="progress-container">
+          <div class="progress-bar" :style="{ width: (score / (TOTAL_LEVELS * 500 + 500)) * 100 + '%' }"></div>
         </div>
       </div>
     </div>
@@ -263,9 +338,60 @@ canvas {
   right: 10px;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   color: white;
   font-weight: bold;
-  background: rgba(0,0,0,0.5);
+  background: rgba(0,0,0,0.6);
-  padding: 5px 10px;
+  padding: 8px 12px;
+  pointer-events: none;
+  font-size: 0.9rem;
+}
+
+.stats-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.level-badge {
+  color: #fbbf24;
+}
+
+.boar-alert {
+  color: #ff4444;
+  font-size: 0.7rem;
+  animation: blink 0.5s infinite;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+.progress-container {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: rgba(0,0,0,0.3);
+}
+
+.progress-bar {
+  height: 100%;
+  background: #4ade80;
+  transition: width 0.3s;
+}
+
+@media (max-width: 450px) {
+  .game-window {
+    width: 95vw;
+  }
+  .canvas-container {
+    width: 100%;
+  }
+  canvas {
+    width: 100%;
+    height: auto;
+  }
 }
 </style>

src/components/layout/Header.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
   currentTheme: string
   currentLang: string
+  isNatUnlocked: boolean
   t: (key: string) => string
 }>()
 
 const emit = defineEmits(['update:theme', 'update:lang', 'open:game'])
+
+const themes = ['classic', 'unicorn', 'luxury', 'win95', 'nat']
 </script>
 
 <template>
@@ -26,20 +29,22 @@ const emit = defineEmits(['update:theme', 'update:lang', 'open:game'])
             </button>
           </div>
           <div class="switch-group">
-            <button 
+            <template v-for="th in themes">
-              v-for="th in ['classic', 'unicorn', 'luxury', 'win95', 'nat']" 
+              <button 
-              :key="th"
+                v-if="th !== 'nat' || isNatUnlocked"
-              :class="{ active: currentTheme === th }"
+                :key="th"
-              @click="emit('update:theme', th)"
+                :class="{ active: currentTheme === th }"
-              class="theme-btn"
+                @click="emit('update:theme', th)"
-              :title="th"
+                class="theme-btn"
-            >
+                :title="th"
-              <span v-if="th === 'classic'">⚫</span>
+              >
-              <span v-if="th === 'unicorn'">🦄</span>
+                <span v-if="th === 'classic'">⚫</span>
-              <span v-if="th === 'luxury'">👑</span>
+                <span v-if="th === 'unicorn'">🦄</span>
-              <span v-if="th === 'win95'">💾</span>
+                <span v-if="th === 'luxury'">👑</span>
-              <span v-if="th === 'nat'">🐗</span>
+                <span v-if="th === 'win95'">💾</span>
-            </button>
+                <span v-if="th === 'nat'">🐗</span>
+              </button>
+            </template>
           </div>
         </div>
       </div>

src/components/sections/Hero.vue

@@ -7,11 +7,11 @@ const props = defineProps<{
 }>()
 
 const logoSrc = computed(() => {
-  if (props.theme === 'unicorn') return '/src/assets/images/logo_unicorn.png'
+  if (props.theme === 'unicorn') return '/images/logo_unicorn.png'
-  if (props.theme === 'luxury') return '/src/assets/images/logo_luxury.png'
+  if (props.theme === 'luxury') return '/images/logo_luxury.png'
-  if (props.theme === 'win95') return '/src/assets/images/logo_win95.png'
+  if (props.theme === 'win95') return '/images/logo_win95.png'
-  if (props.theme === 'nat') return '/src/assets/images/logo_nat.png'
+  if (props.theme === 'nat') return '/images/logo_nat.png'
-  return '/src/assets/images/logo_classic.png'
+  return '/images/logo_classic.png'
 })
 </script>