Add some changes

Author: marianapatcosta

README.md

@@ -14,7 +14,7 @@ JS Slot Machine is a Progressive web app with a regular slot machine game that h
 - AutoSpin capability;
 - Free spinnings;
 - Bonus WildCards;
-- Big winning due to win amout multipliers;
+- Big winning due to win amount multipliers;
 - Special Symbols;
 
 - ![image](https://user-images.githubusercontent.com/43031902/173920878-d7fe0088-e3c7-486e-a544-32e149eabd07.png)

craco.config.js

@@ -5,6 +5,15 @@ module.exports = {
     alias: {
       '@': path.resolve(__dirname, 'src'),
     },
+    module: {
+      rules: [
+        {
+          test: /\.ts$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+      ],
+    },
   },
   style: {
     sass: {

package.json

@@ -40,6 +40,7 @@
     "test:e2e": "cypress open",
     "gen-scss-types": "typed-scss-modules src --additionalData \"@import './assets/styles/_index.scss';\" --nameFormat none --exportType default",
     "deploy": "gh-pages -d build",
+    "worker": "webpack --watch",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -73,9 +74,13 @@
     "@types/react-dom": "^18.0.5",
     "@types/react-transition-group": "^4.4.4",
     "cypress": "^9.5.4",
-    "sass": "^1.52.2",
+    "sass": "^1.52.3",
+    "sass-loader": "^13.0.0",
+    "style-loader": "^3.3.1",
     "ts-jest": "^28.0.4",
-    "typed-scss-modules": "^6.5.0"
+    "ts-loader": "^9.3.0",
+    "typed-scss-modules": "^6.5.0",
+    "webpack-cli": "^4.10.0"
   },
   "cracoConfig": "craco.config.js",
   "jest": {

public/worker.js

@@ -105,11 +105,11 @@
 
     &:after {
       line-height: 2rem;
-      font-size: 2rem;
+      font-size: 1.7rem;
       color: $color-white;
       text-align: center;
       content: '\21BA';
-      top: -0.2rem;
+      top: -0.1rem;
     }
   }
 }

src/assets/svg/close.svg

@@ -46,7 +46,7 @@
     -o-border-radius: 0.25rem;
     color: var(--color-font);
     font-family: $font-primary;
-    width: 90%;
+    min-width: 90%;
     position: absolute;
     top: 0;
     bottom: 0;
@@ -110,6 +110,7 @@
   .modal {
     &__content {
       width: max-content;
+      min-width: 20rem;
     }
   }
 }

src/components/game/WinsDisplay/styles.module.scss

@@ -1,9 +1,9 @@
 {
   "about": {
-    "description": "JS Slots Machine é composto por 5 reels 8com mais de 30 símbolos cada) e 3 linhas. O jogo segue as regras dos jogos slot tradicionais, i.e, os símbolos do jogo rodam e depois o verifica-se se existem coombinações de 3 ou mais símbolos iguais numa das 9 linhas de pagamento existentes.",
+    "description": "JS Slots Machine é composto por 5 reels (com mais de 30 símbolos cada) e 3 linhas. O jogo segue as regras dos jogos slot tradicionais, i.e, os símbolos do jogo rodam e depois o verifica-se se existem coombinações de 3 ou mais símbolos iguais numa das 9 linhas de pagamento existentes.",
     "specialSymbols": "Símbolos especiais",
     "explosive": "Explosivo",
-    "explosiveDescription": "Símbolos Explosivos numa linha de 3 a 5 multiplica o ganhos por 3-5, respectivamente.",
+    "explosiveDescription": "Símbolos Explosivos numa linha de 3 a 5 multiplicam os ganhos por 3-5, respectivamente.",
     "scatter": "Scatter",
     "scatterDescription": "Símbolos Scatter numa linha de 3 a 5 dão 10 rodadas grátis.",
     "wildcard": "WildCard",

src/components/ui/Modal/styles.module.scss

@@ -1,3 +1,4 @@
+import { getRandomNumber } from '@/utils';
 import { getShuffledReels } from '../game-utils';
 import { Symbol } from '../types';
 
@@ -7,7 +8,6 @@ export type WorkerPostMessageData = {
 
 /* eslint-disable-next-line no-restricted-globals */
 self.onmessage = (event: MessageEvent) => {
-  console.log(99999);
   const reels = getShuffledReels();
 
   /* eslint-disable-next-line no-restricted-globals */

src/locales/pt/translation.json

@@ -0,0 +1,52 @@
+const path = require('path');
+const webpack = require('webpack');
+
+const src = path.resolve(__dirname, './src');
+const build = path.resolve(__dirname, './public'); 
+const tsLoader = {
+  loader: 'ts-loader',
+  options: { compilerOptions: { module: 'esnext', noEmit: false } },
+};
+
+module.exports = {
+  mode: 'none',
+  target: 'webworker',
+  entry: './src/workers/shuffle-worker.ts',
+  output: {
+    filename: 'worker.js',
+    path: build,
+  },
+  resolve: {
+    modules: ['node_modules', src],
+    extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
+  },
+  alias: {
+    '@': path.resolve(__dirname, 'src'),
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('development') }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.ts?$/,
+        use: [tsLoader],
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              // Prefer `dart-sass`
+              implementation: require('sass'),
+            },
+          },
+        ],
+      },
+    ],
+  },
+};