Skip to content

feat: Add Main Menu, Character Selection, and Pause Menu #262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
r4pt0s merged 5 commits into from
Oct 24, 2025
Merged

feat: Add Main Menu, Character Selection, and Pause Menu #262

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7423299
feat: add complete menu system with character selection and pause fun…
EXE901 Oct 22, 2025
c3f274d
feat: add complete menu system with character selection and pause fun…
EXE901 Oct 22, 2025
b670add
fix: resolve linting errors - remove unused vars and console statements
EXE901 Oct 22, 2025
5251d0f
refactor: separate HTML and CSS from JavaScript
EXE901 Oct 23, 2025
7189714
Merge branch 'main' into feat/main-menu-system
r4pt0s Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 239 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,245 @@
<div class="menu-bar"></div>
</div>

<!-- Main Menu Overlay -->
<div id="main-menu" class="main-menu-overlay">
<div class="main-menu-container">
<div class="main-menu-content">
<!-- Logo/Title -->
<div class="main-menu-title">
<h1>ZTM QUEST</h1>
<p class="main-menu-subtitle">Adventure Awaits</p>
</div>

<!-- Menu Buttons -->
<div class="main-menu-buttons">
<button id="start-new-game-btn" class="main-menu-btn primary">
<span>New Game</span>
</button>

<button id="continue-game-btn" class="main-menu-btn secondary" style="display: none;">
<span>Continue</span>
</button>

<button id="main-menu-achievements-btn" class="main-menu-btn secondary">
<span>Achievements</span>
</button>

<button id="main-menu-stats-btn" class="main-menu-btn secondary">
<span>Stats</span>
</button>

<button id="main-menu-settings-btn" class="main-menu-btn secondary">
<span>Settings</span>
</button>

<button id="main-menu-credits-btn" class="main-menu-btn secondary">
<span>Credits</span>
</button>
</div>

<!-- Version -->
<div class="main-menu-footer">
<p>Press ENTER to start</p>
</div>
</div>
</div>
</div>

<!-- In-Game Pause Menu -->
<div id="pause-menu" class="pause-menu-overlay" style="display: none;">
<div class="pause-menu-container">
<div class="pause-menu-content">
<h2 class="pause-menu-title">PAUSED</h2>

<div class="pause-menu-buttons">
<button id="resume-game-btn" class="pause-menu-btn primary">
<span>Resume</span>
</button>

<div class="pause-menu-settings">
<div class="setting-row">
<label>Music</label>
<button id="toggle-sound-btn" class="toggle-btn">
<span class="toggle-indicator"></span>
</button>
</div>
</div>

<button id="pause-main-menu-btn" class="pause-menu-btn secondary">
<span>Main Menu</span>
</button>
</div>

<div class="pause-menu-footer">
<p>Press ESC to resume</p>
</div>
</div>
</div>
</div>

<!-- Settings Modal -->
<div id="settings-modal" class="modal-overlay" style="display: none;">
<div class="modal-container settings-modal">
<div class="modal-header">
<h2>⚙️ Settings</h2>
<button class="close-modal-btn" data-modal="settings-modal">×</button>
</div>

<div class="modal-content">

<!-- Music Volume -->
<div class="setting-group">
<label for="music-volume">Music</label>
<div class="volume-control">
<input type="range" id="music-volume" min="0" max="100" value="100" />
<span id="music-volume-value">100%</span>
</div>
</div>

<!-- Fullscreen Toggle -->
<div class="setting-group">
<label>Fullscreen</label>
<button id="toggle-fullscreen-btn" class="toggle-btn-modal">
<span class="toggle-indicator-modal"></span>
</button>
</div>

<!-- Controls Guide -->
<div class="setting-group">
<button id="show-controls-btn" class="settings-action-btn">
View Controls
</button>
</div>

<!-- Reset Save Data -->
<div class="setting-group">
<button id="reset-save-btn" class="settings-action-btn danger">
Reset Game Progress
</button>
</div>

</div>

<div class="modal-footer">
<button id="save-settings-btn" class="modal-save-btn">Save & Close</button>
</div>
</div>
</div>

<!-- Achievements Modal -->
<div id="achievements-modal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2>🏆 Achievements</h2>
<button class="close-modal-btn" data-modal="achievements-modal">×</button>
</div>

<div class="modal-content achievements-grid" id="achievements-list">
<div class="no-achievements">
<p>No achievements available yet!</p>
<p class="subtext">Check back later for new achievements</p>
</div>
</div>
</div>
</div>

<!-- Stats Modal -->
<div id="stats-modal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2>📊 Player Stats</h2>
<button class="close-modal-btn" data-modal="stats-modal">×</button>
</div>

<div class="modal-content stats-content">
<div class="stat-card">
<div class="stat-icon">⏱️</div>
<div class="stat-info">
<div class="stat-label">Time Played</div>
<div class="stat-value" id="stat-time">00:00</div>
</div>
</div>

<div class="stat-card">
<div class="stat-icon">🪙</div>
<div class="stat-info">
<div class="stat-label">Coins Collected</div>
<div class="stat-value" id="stat-coins">0</div>
</div>
</div>

<div class="stat-card">
<div class="stat-icon">⚡</div>
<div class="stat-info">
<div class="stat-label">Current Energy</div>
<div class="stat-value" id="stat-energy">100</div>
</div>
</div>

<div class="stat-card">
<div class="stat-icon">🎯</div>
<div class="stat-info">
<div class="stat-label">Quests Completed</div>
<div class="stat-value" id="stat-quests">0</div>
</div>
</div>

<div class="stat-card">
<div class="stat-icon">🗺️</div>
<div class="stat-info">
<div class="stat-label">Maps Explored</div>
<div class="stat-value" id="stat-maps">1</div>
</div>
</div>

<div class="stat-card">
<div class="stat-icon">🏆</div>
<div class="stat-info">
<div class="stat-label">Achievements</div>
<div class="stat-value" id="stat-achievements">0/0</div>
</div>
</div>
</div>
</div>
</div>

<!-- Credits Modal -->
<div id="credits-modal" class="modal-overlay" style="display: none;">
<div class="modal-container">
<div class="modal-header">
<h2>✨ Credits</h2>
<button class="close-modal-btn" data-modal="credits-modal">×</button>
</div>

<div class="modal-content credits-content">
<div class="credits-section">
<h3>Zero To Mastery Community</h3>
<p>A collaborative project by ZTM students and contributors</p>
</div>

<div class="credits-section">
<h3>Game Development</h3>
<p>Built with Kaplay (Kaboom.js)</p>
<p>Pixel art graphics and sound design</p>
</div>

<div class="credits-section">
<h3>Special Thanks</h3>
<p>All open-source contributors</p>
<p>Zero To Mastery Academy</p>
<p>Hacktoberfest participants</p>
</div>

<div class="credits-section">
<a href="https://github.com/zero-to-mastery/ZTM-Quest" target="_blank" class="credits-link">
View Full Credits on GitHub →
</a>
</div>
</div>
</div>
</div>

<div id="header" class="top">ZTM Quest</div>
<div id="left-panel" class="left">
<div>
Expand Down
22 changes: 15 additions & 7 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ import { orangeHouse } from './scenes/orange_house';
import { redHouse } from './scenes/red_house';
import { companyInterior } from './scenes/company_interior';
import { loadingScreen } from './scenes/loadingScreen';
import { mainMenuScene } from './scenes/mainMenuScene';
import { setupPauseMenu } from './utils/pauseMenu';
import { setupMenuModals } from './utils/menuModals';

import { Backpack } from './backpack';

Expand Down Expand Up @@ -58,13 +61,16 @@ k.scene('company_interior', (enter_tag) =>
k.scene('startScreen', gameStartScreen);
k.scene('lose', loseScreen);

// Wait for assets to load, THEN show 30-second loading screen
k.onLoad(() => {
// Start with loading screen scene
k.go('loadingScreen');
// Initialize menu modals (settings, achievements, stats, credits)
setupMenuModals();

// Load saved game state from localStorage (if available)

// After loading screen finishes (30s), it will automatically go to 'start'
// The loadingScreen scene handles the transition
// Wait for assets to load, THEN show main menu
// In main.js
k.onLoad(() => {
setupPauseMenu();
mainMenuScene();
});

// To test different maps instead of going through each and every scene to get to yours,
Expand All @@ -83,13 +89,15 @@ k.onLoad(() => {

updateEnergyUI(getGameState().player.energy);
updateCoinsUI();

setInterval(() => {
const gameState = getGameState();
const gameState = getGameState(); // This should be inside setInterval so that gameState variable is updated at every interval.
if (gameState.player.energy) {
gameState.player.energy -= 1;
setGameState(gameState);
updateEnergyUI(gameState.player.energy);
} else if (Math.floor(k.time()) % 3 == 0) {
// This ensures log appears atmost 2 times per minute.
k.debug.log('I need some energy.');
}
}, 10000);
Expand Down
25 changes: 25 additions & 0 deletions src/scenes/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ import { addPlayerControls } from './../player.controls';
import { resetPausingVariables } from '../utils/resetPausingVariables';
import { Backpack } from '../backpack';

// Define handler outside function so we can remove it
let pauseHandler = null;

export async function bootstrap(bootMapCb, mapArgs) {
const gameState = getGameState();
const player = makePlayer(gameState.player);
Expand Down Expand Up @@ -35,4 +38,26 @@ export async function bootstrap(bootMapCb, mapArgs) {
addSceneSounds(sounds, k, map);

Backpack.backpackInteractions();

// Remove old pause handler if exists
if (pauseHandler) {
document.removeEventListener('keydown', pauseHandler);
}

// Create new pause handler
pauseHandler = (e) => {
if (e.key === 'Escape') {
const pauseMenu = document.getElementById('pause-menu');
if (pauseMenu) {
if (pauseMenu.style.display === 'none' || pauseMenu.style.display === '') {
pauseMenu.style.display = 'flex';
} else {
pauseMenu.style.display = 'none';
}
}
}
};

// Add new pause handler
document.addEventListener('keydown', pauseHandler);
}
Loading