@Xfhe

Devlog: xfheOS Development
Overview
This development log covers the recent updates that transitioned xfheOS from a static landing page into a fully interactive, web-based operating system. All features were built using vanilla HTML, CSS, and JavaScript.

Core Architecture Updates
Window Management
We implemented a custom window management system in JavaScript. The system allows users to interact with applications just like a traditional operating system.

Windows are now fully draggable across the screen using the title bar.
Added a z-index management function that automatically brings the focused window to the foreground.
Integrated standard window controls to close, minimize, and maximize application windows.
User Interface
Replaced the initial gradient backgrounds with a solid dark theme for a cleaner and more professional look.
Developed a bottom dock for quick application launching and window restoration.
Resolved a critical CSS margin collapse issue that was previously pushing the top navigation bar out of alignment.
Applications Developed

1. Calculator
   We built a standard calculator capable of handling basic mathematical operations. The logic includes a safety mechanism to prevent common JavaScript floating-point errors by rounding the results.

2. Notes
   Added a lightweight text editor application. This app utilizes the browser’s Local Storage API to automatically save user input, ensuring data persists across page reloads.

3. Web Browser
   Integrated an iframe-based browser application. It allows users to view external web content directly within the OS environment.

4. Paint
   Implemented a simple drawing tool using the HTML5 Canvas API. It features real-time drawing capabilities, custom color selection, brush size adjustments, and a canvas clear function.

Devlog #2
My project Ebeep is starting to take a bit more shape!
.
my project is a “beeper” with an eink display (like the name suggests). ill be building two of them and gifting one to my GF on her birthday later this month!
.
i rewrote almost the ENTIRE UI since last time the code i wrote was pretty bad and it had terrible UI.

hopefully tomorrow i could work on actually connecting it to the internet and work on basic end to end encryption (maybe?).
also i really hope ill get my esp32s soon so i could actually test my code on that instead of my arduino and design my 3d case for it.
.
today and yesterday werent very productive since my CS finals are tomorrow! so wish me luck!

New Feature Update
We have added a new boss to the game to increase the challenge and cover more JavaScript concepts.

Syntax Sorcerer
The Syntax Sorcerer is the third boss you will face. This boss has 150 Health Points and tests your knowledge of more advanced JavaScript syntax.

Tasks included for this boss:

Arrow Functions: You must write an arrow function that returns a specific value. This helps practice modern function syntax.
Error Handling: You are required to write a try-catch block. This is essential for managing errors in real applications.
Spread Operator: You need to use the spread operator on an array. This tests your understanding of array manipulation.
DOM Demon
The DOM Demon is the fourth and final boss. This boss has 200 Health Points and tests your ability to interact with the Document Object Model (DOM).

Tasks included for this boss:

Selecting Elements: You must use methods like getElementById.
Creating Elements: You need to create new HTML elements dynamically using createElement.
Modifying Classes: You are required to manipulate an element’s classList.
Event Listeners: You need to attach event listeners to elements to make them interactive.
Combo System
We introduced a Combo System to reward accurate coding.

How it works: If you complete a task correctly on your very first try, your combo increases.
Visuals: Your current combo is displayed at the top of the game interface during a run.
Reset: If you make a mistake and get the answer wrong, your combo resets to zero.
These additions make the game longer, provide a better learning curve, and add a layer of challenge for skilled players who want to maintain a high combo.

Architecture and Routing
The application now supports multiple distinct screens and states, moving beyond a single static view:

Intro Screen: A landing page that introduces the game, lists the available bosses, and explains the rules.
Boss Defeated Screen: A transition state that displays the player’s statistics for the defeated boss and previews the next challenge.
Victory Screen: The final state reached after completing all content, presenting a summary of the player’s total time, attempts, and overall accuracy.
Multi-Boss Support
The hardcoded single-boss logic has been refactored. The game state now imports a structured array of bosses. A second boss, “Array Alchemist”, has been integrated into the loop. When a boss reaches zero HP, the game seamlessly transitions to the next boss in the sequence, resetting health while preserving total accumulated statistics.

Audio Feedback
To improve interaction, a lightweight audio system was introduced using the native Web Audio API. This avoids the need to load external MP3 files. Synthesized tones are now played during specific events:

Correct submission (Hit)
Incorrect submission (Miss)
Boss Defeated
Game Completed (Victory)
Quality of Life Improvements
Keyboard Shortcuts: Added a global event listener to the Monaco Editor. Players can now execute their code using Ctrl + Enter (or Cmd + Enter), greatly speeding up the trial-and-error process.
Auto-dismissing Alerts: Feedback banners (success/error messages) are now automatically cleared after 2.5 seconds to prevent visual clutter on the screen.
Visual Polish: The boss UI was updated to include a brief description of the current boss, and the health/task progress bars were refined to match the strict minimalist aesthetic.

Overview
This session focused entirely on improving the visual interface. No new game mechanics were added. The goal was to make the layout clearer, more informative, and more polished without introducing gradients or heavy visual effects.

Changes
Boss Panel

The boss panel was restructured. The boss name and HP bar are now displayed in a compact stat block below the sprite. The HP bar was thinned down and simplified. A row of task progress dots was added beneath it, one dot per task. Each dot fills white when a task is completed. The active task pulses dimly to show the current position. This gives the player a clear sense of progress at a glance without needing to count tasks.

A damage flash effect was also added. When the boss takes a hit, a red ring briefly expands around the sprite and fades out. This makes successful submissions feel more impactful.

Task Panel

The task panel was redesigned with a header row containing two badges: one showing the current task number out of the total, and one showing the HP damage the task will deal. The description is now treated as the main heading. The example code block was simplified with a minimal left border accent.

The victory screen was also cleaned up. It now shows a small “BOSS DEFEATED” label above the title, consistent with the badge style used throughout the rest of the UI.

Global Styles

Google Fonts were loaded globally for Inter and JetBrains Mono. Custom scrollbar styles were applied to keep the dark theme consistent throughout. Default browser margin and padding resets were added.

Notes
The color palette is strictly black, white, and grays. No gradients, no colored backgrounds, no glow effects. The only color exception is the red damage badge and the low-HP bar state, which are intentional signals to the player.

Project Setup We initialized a React application using Vite for fast development and bundling. For the code editing experience, we integrated the Monaco Editor (@monaco-editor/react) to provide a realistic coding interface.

State Management We implemented a custom hook, useGameState, to handle the game’s state. This tracks the boss’s HP, current level, and player progress. All progress is persisted using localStorage so players can refresh the page without losing their game.

User Interface We designed a dark-mode interface with a split layout. The left panel displays the “Loop Goblin” boss, their current HP, and a dynamic health bar. The right panel contains the task description and the Monaco Editor. We added CSS animations for taking damage and completing tasks to make the gameplay feel responsive.

Gameplay Logic The first boss, Loop Goblin, starts with 100 HP. We implemented four introductory coding tasks:

Writing a loop from 1 to 3
Creating a variable with the value 10
Writing a function named ‘attack’
Creating an array and using the ‘.length’ property
For the MVP, code validation is handled through fast string matching rather than executing arbitrary JavaScript. This ensures security and simplicity while verifying the core concepts of the user’s input.

Next Steps
Deploy the initial MVP to Vercel.
Add additional bosses and more complex tasks.
Consider implementing a secure sandbox for executing user code in future versions.