2526-web/kelompok06-2048
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Homepage js

Browse Source
This commit is contained in:
Michelle Aquilera 2025-12-01 11:00:01 +07:00
parent 0b4ca95aa8
commit 14e2e55685
1 changed files with 233 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
Homepage.js
View File

@ -0,0 +1,233 @@
(function() {
'use strict';
// ==================== DOM ELEMENTS ====================
const elements = {
logo: null,
loginBtn: null,
playBtn: null,
leaderboardBtn: null,
heroTitle: null,
heroSubtitle: null
};
// ==================== INITIALIZE ====================
function init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initAll);
} else {
initAll();
}
}
function initAll() {
try {
// Cache DOM elements
cacheElements();
// Validate elements
if (!validateElements()) {
console.error('Some required elements are missing');
return;
}
// Setup event listeners
setupEventListeners();
// Initialize smooth scroll
initSmoothScroll();
console.log('✅ Homepage initialized successfully');
} catch (error) {
console.error('Error initializing homepage:', error);
}
}
// ==================== CACHE ELEMENTS ====================
function cacheElements() {
elements.logo = document.querySelector('.logo');
elements.loginBtn = document.querySelector('a[href="Login.html"]');
elements.playBtn = document.querySelector('a[href="2048.html"]');
elements.leaderboardBtn = document.querySelector('a[href="leaderboard.html"]');
elements.heroTitle = document.querySelector('.hero-title');
elements.heroSubtitle = document.querySelector('.hero-subtitle');
}
// ==================== VALIDATE ELEMENTS ====================
function validateElements() {
const requiredElements = ['logo', 'playBtn'];
const missingElements = requiredElements.filter(key => !elements[key]);
if (missingElements.length > 0) {
console.warn('Missing elements:', missingElements);
return false;
}
return true;
}
// ==================== EVENT LISTENERS ====================
function setupEventListeners() {
// Logo click - reload page
if (elements.logo) {
elements.logo.addEventListener('click', handleLogoClick);
}
// Login button
if (elements.loginBtn) {
elements.loginBtn.addEventListener('click', handleLoginClick);
}
// Play button
if (elements.playBtn) {
elements.playBtn.addEventListener('click', handlePlayClick);
}
// Leaderboard button
if (elements.leaderboardBtn) {
elements.leaderboardBtn.addEventListener('click', handleLeaderboardClick);
}
// Keyboard shortcuts
document.addEventListener('keydown', handleKeyPress);
// Window events
window.addEventListener('resize', handleResize);
window.addEventListener('beforeunload', handleBeforeUnload);
}
// ==================== EVENT HANDLERS ====================
function handleLogoClick(e) {
e.preventDefault();
window.location.href = 'index.html';
}
function handleLoginClick(e) {
// Allow default behavior (navigate to Login.html)
console.log('Navigating to Login page...');
}
function handlePlayClick(e) {
// Allow default behavior (navigate to 2048.html)
console.log('Starting game...');
}
function handleLeaderboardClick(e) {
// Allow default behavior (navigate to leaderboard.html)
console.log('Opening leaderboard...');
}
function handleKeyPress(e) {
// Press 'P' to play
if (e.key === 'p' || e.key === 'P') {
if (elements.playBtn) {
elements.playBtn.click();
}
}
// Press 'L' to login
if (e.key === 'l' || e.key === 'L') {
if (elements.loginBtn) {
elements.loginBtn.click();
}
}
// Press 'B' for leaderboard
if (e.key === 'b' || e.key === 'B') {
if (elements.leaderboardBtn) {
elements.leaderboardBtn.click();
}
}
}
function handleResize() {
// Handle responsive behavior if needed
const width = window.innerWidth;
if (width < 768) {
console.log('Mobile view');
} else if (width < 1024) {
console.log('Tablet view');
} else {
console.log('Desktop view');
}
}
function handleBeforeUnload(e) {
// Cleanup before page unload
console.log('Page unloading...');
}
// ==================== SMOOTH SCROLL ====================
function initSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const href = this.getAttribute('href');
if (href === '#' || !href) return;
e.preventDefault();
const target = document.querySelector(href);
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
}
// ==================== UTILITY FUNCTIONS ====================
function checkBrowserSupport() {
const features = {
localStorage: typeof(Storage) !== 'undefined',
flexbox: CSS.supports('display', 'flex'),
grid: CSS.supports('display', 'grid')
};
console.log('Browser support:', features);
return features;
}
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
// ==================== PUBLIC API ====================
window.Homepage = {
init: initAll,
isMobile: isMobile,
checkSupport: checkBrowserSupport
};
// ==================== CLEANUP ====================
window.cleanupHomepage = function() {
// Remove event listeners
if (elements.logo) {
elements.logo.removeEventListener('click', handleLogoClick);
}
if (elements.loginBtn) {
elements.loginBtn.removeEventListener('click', handleLoginClick);
}
if (elements.playBtn) {
elements.playBtn.removeEventListener('click', handlePlayClick);
}
if (elements.leaderboardBtn) {
elements.leaderboardBtn.removeEventListener('click', handleLeaderboardClick);
}
document.removeEventListener('keydown', handleKeyPress);
window.removeEventListener('resize', handleResize);
window.removeEventListener('beforeunload', handleBeforeUnload);
console.log('Homepage cleaned up');
};
// Start initialization
init();
})();