Adding-A-Dropdown-Menu.md

+## Overview
+For this wiki article we will demonstrate adding Quests and Highscore to the dropdown menu, assuming all of their UIs have already been made.
+
+## Creating The Drop-down 
+Within GameClient/src/view/screen/menu/MenuUI.java, first add the label(s) of the element(s) you wish to add to the drop-down as instance variable constants (QUEST_BUTTON_TEXT and HIGHSCORE_BUTTON_TEXT below. Then, add the following method to the class, where your new constants will be set along with the preexisting ones:
+```java
+/**
+	 * Adds the dropown menu to the UI
+	 * @param text - the the label of the dropdown menu
+	 * @param listener - The listener listening to the dropdown menu
+	 * @param clickListener - the click listener that will close the windows. 
+	 */
+	public void addDropdown(String text, ChangeListener listener, ClickListener clickListener)
+	{
+		selectBox=new SelectBox<String>(skin);
+		selectBox.setColor(Color.GRAY);
+		selectBox.setItems(
+				QUEST_BUTTON_TEXT, 
+				HIGHSCORE_BUTTON_TEXT);
+		
+		selectBox.addListener(listener);
+		selectBox.addListener(clickListener);
+				
+		tabs.add(selectBox);
+	}
+
+```
+Make sure to import all of the necessary libraries. It should be noted that libgdx doesn't include a drop-down menu by default, however we were able to implement one using a selectbox along with a change listener, and a click listener.
+
+The change listener is used to determine when a different element is selected within the selectbox. The click listener is used to detect when the dropdown icon is clicked within the menu.
+
+For more information see:
+[Libgdx select box documentaion](https://libgdx.badlogicgames.com/ci/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/SelectBox.html)
+
+
+## Adding appropriate code to ScreenMap.java
+The change listener code is as follows:
+
+```java
+private ChangeListener dropDownChangeListener()
+	{
+		return new ChangeListener()
+		{
+			@Override
+			public void changed(ChangeEvent event, Actor actor) 
+			{
+				String buttonText = menuArea.getSelectBox().getSelected(); 
+				
+				switch (buttonText)
+				{
+					case "Quests":
+						boolean questsToggled = qaScreen.isVisible();
+						closeAllOverlayingScreens();
+						if(!questsToggled)
+							qaScreen.toggleVisibility();
+						break;
+					case "Highscore":
+						boolean highScoreToggled = highScoreUI.isVisible();
+						closeAllOverlayingScreens();
+						if(!highScoreToggled)
+							highScoreUI.toggleVisibility();
+						break;
+				}	
+			}
+		};
+	}
+```
+
+The above method "listens" for the selected element to change within the drop-down, and toggles the visibility of the overlaying screen when appropriate.
+
+
+## Making the Drop-down control the UI screens
+
+The following code ensures all displayed UI's visibility is toggled correctly when elements in the dropdown are clicked
+
+Within ScreenMap, add the following code to the addUIs method:
+
+```java
+
+//create new Instance
+menuArea = new MenuUI();
+
+//add the dropdown to the screen
+menuArea.addDropdown("list", dropDownChangeListener(),closeListener());
+//Add toggle to quest and highscore UIs
+menuArea.addOverlayingScreenToggle(qaScreen, null);
+menuArea.addOverlayingScreenToggle(highScoreUI, null)
+overlayingScreens.add(qaScreen);
+overlayingScreens.add(highScoreUI);
+
+//add actors to the stage
+stage.addActor(qaScreen);
+stage.addActor(highScoreUI);
+```
+
+*note that in the addOverlayingScreenToggle() method above, a null string is passed in. This is necessary, as any non-null text will add a button to the table at the top of the screen*
+
+## Visual Example of Drop-Down
+
+The drop-down will be added to the table at the top of the screen
+![image](uploads/4de616dc948345dc354f7f782023b0fa/image.png)
+
+
+Displaying the items inside the drop-down
+![image](uploads/ecd3664ee2b550770c6316c56c93a6af/image.png)
+
+
+
+
+