View.md

+# Developing Overlaying Screens
+
+## Structure & Conventions
+The way the interfaces are organized is that each will have a UI component that expresses the [Actors](https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/Actor.html) that will appear on screen.  It will also have a table that is used for the stylizing the display and interacting with the display. 
+
+### Package Structure
+The package title defines the purpose, usually abbreviated and it is stored within the _GameClient.src.view.PACKAGE_NAME_
+
+## Overlaying Screen Class
+ Overlaying Screen is an abstract class used to created screens that pop up on top the game to display some information.  These screens are colorized based on the color scheme for the crew that the payer is in.
+
+1. **Container**
+ 
+ The overlaying screen contains a LibGDX Table that holds an overlaying table, or multiples overlaying tables.  To add an overlaying table to the container use:
+
+ ```java
+container.add(OverlayingTable);
+```
+
+ **Sub Container**
+ 
+   A sub container is needed if the sizing for Overlaying Tables are different for each row of the container. New rows are added to a container by calling [container.row()](https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/Table.html#row--).
+   ```java
+container.row();
+```
+   For each row of the container, instead of adding the the Overlaying Tables to the container, add it to a subcontainer with subcontainer.add(Overlaying Screen).
+   ```java
+subContainer.add(questTable);
+```
+
+   Then add each subcontainer to the container using container.add(Subcontainer).
+   ```java
+subContainer.add(subContainer);
+```
+   To create a subcontainer use:
+   ```java
+Table subContainer = new Table();
+```
+
+1. **Sizing**
+
+ Each Overlaying Screen should declare its width and height as a final instance variables of type float.
+ ```java
+private final float WIDTH = 600f;
+private final float HEIGHT = 300f;
+```
+
+ Each _OverlayingScreen_ should also override the _getMyWidth_ and _getMyHeight_ method.  These methods should return _WIDTH_ and _HEIGHT_ respectively.
+
+ ```java
+@Override
+public float getMyWidth()
+{
+        return WIDTH;
+}
+
+@Override
+public float getMyHeight()
+{
+        return HEIGHT;
+}
+```
+
+1. **Positioning**
+
+ By default, Overlaying Screens are centered on the y-axis and are ten per lowered from the top on the x-axis.  Positioning is calculated by calculating ratios of size of the application and the size of the Overlaying Screen.
+
+ ```java
+public float getXPosition()
+    {
+        return (Gdx.graphics.getWidth() - getMyWidth()) / 2;
+    }
+
+public float getYPosition()
+    {
+        return (Gdx.graphics.getHeight() - getMyHeight()) / 1.1f;
+    }
+```
+ To change the position of the Overlaying Screen, override the above methods and modify the ratios.
+
+1. **Visibility**
+
+ Each overlaying screen is required to override the _toggleVisibility_ method by the _OverlayingScreen_ class and define what it should do. Some interfaces may only need changes in  appearance, but other may need to request information or do other things such as issue a command.  A basic example of how to make the screen appear & disappear with this method is by adding a VisibleAction to itself that is inherent to the actor class. An real example of using this looks like.
+
+ ```java
+	@Override
+	public void toggleVisibility()
+	{
+		VisibleAction action;
+		if (isVisible())
+		{
+			action = Actions.hide();
+		} else
+		{
+			action = Actions.show();
+		}
+		addAction(action);
+	}
+```
+
+1. **Adding to ScreenMap**
+
+ To add and Overlaying Screen to the _ScreenMap_ an instance variable of the of the desired Overlaying Screen must be made and instantiated.
+
+ ```java
+OverlayingScreen overlayingScreen;
+```
+
+ Then overlaying screen must be instantiated and added to the _ScreenMap's_ stage in the _addUIs_ method.
+
+ ```java
+public void addUIs(Crew crew)
+{
+    overlayingScreen = new OverlayingScreen();
+}
+```
+ Then is it must be added to the stage of the _ScreenMap_.
+
+## Overlaying Table Class
+
+1. **ScrollPane**
+
+ The Overlaying Table Class extends a [ScrollPane](https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/ScrollPane.html).  The reason for this is because we want to have to option to allow scrolling when displaying information. Scroll-ability is determined when the _OverlayingScreenTable_ is instantiated.
+
+ ```java
+overlayingScreenTable = new OverlayingScreenTable(BOOLEAN);
+```
+
+ **Table**
+
+ The table, which is a LibGDX [Table](https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/Table.html), is where all the components for the Overlaying Screen Table is added.  
+
+2. **Sizing and Positioning**
+
+ The size of a Overlaying Screen Table is determine when it gets added to the container of an Overlaying Screen using the width() and height() methods.
+
+ ```java
+container.add(OverlayingScreenTable).width(WIDTH).height(HEIGHT);
+```
+3. **Adding Components**
+
+ **Components**
+
+ We would like to display information to our user so we will add components to our _ScrollPane_. To do this we can use:
+
+ ```java
+table.add(COMPONENT);
+```
+ We create a new table to store these components and we will create and stylize individual elements.
+
+ **Popular Components**
+
+ _Label_
+
+ A label is a simple text display that contains a string and our skin.
+ 
+ ```java
+Label l = new Label("text", SkinPicker.getSkinPicker().getCrewSkin());
+```
+
+
+ _Button_
+
+ A button is a clickable element which can be used to do actions such as invoking a method, toggling a boolean, or altering a field.
+ 
+ ```java
+Button button = new Button();
+```
+
+ _*Note_
+
+ There are MANY other components you can add to this, but you could probably sort most interfaces out with just label and buttons. For a full list use [Full List](https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/package-summary.html)
+
+ **Formatting and Making Your Interface Beautiful**
+
+ _Skin_
+
+ A skin is the look and feel of your interface. Our system uses a standard one for these and to access it we use the singleton _SkinPicker_ to grab a skin based off of our crew colors. 
+
+ _Positioning_
+
+ Setting a position of a component isn’t just going to be hard-coding pixel positions, we will be using built in functions to define them.
+
+ There are a few functions that return the element so we can use multiple styles in one line of code.
+
+ For example we can use 
+
+ ```java
+element.add(ELEMENT).top().row();
+```
+
+ to put an element at the top of the table and at the same time adds a new row to the table.
+
+ Like components, there are hundreds of different styling and positioning functions.  Use auto-complete or docs to view your list of options.
+    
+## Menu UI
+
+ The _MenuUI_ has three methods. One for adding an _OverlayingScreen_ toggle button, one for adding a normal button, and one for closing all _OverlayingScreens_. These methods are
+
+ ```java
+public void addOverlayScreenToggle(final OverlayingScreen overlayingScreen, String text)
+public void addButton(String text, ClickListener listener)
+public void closeAllOverlayingScreens()
+```
+
+ The menu already exists in _ScreenMap_, so to add an _OverlayingScreen_ button to it, in the _addUIs_ method use:
+
+ ```java
+menu.addOverlayScreenToggle(OverlayingScreen, "TEXT");
+```
+
+ To add a normal button, use:
+
+ ```java
+menu.addButton("TEXT", ClickListener);
+```
+
+ It is advised to create a class that implements _ClickListener_ for the button you wish you add, so you can pass that in as a _ClickListener_.
+
+## External Information
+
+ Outside information was taken in from [LibGDX Documentation](https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/package-summary.html)
\ No newline at end of file