https://github.com/matt-dionis/mathler-react-typescript
https://github.com/matt-dionis/mathler-react-typescript
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/matt-dionis/mathler-react-typescript
- Owner: Matt-Dionis
- Created: 2023-05-17T00:43:47.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-25T00:12:21.000Z (over 2 years ago)
- Last Synced: 2025-02-03T07:38:06.718Z (8 months ago)
- Language: TypeScript
- Size: 1.91 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Overiew
This project is a Mathler app built in React with TypeScript. Users can play one "daily" game, and after completing it they can generate a new "random" game. All Mathler rules are followed. Users can choose to input answers by clicking the on-screen keypad or using their keyboard.
https://github.com/Matt-Dionis/mathler-react-typescript/assets/17889952/11bde965-5f47-4e45-834a-d1605fc8d37c
# Running locally
## To run locally:
* `git clone git@github.com:Matt-Dionis/mathler-react-typescript.git`
* `npm install --legacy-peer-deps`
* `npm start`
## To lint and/or test:
* `npm run lint`
* `npm test`
# CI/CD
GitHub Actions have been configured to run ESLint and Jest tests every time changes are pushed up. These tests need to pass before pull requests can be merged. A Netlify deploy action has also been added to the pull request flow and **the latest deployed application can be found at https://unique-cheesecake-7382c5.netlify.app/.**
A pull request template has also been added for ease of future PR reviews.
# Code design decisions
This React application was built with TypeScript to enforce build-time type safety checks. CSS modules were introduced to make CSS more manageable. ESLint was introduced to catch code style issues before changes are pushed up.
## Game data
Game data is currently hard-coded on the frontend. This choice was made in order to remain focused on frontend concerns. A fast-follow improvement would be to move this code to a Node.js server.
## Client-side state management
The React Context is used to manage client-side state. This context is accessed through `GameProvider`. The `useGame` hook holds all logic to manage state defaults and changes.
## Modularity
This application is broken down into small, focused, modular components such as `Grid`, `Box`, and `Keypad`. The architecture is flexible enough that offering the option for users to switch between Mathler and Wordle using the same components will not be much of a lift
## Testing
* Unit testing is focused on the custom `useGame` hook which holds the vast majority of the game logic. The tests cover adding digits and operators, attempting incorrect answers, deleting digits or operators, submitting correct answers, etc.
* Integration tests focus on how the components lay out and interact. The presence, and absence, of certain elements and classes is verified.
_Note that the tests in place are just a starting point and coverage can be improved further._
## Misc
The value of the solution attempt equation needs to be checked when each attempt is submitted. `eval` use was avoided for security reasons in favor of `Function(...)()`. This logic, ideally, will be moved to the server and security precautions enhanced.
# Next steps
1. Move logic for fetching games and checking game status (complete, success) to a Node.js server
2. Update code to support Mathler AND Wordle game options
3. Add more test coverage
4. Introduce animations to the game UI
5. Investigate adding more input options for accessibility such as voice input