This page should contain the following things:

• List of participating characters (presented by the order of the initiative)
• Start Battle button, which would turn into an End Battle button
• Next Turn button
• Marker of the character which is currently playing
• Number of Current Round of the battle

Additional Features:

• Add a new character mid battle -> by pressing a '+' button which would then present the form -> could be in a modal
• Character taken damage -> button 'Hit' -> when clicked would reduce the amount of HP by an input provided by the user
• "Top of the Round" -> special events that would occur in a random round -> could be random or in every round, could also be chosen by the DM. More info can be found on my notebook
• Death Saves

• Create -> Uses the create Form, and the '+' or 'Add a new Character' button
• Read -> Presents additional information about the Participant
• Update -> Uses the same Create Form but with an 'Update' button, and the previous data is presented in the form
• Delete -> Removes a character from the battle (can add an 'x' or a 'trash can' icons to activate this action)

Think about how to implement them

• Add some basic pages that would have a button to navigate between them
• Add tests

• Install React Testing Library
• Add a script to run tests
• Make sure to create an example test to make sure everything is configured and is working correctly

• Character Name (String)
• Initiative (Integer)
• Initiative Modifier (Integer)
• Class (Hero / Adventurer / Enemy / Monster / Creature / Ally / NPC)
• HP (Integer)
• AC (Integer)

Optional:

• Class
• Picture (file- img)
• Level (Int)
• Skills / Abilities / Feats
• Spells (different level spell slots, known spells)
• Immunities
• Resistances
• Speed
• Tools / Items

• Could add an option to import from a JSON file

Add the latest version of PatternFly5 :
https://www.patternfly.org/get-started/develop

Add the latest version of Material UI :
https://mui.com/material-ui/getting-started/installation/

• Participants will be managed in an Object, where the key will be the id of the Participant and the value will be all the information of the Participant.

• Add CRUD operations to the Participants:

• (Participant ): Add Create Operation - creates a new Participant in the Participant Object: /participants + POST
  Receives: a Participant Object, validates it's legality, adds it to the Participant Object.
  Returns:

• ID of the created Participant with status 201 (created) for a successful creation

• 400 (bad request) in case it received a not valid Participant object

• 500 (internal server error) in case something else went wrong inside the server

• (Participant ): Add Read Operation - Returns the data of the Participant, whose id was provided in the request query params: /participants/:id + GET
  Receives: a Participant id, validates it's legality and returns the Participant data in the body of the response
  Returns:

• Participant's data of the requested Participant with status 200 (OK) for a valid Participant id, who is present in the Participant Object

• 404 (not found) in case it received an id of a Participant which is not present in the Participant Object

• 500 (internal server error) in case something else went wrong inside the server

• (Participant ): Add Update Operation - Updates the data of the Participant, whose id was provided in the query params: /participants/:id + PUT
  Receives: a Participant id, validates it's legality and updates the Participant data in the body of the response
  Returns:

• Participant's updated data of the requested Participant with status 200 (OK) for a valid Participant id, who is present in the Participant Object & the Participant was updated successfully

• 404 (not found) in case it received an id of a Participant who is not present in the Participant Object

• 500 (internal server error) in case something else went wrong inside the server

• (Participant ): Add Delete Operation - Deletes the Participant from the Participant Object, whose id was provided in the query params: /participants/:id + DELETE
  Receives: a Participant id, validates it's legality and deletes the Participant from the Participants Object
  Returns:

• status code of 200 (OK) for a valid Participant id, who is present in the Participant Object & the Participant was deleted successfully

• 404 (not found) in case it received an id of a Participant who is not present in the Participant Object

• 500 (internal server error) in case something else went wrong inside the server

• Advanced When there is an active battle, the Participants will be also handled in an Array where the order of them inside the Array is determined by the initiative rolled by the players. When a new battle begins, the server will get an Array / Object holding the Participant id and his/her initiative. Then the server will create the Array and manage the active battle only within the Array. When the battle ends, the server will update the Participant Object with the updated state of the Participants (HP, Spell Slots, Items, etc..)