Welcome to the in-depth guide of Degen Boy OS! This nostalgic webpage will walk you through every aspect of how the Degen Boy OS is constructed, from its structure to its interactive features.
Degen Boy OS is a nostalgic, browser-based operating system simulator inspired by classic handheld gaming devices. It's built using a combination of modern web technologies:
The OS features a customizable theme, multiple apps, and interactive elements that blend 2D and 3D graphics.
The HTML structure forms the backbone of the Degen Boy OS. It's organized into several key components:
<div id="device-container">
<div id="screen-container">
<div id="desktop"></div>
<div id="app-window">
<div id="app-header">
<span id="app-title"></span>
<button id="close-btn">X</button>
</div>
<div id="app-content"></div>
</div>
<div id="links-view"></div>
<div id="projects-view"></div>
<div id="web-view"></div>
<div id="notification"></div>
</div>
<div id="controls">
<button class="control-btn" id="menu-btn">Menu</button>
<button class="control-btn" id="select-btn">Select</button>
</div>
<div id="d-pad">
<button class="d-pad-btn" id="up-btn">↑</button>
<button class="d-pad-btn" id="left-btn">←</button>
<button class="d-pad-btn" id="right-btn">→</button>
<button class="d-pad-btn" id="down-btn">↓</button>
</div>
</div>
This structure allows for a flexible layout that can accommodate various apps and views within the simulated device screen.
The CSS in Degen Boy OS is dynamic and theme-based. It uses a configuration object to define different color schemes:
const config = {
theme: {
classic: {
primary: "#9bbc0f",
secondary: "#306230",
background: "#8b8b8b",
text: "#0f380f"
},
purple: {
primary: "#8a2be2",
secondary: "#4b0082",
background: "#483d8b",
text: "#e6e6fa"
}
},
currentTheme: "classic",
// Other configurations...
};
function generateStyles() {
const theme = config.theme[config.currentTheme];
return `
body, html {
background-color: ${theme.background};
color: ${theme.text};
font-family: ${config.fonts.main};
}
#device-container {
background-color: ${theme.background};
border-radius: 20px;
box-shadow: -5px 5px 0 #6b6b6b, -10px 10px 0 #4b4b4b;
}
#screen-container {
background-color: ${theme.primary};
border: 10px solid ${theme.secondary};
}
.app-icon, .project-item {
background-color: ${theme.secondary};
border: 2px solid ${theme.text};
}
// More dynamic styles...
`;
}
This approach allows for easy theme switching and ensures consistent styling throughout the OS.
The core functionality of Degen Boy OS is implemented in JavaScript. Here are some key functions:
function initializeElements() {
desktop = document.getElementById('desktop');
appWindow = document.getElementById('app-window');
appTitle = document.getElementById('app-title');
appContent = document.getElementById('app-content');
// Initialize other elements...
}
function createDesktopIcons() {
desktop.innerHTML = '';
config.apps.forEach((app, index) => {
const icon = document.createElement('div');
icon.className = 'app-icon';
icon.innerHTML = `
<span style="font-size: 24px;">${app.icon}</span>
<span>${app.name}</span>
`;
icon.onclick = () => openApp(app);
desktop.appendChild(icon);
});
}
function openApp(app) {
appWindow.style.display = 'flex';
appTitle.textContent = app.name;
appContent.innerHTML = app.content();
if (app.name === 'Clock') {
updateClock();
setInterval(updateClock, 1000);
} else if (app.name === '3D Viewer') {
init3DViewer();
}
}
// Event listeners, app implementations, etc.
These functions handle the creation of desktop icons, opening apps, and managing the overall user interface.
p5.js is used to create dynamic backgrounds and particle effects in Degen Boy OS:
function setupP5() {
new p5((sketch) => {
let particles = [];
sketch.setup = () => {
const canvas = sketch.createCanvas(config.dimensions.screenWidth, config.dimensions.screenHeight);
canvas.parent('screen-container');
canvas.style('position', 'absolute');
canvas.style('top', '0');
canvas.style('left', '0');
canvas.style('pointer-events', 'none');
};
sketch.draw = () => {
sketch.clear();
// Dynamic background patterns
sketch.stroke(sketch.color(config.theme[config.currentTheme].secondary));
for (let i = 0; i < sketch.height; i += 4) {
let x = sketch.noise(i * 0.01, sketch.frameCount * 0.01) * sketch.width;
sketch.line(0, i, x, i);
}
// Particle system
updateAndDisplayParticles();
// Interactive audio visualizer (placeholder)
if (sketch.frameCount % 60 === 0) {
createParticleBurst();
}
};
// Particle class and methods...
});
}
This setup creates a canvas overlay that adds visual interest to the OS interface.
Three.js powers the 3D viewer app in Degen Boy OS:
function init3DViewer() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(260, 260);
document.getElementById('3d-viewer').appendChild(renderer.domElement);
createCube();
createBackground();
createText();
animate();
}
function createCube() {
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
color: parseInt(config.theme[config.currentTheme].secondary.slice(1), 16),
wireframe: true
});
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
}
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += rotationSpeed;
cube.rotation.y += rotationSpeed;
renderer.render(scene, camera);
}
This setup creates a 3D scene with a rotating cube, demonstrating the integration of 3D graphics in the OS.
Each app in Degen Boy OS is implemented as a function that returns HTML content. Here's an example of the Notes app:
function notesApp() {
return `
<textarea style="width: 100%; height: 200px; background-color: ${config.theme[config.currentTheme].primary}; color: ${config.theme[config.currentTheme].text}; border: none; font-family: ${config.fonts.main}; font-size: ${config.textSize}px;"></textarea>
`;
}
Other apps, like the Calculator or Clock, would have more complex implementations with additional functionality.
Degen Boy OS is designed to be easily customizable. Users can modify various aspects of the OS through the configuration object:
const config = {
name: "Degen Boy OS",
theme: {
classic: {
primary: "#9bbc0f",
secondary: "#306230",
background: "#8b8b8b",
text: "#0f380f"
},
// Add more themes here
},
currentTheme: "classic",
dimensions: {
width: 320,
height: 580,
screenWidth: 280,
screenHeight: 330
},
fonts: {
main: "'Press Start 2P', cursive"
},
textSize: 8,
apps: [
{ name: 'Notes', icon: '📝', content: notesApp },
{ name: 'Clock', icon: '🕰️', content: clockApp },
// Add more apps here
],
// Add more configuration options
};
To customize the OS, you can:
theme objectapps arrayDegen Boy OS supports keyboard navigation for improved accessibility:
document.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowUp':
navigateIcons('up');
break;
case 'ArrowDown':
navigateIcons('down');
break;
case 'ArrowLeft':
navigateIcons('left');
break;
case 'ArrowRight':
navigateIcons('right');
break;
case 'Enter':
handleSelectButton();
break;
case 'Escape':
closeCurrentApp();
break;
}
});
This allows users to navigate the OS using arrow keys and interact with apps using Enter and Escape keys.
To add persistent storage for app data, we can use the browser's localStorage:
function saveAppData(appName, data) {
localStorage.setItem(`degenBoyOS_${appName}`, JSON.stringify(data));
}
function loadAppData(appName) {
const data = localStorage.getItem(`degenBoyOS_${appName}`);
return data ? JSON.parse(data) : null;
}
// Usage in Notes app
function notesApp() {
const savedNotes = loadAppData('notes') || '';
return `
<textarea id="notes-content" style="width: 100%; height: 200px;">${savedNotes}</textarea>
<button onclick="saveNotes()">Save</button>
`;
}
function saveNotes() {
const notesContent = document.getElementById('notes-content').value;
saveAppData('notes', notesContent);
showNotification('Notes saved!');
}
This implementation allows apps to save and load data, preserving user input between sessions.
To ensure smooth operation, especially on lower-end devices, consider these optimizations:
// Optimized particle system
class ParticleSystem {
constructor(maxParticles = 100) {
this.particles = [];
this.maxParticles = maxParticles;
}
addParticle(x, y) {
if (this.particles.length >= this.maxParticles) {
this.particles.shift(); // Remove oldest particle
}
this.particles.push(new Particle(x, y));
}
update() {
this.particles.forEach(particle => particle.update());
this.particles = this.particles.filter(particle => !particle.isDead());
}
draw(sketch) {
this.particles.forEach(particle => particle.draw(sketch));
}
}
Here are some ideas for future enhancements to Degen Boy OS:
These enhancements would further expand the capabilities of Degen Boy OS and provide users with a more comprehensive retro computing experience.