/js-slots-cra

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.

Primary LanguageTypeScript

JS Slot Machine

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. Group 732

Implemented Functionalities

Game features

  • 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;

  • image

  • Sounds on button click, winning, loss and spinning;

  • Lights blinking on winning and animation on matching symbols (including when Bonus wildcards are won);

General features

  • Offline capability;
  • Instalable in your device;
  • Responsive design;
  • Dark theme;
  • Background theme;
  • Multilanguage (English and Portuguese);
  • Share game url;

Lighthouse report for Desktop

  • image

Technical Stack

  • 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 image
  • Cypress (basic setup only);

What I've used but had to let go

Vite (repo and deploy )

  • 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;

Issues

Spin animation is buggy (after stop spinning, there is a 'jump' to show the win screen)

Attempts:

  • 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;

CRA

  • 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.

Available Scripts

In the project directory, you can run:

yarn install

Installs all the dependencies required to run and develop this application.

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

yarn build

Build a production-ready application.

yarn lint

Run linter command.

yarn validate-ts

Runs TypeScript validator

yarn gen-scss-types

Runs typed-scss-modules and generates types for scss modules, keeping the namespace using BEM css methodology

yarn test:unit

Launches the unit test runner in the interactive watch mode.

yarn test:unit-coverage

Launches the unit test runner in the interactive watch mode and shows test coverage report.

yarn test:e2e

Launches cypress tests.

yarn deploy

Deploy the build app to GitHub pages.