BDSM Game umgesetzt, Community Features ergänzt

2026-03-03 23:18:35 +01:00
parent abf85f66e4
commit 21c276e96f
140 changed files with 9552 additions and 2841 deletions
--- a/xxxthegame/src/main/resources/static/js/social-sidebar.js
+++ b/xxxthegame/src/main/resources/static/js/social-sidebar.js
@@ -0,0 +1,111 @@
+(function () {
+    // Verhindert doppelte Ausführung (z.B. wenn sidebar.js nachladen UND direktes <script>-Tag vorhanden)
+    if (document.querySelector('.social-sidebar')) return;
+
+    const path = window.location.pathname;
+
+    const links = [
+        { href: '/personen-suchen.html', icon: '⊕', label: 'Personen suchen', badgeId: null,                 mobileBadgeId: null },
+        { href: '/freunde.html',         icon: '♡', label: 'Freunde',          badgeId: 'socialFriendsBadge',  mobileBadgeId: 'socialMobileFriendsBadge' },
+        { href: '/nachrichten.html',     icon: '✉', label: 'Nachrichten',      badgeId: 'socialMsgBadge',      mobileBadgeId: 'socialMobileMsgBadge' },
+    ];
+
+    const profileActive = (path === '/benutzer.html' || path === '/profile.html') ? ' class="active"' : '';
+
+    // ── Rechte Desktop-Sidebar (kein Titel) ──
+    const desktopItems = links.map(({ href, icon, label, badgeId }) => {
+        const cls = path === href ? ' class="active"' : '';
+        const badge = badgeId ? `<span class="social-badge" id="${badgeId}" style="display:none;"></span>` : '';
+        return `<li><a href="${href}"${cls}><span class="icon">${icon}</span> ${label}${badge}</a></li>`;
+    }).join('');
+
+    const aside = document.createElement('aside');
+    aside.className = 'social-sidebar';
+    aside.innerHTML = `
+        <ul>
+            <li id="socialProfileItem">
+                <a href="/benutzer.html"${profileActive}>
+                    <span class="icon" id="socialProfileIcon">◉</span>
+                    <span id="socialProfileName">Profil</span>
+                </a>
+            </li>
+            <li><hr style="border:none;border-top:1px solid var(--color-secondary);margin:0.4rem 1rem;"></li>
+            ${desktopItems}
+        </ul>`;
+
+    const appWrapper = document.querySelector('.app-wrapper');
+    if (appWrapper) appWrapper.appendChild(aside);
+
+    // ── Mobile: Links + Profil ins Burger-Menü einhängen ──
+    const sidebarUl = document.querySelector('.sidebar ul');
+    if (sidebarUl) {
+        const mobileLinks = links.map(({ href, icon, label, mobileBadgeId }) => {
+            const cls = path === href ? ' class="active"' : '';
+            const badge = mobileBadgeId
+                ? `<span class="social-badge" id="${mobileBadgeId}" style="display:none;"></span>`
+                : '';
+            return `<li class="sidebar-mobile-only"><a href="${href}"${cls}><span class="icon">${icon}</span> ${label}${badge}</a></li>`;
+        }).join('');
+
+        const mobileProfileActive = profileActive;
+        const mobileProfile = `
+            <li class="sidebar-mobile-only" id="socialMobileProfileItem">
+                <a href="/benutzer.html"${mobileProfileActive}>
+                    <span class="icon" id="socialMobileProfileIcon">◉</span>
+                    <span id="socialMobileProfileName">Profil</span>
+                </a>
+            </li>`;
+
+        const sep = '<li class="sidebar-mobile-only"><hr style="border:none;border-top:1px solid var(--color-secondary);margin:0.4rem 1rem;"></li>';
+        const logoutLi = sidebarUl.querySelector('a[href="/login/logout"]')?.closest('li');
+        if (logoutLi) {
+            logoutLi.insertAdjacentHTML('beforebegin', sep + mobileLinks + mobileProfile);
+        } else {
+            sidebarUl.insertAdjacentHTML('beforeend', sep + mobileLinks + mobileProfile);
+        }
+    }
+
+    // ── Profil-Daten nachladen (Name + Avatar) ──
+    fetch('/login/me')
+        .then(r => r.ok ? r.json() : null)
+        .then(user => {
+            if (!user) return;
+
+            function updateProfileEntry(nameId, iconId, itemId) {
+                const nameEl = document.getElementById(nameId);
+                if (nameEl) nameEl.textContent = user.name;
+
+                const iconEl = document.getElementById(iconId);
+                if (iconEl && user.profilePicture) {
+                    iconEl.innerHTML = `<img src="data:image/png;base64,${user.profilePicture}" class="sidebar-profile-img" alt="">`;
+                }
+                const anchor = document.querySelector('#' + itemId + ' a');
+                if (anchor) anchor.href = '/benutzer.html?userId=' + user.userId;
+            }
+
+            updateProfileEntry('socialProfileName',       'socialProfileIcon',       'socialProfileItem');
+            updateProfileEntry('socialMobileProfileName', 'socialMobileProfileIcon', 'socialMobileProfileItem');
+        })
+        .catch(() => {});
+
+    // ── Badge-Zähler ──
+    function setBadge(ids, count) {
+        ids.forEach(id => {
+            if (!id) return;
+            const el = document.getElementById(id);
+            if (!el) return;
+            el.textContent = count;
+            el.style.display = count > 0 ? '' : 'none';
+        });
+    }
+
+    fetch('/social/friends/pending/count')
+        .then(r => r.ok ? r.json() : 0)
+        .then(n => setBadge(['socialFriendsBadge', 'socialMobileFriendsBadge'], n))
+        .catch(() => {});
+
+    fetch('/social/messages/unread/count')
+        .then(r => r.ok ? r.json() : 0)
+        .then(n => setBadge(['socialMsgBadge', 'socialMobileMsgBadge'], n))
+        .catch(() => {});
+})();