https://github.com/maygo/rock-paper-scissors
Game written in React
https://github.com/maygo/rock-paper-scissors
chakraui-v3 react typescript vite
Last synced: 2 months ago
JSON representation
Game written in React
- Host: GitHub
- URL: https://github.com/maygo/rock-paper-scissors
- Owner: MayGo
- Created: 2025-02-19T09:36:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-22T14:09:02.000Z (over 1 year ago)
- Last Synced: 2025-06-14T01:54:03.511Z (about 1 year ago)
- Topics: chakraui-v3, react, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 639 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Game
Running on: https://rock-paper-scissors-d43zz6zsz-trimatech-projects.vercel.app/
## TODO
- [x] Set up React + TypeScript + Vite project
- [x] Add Chakra UI
- [x] Implement game core mechanics:
- [x] Player balance system (starting 5000)
- [x] Betting mechanism (500 increments, max 2 positions)
- [x] Win/loss calculation:
- [x] Single position win (14x return)
- [x] Two positions win (3x return)
- [x] Tie handling (return bet amount)
- [x] Create UI components:
- [x] Betting position buttons (Rock/Paper/Scissors)
- [x] Blance / Bet amount / Win counter display
- [x] Computer choice display VS best of player choice
- [x] Game result screen with Winner and win amount
- [x] Implement game flow:
- [x] Bet placement phase
- [x] Computer choice randomization
- [x] Result comparison logic
- [x] Balance update system
- [x] Prevent invalid game states
- [x] Add animation for computer choice
- [x] Add animation for balance update
- [z] Fix layout shift if values changes in header
- [x] Add animation for win
- [x] Add unit tests
- [x] Make it playable on mobile
- [x] Check for rerenders
- [ ] Add Cypress tests
- [ ] Add sound effects
- [ ] Add background music
- [ ] Make it possible to add different value chips (premature refactoring?)
## React + TypeScript + Vite
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](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
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:
```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname
}
}
});
```
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
```js
// eslint.config.js
import react from 'eslint-plugin-react';
export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules
}
});
```