Super Mathler

The next generation of Mathler!

Language / Technologies Chosen

npm
Typescript
React
Prettier
TailwindCSS
HeadlessUI
Cypress

Personal Requirements

Mobile & Desktop platforms supported
Nice UI / UX
Dark Mode
Fast!

Testing Strategy

Unit test the game engine using Jest
Component unit test React components using Jest and react-testing-library
Test more complex global state interactions using E2E tests with Cypress

Game Rules

Initially I was not familiar with the rules of Mathler but I have obtained a full list from https://www.tomsguide.com/news/what-is-mathler-and-how-to-play, which are pasted below.

You have to guess the solution in six goes or less
Every equation you enter must be a valid answer. So if the answer is 20, your guess can't be 50+5-2 because that doesn't equal 20. Right away, this is one of the toughest things about it.
The equations follow the PEDMAS rule, which means you do them in the order of parentheses, exponentials, division, multiplication, addition and then subtraction.
A correct entry turns green
A correct entry in the wrong place turns yellow
An incorrect entry turns gray / red
Digits and operations can be used more than once

Installation

npm install -f (This is needed because not all libraries being used are upgraded for React v18.0)

Run

The game is currently defaulting to have an answer of 73 and target result of 132 - 59. The value can be changed from the code but would ideally be set by some external service that changes those values daily.

npm run start

Running E2E Tests

The E2E tests require the website to be running

npm run test
npm run test:e2e

Druage/Mathler-Clone