Feature: Geburtstags-KI — 2 Modi (morgen: Ideen, heute: Hundeperspektive), DB-Cache, Abend-Tagebuch-Hinweis (SW by-v780)

This commit is contained in:
rene 2026-05-08 18:24:27 +02:00
parent af7fe7813e
commit 9ebd40aaae
7 changed files with 185 additions and 10 deletions

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '779'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '780'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.5.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen

View file

@ -1322,8 +1322,8 @@ window.Worlds = (() => {
.bday-fw2 { display:inline-block; animation: bday-fw2 1.1s ease-in-out infinite .2s; }
.bday-fw3 { display:inline-block; animation: bday-fw3 1.6s ease-in-out infinite .4s; }
</style>
<div class="world-reminder bday-pop" style="flex-direction:column;align-items:center;
text-align:center;gap:6px;padding:14px 16px;
<div class="world-reminder bday-pop" id="wh-bday-banner" style="flex-direction:column;align-items:center;
text-align:center;gap:6px;padding:14px 16px;cursor:pointer;
background:rgba(0,0,0,0.42);border-color:rgba(196,132,58,0.6)">
<div style="display:flex;gap:6px;font-size:1.5rem;line-height:1">
<span class="bday-fw1">🎆</span>
@ -1341,7 +1341,20 @@ window.Worlds = (() => {
${bdayYear ? `<div style="font-size:10px;color:rgba(255,255,255,0.55)">
${bday === 'today' ? `${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} gemeinsam 🐾` : `Wird ${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} alt`}
</div>` : ''}
</div>` : ''}
<div style="font-size:10px;color:rgba(196,132,58,0.9);font-weight:700;margin-top:2px">
${bday === 'today' ? '🐾 Was hat sich Ban Yaro gewünscht? →' : '✨ KI-Überraschungsideen →'}
</div>
</div>
${bday === 'today' && new Date().getHours() >= 18 ? `
<div class="world-reminder" id="wh-bday-evening" style="cursor:pointer;
background:rgba(0,0,0,0.32);border-color:rgba(196,132,58,0.4)">
<svg class="ph-icon" style="width:1.1rem;height:1.1rem;color:var(--c-primary)">
<use href="/icons/phosphor.svg#book-open"></use>
</svg>
<span style="font-size:var(--text-xs);font-weight:700;color:rgba(255,255,255,0.85)">
Halte den besonderen Tag im Tagebuch fest 🐾
</span>
</div>` : ''}` : ''}
</div>
<div class="world-bottom">
${!_hasBgPhoto ? `
@ -1391,6 +1404,77 @@ window.Worlds = (() => {
if (!isNaN(idx) && idx !== _dogIdx) { _dogIdx = idx; _renderHund(); }
});
});
// Geburtstags-Banner → KI
el.querySelector('#wh-bday-banner')?.addEventListener('click', () => _openBdayKI(dog, bday));
// Abend-Banner: nach 18 Uhr am echten Geburtstag → Tagebucheintrag anregen
if (bday === 'today' && new Date().getHours() >= 18) {
el.querySelector('#wh-bday-evening')?.addEventListener('click', () => {
navigateTo('diary');
setTimeout(() => window.App?.callModule?.('diary', 'openNew'), 400);
});
}
}
async function _openBdayKI(dog, bdayMode) {
const isToday = bdayMode === 'today';
const title = isToday ? `🎂 ${_esc(dog.name)}s Geburtstagstraum` : `🎁 Überraschungen für ${_esc(dog.name)}`;
const ov = document.createElement('div');
ov.className = 'w3-sheet-overlay';
ov.innerHTML = `
<div class="w3-backdrop"></div>
<div class="w3-sheet-panel w3-sheet-panel--scroll">
<div class="w3-sheet-header w3-sheet-header--mb20">
<div class="w3-sheet-title">${title}</div>
<button id="bday-ki-close" class="w3-close-btn">
<svg class="ph-icon" style="width:14px;height:14px"><use href="/icons/phosphor.svg#x"></use></svg>
</button>
</div>
<div id="bday-ki-body" style="font-size:var(--text-sm);color:var(--c-text);line-height:1.7">
<div style="display:flex;align-items:center;gap:10px;color:var(--c-text-secondary);padding:var(--space-4) 0">
<svg class="ph-icon" style="width:20px;height:20px"><use href="/icons/phosphor.svg#sparkle"></use></svg>
KI denkt nach
</div>
</div>
${isToday ? `
<button id="bday-diary-btn" style="margin-top:var(--space-4);width:100%;display:flex;align-items:center;
justify-content:center;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);
border:1px solid var(--c-primary);background:transparent;color:var(--c-primary);
font-size:var(--text-sm);font-weight:600;cursor:pointer">
<svg class="ph-icon" style="width:16px;height:16px"><use href="/icons/phosphor.svg#book-open"></use></svg>
Besonderen Tagebucheintrag anlegen
</button>` : ''}
</div>`;
document.body.appendChild(ov);
const _close = () => ov.remove();
ov.querySelector('.w3-backdrop').addEventListener('click', _close);
ov.querySelector('#bday-ki-close').addEventListener('click', _close);
ov.querySelector('#bday-diary-btn')?.addEventListener('click', () => {
_close();
navigateTo('diary');
setTimeout(() => window.App?.callModule?.('diary', 'openNew'), 400);
});
try {
const res = await API.post('/ki/geburtstag', {
dog_id: dog.id,
name: dog.name,
rasse: dog.rasse || null,
alter: dog.alter_jahre ? Math.round(dog.alter_jahre) : null,
mode: bdayMode,
});
const body = ov.querySelector('#bday-ki-body');
if (body) {
const html = _esc(res.answer || '')
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
.replace(/\n/g, '<br>');
body.innerHTML = `<div style="padding-bottom:var(--space-2)">${html}</div>`;
}
} catch {
const body = ov.querySelector('#bday-ki-body');
if (body) body.innerHTML = '<div style="color:var(--c-text-secondary)">KI momentan nicht verfügbar 🐾</div>';
}
}
// ── WELT WORLD ───────────────────────────────────────────────