Lord Of The Rings Living Card Game database

I´m trying to create a custom version of Sanitys headless CMS to keep track of different aspects regarding the card game Lord Of The Rings The Living Card Game by Fantasy Flight.

Desired features

• Import player cards, spheres, card types, traits, scenarios and encounters from sets / packs. This way one can expand Sanity Studio with new data when buying new cards. The source is RingsDBs API
  • Choose what to import direct from Sanity Studio, and select if one wants to overwrite or update the chosen data
• Create relevant references between documents on import
  • Card -> "card type", "sphere" and "pack"
  • Packs -> "scenarios"?
  • Scenarios -> "pack" and "encounter"
  • Encounter -> "scenario"
• Custom card image component with lightbox function to be able to view a full screen version of a card
• Rating component to be able to rate cards
• Custom view in Sanity Studio
• Custom icons in Sanity Studio
• Comment fields on most documents for writing down experiences and thoughts
• Create decks out of cards imported to Sanity Studio
  • Decks may refer to "scenario", "spheres", and "cards"
  • Custom component for filtering cards to add to the deck
    • Add filters
      • Filters generated by currently imported cardpool?
      • Filter by spheres
      • Filter by traits - [ ] Disable if not avaliable with current sorting?
      • Text search
        • Click to add to deck
        • Click for card dialog
          • Quantity for adding to and removing from deck
          • Display current quantity if already in deck
          • Close dialog on selecting new quantity
      • Filter by packs
        • Checkboxes for filter by multiple packs? - [ ] Filter by stats?
    • Change order of list (ascending / descending) based on stats
    • Card / deck presentation (UX / UI)
      • Put charts and cardpool in tabs for faster initial loading and less clutter?
        • Load cardpool when selecting cardpool tab?
      • See heros as preview images?
      • Show charts
        • Card cost
        • Spheres
        • Total cost by sphere
        • Card types ~~ [ ] Stats?~~
      • Warning if deck contains two cards with the same name
      • Color on name corresponding to it´s sphere?
      • Set sphere reference automaticly based on cards in deck?
      • See image and stats on hover?
      • See image and stats on click in dialog?
        • Quantity for adding to and removing from deck
        • Display current quantity if already in deck
        • Close dialog on selecting new quantity
      • Button for "go to card"?
      • See quantity of each card in cardpool
      • Function for how many of each card to add: up to three if standard, and one if unique
      • Ability to delete or change quantity of current card in deck on card in cardpool
      • Ability to delete or change quantity of current card in deck on card in deck
      • Grouping and sorting of deck
        • Titles for each card type in deck
        • Sorting of the groups
        • Numbers of cards in deck
        • Spheres in deck.
        • Packs in the deck
        • Total starting threat of deck
      • Make it pretty and intuitive
• Add game journal entries after playing a game
  • Journal may refer to "deck" and "scenario"
• Add rules questions and answers
  • May refer to all other document types
• Present the journal and other data on a web page

Experience Sanity

It´s a personal project that I hope will allow me to get a deep understanding of how Sanity works, and experience all it has to offer.

• Sanity custom inputs
• Sanity exec command
• Sanity UI
• Sanity javascript client (import, delete, patch)
• Sanity API
• Sanity helper functions (there is not much documentation about this I think)
• Sanity schema types
• Sanity docs
• Import data from external source

Experience React

Since Sanity is built with React I´m repeating a lot and learning more about this language.

• React.useEffect
• React.forwardRef
• React.useCallback

Technology

• HTML
• CSS
• React
• Javascript

Screenshots

Sanity Studio with custom components

Sanity Studio with lightbox effect

An early version of a custom component for adding quantity of cards, and remove all cards if needed.

Updated version of the deckbuilder, with several filter options.

Added the ability to define packs to filter by.

Added the ability to define traits to filter by.

Updated the text field. Seach for all cards regardless of filters, and click to open a dialog

When clicking the name of a card in any of the lists, it opens a dialog with the ability to add and remove cards. When changing the quantity, the dialog registers the change, and closes automaticly.

I also added a preview of the cards when hovering the name in the card pool or the deck list.

I added the possibility to sort the card pool based on quantity, name, sphere, type, cost/threat, willpower, attack, defence and health in a descending or ascending order.

The deck is now grouped in types, and other useful information about the deck is displayed on the top.

Changed the design of the deck information. Added pictures of heroes.

Added charts to get a better visual presentation of the current deck.