feat(sasch40): add retro birthday game subproject and k8s deployment
- Add Vue 3 + Vite + TypeScript retro game: 'Saschas Kronkorken Kreuzzug: 40 Jahre Bass & Gerstensaft' - Add dynamic GameBoy layout: controls visible only during arcade modes, fullscreen during dialogue and tavern - Add QR code welcome & prequel screen with lore, feature preview, and audio hints - Add competitive party highscore and ranking breakdown on royal certificate - Add dedicated individual 1:1 character portraits for Sascha, Verena, NAT, Hansi, Mop, Lutz, Armend, Amy, Mane, Pü, and Mario - Add Dockerfile, Makefile, and K8s deployment at sasch40.haumdaucher.de - Update openclaw timeout configuration
This commit is contained in:
Moritz Graf
@@ -0,0 +1,558 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useGameStore } from '../stores/gameStore'
|
||||
import { sound } from '../audio/synthAudio'
|
||||
import IntroView from './IntroView.vue'
|
||||
import PrologueView from './PrologueView.vue'
|
||||
import PlatformerView from './PlatformerView.vue'
|
||||
import TavernView from './TavernView.vue'
|
||||
import PartyExpressView from './PartyExpressView.vue'
|
||||
import CertificateModal from './CertificateModal.vue'
|
||||
|
||||
const store = useGameStore()
|
||||
const platformerRef = ref<InstanceType<typeof PlatformerView> | null>(null)
|
||||
const inventoryOpen = ref(false)
|
||||
|
||||
function handleJump() {
|
||||
if (platformerRef.value) {
|
||||
platformerRef.value.onJump()
|
||||
}
|
||||
}
|
||||
|
||||
function handleDpad(dir: 'left' | 'right', pressed: boolean) {
|
||||
if (platformerRef.value) {
|
||||
if (dir === 'left') platformerRef.value.onLeft(pressed)
|
||||
if (dir === 'right') platformerRef.value.onRight(pressed)
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAudio() {
|
||||
store.toggleMute()
|
||||
}
|
||||
|
||||
function toggleInventory() {
|
||||
inventoryOpen.value = !inventoryOpen.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="gameboy-chassis" :class="{ 'arcade-layout': store.isArcadeMode, 'adventure-layout': !store.isArcadeMode }">
|
||||
<!-- Top Royal Header -->
|
||||
<div class="chassis-top">
|
||||
<div class="speaker-grill-left">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="chassis-brand">
|
||||
<span class="brand-text">KING SASCHA XL</span>
|
||||
<span v-if="store.currentAct !== 'intro'" class="brand-act">
|
||||
{{ store.currentAct === 'platformer' ? '• AKTE II' : store.currentAct === 'tavern' ? '• AKTE III' : store.currentAct === 'party_express' ? '• AKTE IV' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<button class="sound-toggle" @click="toggleAudio">
|
||||
{{ store.soundMuted ? '🔇 TON' : '🔊 135 BPM' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Active Screen Viewport (Takes full height in Adventure / Role Play mode!) -->
|
||||
<div class="screen-bezel" :class="{ 'fullscreen-bezel': !store.isArcadeMode }">
|
||||
<div class="screen-glass">
|
||||
<IntroView v-if="store.currentAct === 'intro'" />
|
||||
<PrologueView v-else-if="store.currentAct === 'prologue'" />
|
||||
<PlatformerView v-else-if="store.currentAct === 'platformer'" ref="platformerRef" />
|
||||
<TavernView v-else-if="store.currentAct === 'tavern'" />
|
||||
<PartyExpressView v-else-if="store.currentAct === 'party_express'" />
|
||||
<CertificateModal v-else-if="store.currentAct === 'finale'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ARCADE CONTROLS ONLY: Rendered during Jump&Run / Speed-Runner -->
|
||||
<template v-if="store.isArcadeMode">
|
||||
<!-- Medieval Stats Parchment Scroll -->
|
||||
<div class="parchment-scroll">
|
||||
<div class="parchment-content">
|
||||
<span class="stat-badge">👑 KORKEN: <strong>{{ store.kronkorken }}</strong></span>
|
||||
<span class="stat-divider">|</span>
|
||||
<span class="stat-badge">🍻 HELLES: <strong>{{ store.beers }}</strong></span>
|
||||
<span class="stat-divider">|</span>
|
||||
<span class="stat-badge">🔊 <strong>135 BPM</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Handheld Controller Lower Body -->
|
||||
<div class="chassis-controls">
|
||||
<!-- D-PAD -->
|
||||
<div class="dpad-wrapper">
|
||||
<div class="dpad">
|
||||
<button class="dpad-btn dpad-up" disabled></button>
|
||||
<button
|
||||
class="dpad-btn dpad-left"
|
||||
@touchstart.prevent="handleDpad('left', true)"
|
||||
@touchend.prevent="handleDpad('left', false)"
|
||||
@mousedown="handleDpad('left', true)"
|
||||
@mouseup="handleDpad('left', false)"
|
||||
>◀</button>
|
||||
<div class="dpad-center"></div>
|
||||
<button
|
||||
class="dpad-btn dpad-right"
|
||||
@touchstart.prevent="handleDpad('right', true)"
|
||||
@touchend.prevent="handleDpad('right', false)"
|
||||
@mousedown="handleDpad('right', true)"
|
||||
@mouseup="handleDpad('right', false)"
|
||||
>▶</button>
|
||||
<button class="dpad-btn dpad-down" disabled></button>
|
||||
</div>
|
||||
<span class="control-label">D-PAD</span>
|
||||
</div>
|
||||
|
||||
<!-- Center Logo & Utility Buttons -->
|
||||
<div class="center-controls">
|
||||
<div class="royal-crest">👑</div>
|
||||
<div class="pill-buttons">
|
||||
<button class="pill-btn" @click="toggleInventory">
|
||||
<span class="pill-key">SELECT</span>
|
||||
<span class="pill-sub">BEUTEL</span>
|
||||
</button>
|
||||
<button class="pill-btn" @click="toggleAudio">
|
||||
<span class="pill-key">START</span>
|
||||
<span class="pill-sub">BASS</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons A & B -->
|
||||
<div class="action-buttons-wrapper">
|
||||
<div class="action-buttons">
|
||||
<button
|
||||
class="action-round-btn btn-b"
|
||||
@click="store.addBeer"
|
||||
>
|
||||
<span class="btn-letter">B</span>
|
||||
</button>
|
||||
<button
|
||||
class="action-round-btn btn-a"
|
||||
@click="handleJump"
|
||||
@touchstart.prevent="handleJump"
|
||||
>
|
||||
<span class="btn-letter">A</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="action-labels">
|
||||
<span>O'ZAPFT (B)</span>
|
||||
<span>SPRUNG (A)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Mini Bottom Status Bar for Adventure/Role Play Mode -->
|
||||
<div v-else class="adventure-bottom-bar">
|
||||
<div class="adv-stat">
|
||||
<span class="adv-icon">👑</span>
|
||||
<span class="adv-val">{{ store.kronkorken }} Korken</span>
|
||||
</div>
|
||||
<div class="adv-stat">
|
||||
<span class="adv-icon">🍻</span>
|
||||
<span class="adv-val">{{ store.beers }} Helles</span>
|
||||
</div>
|
||||
<button class="inv-mini-btn" @click="toggleInventory">
|
||||
🎒 Beutel
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Inventory Drawer Modal -->
|
||||
<div v-if="inventoryOpen" class="inventory-drawer" @click="inventoryOpen = false">
|
||||
<div class="inventory-card" @click.stop>
|
||||
<h3>👑 KÖNIGLICHER LEERGUTSACK</h3>
|
||||
<ul class="inventory-items">
|
||||
<li v-for="item in store.inventory" :key="item" class="inv-item">
|
||||
✨ {{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
<button class="close-inv-btn" @click="inventoryOpen = false">Schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.gameboy-chassis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
height: 100dvh;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(180deg, #3d2214 0%, #26140b 100%);
|
||||
border: 4px solid #b45309;
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Top Trim */
|
||||
.chassis-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: #2b1810;
|
||||
border-bottom: 2px solid #78350f;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chassis-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 9px;
|
||||
color: #ffd700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.brand-act {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 7px;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.speaker-grill-left {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.speaker-grill-left span {
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
background: #1a0f0a;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sound-toggle {
|
||||
background: #78350f;
|
||||
color: #fef08a;
|
||||
border: 1px solid #ffd700;
|
||||
border-radius: 4px;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 7px;
|
||||
padding: 4px 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Screen Bezel */
|
||||
.screen-bezel {
|
||||
flex: 1;
|
||||
background: #17100b;
|
||||
margin: 6px 8px 4px 8px;
|
||||
border-radius: 8px;
|
||||
border: 3px solid #1a0f0a;
|
||||
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9);
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fullscreen-bezel {
|
||||
margin: 4px 6px 0 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.screen-glass {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Adventure Bottom Bar */
|
||||
.adventure-bottom-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background: #2b1810;
|
||||
border-top: 2px solid #78350f;
|
||||
padding: 6px 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.adv-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.adv-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.adv-val {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 8px;
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.inv-mini-btn {
|
||||
background: #78350f;
|
||||
color: #fef08a;
|
||||
border: 1px solid #b45309;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Parchment Status Bar */
|
||||
.parchment-scroll {
|
||||
background: #fdf6e2;
|
||||
border: 2px solid #b45309;
|
||||
border-radius: 4px;
|
||||
margin: 4px 10px;
|
||||
padding: 4px 6px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.parchment-content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 7.5px;
|
||||
color: #78350f;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
/* Controls Section (Arcade Mode Only) */
|
||||
.chassis-controls {
|
||||
height: 130px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 4px 12px 10px 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* D-PAD */
|
||||
.dpad-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.dpad {
|
||||
position: relative;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
}
|
||||
|
||||
.dpad-center {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 28px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #78350f;
|
||||
}
|
||||
|
||||
.dpad-btn {
|
||||
position: absolute;
|
||||
background: #854d0e;
|
||||
border: 1.5px solid #d4af37;
|
||||
color: #fef08a;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dpad-btn:active {
|
||||
background: #b45309;
|
||||
}
|
||||
|
||||
.dpad-up {
|
||||
top: 0; left: 28px; width: 28px; height: 28px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.dpad-down {
|
||||
bottom: 0; left: 28px; width: 28px; height: 28px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.dpad-left {
|
||||
top: 28px; left: 0; width: 28px; height: 28px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.dpad-right {
|
||||
top: 28px; right: 0; width: 28px; height: 28px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 6px;
|
||||
color: #d4af37;
|
||||
}
|
||||
|
||||
/* Center */
|
||||
.center-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.royal-crest {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.pill-buttons {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pill-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #1c1917;
|
||||
border: 1px solid #78350f;
|
||||
border-radius: 12px;
|
||||
padding: 3px 6px;
|
||||
cursor: pointer;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.pill-key {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 5px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.pill-sub {
|
||||
font-size: 7px;
|
||||
color: #d4af37;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-buttons-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
position: relative;
|
||||
width: 84px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.action-round-btn {
|
||||
position: absolute;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #ffd700;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-round-btn:active {
|
||||
transform: translateY(2px);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.btn-b {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #eab308;
|
||||
}
|
||||
|
||||
.btn-a {
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-letter {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 0 #000;
|
||||
}
|
||||
|
||||
.action-labels {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 5.5px;
|
||||
color: #d4af37;
|
||||
}
|
||||
|
||||
/* Inventory Modal */
|
||||
.inventory-drawer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.inventory-card {
|
||||
background: #2b1810;
|
||||
border: 3px solid #d4af37;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
width: 80%;
|
||||
color: #fef3c7;
|
||||
}
|
||||
|
||||
.inventory-card h3 {
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 9px;
|
||||
color: #ffd700;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.inventory-items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.inv-item {
|
||||
font-family: 'MedievalSharp', serif;
|
||||
font-size: 15px;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px dashed #78350f;
|
||||
}
|
||||
|
||||
.close-inv-btn {
|
||||
background: #78350f;
|
||||
color: #fff;
|
||||
border: 1px solid #d4af37;
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
font-size: 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user