React-Dice-Distribution is a visually appealing web application built with React that showcases dice distribution in a graphical form. The app includes a control panel where users can manipulate the number of dice (ranging from 2 to 30), the delay between each dice deployment, and the number of times the dice are thrown in a single step. The user can set these parameters and initiate the dice rolling process by clicking the "Start" button. The sums of the dice numbers are then displayed on a responsive chart.
The chart, implemented using the ApexCharts library, provides an immersive experience with features such as zoom, responsiveness, smooth animations, and transitions. Additionally, the chart offers export options, allowing users to save it in SVG, PNG, or CSV formats.
The application's meticulous attention to detail and high level of craftsmanship is evident. It has been designed to ensure a seamless user experience on devices of varying sizes, thanks to a custom responsive design that includes scaling and rotation capabilities. You can access the app on GitHub Pages using the following link: React-Dice-Distribution.
The chart visualizes the data in a line format, displaying the line of all accumulated dice sums. This representation facilitates the identification of a normal distribution or bell curve. The dark theme employed in the app contributes to enhanced readability and reduced eye strain.
- Dynamic control panel to adjust the number of dice, delay between deployments, and steps.
- Responsive chart with zooming functionality and export options (SVG, PNG, CSV).
- Smooth animations and transitions for an enhanced visualization experience.
- Custom responsive design for optimal usage on different devices.
- Dark theme for improved visual comfort.
To run React-Dice-Distribution locally on your machine, follow these steps:
- Clone the repository:
git clone https://github.com/ali-sdg90/React-Dice-Distribution.git
- Navigate to the project directory:
cd React-Dice-Distribution
- Install the dependencies:
npm install- Start the development server:
npm start-
Open your web browser and visit
http://localhost:3000to access the application.
- Upon opening the application, you will be presented with the control panel.
-
Adjust the desired parameters:
- Number of dice: Choose a value between 2 and 30.
- Delay: Define the duration between each dice deployment.
- Steps: Set the number of times the dice are thrown in a single step.
- Infinite Mode: Check this box to continuously roll the dice.
- Click the "Start" button to initiate the dice rolling process.
- Observe the chart as it dynamically updates with the sum of the dice numbers.
- Use the chart's zoom functionality, and export the chart in SVG, PNG, or CSV formats, as needed.
- Enjoy exploring the fascinating normal distribution or bell curve visualization provided by the chart.
- React
- ApexCharts
- CSS
Contributions to React-Dice-Distribution are welcome! If you would like to contribute to the project, please follow these guidelines:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and ensure that the code is properly formatted.
- Write appropriate tests for your changes, if applicable.
- Commit your changes with clear and descriptive commit messages.
- Push your changes to your forked repository.
- Submit a pull request to the main repository, providing a detailed description of your changes.
Please note that all contributions are subject to review. To ensure a smooth review process, consider the following:
- Follow the coding style and conventions used in the project.
- Keep your changes focused and avoid making unrelated modifications.
- Write clear and concise documentation when introducing new features or modifying existing ones.
- Ensure that all existing tests pass and write new tests to cover the changes you made.
Thank you for considering contributing to this project. Your help is greatly appreciated!
This project is licensed under the MIT License.