Building a Feat and Skill Database Companion Web App with Anvil

A comprehensive guide to creating an intuitive tabletop game companion using the Anvil framework

Key Takeaways

• Intuitive Frontend Design: Creating a user-friendly interface with easy navigation and detailed views for feats, skills, items, and creatures.
• Robust Backend Structure: Utilizing Anvil’s Data Tables to manage and relate data efficiently.
• Two-Way Linking: Implementing seamless navigation between related feats and skills for enhanced user experience.

Introduction

Creating a companion web app for your tabletop game that efficiently manages feats, skills, items, and creatures can significantly enhance gameplay. The Anvil framework offers a robust platform to build such an application using only Python, with a focus on ease of use and rapid development. This guide synthesizes comprehensive steps and best practices to help you develop a feature-rich, user-friendly companion app tailored to your game's needs.

Features and Functionalities

Frontend

• User-Friendly Interface: A responsive layout with a sidebar or navigation menu for quick access to different sections like Feats, Skills, Items, and Creatures. Implement breadcrumbs or top navigation to provide context about the user's location within the app.
  • Sidebar for easy navigation across different categories.
  • Breadcrumbs at the top to indicate the current page hierarchy.
  • Consistent layout ensuring users can intuitively find and access different sections.
• Detail Pages: Each feat, skill, item, or creature has a dedicated page displaying comprehensive information, including descriptions, prerequisites, effects, and related entities.
  • Clicking an item from the list leads to its detailed view.
  • Detail pages include all relevant data and links to related entries.
  • Enhanced readability with organized sections and clear headings.
• Search and Filtering: Implement a centralized search bar with filtering options to help users quickly find specific entries based on various criteria.
  • Case-insensitive search functionality for broader access.
  • Filters based on categories like type, attribute, or related entities.
  • Real-time search results updating as users input search terms.

Backend/Data Management

• Anvil Data Tables: Design separate tables for Feats, Skills, Items, and Creatures, establishing relationships using foreign keys to handle two-way linking. This ensures data is organized and easily accessible.
  • Feats Table: Manages all feat-related data.
  • Skills Table: Stores information about various skills.
  • Items Table: Contains details about items within the game.
  • Creatures Table: Includes data on different creatures players may encounter.
• Relationships Between Data: Use two-way linking to allow navigation from Feats to related Skills and vice versa, enhancing data interconnectedness and providing a seamless user experience.
  • Link columns to associate related entries.
  • Ensure that each relationship is bidirectional, allowing users to navigate in both directions.
  • Maintain data integrity by correctly managing linked entries.

Database Structure

Establishing a well-organized database structure in Anvil’s Data Tables is crucial for managing different entities and their relationships efficiently. Below is a recommended structure for each table:

Designing the Frontend

User Interface Structure

1. Main Page:

   • Search bar prominently placed at the top for global searches.
   • Tabs or a sidebar for navigating between Feats, Skills, Items, and Creatures.
   • Data grids or lists that display entries with sortable and filterable columns for easy browsing.
   • Quick links or buttons for predefined filters to streamline the search process.

2. Detail Pages:

   • Dedicated pages for each feat, skill, item, or creature displaying all relevant information.
   • Sections within detail pages for descriptions, prerequisites, effects, and related entities.
   • Clickable links to navigate to related feats or skills, enabling two-way navigation.
   • Well-organized layout with clear headings and subheadings for enhanced readability.

Implementing Two-Way Linking

• Ensure that each related entry (e.g., a skill linked to a feat) includes a clickable link that navigates to the corresponding detail page.
• Use Anvil’s RepeatingPanels or similar components to dynamically list related entries, making the navigation intuitive and seamless.
• Implement Python-based event handlers to manage the navigation logic between related entries.

Responsive Design

• Leverage Anvil’s built-in Material Design components to ensure the app is accessible and visually appealing on both desktop and mobile devices.
• Implement responsive layouts that adjust to different screen sizes, ensuring usability across various devices.
• Utilize lazy loading or pagination for sections with large data sets to maintain app performance and responsiveness.

Implementation Steps

1. Setting Up Anvil Framework

• Sign up for or log in to your account on Anvil.
• Create a new app using the "Blank App" template with Material Design to start with a clean and responsive layout.
• Familiarize yourself with Anvil’s drag-and-drop interface and Python-based backend.

2. Database Setup on Anvil

• Navigate to the Data Tables section within your Anvil app.
• Create the following tables with the specified columns:
  • Feats Table:
    • Name (Text)
    • Description (Text)
    • Required Skill (Link to Skills Table)
    • Related Items (Link to Items Table, multi-row)
  • Skills Table:
    • Name (Text)
    • Description (Text)
    • Associated Feats (Link to Feats Table, multi-row)
  • Items Table:
    • Name (Text)
    • Description (Text)
    • Type (Text)
    • Effects (Text)
  • Creatures Table:
    • Name (Text)
    • CR/Level (Number)
    • Stats (Text)
    • Skills (Link to Skills Table, multi-row)
    • Feats (Link to Feats Table, multi-row)
• Establish relationships between tables by linking related entries using the link columns. Ensure that these links are bidirectional for two-way navigation.

3. Designing the User Interface

• Use Anvil’s drag-and-drop form builder to create the main forms for Home, Feats List, Skills List, Items List, and Creatures List.
• Add components like TextBoxes for search functionality, RepeatingPanels for dynamic content display, and Buttons for navigation within forms.
• Design the layout to be clean and organized, ensuring that users can easily access and navigate through different sections.
• Implement breadcrumb navigation on detail pages to provide context and allow users to return to previous pages easily.

4. Implementing Two-Way Linking

• In each detail form (e.g., FeatDetail, SkillDetail), retrieve the relevant data from the Data Tables using Anvil’s server calls.
• Display related entries using RepeatingPanels or similar components, ensuring each related item is a clickable link that navigates to its corresponding detail page.
• Use Python to handle the navigation logic. For example:

  
  # Example: Feat Detail Form
  
  def load_data(self, feat_id):
      feat = app_tables.feats.get(id=feat_id)
      self.label_name.text = feat['Name']
      self.label_description.text = feat['Description']
      self.link_required_skill.text = feat['Required Skill']['Name']
      self.link_required_skill.set_event_handler('click', lambda <b>e: open_form('SkillDetail', skill_id=feat['Required Skill'].get_id()))
      
      # Load related items
      self.repeating_panel_related_items.items = feat['Related Items']
      
  def related_item_click(self, item, </b>event_args):
      open_form('ItemDetail', item_id=item['id'])
              

5. Adding Search and Filtering

• Add TextBox and Button components to the main page and relevant list pages for search functionality.
• Implement server-side filtering in Python to query Data Tables based on user input. For example:

  
  def search_feats(self, **event_args):
      search_query = self.text_box_search.text
      results = app_tables.feats.search(Name=q.ilike(f"%{search_query}%"))
      self.feats_repeating_panel.items = results
              

• Ensure that search results update in real-time as users input their search terms, providing immediate feedback and access to relevant entries.
• Incorporate filtering options based on categories or attributes to allow users to narrow down their search results effectively.

6. Deployment

• Thoroughly test the app for navigation, data consistency, and performance across different devices and browsers.
• Utilize Anvil’s built-in hosting capabilities to deploy the app, offering options for custom domains and SSL to ensure secure and professional delivery.
• Monitor the app post-deployment to handle any issues or updates as necessary, ensuring a smooth user experience.

Enhanced Features

User Accounts

• Implement user authentication to allow personalized data management and restricted access where necessary.
• Provide features like user profiles, saved searches, and customization options to enhance the user experience.
• Ensure data privacy and security by managing user permissions and access levels appropriately.

Advanced Filtering and Exporting

• Develop advanced filtering options that allow users to combine multiple criteria for more precise search results.
• Implement exporting functionalities to enable users to backup their data or share it outside the app in formats like CSV or PDF.
• Add sorting capabilities in the data grids to help users organize information based on different parameters.

Best Practices

• Responsive Design: Ensure the app is accessible on all devices by leveraging Anvil’s responsive components. Test the layout on various screen sizes to maintain usability and aesthetics.
• Data Integrity: Properly define relationships in Data Tables to maintain data consistency and reliability. Regularly back up your data and implement validation rules to prevent incorrect data entries.
• User Experience: Focus on intuitive navigation and accessibility to make the app easy to use for all players. Incorporate feedback mechanisms to continually improve the app based on user input.
• Performance Optimization: Utilize Anvil’s efficient data handling features to ensure the app performs well, even with large datasets. Implement lazy loading or pagination where necessary to enhance speed and responsiveness.
• Security: Protect your app by implementing secure authentication methods and managing user permissions effectively. Regularly update dependencies and monitor for any security vulnerabilities.

Conclusion

By leveraging the Anvil framework’s full-stack Python capabilities, you can create a feature-rich, intuitive web app that serves as a comprehensive companion for your tabletop game. From responsive frontend design to robust backend data management, the app will enhance gameplay by providing easy access to feats, skills, items, and creatures, with seamless two-way linking for an enriched user experience. Following this guide will enable you to build a reliable and user-friendly companion app that can be extended with additional features as your game evolves.

References

anvil.works

Anvil | Build Web Apps with Nothing but Python

pythonanvil.com

Learn the Python Anvil Framework

github.com

Anvil Runtime Engine

anvil.works

Anvil Tutorials