vooders / dm-tools Goto Github PK

Overview

Sometimes we play games with different characters. It's a bit clunky to have to delete and reimport all the required characters. We want to add the concept of a party, which would be a collection of characters which could be switched between.

Currently, we have the summary.json file, which holds some basic information on the characters.

{
  "99332929": {
    "id": 99332929,
    "name": "Smug Druggles",
    "race": "Lightfoot Halfling",
    "avatarPath": "/Users/wilsok23/Library/Application Support/dm-tools/avatars/99332929.jpeg",
    "classes": [
      "Rogue 2"
    ]
  },
  "108532886": {
    "id": 108532886,
    "name": "Apli",
    "race": "Wood Elf",
    "avatarPath": "/Users/wilsok23/Library/Application Support/dm-tools/avatars/108532886.jpeg",
    "classes": [
      "Ranger 2"
    ]
  },
  "108545996": {
    "id": 108545996,
    "name": "Rol-Rai",
    "race": "Tiefling",
    "avatarPath": "/Users/wilsok23/Library/Application Support/dm-tools/avatars/108545996.jpeg",
    "classes": [
      "Warlock 2"
    ]
  }
}

This is used by pages which display data on multiple characters to fetch the character IDs required to load the character files using the following pattern.

const summary = await getSummaryData()
const characterIds = Object.keys(summary)

return await Promise.all(characterIds.map(async (characterId) => {
  const characterData = await getCharacter(null, characterId)
  ...
})

I'm proposing we add another level of nesting to the summary.json to include the concept of a party.

{
  "party1": {
    "99332929": {
      "id": 99332929,
      "name": "Smug Druggles",
      "race": "Lightfoot Halfling",
      "avatarPath": "/Users/wilsok23/Library/Application Support/dm-tools/avatars/99332929.jpeg",
      "classes": [
        "Rogue 2"
      ]
    }
  },
  "party2": {
    "108532886": {
      "id": 108532886,
      "name": "Apli",
      "race": "Wood Elf",
      "avatarPath": "/Users/wilsok23/Library/Application Support/dm-tools/avatars/108532886.jpeg",
      "classes": [
        "Ranger 2"
      ]
    },
    "108545996": {
      "id": 108545996,
      "name": "Rol-Rai",
      "race": "Tiefling",
      "avatarPath": "/Users/wilsok23/Library/Application Support/dm-tools/avatars/108545996.jpeg",
      "classes": [
        "Warlock 2"
      ]
    }
  }
}

This would enable us to select the current party from the summary

const summary = await getSummaryData()
const party = summary[currentParty]
const characterIds = Object.keys(party)

return await Promise.all(characterIds.map(async (characterId) => {
  const characterData = await getCharacter(null, characterId)
  ...
})

Technical Description

This would be a large piece of work which would touch on various parts of the app.

These are my initial thoughts, and will probably change as we discuss and plan it.

• We would need to add a form to create parties
• We would need a UI element to select parties
• We would need some kind of mechanism to store the current selected party
• Where ever the summary file is updated, we need access to the current selected party
• Where ever the summary file is fetched, we need access to the current selected party
• When fetching the summary to get the list of characters, we must select the correct party from the JSON.

Overview

The app has many styles at different levels some app wide, some for a page, and some inline styling of HTML elements.
It would be good to have a theme which manages the styling of the entire app.

Technical description

• There should be a theme class which contains the styling for the entire app.
• There may be a need for super specific styling at the component level, but we should try and avoid it if possible.
• We should make proper use of the Typography classes, h1 for page title, body1 for normal text etc.
• If we need to style the same component in different ways, then we should create two custom components

Resources

MUI Theming docs - https://mui.com/material-ui/customization/theming/
Component Theme overrides - https://mui.com/material-ui/customization/theme-components/

Definition of done

No more inline styles
Styling of components is consistent across the app
The entire app could be restyled by using a different style class

Overview

We would like to see character AC on the health page.

Definition of Done

AC is visible on the Health page

Limited use action, things like rage or Bardic Inspiration, should be visible from the Health Page

Overview

We should track character XP if its set to XP