EPIC: Complete mobile experience and PWA refactor #27
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Refactored discord extension to use new naming conventions and icons
added full suite of app icons including Android, iOS, favicons, and theme-aware variants
Feature to update main HTML to forward query params to mobile page and use new icons
Feature implement cross-platform Safari PWA installer with responsive UI, modal prompts, and event handling for iOS/macOS
Feature revised PWA manifest with updated start_url, scope, categories, and full icon set including maskable, monochrome, and SVG support
Major refactor and enhancement to the Progressive Web App (PWA) management system. It upgrades the simple service worker update mechanism to a comprehensive system that provides a more robust and user-friendly experience.
This commit introduces several key enhancements to the application. Users can now share puzzles using a URL with a puzzle string, allowing for easy collaboration and puzzle distribution. To provide more precise control, dedicated eraser tools have been added for both the drawing and border modes. A user-toggleable game timer is also included, giving players the option to track their solving time. Finally, upon completion, a new success modal appears with a "Play Another" button, which simplifies the process of starting a new game based on the player's last-selected settings.
… timer This commit centralizes and adds new DOM element references to support recently implemented features. It includes: References for the new puzzle selection modal and its components, enabling a more flexible puzzle-choosing interface. DOM references for the new drawing and border eraser buttons. A reference for the new settings toggle that controls the visibility of the in-game timer. References for the new success modal that appears upon puzzle completion, including elements for time taken, difficulty, and new buttons for user actions. This update ensures all new UI components are properly referenced in one place, maintaining a clean and organized structure.
This commit introduces significant improvements to game logic and state management. The undo/redo history now supports the new border eraser tool via a compoundEraseBorder action. A new performAutoCheck call has been added to automatically check the puzzle state after a star is removed. Furthermore, the game settings and the current puzzle selection are now saved to and loaded from local storage, ensuring user preferences persist between sessions.
Delete Main/mobile/icons/icon-192x192.png
Delete Main/mobile/icons/icon-512x512.png
This commit introduces a complete suite of icons for a better mobile experience and improved PWA functionality. Adds a new app icon tailored for home screen shortcuts on iOS and Android. Implements a favicon suite that includes multiple sizes and supports dark mode, ensuring the favicon remains visible and appropriate regardless of the user's theme settings.
This commit overhauls the mobile HTML interface to incorporate several new features. The old puzzle size dropdown has been replaced with a dedicated puzzle selection modal triggered by a new button, providing a more structured and extensible way to choose puzzles. A new info bar now displays puzzle difficulty and size, alongside the recently implemented game timer. Additionally, new dedicated buttons for drawing and border erasers have been added to the toolbar, improving user control. This refactoring streamlines the UI, making it more intuitive and feature-rich for mobile users.
This commit significantly refactors the service worker to improve caching efficiency and stability. The caching strategy has been upgraded from a single "network-first" approach to a hybrid model that uses "cache-first" for static assets and "network-first" for dynamic content. Key changes include: Dual Caches: Creation of separate static and dynamic caches for better resource management. Resilient Caching: Individual asset caching with error handling in the install event to prevent installation failure on network issues. Immediate Activation: The service worker now uses self.clients.claim() to immediately control all open tabs upon activation, providing a seamless user update experience. Intelligent Fetching: A new fetch handler intelligently routes requests to the appropriate caching strategy, optimizing performance for both puzzle files and dynamic content.
This commit refactors the puzzle loading mechanism to use a more robust, filter-based approach with both AND and OR logic, ensuring the correct puzzles are loaded based on user selections. It also enhances the solution checking process by providing more specific error messages, stopping the timer upon completion, and triggering a new success modal and animation for a better user experience. Additionally, the import functionality is improved to properly track puzzle data and start the game timer, ensuring a consistent state across all game modes.
This commit introduces significant new state variables to enhance the application's core logic. It adds detailed state tracking for puzzle selection, including the puzzleFromUrl for direct links and effectivePuzzleSelection to handle complex filtering logic. The addition of a game timer, managed by timerInterval and puzzleStartTime, allows for performance tracking and a more complete gameplay experience. New flags for drawing and border erasing (isBorderEraserActive, isDrawEraserActive) and a temporary currentEraseChanges array improve the undo/redo functionality for these tools.
This commit introduces new CSS rules to style the success modal, providing a polished and modern appearance with a dark theme and green accents. It also adds a new, flexible layout for the info bar, ensuring that the puzzle information and timer are properly aligned and responsive across different screen sizes.
This commit introduces a new, feature-rich UI for puzzle selection and adds a game timer. It replaces the simple puzzle dropdown with a dynamic button-based filtering system that supports selecting puzzles by size, star count, and difficulty. The new updatePuzzleOptionStates function handles complex filter logic, including conflicts, and updates the display text accordingly. Additionally, this commit integrates a fully functional game timer, with functions to start, stop, and update it. The updateTimer function formats the time based on duration, switching from a milliseconds view to a standard hour-minute-second format for long play sessions. The UI for the home screen is also made more dynamic with the new updateHomeScreenForSharedPuzzle function, which adapts the interface when a puzzle is loaded from a shared URL.
This commit addresses a rendering bug on the canvas by correcting the drawing order in redrawAllOverlays. Previously, free-form drawings were rendered before custom borders, which caused issues with the eraser tool. The new order now draws borders first, followed by the buffered drawings, and finally the solution overlay. Additionally, this commit introduces a UnionFind class, a data structure useful for tracking disjoint sets. This class is an essential part of the new triggerSuccessAnimation function (introduced in a separate commit), which uses it to find and connect separate groups of stars to create a single, cohesive animation path.
Updated the drop-shadow on the .star-svg element to apply an even, more pronounced shadow. This change improves visual clarity and makes the stars stand out more consistently across light and dark backgrounds.
Adjusted the background color of the modal container to better match the overall UI. This improves visual consistency and enhances the user experience.
- Replaced the "X" icon (used for clearing the screen) with a trash can icon to better represent the action. - Replaced trash can icons (previously used for erasing borders and drawings) with an eraser icon to avoid confusion. - Improves clarity and visual consistency in the UI by aligning icons with their actual functions.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Mobile & PWA Experience Overhaul
This PR introduces a comprehensive overhaul for the mobile and Progressive Web App (PWA) experience. It enhances performance, reliability, and user interaction through a redesigned service worker architecture, a full icon suite, and numerous UI/UX improvements.
Key Enhancements
PWA Overhaul
Complete Icon Suite
Enhanced User Controls
Streamlined User Flow
Robust Sharing System
Discord Extension Refactor
This overhaul brings the mobile experience in line with modern PWA standards while improving both aesthetics and functionality.