Basic docs

Author: trymbf

README.md

@@ -33,19 +33,16 @@ A class for creating input fields. It extends the `Text` class and adds input-sp
 ### Button
 A class for creating buttons. It extends the `Element` class and adds button-specific attributes and methods.
 
-## Creating Custom Elements
-You can create custom UI elements by extending the base `Element` class. Here is an example of a custom element:
-
-```python
-class CustomElement(pygameui.Element):
-    def __init__(self, position, width, height, color):
-        super().__init__(position, width, height, color)
-
-    def draw(self, surface):
-        super().draw(surface)
-        # Add custom drawing code here
-
-    def update(self):
-        super().update()
-        # Add custom update code here
-```
+## Learn more in the docs!
+- [Getting Started](docs/getting-started.md)
+- [Components Guide](docs/components/index.md)
+- [Basic Tutorial](docs/tutorials/basic.md)
+- [Animation Guide](docs/features/animation.md)
+
+
+## Quick Links
+- [Examples](docs/examples/index.md)
+- [Gallery](docs/examples/gallery.md)
+
+## Getting Help
+- [GitHub Issues](https://github.com/trymbf/pygameui/issues)

__pycache__/pygameui.cpython-313.pyc

@@ -0,0 +1,58 @@
+# Button
+
+Buttons provide clickable interface elements with hover effects.
+
+## Basic Usage
+
+```python
+button = pygameui.Button(
+    position=(100, 100),
+    content="Click Me",
+    width=200,
+    height=50,
+    color=(255, 255, 255),
+    hover_color=(200, 200, 200),
+    click_color=(150, 150, 150),
+    text_color=(0, 0, 0),
+    centered=True
+)
+```
+
+## Properties
+
+```python
+position: tuple[int, int],
+width: int = 200,
+height: int = 50,
+border_radius: int = 10,
+content: str = "Click me.",
+color: tuple[int, int, int] = (255, 255, 255),
+hover_color: tuple[int, int, int] = (200, 200, 200),
+click_color: tuple[int, int, int] = (150, 150, 150),
+text_color: tuple[int, int, int] = (100, 100, 100),
+text_hover_color: tuple[int, int, int] = (0, 0, 0),
+text_click_color: tuple[int, int, int] = (0, 0, 0),
+font_size: int = 20,
+font_family: str = "Arial",
+centered: bool = False
+```
+
+- `position`: Tuple of (x, y) coordinates
+- `width`: Width of the button
+- `height`: Height of the button
+- `border_radius`: Radius for rounded corners
+- `content`: Text displayed on the button
+- `color`: Default button backgroundcolor
+- `hover_color`: Backgroundcolor when the button is hovered over
+- `click_color`: Backgroundcolor when the button is clicked
+- `text_color`: Color of the text when not hovered
+- `text_hover_color`: Color of the text when hovered over
+- `text_click_color`: Color of the text when clicked
+- `font_size`: Size of the text font
+- `font_family`: Font family for the text
+- `centered`: If True, the button is centered on the provided position
+
+### Button States
+- Normal: Default appearance
+- Hover: When mouse is over the button
+- Click: When button is being pressed

docs/components/button.md

@@ -0,0 +1,70 @@
+# Element Class
+
+The Element class is the foundation of all UI components in PygameUI.
+
+## Basic Usage
+
+```python
+element = pygameui.Element(
+    position=(100, 100),
+    width=200,
+    height=100,
+    color=(255, 255, 255),
+    border_radius=10,
+    centered=False
+)
+```
+
+## Properties
+```python
+position: tuple[int, int],
+width: int,
+height:int,
+color: tuple[int, int, int] = (255, 255, 255),
+border_radius: int = 0,
+centered: bool = False
+```
+
+- `position`: Tuple of (x, y) coordinates
+- `width`: Width of the element
+- `height`: Height of the element
+- `color`: RGB tuple for element color
+- `border_radius`: Radius for rounded corners
+- `centered`: If True, the element is centered on the provided position
+
+## Methods
+
+### Position Control
+```python
+# Set new position
+element.set_position((200, 200))
+
+# Get current position
+pos = element.get_position()
+
+# Center the element
+element.centered = True
+```
+
+### Display Control
+```python
+# Hide element
+element.set_display(False)
+
+# Show element
+element.set_display(True)
+
+# Toggle visibility
+element.toggle_display()
+```
+
+### Mouse Interaction
+```python
+# Check if mouse is over element
+if element.is_hovered():
+    print("Mouse over!")
+
+# Check if element is clicked
+if element.is_clicked():
+    print("Clicked!")
+```

docs/components/element.md

@@ -0,0 +1,66 @@
+# Image Element
+
+The Image class allows you to display images in your UI.
+
+## Basic Usage
+
+```python
+image = pygameui.Image(
+    position=(100, 100),
+    image_path="path/to/image.png",
+    width=200,  # Optional
+    height=150, # Optional
+    scale=1,    # Optional
+    centered=True
+)
+```
+
+## Properties
+```python
+position: tuple[int, int],
+image_path: str,
+width: int = 0,
+height: int = 0,
+scale:int = 1,
+centered: bool = False
+```
+
+- `position`: Tuple of (x, y) coordinates
+- `image_path`: Path to the image file
+- `width`: Width of the image (optional, 0 for auto, overrides scale)
+- `height`: Height of the image (optional, 0 for auto, overrides scale)
+- `scale`: Scale factor for the image (optional, default is 1)
+- `centered`: If True, the image is centered on the provided position
+
+## Supported Formats
+
+- PNG (recommended)
+- JPEG
+- GIF (first frame only)
+- BMP
+
+## Image Scaling
+
+Three ways to control image size:
+1. Original size (no parameters)
+2. Scale factor (`scale` parameter)
+3. Exact dimensions (`width` and `height` parameters)
+
+## Performance Tips
+
+```python
+# Efficient loading for multiple instances
+shared_image = pygame.image.load("sprite.png")
+for pos in positions:
+    image = pygameui.Image(
+        position=pos,
+        image=shared_image
+    )
+```
+
+## Best Practices
+
+- Use appropriate image sizes
+- Convert images to PNG for transparency
+- Cache frequently used images
+- Consider memory usage with large images

docs/components/image.md

@@ -0,0 +1,54 @@
+# Components Guide
+
+**Next:** [Animation Guide](../animation.md) | **Previous:** [Basic Tutorial](../tutorials/basic.md)
+
+## Available Components
+
+1. [Element](element.md) - Base component
+   - Foundation for all UI elements
+   - Positioning and display control
+   - Mouse interaction handling
+
+2. [Text](text.md) - Text display
+   - Custom fonts and sizes
+   - Color control
+   - Dynamic content updates
+
+3. [Button](button.md) - Interactive buttons
+   - Click handling
+   - Hover effects
+   - Custom styling
+
+4. [Input](input.md) - Text input fields
+   - Text filtering
+   - Cursor control
+   - Custom borders
+
+5. [Image](image.md) - Image display
+   - Multiple formats
+   - Scaling options
+   - Performance optimization
+
+## Usage Examples
+
+Each component page includes:
+- Basic implementation
+- Available properties
+- Common use cases
+- Performance tips
+
+## Quick Reference
+
+```python
+# Basic element creation pattern
+element = pygameui.ComponentName(
+    position=(x, y),
+    # ... other properties
+)
+
+# Update and draw pattern
+element.update()  # or element.update(events)
+element.draw(screen)
+```
+
+**Next:** Learn about [Animation](../animation.md)

docs/components/index.md

@@ -0,0 +1,61 @@
+# Input Field
+
+Text input fields for user data entry.
+
+## Basic Usage
+```python
+input_field = pygameui.Input(
+    position=(100, 100),
+    width=200,
+    height=50,
+    hint="Enter text...",
+    font_size=20
+)
+```
+
+## Properties
+```python
+position: tuple [int, int],
+width: int = 200,
+height: int = 50,
+passive_text_color: tuple[int, int, int] = (150, 150, 150),
+active_text_color: tuple[int, int, int] = (255, 255, 255),
+passive_border_color: tuple[int, int, int] = (100, 100, 100),
+active_border_color: tuple[int, int, int] = (200, 200, 200),
+border_radius: int = 0,
+border_width: int = 2,
+font_size: int = 20,
+font_family: str = "Arial",
+hint: str = "",
+centered: bool = False
+```
+
+- `position`: Tuple of (x, y) coordinates
+- `width`: Width of the input field
+- `height`: Height of the input field
+- `passive_text_color`: Color of the text when not focused
+- `active_text_color`: Color of the text when focused
+- `passive_border_color`: Color of the border when not focused
+- `active_border_color`: Color of the border when focused
+- `border_radius`: Radius for rounded corners
+- `border_width`: Width of the border
+- `font_size`: Size of the text font
+- `font_family`: Font family for the text
+- `hint`: Placeholder text when the field is empty
+- `centered`: If True, the element is centered on the provided position
+
+### Input Features
+- Text filtering
+- Custom borders
+- Active/inactive states
+- Cursor navigation
+- Text selection
+
+### Input Filtering
+```python
+# Only allow numbers
+input_field.set_filter("0123456789", exclude_mode=False)
+
+# Exclude special characters
+input_field.set_filter("@#$%^&*()", exclude_mode=True)
+```