feat: Hex Wars - Badge in Sidebar und BottomNav wenn man dran ist
This commit is contained in:
@@ -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(`
|
||||
|
||||
@@ -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 (
|
||||
{appsOpen && getGroupedTools().map(([group, tools]) => (
|
||||
<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 />)}
|
||||
{!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 style={{ paddingBottom:4 }}>
|
||||
{getGroupedTools().map(([group, tools]) => (
|
||||
<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}
|
||||
<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}/>
|
||||
|
||||
Reference in New Issue
Block a user