Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* Z-index layering system for the application.
*
* Organized into logical layers to prevent z-index conflicts.
* Higher numbers appear on top.
*/
export const Z_INDEX = {
// Base content layer (0-99)
BASE: 0,
CONTENT: 1,
// Navigation and UI chrome (100-999)
NAV_BAR: 100,
STICKY_HEADER: 100,
FILTER_BAR: 99, // Fixed filter bar, just below nav
STICKY_BUCKET_HEADER: 98, // Recency bucket headers (Today, This Week, etc.)
STICKY_CATEGORY_HEADER: 97, // Skill category headers within buckets
SUB_NAV: 90,
SESSION_MODE_BANNER: 85, // Below sub-nav, but above content
SESSION_MODE_BANNER_ANIMATING: 150, // Above all nav during FLIP animation
// Overlays and dropdowns (1000-9999)
DROPDOWN: 1000,
POPOVER: 1000,
// Modal and dialog layers (10000-19999)
MODAL_BACKDROP: 10000,
MODAL: 10001,
// Tooltips must be above modals so they work inside modals
TOOLTIP: 15000,
// Nested modals (above tooltips, for modals that open from within other modals)
NESTED_MODAL_BACKDROP: 16000,
NESTED_MODAL: 16001,
// Top-level overlays (20000+)
TOAST: 20000,
// My Abacus - Personal trophy overlay (30000+)
MY_ABACUS_BACKDROP: 30000,
MY_ABACUS: 30001,
// Special navigation layers for game pages
GAME_NAV: {
// Hamburger menu and its nested content
HAMBURGER_MENU: 9999,
HAMBURGER_NESTED_DROPDOWN: 10000, // Must be above hamburger menu
},
// Game-specific layers
GAME: {
HUD: 100,
OVERLAY: 1000,
PLAYER_AVATAR: 1000, // Multiplayer presence indicators
},
} as const
// Helper function to get z-index value
export function getZIndex(path: string): number {
const parts = path.split('.')
let value: any = Z_INDEX
for (const part of parts) {
value = value[part]
if (value === undefined) {
console.warn(`[zIndex] Unknown path: ${path}`)
return 0
}
}
return typeof value === 'number' ? value : 0
}
|