JS Slot Machine is a Progressive web app with a regular slot machine game that has the logos of main JS-related tools as symbols. Deployed at https://marianapatcosta.github.io/js-slots-cra.
-
Slot Machine with 5 reels (with > 30 symbols) and 3 rows, with 9 Pay lines.
-
Follows the general rules of slot games, i.e, it aims to make the symbols spin and then check if you have combinations of 3 or more equal symbols displayed at one of the 9 possible winning lines;
-
Different win factor according to symbol frequency and number of symbol matches (from 3 to 5);
-
Customizable bet amount;
-
AutoSpin capability;
-
Free spinnings;
-
Bonus WildCards;
-
Big winning due to win amount multipliers;
-
Special Symbols;
-
-
Sounds on button click, winning, loss and spinning;
-
Lights blinking on winning and animation on matching symbols (including when Bonus wildcards are won);
- Offline capability;
- Instalable in your device;
- Responsive design;
- Dark theme;
- Background theme;
- Multilanguage (English and Portuguese);
- Share game url;
- TypeScript;
- React (use of functional components and hooks, portal, context, custom hooks);
- Redux (including persistence middleware to store state at localStorage);
- Webpack /CRA;
- SCSS modules with BEM methodology;
- typed-scss-modules (to generate TypeScript definitions for SCSS modules);
- HTML Canvas (for drawing Pay Lines);
- react-i18next for internationalization;
- CSS animations (for symbol SVGs and fake loader);
- Jest and React Testing library (for some unit tests with test coverage);
- react-transition-group (for modal/toast transitions);
- GreenSock Animation Platform (GSAP) (for spin animation);
- Basic ESlint and Prettier configs;
- GitHub actions
- Cypress (basic setup only);
- Error on running unit tests due to a supposed error with react-i18n and vite-plugin-pwa mocks;
- Tool to generate type definitions for scss (vite-plugin-sass-dts) caused errors;
- Problems when registering web workers;
- no tool animation;
- GSAP animation of all symbols, of reel as a whole, both depending on isSpinning redux state;
- Add the final slot screen symbols at the end of spinning;
- Prepare the shuffled reels with final slot screen symbols before spinning (but reels do not stay at proper position, showing the wrong symbols for final slot screen);
- DOM manipulation with ids and determining the visible reels by assessing top css property (ugly code);
- useImperativeHandle hook to execute reel animation from parent component and overcome the state update issue was not working;
- no support for path alias (add craco to overcome this issue);
- Cypress configuration needs several additional packages and I could not run the first test I wrote because
cypress/webpack-preprocessor(needed e.g. to load scss files) is incompatible with React v18.1.
In the project directory, you can run:
Installs all the dependencies required to run and develop this application.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Build a production-ready application.
Run linter command.
Runs TypeScript validator
Runs typed-scss-modules and generates types for scss modules, keeping the namespace using BEM css methodology
Launches the unit test runner in the interactive watch mode.
Launches the unit test runner in the interactive watch mode and shows test coverage report.
Launches cypress tests.
Deploy the build app to GitHub pages.