`;
}
},
{
name: 'three.js Demo',
icon: '🧊',
content: () => {
const threeDemo = () => {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 300 / 200, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(300, 200);
document.getElementById('three-container').appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
};
return `
`;
}
},
{
name: 'Projects',
icon: '📁',
type: 'folder',
content: [
{ name: 'Project 1', icon: '📄', url: 'project1.html' },
{ name: 'Project 2', icon: '📄', url: 'project2.html' }
]
},
{
name: 'Notepad',
icon: '📝',
content: () => `
`
},
{
name: 'Settings',
icon: '⚙️',
content: () => `
`
}
];
// Initialize the OS
init() {
this.createDesktopIcons();
this.updateSelectedIcon();
this.updateBattery();
// Welcome notification
setTimeout(() => {
this.showNotification('Welcome to Degen Boy OS Advanced Template!');
}, 1000);
}
// Create desktop icons
createDesktopIcons() {
this.desktop.innerHTML = '';
this.apps.forEach((app, index) => {
const icon = document.createElement('div');
icon.className = app.type === 'folder' ? 'folder-icon' : 'app-icon';
icon.innerHTML = `
${app.icon}
${app.name}
`;
icon.onclick = () => this.openItem(app);
icon.setAttribute('data-index', index);
this.desktop.appendChild(icon);
});
}
// Open an app, folder, or link
openItem(item) {
if (item.type === 'folder') {
this.openFolder(item);
} else if (item.url) {
this.openLink(item.url, item.name);
} else {
this.openApp(item);
}
}
// Open an app
openApp(app) {
this.appWindow.style.display = 'flex';
this.appTitle.textContent = app.name;
this.appContent.innerHTML = this.fitContentToScreen(app.content());
this.appWindow.classList.add('slide-in');
this.appWindow.classList.remove('slide-out');
}
// Open a folder
openFolder(folder) {
this.folderWindow.style.display = 'flex';
this.folderTitle.textContent = folder.name;
this.folderContent.innerHTML = '';
folder.content.forEach((item, index) => {
const icon = document.createElement('div');
icon.className = item.type === 'folder' ? 'folder-icon' : 'app-icon';
icon.innerHTML = `
${item.icon}
${item.name}
`;
icon.onclick = () => this.openItem(item);
icon.setAttribute('data-index', index);
this.folderContent.appendChild(icon);
});
this.folderWindow.classList.add('slide-in');
this.folderWindow.classList.remove('slide-out');
}
// Open a link in an iframe
openLink(url, title) {
this.iframeTitle.textContent = title;
this.iframeContent.innerHTML = ``;
this.iframeContainer.style.display = 'flex';
this.iframeContainer.classList.add('slide-in');
this.iframeContainer.classList.remove('slide-out');
}
// Close a window with animation
closeWindow(window, callback) {
window.classList.add('slide-out');
window.classList.remove('slide-in');
setTimeout(() => {
window.style.display = 'none';
if (callback) callback();
}, 300);
}
// Update the selected icon
updateSelectedIcon() {
const icons = document.querySelectorAll('.app-icon, .folder-icon');
icons.forEach((icon, index) => {
icon.style.border = index === this.selectedIcon ? '2px solid #0f380f' : '2px solid transparent';
});
}
// Handle D-pad input
handleDPadInput(dir) {
const currentWindow = this.getCurrentWindow();
const icons = currentWindow.querySelectorAll('.app-icon, .folder-icon');
const iconCount = icons.length;
const columns = 3;
switch (dir) {
case 'UP':
this.selectedIcon = (this.selectedIcon - columns + iconCount) % iconCount;
break;
case 'DOWN':
this.selectedIcon = (this.selectedIcon + columns) % iconCount;
break;
case 'LEFT':
this.selectedIcon = (this.selectedIcon - 1 + iconCount) % iconCount;
break;
case 'RIGHT':
this.selectedIcon = (this.selectedIcon + 1) % iconCount;
break;
}
this.updateSelectedIcon();
}
// Get the current active window
getCurrentWindow() {
if (this.folderWindow.style.display === 'flex') {
return this.folderContent;
} else {
return this.desktop;
}
}
// Show a notification
showNotification(message) {
this.notification.textContent = message;
this.notification.style.display = 'block';
this.notification.classList.add('fade-in');
this.notification.classList.remove('fade-out');
setTimeout(() => {
this.notification.classList.add('fade-out');
this.notification.classList.remove('fade-in');
setTimeout(() => {
this.notification.style.display = 'none';
}, 300);
}, 2000);
}
// Update battery level (simulated)
updateBattery() {
const level = Math.floor(Math.random() * 20) + 80; // Random level between 80-100%
this.batteryLevel.style.width = `${level}%`;
setTimeout(() => this.updateBattery(), 60000); // Update every minute
}
// Ensure content fits within the Degen Boy screen
fitContentToScreen(content) {
const wrapper = document.createElement('div');
wrapper.style.width = '100%';
wrapper.style.height = '100%';
wrapper.style.overflow = 'auto';
wrapper.style.boxSizing = 'border-box';
wrapper.style.padding = '10px';
wrapper.innerHTML = content;
// Adjust image sizes
const images = wrapper.querySelectorAll('img');
images.forEach(img => {
img.style.maxWidth = '100%';
img.style.height = 'auto';
});
return wrapper.outerHTML;
}
// Bind event listeners
bindEventListeners() {
this.closeBtn.onclick = () => this.closeWindow(this.appWindow);
this.iframeCloseBtn.onclick = () => this.closeWindow(this.iframeContainer, () => this.iframeContent.innerHTML = '');
this.folderBackBtn.onclick = () => this.closeWindow(this.folderWindow);
document.getElementById('menu-btn').addEventListener('click', () => {
this.closeWindow(this.appWindow);
this.closeWindow(this.folderWindow);
this.closeWindow(this.iframeContainer);
});
document.getElementById('select-btn').addEventListener('click', () => {
const selectedApp = this.apps[this.selectedIcon];
this.openItem(selectedApp);
});
// D-pad controls
document.getElementById('up-btn').addEventListener('click', () => this.handleDPadInput('UP'));
document.getElementById('down-btn').addEventListener('click', () => this.handleDPadInput('DOWN'));
document.getElementById('left-btn').addEventListener('click', () => this.handleDPadInput('LEFT'));
document.getElementById('right-btn').addEventListener('click', () => this.handleDPadInput('RIGHT'));
// Keyboard controls
document.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp': this.handleDPadInput('UP'); break;
case 'ArrowDown': this.handleDPadInput('DOWN'); break;
case 'ArrowLeft': this.handleDPadInput('LEFT'); break;
case 'ArrowRight': this.handleDPadInput('RIGHT'); break;
case 'Enter': document.getElementById('select-btn').click(); break;
case 'Escape':
if (this.appWindow.style.display === 'flex') this.closeBtn.click();
else if (this.folderWindow.style.display === 'flex') this.folderBackBtn.click();
else if (this.iframeContainer.style.display === 'flex') this.iframeCloseBtn.click();
break;
}
});
// Settings functionality
document.addEventListener('change', (e) => {
if (e.target.id === 'theme') {
document.body.className = e.target.value.toLowerCase();
} else if (e.target.id === 'sound') {
this.showNotification(e.target.checked ? 'Sound On' : 'Sound Off');
} else if (e.target.id === 'brightness') {
document.getElementById('screen-container').style.filter = `brightness(${e.target.value}%)`;
} else if (e.target.id === 'text-size') {
document.body.style.fontSize = `${e.target.value}px`;
}
});
}
}
// Initialize the Degen Boy OS
const degenBoyOS = new DegenBoyOS();
// Guide for users
console.log(`
Degen Boy OS Advanced Template User Guide:
1. To add new main screen icons:
- Modify the 'apps' array in the DegenBoyOS class.
- Each app should have a name, icon, and either content or url property.
- For folders, use type: 'folder' and provide content as an array of items.
2. To add new functionality:
- Create new methods in the DegenBoyOS class.
- Modify existing methods or add new ones to customize behavior.
3. To add pop-up messages:
- Use the showNotification(message) method.
- Example: degenBoyOS.showNotification('Hello, Degen Boy!');
4. To customize animations:
- Modify the CSS classes 'slide-in', 'slide-out', 'fade-in', and 'fade-out'.
- Add new animation classes and use them in the JavaScript code.
5. To integrate p5.js or three.js:
- See the 'p5.js Demo' and 'three.js Demo' apps for examples.
- Create a new app object with custom content using these libraries.
Explore and customize the code to make Degen Boy OS truly your own!
`);