|
|
|
|
|
|
|
|
|
|
|
|
|
|
class CatOSCore { |
|
|
constructor() { |
|
|
|
|
|
this.windows = new Map(); |
|
|
this.apps = new Map(); |
|
|
this.nextWindowId = 1; |
|
|
this.focusedWindow = null; |
|
|
this.startMenuOpen = false; |
|
|
this.wallpapers = [ |
|
|
'static/wallpapers/wallpaper1.png', |
|
|
'static/wallpapers/wallpaper2.png', |
|
|
'static/wallpapers/wallpaper3.png', |
|
|
'static/wallpapers/wallpaper4.png', |
|
|
'static/wallpapers/wallpaper5.png', |
|
|
'static/wallpapers/wallpaper6.png' |
|
|
]; |
|
|
} |
|
|
|
|
|
|
|
|
init() { |
|
|
this.showLoadingScreen(); |
|
|
this.updateClock(); |
|
|
this.setRandomWallpaper(); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
this.hideLoadingScreen(); |
|
|
this.playStartupSound(); |
|
|
this.showWelcomeMessage(); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
|
|
|
showLoadingScreen() { |
|
|
const loadingScreen = document.getElementById('loading-screen'); |
|
|
if (loadingScreen) { |
|
|
loadingScreen.classList.remove('hidden'); |
|
|
} else { |
|
|
console.warn('Loading screen element not found'); |
|
|
} |
|
|
} |
|
|
|
|
|
hideLoadingScreen() { |
|
|
const loadingScreen = document.getElementById('loading-screen'); |
|
|
if (loadingScreen) { |
|
|
loadingScreen.classList.add('hidden'); |
|
|
setTimeout(() => { |
|
|
loadingScreen.style.display = 'none'; |
|
|
}, 500); |
|
|
} else { |
|
|
console.warn('Loading screen element not found'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
updateClock() { |
|
|
const updateTime = () => { |
|
|
const now = new Date(); |
|
|
const timeString = now.toLocaleTimeString('en-US', { |
|
|
hour12: false, |
|
|
hour: '2-digit', |
|
|
minute: '2-digit' |
|
|
}); |
|
|
|
|
|
const clockElement = document.querySelector('.time'); |
|
|
if (clockElement) { |
|
|
clockElement.textContent = timeString; |
|
|
} |
|
|
}; |
|
|
|
|
|
updateTime(); |
|
|
setInterval(updateTime, 1000); |
|
|
} |
|
|
|
|
|
|
|
|
setRandomWallpaper() { |
|
|
const desktop = document.getElementById('desktop'); |
|
|
if (!desktop) return; |
|
|
|
|
|
const randomWallpaper = this.wallpapers[Math.floor(Math.random() * this.wallpapers.length)]; |
|
|
|
|
|
|
|
|
const img = new Image(); |
|
|
img.onload = () => { |
|
|
desktop.style.backgroundImage = `url('${randomWallpaper}')`; |
|
|
desktop.style.backgroundSize = 'cover'; |
|
|
desktop.style.backgroundPosition = 'center'; |
|
|
desktop.style.backgroundRepeat = 'no-repeat'; |
|
|
}; |
|
|
img.src = randomWallpaper; |
|
|
} |
|
|
|
|
|
|
|
|
playStartupSound() { |
|
|
|
|
|
this.showNotification('π±βπ» CatOS Ready!', 'Welcome to your purr-fessional workspace!'); |
|
|
} |
|
|
|
|
|
showWelcomeMessage() { |
|
|
|
|
|
if (!localStorage.getItem('catos-visited')) { |
|
|
this.showNotification( |
|
|
'π First time visitor detected!', |
|
|
'Try opening the terminal and typing "help" for cat commands!' |
|
|
); |
|
|
localStorage.setItem('catos-visited', 'true'); |
|
|
} |
|
|
} |
|
|
|
|
|
showNotification(title, message) { |
|
|
|
|
|
const notification = document.createElement('div'); |
|
|
notification.className = 'system-notification'; |
|
|
notification.innerHTML = ` |
|
|
<div class="notification-header">${title}</div> |
|
|
<div class="notification-body">${message}</div> |
|
|
`; |
|
|
|
|
|
|
|
|
if (!document.querySelector('#notification-styles')) { |
|
|
const style = document.createElement('style'); |
|
|
style.id = 'notification-styles'; |
|
|
style.textContent = ` |
|
|
.system-notification { |
|
|
position: fixed; |
|
|
top: 80px; |
|
|
right: 20px; |
|
|
background: var(--window-bg); |
|
|
border: 1px solid var(--window-border); |
|
|
border-radius: var(--radius-lg); |
|
|
padding: var(--spacing-md); |
|
|
box-shadow: var(--window-shadow); |
|
|
min-width: 300px; |
|
|
z-index: 10000; |
|
|
animation: slideInRight 0.3s ease; |
|
|
} |
|
|
|
|
|
.notification-header { |
|
|
font-weight: 600; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: var(--spacing-sm); |
|
|
} |
|
|
|
|
|
.notification-body { |
|
|
color: var(--text-secondary); |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
|
|
|
@keyframes slideInRight { |
|
|
from { transform: translateX(100%); opacity: 0; } |
|
|
to { transform: translateX(0); opacity: 1; } |
|
|
} |
|
|
`; |
|
|
document.head.appendChild(style); |
|
|
} |
|
|
|
|
|
document.body.appendChild(notification); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.style.animation = 'slideInRight 0.3s ease reverse'; |
|
|
setTimeout(() => { |
|
|
if (notification.parentNode) { |
|
|
notification.parentNode.removeChild(notification); |
|
|
} |
|
|
}, 300); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
|
|
|
registerApps() { |
|
|
|
|
|
if (this.appManager) { |
|
|
this.appManager.registerAllApps(this); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
setupEventListeners() { |
|
|
|
|
|
if (this.eventHandler) { |
|
|
this.eventHandler.setup(this); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
registerModule(name, moduleInstance) { |
|
|
this[name] = moduleInstance; |
|
|
moduleInstance.core = this; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.CatOSCore = CatOSCore; |