feat(sasch40): multi-room tavern, authentic character portraits, pre-level start screens & bollerwagen redesign

projects/sasch40/frontend/src/components/PlatformerView.vue

@@ -5,8 +5,14 @@ import { sound } from '../audio/synthAudio'
 
 const store = useGameStore()
 const canvasRef = ref<HTMLCanvasElement | null>(null)
+const showLevelIntro = ref(true)
 let animationFrameId: number | null = null
 
+function startLevel() {
+  sound.playDialogueBlip()
+  showLevelIntro.value = false
+}
+
 // Game state
 interface Platform {
   x: number
@@ -428,7 +434,9 @@ function drawGame(ctx: CanvasRenderingContext2D, width: number, height: number)
 }
 
 function gameLoop() {
-  updatePhysics()
+  if (!showLevelIntro.value) {
+    updatePhysics()
+  }
   if (canvasRef.value) {
     const ctx = canvasRef.value.getContext('2d')
     if (ctx) {
@@ -481,10 +489,42 @@ onUnmounted(() => {
     <div class="platformer-hud-top">
       <div class="hud-korken-badge">👑 {{ store.kronkorken }} KORKEN</div>
       <div class="level-overlay">
-        <span class="level-title">AKTE II: DIE HOPFEN-PFADE</span>
+        <span class="level-title">AKT II: DIE HOPFEN-PFADE</span>
         <span class="level-hint">Tippe oder drücke SPRUNG zum Hüpfen</span>
       </div>
     </div>
+
+    <!-- Pre-Level Start Screen Modal -->
+    <div v-if="showLevelIntro" class="level-intro-modal">
+      <div class="intro-card">
+        <div class="intro-act-tag">👑 AKT II: JUMP & RUN</div>
+        <h2 class="intro-card-title">DIE HOPFEN-PFADE</h2>
+        <p class="intro-card-story">
+          Hört die Kunde, edler König Sascha!<br />
+          Deine Untertanen dürsten im ganzen Herzogtum nach frischem Gerstensaft. Doch ohne deine 40 heiligen Kronkorken bleiben die Fässer versiegelt!
+        </p>
+        <div class="mission-callout">
+          <span class="callout-icon">🎯</span>
+          <div class="callout-text">
+            <strong>KÖNIGLICHE MISSION:</strong><br />
+            Hüpfe über Ziegeldächer und Holzgerüste. Sammle mindestens <strong>5 Kronkorken</strong>, um das Tor zur Taverne zu entriegeln!
+          </div>
+        </div>
+        <div class="controls-overview">
+          <div class="ctrl-item">
+            <span class="ctrl-badge">🕹️ STEUERKREUZ</span>
+            <span class="ctrl-label">Laufen (Links / Rechts)</span>
+          </div>
+          <div class="ctrl-item">
+            <span class="ctrl-badge">🅰️ A-TASTE / TIPPE</span>
+            <span class="ctrl-label">Sprung (auch Doppel-Sprung!)</span>
+          </div>
+        </div>
+        <button class="start-act-btn" @click="startLevel">
+          🚀 AUF DIE DÄCHER! (START)
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -550,4 +590,124 @@ onUnmounted(() => {
   color: #fef08a;
   text-shadow: 1px 1px 0 #000;
 }
+
+/* Pre-Level Start Screen Modal */
+.level-intro-modal {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.88);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px;
+  z-index: 50;
+  backdrop-filter: blur(2px);
+}
+
+.intro-card {
+  background: #231209;
+  border: 3px double #d4af37;
+  border-radius: 10px;
+  padding: 16px 14px;
+  max-width: 320px;
+  width: 100%;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 8px;
+}
+
+.intro-act-tag {
+  font-family: 'Press Start 2P', monospace;
+  font-size: 6.5px;
+  color: #f59e0b;
+  letter-spacing: 0.5px;
+}
+
+.intro-card-title {
+  font-family: 'Press Start 2P', monospace;
+  font-size: 10px;
+  color: #ffd700;
+  margin: 0;
+  text-shadow: 1px 1px 0 #000;
+}
+
+.intro-card-story {
+  font-family: 'MedievalSharp', serif;
+  font-size: 13px;
+  color: #fef08a;
+  line-height: 1.35;
+  margin: 0;
+}
+
+.mission-callout {
+  background: #451a03;
+  border-left: 3px solid #22c55e;
+  border-radius: 4px;
+  padding: 8px 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+}
+
+.callout-icon {
+  font-size: 20px;
+}
+
+.callout-text {
+  font-family: 'MedievalSharp', serif;
+  font-size: 12.5px;
+  color: #bbf7d0;
+  line-height: 1.3;
+}
+
+.controls-overview {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 100%;
+  background: #170c06;
+  border: 1px solid #78350f;
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+
+.ctrl-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ctrl-badge {
+  font-family: 'Press Start 2P', monospace;
+  font-size: 6.5px;
+  color: #ffd700;
+}
+
+.ctrl-label {
+  font-family: 'MedievalSharp', serif;
+  font-size: 12px;
+  color: #fed7aa;
+}
+
+.start-act-btn {
+  background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
+  color: #fff;
+  border: 2px solid #ffd700;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-family: 'Press Start 2P', monospace;
+  font-size: 8px;
+  cursor: pointer;
+  margin-top: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
+  transition: transform 0.1s;
+}
+
+.start-act-btn:active {
+  transform: scale(0.96);
+}
 </style>