mac system 1 web os

Complete System Integration

Version thirteen represents the fully functional Mac System 1 operating system simulation with all features integrated and operational. This version combines all previous feature increments into a cohesive, polished system where boot sequence, desktop management, windowing, applications, and utilities work seamlessly together.

The complete system boots to reveal a full desktop environment with a menu bar providing access to system functions and application launchers. Icons on the desktop launch different applications through double-click gestures. Windows can be dragged across the desktop, resized from their corners, brought to front through clicking, and closed through close buttons.

The integrated applications provide practical functionality: Calculator for mathematical operations, MacPaint for graphics creation with full drawing toolset, Notes for text editing with persistence, Finder for file browsing and application launching, and About window for system information. The Control Panel allows desktop customization of patterns and fonts, while the Trash provides document lifecycle management.

This final version demonstrates the incremental development approach, where each previous version added one focused feature on top of working foundation code. The complete system shows how incremental feature addition builds from a simple boot screen through window management to a fully functional multi-application desktop environment. All code remains efficient and maintainable while supporting complex user interactions and persistent state management.

System Utilities and Control Panel

Version twelve completes the core system applications with Control Panel for customization and Trash for file management. The Control Panel provides two configuration sections: desktop pattern selection and font size adjustment. Pattern buttons allow switching between grid, dots, stripes, and plain background options.

The setupControlPanel method queries pattern and font buttons, attaching event listeners that update CSS classes and localStorage preferences. Font size buttons change the –font-size CSS variable, affecting all text throughout the system. Pattern selections persist using localStorage, restoring user preferences after page reloads.

The Trash window shows a simple message indicating trash status and provides an empty button for permanent deletion. The setupTrash method attaches the empty button listener that displays a status message. This interface establishes a document-oriented trash where deleted files collect before final removal.

These utility applications complete the foundational system utilities. Control Panel demonstrates CSS variable modification as a customization pattern, while Trash establishes document lifecycle management. Together with previous applications, these tools create a self-contained operating system simulation with text editing, graphics, file management, and system customization all functional and integrated.

Text Editor and File Manager

Version eleven adds text editing and file browsing capabilities. The Notes application provides a text area for writing and editing content with automatic localStorage persistence. User input is saved automatically, allowing notepad content to survive page reloads. The text area uses standard browser spellcheck and supports copy-paste operations.

The Finder window displays a directory browser with file listings in a three-column format showing name, type, and action buttons. The renderFinderFiles method dynamically generates table rows for each file in the files array. Built-in applications appear as shortcuts that users can double-click to launch directly from Finder.

File listings support both application shortcuts and downloaded file previews. Applications show with type “Application” and launch buttons that trigger the associated application window. Downloaded files show their proper type and include save buttons for downloading to local storage. Double-clicking applications in the file list launches them directly.

The bootstrap Files array initializes Finder with standard applications. The addDownloadedFile method allows new files to appear in Finder after they’ve been downloaded or created. This two-window interface pattern establishes a complete file management and note-taking system integrated into the desktop environment.

MacPaint Application Implementation

Version ten extends AppsManager with a complete drawing application featuring multiple tools and undo/redo functionality. The MacPaint window displays a canvas element with a toolbar containing tool selection buttons. Available tools include pencil for freehand drawing, line for straight lines, rectangle and circle shape tools, and fill bucket for flood fill operations.

The setupPaint method initializes canvas context settings including fill color, stroke style, and line width. An image data snapshot system captures canvas state before drawing operations begin, enabling undo/redo functionality. Separate stacks maintain undo and redo history with a maximum of 40 stored states to prevent excessive memory usage.

Tool-specific drawing algorithms implement pixel-by-pixel operations. The pencil tool draws continuously along mouse movement coordinates. The line tool uses Bresenham line algorithm for clean diagonal lines. Rectangle and circle tools preview shapes during dragging, then commit them when the mouse releases. The fill bucket implements breadth-first search flood fill, finding connected regions of the same color and replacing them.

Undo and redo swap states between stacks, allowing users to step backward and forward through their drawing history. Clear button resets the canvas to white. This application demonstrates complex interactive features while maintaining the simple, retro visual style of the system.

Calculator Application

Version nine introduces the first functional application window through the AppsManager class. The calculator provides a working four-function mathematical tool with a display field and button grid for numerical input and operations. This implementation demonstrates how applications integrate with the window management system.

The AppsManager.setupCalculator method creates calculator buttons dynamically from a key array, then appends them to a grid container. Event listeners on each button handle user interactions by accumulating expressions and evaluating them when the equals button is pressed.

Clear button resets the expression and display to zero. The equals operation uses Function constructor to safely evaluate the accumulated expression, catching errors for invalid inputs. The calculator maintains an expression string that accumulates user input, then updates the display field with current values.

This application architecture patterns how future applications will integrate: each app has a setup method that finds HTML containers and attaches event listeners. The WindowManager handles display state management, while AppsManager handles application-specific logic, creating clean separation of concerns that supports adding multiple applications.

Window Resizing Implementation

Version eight extends window management by adding the ability to resize windows from their bottom-right corner. A resize-handle element positioned in the corner serves as the interactive control point. When users click and drag this handle, the system tracks the mouse movement and updates window dimensions while maintaining minimum size constraints.

The attachResize method captures initial mouse and window dimensions when the user presses the mouse button on the resize handle. As the mouse moves, it calculates width and height changes based on the distance traveled from the starting point. The system enforces minimum dimensions of 220 pixels width and 130 pixels height to prevent windows from becoming too small to interact with.

Dimension calculations also enforce maximum constraints to prevent windows from extending beyond the desktop boundaries. The Math.min function limits width and height based on the window’s current position and the desktop dimensions, keeping resized windows fully visible. This ensures users never resize a window so large that they lose access to its controls.

The resize-handle CSS styling uses a diagonal linear gradient to create a visual indicator of its purpose, matching early-Macintosh system conventions. The cursor changes to a resize cursor when hovering over the handle, providing clear interaction affordance. This implementation completes the basic window management features needed for a functional desktop environment.

Window Dragging Implementation

Version seven adds the ability to drag windows across the desktop using the mouse. The WindowManager.attachDrag method implements this functionality by tracking mouse movement relative to the window’s title bar. When users press the mouse button on a title bar, the system records the initial position and begins tracking movement events.

The drag logic uses offsetX and offsetY to calculate the distance between where the mouse clicked and the window’s top-left corner. This offset ensures that windows follow the mouse naturally rather than snapping to it. During drag operations, the code continuously updates window position based on current mouse coordinates relative to the desktop container.

Boundary checking prevents windows from being dragged outside the visible desktop area. The Math.max and Math.min calculations confine movement to keep windows fully on screen, preventing them from disappearing off-screen where users couldn’t retrieve them. The close button check ensures clicking window controls doesn’t accidentally start dragging.

This implementation maintains the z-index stacking behavior by calling bringToFront when drag starts, ensuring the dragged window appears above all others. Window positioning uses pixel values updated directly on the element’s style attribute, providing smooth visual feedback as the user moves the mouse across the desktop.

Double-Click Application Opening

Version six implements window management and application launching through the WindowManager class. This class handles window registration, opening with animation, closing with fade-out effects, and z-index layering to manage active windows. Windows can now be opened and closed independently during the running system.

The DesktopManager receives an openApp callback function that triggers WindowManager.open() with an application identifier. When users double-click a desktop icon, the dblclick event listener calls openApp with the icon’s associated app name. For the Finder icon, this opens window-about since that’s the only application available at this stage.

The WindowManager maintains a Map of window elements indexed by application identifier. When registering a window, it attaches close button handlers and mousedown listeners for bringing windows to front. The open method removes the hidden class and adds an opening class to trigger CSS transition animations. After rendering the frame, it removes the opening class to complete the visual transition.

Window closing applies a closing class that plays the fade-out animation for 120 milliseconds before hiding the window. This provides satisfying visual feedback when users close applications. The bringToFront method increments z-index values to ensure the most recently clicked window appears above all others, maintaining clarity about which application is active.

This implementation establishes the foundation for multi-window management that future versions will extend with dragging, resizing, and additional applications.

Icon Dragging and Selection Implementation

Version five extends desktop icon functionality by adding the ability to drag icons across the desktop surface. The DesktopManager class now tracks drag state and mouse movement to enable repositioning of icons while maintaining constraints that keep icons within the desktop boundaries.

The attachIconInteraction method initializes drag tracking variables that capture the initial mouse position relative to the icon element and the desktop container. When a user presses the mouse button on an icon, the dragStart object stores offset coordinates and desktop position information needed to calculate subsequent movements correctly. The hasMoved flag distinguishes between simple clicks (for selection) and drag operations.

During mouse movement, the code continuously updates icon position based on the current mouse coordinates, applying bounds checking to prevent icons from moving outside the visible desktop area. The Math.max and Math.min calculations constrain the left and top position values relative to the desktop dimensions and icon sizes. When the user releases the mouse, the drag state resets, completing the interaction.

This implementation maintains visual consistency with selection state, ensuring that dragging an icon keeps it selected. The click handler specifically calls selectIcon before any drag operation might occur, providing immediate visual feedback. This foundation enables users to organize their desktop in future versions, building toward a complete desktop environment system where icon positions matter contextually.

Desktop Icons Implementation

Version four introduces the iconic desktop representation through a new DesktopManager class that handles rendering, positioning, and interaction with desktop icons. The implementation creates visual representations of applications and system functions that users can interact with. Two default icons appear: a floppy disk labeled “system 1.1 finder 1” positioned in the upper right corner, and a Trash icon positioned in the lower right corner.

The DesktopManager constructor accepts the desktop element, icons container, and a callback function for opening applications. The renderIcons method creates HTML article elements for each icon definition, applying positional data attributes and event listeners. The getIconPosition method returns coordinates based on the icon’s specified position parameter, with built-in values for right-top and right-bottom placement relative to the desktop dimensions.

Icon interaction adds click listeners that select icons visually through CSS class toggling. When a user clicks an icon, the selectIcon method applies the selected class to that icon while removing selection from any previously selected icon. This provides visual feedback that the icon is active. Desktop-level click handlers detect clicks outside icons and call clearSelection to deselect when users interact with empty desktop space.

This foundation establishes the pattern for future icon-based applications. Each icon definition includes a key for fallback icon selection, a source path to an image file, a display label, an application name identifier, and a position specification. The architecture cleanly separates icon management from application functionality, allowing straightforward addition of new desktop applications in future versions.

Desktop Background Pattern Implementation

The desktop now displays a subtle grid pattern that provides visual structure to the work surface without overwhelming the interface. This implementation uses CSS background gradients to create an economical grid representation using only linear gradients rather than tiling background images. The pattern applies specifically to the main desktop container, defining a visual boundary between the system and application windows.

The grid pattern consists of two overlapping linear gradients, one running horizontally and one vertically, each with minimal opacity to keep the pattern subtle. The background-size property sets the grid square dimensions to 8x8 pixels, creating a fine grid that matches early-Macintosh system aesthetics. The pattern uses rgba colors with 0.08 opacity for the lines, producing a dashed appearance that doesn’t interfere with viewing content on the desktop.

CSS classes provide support for alternative patterns through the pattern-grid, pattern-dots, pattern-stripes, and pattern-plain class names. This foundation enables future Control Panel features to switch between background styles. Each pattern class overrides the background properties independently, allowing straightforward addition of new pattern types without complex conditional logic.

The background color #d6d6d6 provides the characteristic light gray tone of original Macintosh systems while maintaining sufficient contrast for readability. This gray serves as the base for all pattern variations, ensuring a consistent visual appearance regardless of which pattern is active.

Menu Bar System Implementation

The menu bar appears at the top of the desktop as a persistent navigation element. Five main menus provide access to system functions: the Apple menu with system operations, File menu for document and window management, Edit menu with standard clipboard operations, View menu for desktop organization, and Special menu for advanced features. Each menu is represented as a clickable item that toggles a dropdown list of actions when engaged.

The menu implementation uses event listeners to track clicks across all menu items and dropdowns. When a user clicks a menu label, the interface determines whether that menu is currently hidden and toggles visibility accordingly, while simultaneously closing any other open menus. This ensures only one menu shows at a time, maintaining the clean interface appearance established in the boot sequence.

The dropdown containers position absolutely below the menu bar with proper z-index stacking to appear above other interface elements. Button styling within dropdowns provides hover feedback with inverted colors, signaling interactivity to the user. Click handlers on dropdown buttons trigger action callbacks that will control system behavior as more features get implemented.

Menu items track their active state through CSS classes that provide visual distinction, matching the early-Macintosh style of showing which menu is currently accessed. The entire menu system closes when clicking anywhere outside a dropdown, providing the expected behavior of dismissing menus when the user engages with other interface areas.

Boot Screen Implementation

The boot screen forms the first system interaction when the OS loads. This version implements the core boot animation that greets users with the classic Macintosh startup experience. The HTML structure provides three main states: the initial boot screen with progress bar, a shutdown confirmation screen, and the hidden OS desktop area that appears after boot completes.

The boot sequence timer increments a progress bar at precise 42-millisecond intervals, updating the bar width from 0 to 100 percent. Once the progress reaches completion, the system waits 220 milliseconds for visual polish before transitioning to the desktop. The shutdown button provides a clean way to return to the initial state, allowing users to restart the system.

CSS styling maintains the authentic early-Mac aesthetic with proper color grids for background elements, appropriate font sizing through CSS variables, and the contrast between light and dark screens. The boot window centers on the viewport using grid layout, preserving the pixel-perfect representation of the original system.

This foundational layer establishes the timing mechanisms and state management patterns that future features will build upon, including proper class toggling for hidden states and smooth visual transitions between boot and active states.