Requirement Specification

Homepage

• The homepage must display the text "Level" in the top center of the homepage.
• The homepage must display the text "Updating D&D 5e Characters Made Easy" below the text "Level" at the top center of the page.
• The homepage must have two dropdown menus which represent the interaction through which users can select classes and select levels.
• The homepage's "Go button" must change the displayed page to the next page of the application (Step 1 of the level-up process for the given class and level) upon being clicked.

Class Selection

• Users must be able to find and select the class for their search query in the drop-down menu for class selection.
• The drop-down menu for class selection must display the selected class in its text.
• Users must be able to change their class selection to another class.
• Users must be able to click anywhere on the input form in order to be able to provide input.
• Available classes must be sorted in increasing alphabetical order in the drop-down menu for class selection. (i.e, Bard, Druid, Fighter)
• The dropdown menu for class selection must be placed in the mid-center of the page above the dropdown menu for level selection.
• User must be able to click anywhere on the dropdown menu in order to open the dropdown menu and select a class.
• As a default state when initially opening the Level application, the text "Select Class" will be displayed in the dropdown menu's text as a placeholder.

Level Selection

• Users must be able to find and select a level from 1 - 20 for their search query in the drop-down menu for levels.
• The drop-down menu for class selection must display the selected level in its text.
• Users must be able to change their level selection to another class.
• Available levels must be sorted in ascending order in the drop-down menu for levels. (i.e, 1, 2, 3, 4, 5, ... 20)
• The dropdown menu for level selection must be placed in the mid-center of the page below the dropdown menu for class selection.
• User must be able to click anywhere on the dropdown menu in order to open the dropdown menu and select a level.
• As a default state when initially opening the Level application, the text "Select Level" will be displayed in the dropdown menu's text as a placeholder.

Go Button

• Users must only be able to navigate to the a new page if a class and level has been selected in the drop-down menu (if there is a class and level displayed in the text of dropdown menu).
• The homepage's "Go button" must be placed below the two dropdown menus in the bottom center of the page.

Reference Pop-Up Window

• The window must open when the user clicks text that is colored green on any "Step" page in the Level application.
• The only text that will be colored green are spell names and Feature names.
• The window must display a description based on the text that is clicked on that is a definition about that text which corresponds with definitions provided by the Dungeons & Dragons 5th Edition handbook for that text. (i.e, green text is "Invisibility", displayed description is "A creature you touch becomes invisible until the spell ends. Anything the target is wearing or carrying is invisible as long as it is on the target’s person. The spell ends for a target that attacks or casts a spell.")

Steps Overview

Organization

• Steps must follow a predefined ordering as follows: Increase Hit Points, Increase Proficiency (every four levels, with the proficiency bonus increasing by one each time it is displayed), Choose Features, Increase Spell Slots (for classes that use spells), Learn Spells, Cantrips, Incantations (for classes that use spells)
• If a Step is not applicable for the class in question, it must not be displayed in the Step level-up ordering (i.e, class, like Fighter, is not a spell user, so Increase Spell Slots and Learn Spells, Cantrips and Incantations should not be displayed)

General Design

• Subheaders
  • The user's class and level that were selected at the homepage must be displayed at the top right corner of each Step page. (i.e, "Bard, Level 1")
  • The page must display the text "Step" along with the number of the Step which indicates its placement in the Step ordering at the top right of the page, below the displayed class and level. (i.e, "Step 1")
  • The corresponding Step title for the Step in question must be displayed below the text "Step" and the Step number in the top right. (i.e, "Increase Hit Points")
• Next and Back Buttons
  • There must be a next button at the bottom right section of the page
  • Upon clicking the next button, users must be taken to the next step, unless this step is the last (Step 1 to Step 2 / last step to Completed Page)
  • There must be a back button at the bottom left section of the page
  • Upon clicking the back button, users must be taken to the previous step, unless this step is the first (Step 4 to Step 3 / Step 1 to Homepage)
• Progress Bar
  • There must be a progress bar at the bottom of the page, filled to A/B, where A is the current step number, and B is the calculated number of steps this process includes for this specific Class and Level.

Step-Specific Requirements

Increase Hit Points

• The page must display text that represent instructions on how to calculate Hit Points using a Hit Die and the constitution modifier (i.e, Fighter, Step 1: roll a 1d10, then add your character’s constitution modifier)
• The page must display instructions that correspond with the appropriate Hit Point instructions the class and level that the user selected, and no other class.
• The page must display an image of the correct dice type for their character class. (Fighter: illustration of a 10-sided dice)

Proficiency

• The page must display instructions directing the user to change their proficiency to +3 at Level 5, +4 at Level 9, +5 at Level 13, and +6 at Level 17 (cumulatively increasing the added proficiency bonus by 1 for every four levels).
• The Proficiency Step page must not display for at levels that are not Level 5, Level 9, Level 13 and Level 17.

Features

• Each Feature must have its own Step, which must be indicated by each Feature being displayed on its own page.
• The application must only load Steps that display features for the user's selected Level & Class, and the features for no other Levels and/or Classes.
• If a Feature has functions that are separate (in the sense that their functionality is not related to or dependent on each other), this separation will be visually indicated by breaking up the container that hods the feature into multiple Steps.
• If a Feature involves displaying a list, each choice available must be expandable using the Reference Pop-Up Window.
• If a Feature involves displaying a list, each choice must be shown as a bullet point to avoid implying to the user that they must select choices on Level's interface.
• If a Feature involves displaying a list, each choice must be sorted in alphabetical order.

Magic

• All Spell Steps must show their Spell Save Difficulty Class and their Spell Attack Modifier at the top of the page.

Increase Spell Slots

• The page must display the number of spell slots that have been gained, and the cumulative total number of spells slots gained (in other words, the total number of spell slots that the user should have overall)

Learn Spells, Cantrips, Incantations

• The Spell List for the Learn Spells, Cantrips and Incantations Step must list detailed effect, properties, constraints; all relevant and correct information as specified in the Handbook (also verifiable with Roll20)
• If, for the user's chosen Level and Class, a Feature for replacing one of their previous spells is available, [##NOTE## IS THIS CALLED SOMETHING SPECIFIC] there must be text displayed on the page instructing the user to do so and how.
• Under the "Spell Level" header, all spells for the chosen level and class must be listed.
• Spells must be sorted ascending by their spell level, then by alphabetical order, with the spell level sort taking precedence.

Completed Page

• The page must display the text "Congratulations! You are now a Level {level} {class}!" with {class} representing the class that the user selected and {level} representing the level that the user selected. (i.e, “Congratulations! You are now a Level 5 Wizard”)
• When the back button is clicked, the user must be able to return to the previous page, which should be the last Step in the level-up process for that specific class-level configuration.
• When the "Level-Up" button is clicked, the application must change from the current page to the home page, and the application must be returned to its default state.