This Project is part of Techincal Interview Task for Sprouts.ai based on Rock, Paper and Scissors Game built using React and TypeScript.
This Project is bootsrapped using Vite and uses React as a Frontend Library and TypeScript. It also uses TailwindCSS for styling.
https://rock-paper-scissors-ts.vercel.app/
git clone https://github.com/SalmanShahid888/Rock-Paper-Scissors-TS
cd Rock-Paper-Scissors-TS
npm install
npm run dev
> [email protected] dev
> vite
VITE v4.4.9 ready in 1923 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
Development Environment Note:
In Development Environment, Score updates two times adding 2 to score, This is not a bug and can be fixed by removing react strict mode from main.tsx
file.
<React.StrictMode>//</React.StrictMode>
- Select the Game Mode
- Choose Your Pick
Rock
Paper
Scissors
- If you Win your scores will get updated on Left Side
- If you Lose your scores will get updated on Right Side
- Based on your Game mode your opponent will be either Computer or another Player.
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptions
property like this:
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
- Replace
plugin:@typescript-eslint/recommended
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
- Optionally add
plugin:@typescript-eslint/stylistic-type-checked
- Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list