Coin Flipper App with Rio

A simple web application that simulates flipping a coin, built using the Rio web framework for Python.

Prerequisites

• Python 3.7 or higher
• pip (Python package installer)

Installation

1. Create and activate a virtual environment (recommended):

   python -m venv venv
   source venv/bin/activate  # On Windows, use: venv\Scripts\activate

2. Install Rio UI framework:

   pip install rio-ui

Project Structure

coin_flipper/
├── __init__.py           # App initialization
├── components/
│   ├── __init__.py
│   └── coin.py          # Coin component
├── pages/
│   └── coin_flipper_page.py  # Main page
└── rio.toml             # Rio configuration

Running the Application

1. Make sure you're in the project root directory (where rio.toml is located)

2. Run the application using Rio:

   python -m rio run

3. Open your web browser and navigate to the URL shown in the console (typically http://127.0.0.1:XXXXX, where XXXXX is the port number)

Features

• Interactive coin flipping
• Animated coin transitions
• Real-time result display
• Reset functionality
• Clean, responsive design

How It Works

The application is built using Rio's component-based architecture:

1. Main Page Component (CoinFlipperPage):

   • Manages the game state
   • Handles coin flip logic
   • Displays results and messages

2. Coin Component:

   • Handles coin display and animation
   • Shows different states (initial, flipping, result)
   • Responds to user interaction

3. Interactive Features:

   • Click the coin to flip it
   • Animated transition during flips
   • Clear result display
   • Reset option to start over

Development Mode

The application runs in debug mode by default, which is helpful for development. For production use, add the --release flag:

python -m rio run --release

Customization

You can customize the application by:

• Modifying the coin animations
• Changing the coin display icons
• Adjusting timing and transitions
• Adding additional features like statistics

Troubleshooting

If you encounter any issues:

1. Make sure all dependencies are installed:

   pip install rio-ui

2. Check that you're running the command from the project root directory (where rio.toml is located)

3. Verify that the port is not in use by another application

4. If you see import errors, make sure your Python environment is activated and Rio is installed correctly

Technical Details

• Built with Rio web framework
• Component-based architecture
• Real-time state management
• Responsive design
• Debug and release modes
• Built-in development server