From ed3e56fb43dff25f77ace19f08a551d247e1ebc2 Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Mon, 29 Jun 2026 11:47:44 +0200
Subject: [PATCH] feat: Hex Wars - Badge in Sidebar und BottomNav wenn man dran
 ist

---
 backend/src/tools/gebietseroberung/routes.js | 10 +++
 frontend/src/App.jsx                         | 95 ++++++++++----------
 2 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/backend/src/tools/gebietseroberung/routes.js b/backend/src/tools/gebietseroberung/routes.js
index f8050f8..9a29d09 100644
--- a/backend/src/tools/gebietseroberung/routes.js
+++ b/backend/src/tools/gebietseroberung/routes.js
@@ -281,6 +281,16 @@ router.get('/', authenticate, (req, res) => {
   res.json(games);
 });
 
+// ── Meine Züge: Anzahl Spiele wo ich dran bin ────────────────────────────────
+router.get('/my-turns', authenticate, (req, res) => {
+  const me = uid(req);
+  const { count } = db.prepare(`
+    SELECT COUNT(*) as count FROM geo_games
+    WHERE status='active' AND current_turn=?
+  `).get(me);
+  res.json({ count });
+});
+
 // ── Topliste ──────────────────────────────────────────────────────────────────
 router.get('/leaderboard', authenticate, (req, res) => {
   const rows = db.prepare(`
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9a784e7..031c085 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -155,12 +155,9 @@ function Login({ onLogin }) {
 
 // ── Update Modal ──────────────────────────────────────────────────────────────
 // ── Desktop Sidebar ───────────────────────────────────────────────────────────
-function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0 }) {
+function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns=0 }) {
   const [appsOpen, setAppsOpen] = useState(true);
   const [collapsed, setCollapsed] = useState(false);
-  const [collapsedGroups, setCollapsedGroups] = useState({});
-
-  const toggleGroup = (group) => setCollapsedGroups(prev => ({ ...prev, [group]: !prev[group] }));
 
   const NavBtn = ({ item, sub=false }) => {
     const ic = active===item.id ? '#4ecdc4' : 'rgba(255,255,255,0.55)';
@@ -183,12 +180,20 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0 }) {
             <span style={{ position:'absolute', top:-3, right:-3, width:7, height:7,
               borderRadius:'50%', background:'#4ecdc4', boxShadow:'0 0 5px #4ecdc4' }}/>
           )}
+          {collapsed && item.id==='gebietseroberung' && hexWarsTurns>0 && (
+            <span style={{ position:'absolute', top:-3, right:-3, width:7, height:7,
+              borderRadius:'50%', background:'#ff6b9d', boxShadow:'0 0 5px #ff6b9d' }}/>
+          )}
         </span>
         {!collapsed && <span style={{ flex:1, color:ic }}>{item.label}</span>}
         {!collapsed && item.id==='nachrichten' && unreadMsgs>0 && (
           <span style={{ background:'#4ecdc4', color:'#000', borderRadius:10, fontSize:9,
             fontFamily:'monospace', padding:'1px 6px', fontWeight:700, flexShrink:0 }}>{unreadMsgs}</span>
         )}
+        {!collapsed && item.id==='gebietseroberung' && hexWarsTurns>0 && (
+          <span style={{ background:'#ff6b9d', color:'#000', borderRadius:10, fontSize:9,
+            fontFamily:'monospace', padding:'1px 6px', fontWeight:700, flexShrink:0 }}>{hexWarsTurns}</span>
+        )}
       </button>
     );
   };
@@ -223,7 +228,7 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0 }) {
           </div>
         )}
       </div>
-      <nav style={{ flex:1, padding:'0 8px', overflowY:'auto', overflowX:'hidden' }}>
+      <nav style={{ flex:1, padding:'0 8px' }}>
         <NavBtn item={{ id:'dashboard', Icon:HomeIcon, label:'Dashboard' }} />
 
         {/* Apps Sektion mit Gruppenüberschriften */}
@@ -240,26 +245,13 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0 }) {
           {!collapsed && <span style={{ flex:1, color:'rgba(255,255,255,0.65)' }}>Apps</span>}
           {!collapsed && <ChevronIcon size={13} color="rgba(255,255,255,0.35)" dir={appsOpen?'down':'right'}/>}
         </button>
-        {appsOpen && getGroupedTools().map(([group, tools]) => {
-          const isGroupCollapsed = !!collapsedGroups[group];
-          return (
-            <div key={group}>
-              {!collapsed && (
-                <button onClick={() => toggleGroup(group)} style={{
-                  width:'100%', display:'flex', alignItems:'center', gap:4,
-                  background:'none', border:'none', cursor:'pointer',
-                  padding:'8px 12px 3px 12px', marginBottom:0,
-                }}>
-                  <span style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace', letterSpacing:2, flex:1, textAlign:'left' }}>
-                    {group.toUpperCase()}
-                  </span>
-                  <ChevronIcon size={10} color="rgba(78,205,196,0.5)" dir={isGroupCollapsed ? 'right' : 'down'} />
-                </button>
-              )}
-              {!isGroupCollapsed && tools.map(t => <NavBtn key={t.id} item={t} sub />)}
-            </div>
-          );
-        })}
+        {appsOpen && getGroupedTools().map(([group, tools]) => (
+          <div key={group}>
+            {!collapsed && <div style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
+              letterSpacing:2, padding:'8px 12px 3px 12px' }}>{group.toUpperCase()}</div>}
+            {tools.map(t => <NavBtn key={t.id} item={t} sub />)}
+          </div>
+        ))}
 
         <NavBtn item={{ id:'admin', Icon:AdminIcon, label:'Einstellungen' }} />
       </nav>
@@ -281,10 +273,9 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0 }) {
 }
 
 // ── Mobile Bottom Navigation ──────────────────────────────────────────────────
-function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0 }) {
+function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns=0 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [appsOpen, setAppsOpen] = useState(false);
-  const [mobileCollapsedGroups, setMobileCollapsedGroups] = useState({});
   const NAV_H = 56;
 
   const MI = ({Icon, icon, label, onClick, color='rgba(255,255,255,0.85)'}) => {
@@ -340,27 +331,20 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0 }) {
 
   return (
     <>
-      {/* Apps Sheet mit Gruppenüberschriften + einklappbar + scrollbar */}
+      {/* Apps Sheet mit Gruppenüberschriften */}
       <Sheet open={appsOpen} onClose={()=>setAppsOpen(false)}>
-        <div style={{ overflowY:'auto', maxHeight:'60vh', paddingBottom:8 }}>
-          {getGroupedTools().map(([group, tools]) => {
-            const isGrpCollapsed = !!mobileCollapsedGroups[group];
-            return (
-              <div key={group}>
-                <button onClick={() => setMobileCollapsedGroups(prev => ({ ...prev, [group]: !prev[group] }))}
-                  style={{ width:'100%', display:'flex', alignItems:'center', gap:6,
-                    background:'none', border:'none', cursor:'pointer', padding:'12px 20px 5px' }}>
-                  <span style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
-                    letterSpacing:2, flex:1, textAlign:'left' }}>{group.toUpperCase()}</span>
-                  <ChevronIcon size={10} color="rgba(78,205,196,0.5)" dir={isGrpCollapsed ? 'right' : 'down'} />
-                </button>
-                {!isGrpCollapsed && tools.map(t => (
-                  <MI key={t.id} Icon={t.Icon} label={t.label}
-                    onClick={() => { setActive(t.id); setAppsOpen(false); }} />
-                ))}
-              </div>
-            );
-          })}
+        <div style={{ paddingBottom:4 }}>
+          {getGroupedTools().map(([group, tools]) => (
+            <div key={group}>
+              <div style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
+                letterSpacing:2, padding:'12px 20px 5px' }}>{group.toUpperCase()}</div>
+              {tools.map(t => (
+                <MI key={t.id} Icon={t.Icon}
+                  label={t.id==='gebietseroberung' && hexWarsTurns>0 ? `${t.label} ●` : t.label}
+                  onClick={() => { setActive(t.id); setAppsOpen(false); }} />
+              ))}
+            </div>
+          ))}
         </div>
       </Sheet>
 
@@ -389,6 +373,10 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0 }) {
                 style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center',
                   justifyContent:'center', gap:3, background:'transparent', border:'none',
                   cursor:'pointer', position:'relative', minWidth:0, padding:'0 4px' }}>
+                {isApps && hexWarsTurns>0 && (
+                  <span style={{ position:'absolute', top:2, right:2, width:7, height:7,
+                    borderRadius:'50%', background:'#ff6b9d', boxShadow:'0 0 4px #ff6b9d' }}/>
+                )}
                 {isApps && unreadMsgs>0 && (
                   <span style={{ position:'absolute', top:6, right:'calc(50% - 16px)',
                     width:8, height:8, borderRadius:'50%', background:'#4ecdc4',
@@ -3689,6 +3677,7 @@ export default function App() {
   };
   const [toastMsg,setToastMsg]=useState({msg:'',type:'success'});
   const [unreadMsgs,  setUnreadMsgs]  = useState(0);
+  const [hexWarsTurns, setHexWarsTurns] = useState(0);
   const [unreadBoard,    setUnreadBoard]    = useState(0);
   const [unreadPromoted, setUnreadPromoted] = useState(0);
   const [unreadChangelog,setUnreadChangelog]= useState(0);
@@ -3752,6 +3741,14 @@ export default function App() {
     return()=>clearInterval(t);
   },[user]);
 
+  useEffect(()=>{
+    if(!user)return;
+    const poll=()=>api('/tools/gebietseroberung/my-turns').then(d=>setHexWarsTurns(d.count||0)).catch(()=>{});
+    poll();
+    const t=setInterval(poll,30*1000);
+    return()=>clearInterval(t);
+  },[user]);
+
   const toast=useCallback((msg,type='success')=>{
     setToastMsg({msg,type});
     setTimeout(()=>setToastMsg({msg:'',type:'success'}),3500);
@@ -3789,7 +3786,7 @@ export default function App() {
           <Sidebar active={active} setActive={setActive} user={user}
             onLogout={()=>{localStorage.removeItem('sk_token');setUser(null);}}
            
-            unreadMsgs={unreadMsgs}/>
+            unreadMsgs={unreadMsgs} hexWarsTurns={hexWarsTurns}/>
         )}
         <main ref={mainRef} style={mainStyle}>
           {active==='dashboard' && <Dashboard key={dashboardKey} toast={toast} mobile={mobile} setActive={setActive} setDevToolsNav={setDevToolsNav} unreadMsgs={unreadMsgs} unreadBoard={unreadBoard} unreadPromoted={unreadPromoted} onBoardRead={()=>{ setUnreadBoard(0); setUnreadPromoted(0); }} unreadChangelog={unreadChangelog} onChangelogRead={()=>setUnreadChangelog(0)} unackedFavs={unackedFavs} onClearUnackedFavs={()=>setUnackedFavs({count:0,isAdmin:false})} user={user}/>}
@@ -3801,7 +3798,7 @@ export default function App() {
         <BottomNav active={active} setActive={setActive} user={user}
           onLogout={()=>{localStorage.removeItem('sk_token');setUser(null);}}
          
-          unreadMsgs={unreadMsgs}/>
+          unreadMsgs={unreadMsgs} hexWarsTurns={hexWarsTurns}/>
       )}
       <ScrollToTop scrollRef={mainRef}/>
       <Toast msg={toastMsg.msg} type={toastMsg.type}/>