UI Overhaul (Incomplete) #4
Merged
Conversation
This file contains 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
(started from a clean working directory with the same git history) - Bootstrapped project from the Vite react template (with TypeScript and SWC) - Added initial configuration for ESLint and Prettier - Using husky as a pre-commit hook utility (linting, formating, and testing) - Changed manifest.json icons and favicons to match intended design - Implemented maskable icons in the manifest.json as suggested by the PWA documentation learn more: https://web.dev/maskable-icon - Made changes to improve overall SEO (head metadata, robots.txt [unconfigured], etc.)
- Implemented redux state slices for game and UI - Added initial respective tests for redux state slices - Initial configuration for react-redux with @reduxjs/toolkit - Added configuration for jest with typescript - Added ESLint rule for typescript consistent type imports
(considering this 'MVP', working state, but a lot of cleanup and additions needed) - Configured usage for Tailwind as the CSS framework (it's my first time, don't @ me) - Implemented UI components as close to the design spec as possible (need to figure out dynamic scaling for the disks/towers) Features: - Standard gameplay with rudimentary win condition, incrementing the 'diskCount' each successive win from an confirmation dialog (built-in) - Complex but subtle transitions/animations for tower hover and selection states - Keyboard shortcuts for tower selection - Reset game option - Stats for the number of moves and the minimum number of moves to win Todo: - Add timer to game state slice (likely timestamp comparison rather than an interval) - Implement logic and display for score multiplier (an equation that computes a number between 0 and 1 based on the timer, number of moves, and minimum number of moves) - Create a modal component to be used for a custom win dialog and future content - Investigate TailwindCSS class composition that works well with their prettier plugin - Add responsive drawer menu and implement the corresponding options
|
I think it's good so far. Wanting to test out the GitHub workflow for deployment, so I'm going to go ahead and rubber-stamp this. |
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.
Addresses #2, #3
What's changed
Initial Vite/React setup ⚡
(started from a clean working directory with the same git history)
learn more: https://web.dev/maskable-icon
Jest testing & Redux 🧪
Initial UI implementation 💎
(considering this 'MVP', working state, but a lot of cleanup and additions needed)
Features
Todo