Add level selection menu and persistence
Introduce a level selection UI and persistence for unlocked levels. Adds CSS styles and HTML markup for a floating level menu, and JS to load/save highest unlocked level to localStorage (key: mirror-game-highest-unlocked-level). Implements functions to render/toggle the menu, unlock levels on finish, and navigate to arbitrary levels via goToLevel. nextLevel now delegates to goToLevel, and setup calls loadUnlockedLevels() and setupLevelMenu() so the menu reflects progress immediately.
This commit is contained in:
@@ -20,6 +20,71 @@ body {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.level-menu-shell {
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
z-index: 1100;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.level-menu-toggle {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: #223;
|
||||
color: #fff;
|
||||
padding: 12px 18px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 20px rgba(34, 51, 68, 0.18);
|
||||
}
|
||||
|
||||
.level-menu-panel {
|
||||
min-width: 180px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 18px;
|
||||
padding: 14px;
|
||||
box-shadow: 0 18px 40px rgba(34, 51, 68, 0.18);
|
||||
border: 1px solid rgba(34, 51, 68, 0.08);
|
||||
}
|
||||
|
||||
.level-menu-panel h2 {
|
||||
font-size: 0.95rem;
|
||||
color: #223;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.level-menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.level-menu-item {
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
background: #dfe5f8;
|
||||
color: #223;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.level-menu-item.is-current {
|
||||
background: #223;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.level-menu-item:disabled {
|
||||
background: #eceff7;
|
||||
color: #8a92a3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user