Merge branch 'NewUI_merge' into story1266_3d_model_factory

# Conflicts: # src/main/java/seng302/visualiser/controllers/RaceViewController.java
2026-05-09 06:18:44 +00:00 · 2017-09-12 17:09:47 +12:00
parent 71f626f57e 6f534a430d
commit d5ce61a0ff
207 changed files with 4809 additions and 23093 deletions
@@ -0,0 +1,68 @@
+#serverListMainGridPane {
+    -fx-background-color: -fx-pp-background-color;
+}
+
+.scroll-pane {
+    -fx-background: -fx-pp-background-color;
+    -fx-border-style: hidden;
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+}
+
+.scroll-pane:focused {
+    -fx-background-insets: 0;
+}
+
+.scroll-pane .corner {
+    -fx-background-insets: 0;
+}
+
+#playerListVBox, #playerListScrollPane {
+    -fx-background: transparent;
+}
+
+#customizeButton, #leaveLobbyButton, #beginRaceButton {
+    -fx-background-color: -fx-pp-light-text-color; /* inverted */
+    -fx-text-fill: -fx-pp-theme-color; /* inverted */
+    -fx-font-size: 18px;
+    -fx-pref-height: 65px;
+}
+
+#customizeButton:hover, #leaveLobbyButton:hover, #beginRaceButton:hover {
+    -fx-font-size: 20px;
+}
+
+.invertedButton .jfx-rippler {
+    -jfx-rippler-fill: white;
+}
+
+#connectLabel, #serverPortNumber, #serverHostName {
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-font-size: 16px;
+}
+
+#serverHostName, #serverPortNumber {
+    -jfx-focus-color: -fx-pp-light-text-color;
+    -jfx-unfocus-color: -fx-pp-light-text-color;
+}
+
+#connectGridPane {
+    -fx-background-color: -fx-pp-theme-color;
+}
+
+#serverListMainGridPane {
+    -fx-background-image: url("/images/waves.png");
+    -fx-background-repeat: no-repeat;
+    -fx-background-size: cover;
+}
+
+#playerList, #playerListScrollPane {
+    -fx-background-color: transparent;
+}
+
+#serverMap {
+    /*-fx-background-image: url("/images/mapbg.jpg");*/
+    /*-fx-background-repeat: no-repeat;*/
+    /*-fx-background-size: cover;*/
+    -fx-background-color: dodgerblue;
+}
@@ -0,0 +1,101 @@
+@font-face {
+    src: url("Baloo-Regular.ttf");
+}
+
+* {
+    -fx-pp-light-text-color: #fff;
+    -fx-pp-dark-text-color: #6c6c6c;
+    -fx-pp-theme-color: #3493e3;
+    -fx-pp-light-theme-color: #38a2fa;
+    -fx-pp-background-color: transparent;
+    -fx-pp-front-color: #fff;
+    -fx-font-family: "Baloo";
+
+    -fx-pp-dropshadow-light: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 10.0, 0.2, 3, 4);
+    -fx-pp-dropshadow-dark: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10.0, 0.2, 5, 6);
+}
+
+/*GridPane .jfx-button {*/
+/*-fx-min-height: 65px; !* because we changed the font, we now need to set mini height for all buttons *!*/
+/*}*/
+
+.jfx-button {
+    -fx-cursor: hand;
+}
+
+.jfx-button:pressed {
+    -fx-cursor: wait;
+}
+
+.jfx-text-field {
+    -jfx-label-float: true;
+}
+
+.jfx-decorator {
+    -fx-decorator-color: -fx-pp-theme-color;
+}
+
+.jfx-decorator .jfx-decorator-buttons-container {
+    -fx-background-color: -fx-decorator-color;
+}
+
+.jfx-decorator .resize-border {
+    -fx-border-color: -fx-decorator-color;
+    -fx-border-width: 0 4 4 4;
+}
+/********* customised scroll bar for scroll pane ***********/
+
+/* The main scrollbar **track** CSS class  */
+.scroll-bar:horizontal .track,
+.scroll-bar:vertical .track {
+    -fx-background-color: white;
+    -fx-border-color: derive(-fx-pp-background-color, 50%);
+    -fx-border-style: solid;
+    -fx-border-width: 3px;
+    -fx-background-radius: 0em;
+    -fx-border-radius: 0em;
+}
+
+/* The increment and decrement button CSS class of scrollbar */
+.scroll-bar:horizontal .increment-button,
+.scroll-bar:horizontal .decrement-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0em;
+    -fx-padding: 0 0 10 0;
+}
+
+/* The increment and decrement button CSS class of scrollbar */
+
+.scroll-bar:vertical .increment-button,
+.scroll-bar:vertical .decrement-button {
+    -fx-background-color: transparent;
+    -fx-background-radius: 0em;
+    -fx-padding: 0 10 0 10; /* set scroll bar width */
+
+}
+
+.scroll-bar .increment-arrow,
+.scroll-bar .decrement-arrow {
+    -fx-shape: " ";
+    -fx-padding: 0;
+}
+
+/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
+.scroll-bar:horizontal .thumb,
+.scroll-bar:vertical .thumb {
+    -fx-background-color: derive(#c9c9cb, 0%);
+    -fx-background-insets: 2, 0, 0;
+    -fx-background-radius: 0em;
+}
+
+.scroll-bar {
+    -fx-background-insets: 0;
+}
+
+.slider .thumb {
+    -fx-background-color: -fx-pp-theme-color;
+}
+
+.slider .track {
+    -fx-background-color: -fx-pp-dark-text-color;
+}
@@ -0,0 +1,48 @@
+@font-face {
+    src: url("DJB-Get-Digital.ttf");
+}
+
+#timerGrid{
+    -fx-background-color: rgba(255, 255, 255, 0.6);
+}
+
+.timer Label {
+    -fx-font-family: "DJB Get Digital" !important;
+}
+
+#timerLabel{
+    -fx-font-size: 21px;
+}
+
+#raceInfoArea{
+    -fx-background-color: rgba(255, 255, 255, 0.6);
+}
+
+#chatGridPane {
+    -fx-background-color: rgba(255, 255, 255, 0.6);
+}
+
+#chatHistoryHolder {
+
+}
+
+#chatSend {
+    -fx-background-color: -fx-pp-front-color;
+    -fx-text-fill: -fx-pp-theme-color;
+    -fx-font-size: 13px;
+    -fx-pref-height: 35px;
+}
+
+#chatSend:hover {
+    -fx-font-size: 15px;
+}
+
+#chatInput {
+    -jfx-focus-color: -fx-pp-light-theme-color;
+    -jfx-unfocus-color: -fx-pp-dark-text-color;
+    -fx-background-color: transparent;
+}
+
+#windImageView {
+    -fx-image: url("/images/wind.png");
+}
@@ -0,0 +1,82 @@
+#serverListMainGridPane {
+    -fx-background-color: -fx-pp-background-color;
+}
+
+.scroll-pane {
+    -fx-background: -fx-pp-background-color;
+    -fx-border-style: hidden;
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+}
+
+.scroll-pane:focused {
+    -fx-background-insets: 0;
+}
+
+.scroll-pane .corner {
+    -fx-background-insets: 0;
+}
+
+#serverListVBox, #serverListScrollPane {
+    -fx-background: transparent;
+}
+
+.serverListing {
+    -fx-alignment: center;
+    -fx-background-color: transparent;
+}
+
+#hostButton {
+    -fx-background-color: -fx-pp-theme-color;
+    -fx-font-size: 20px;
+    -fx-pref-height: 65px;
+    -fx-text-fill: -fx-pp-light-text-color;
+}
+
+#hostButton:hover {
+    -fx-background-color: -fx-pp-light-theme-color;
+    -fx-font-size: 23px;
+}
+
+#connectButton {
+    -fx-background-color: -fx-pp-light-text-color; /* inverted */
+    -fx-text-fill: -fx-pp-theme-color; /* inverted */
+    -fx-font-size: 20px;
+    -fx-pref-height: 65px;
+}
+
+#connectButton:hover {
+    -fx-font-size: 23px;
+}
+
+#connectLabel, #serverPortNumber, #serverHostName {
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-font-size: 18px;
+}
+
+#serverHostName, #serverPortNumber {
+    -jfx-focus-color: -fx-pp-light-text-color;
+    -jfx-unfocus-color: -fx-pp-light-text-color;
+    -fx-prompt-text-fill: -fx-pp-light-text-color;
+}
+
+
+#serverHostName .error-label, #serverPortNumber .error-label {
+    -fx-font-size: 12px;
+    -fx-text-fill: lightblue;
+}
+
+#connectGridPane {
+    -fx-background-color: -fx-pp-theme-color;
+}
+
+
+#serverListMainGridPane{
+    -fx-background-image: url("/images/waves.png");
+    -fx-background-repeat: no-repeat;
+    -fx-background-size: cover;
+}
+
+#serverListPane{
+    -fx-background-color: transparent;
+}
@@ -0,0 +1,25 @@
+#startBtn {
+    -fx-font-size: 20px;
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-background-color: -fx-pp-theme-color;
+}
+
+.jfx-rippler {
+    -jfx-rippler-fill: -fx-pp-light-theme-color; /* set rippler color for button */
+}
+
+#startBtn:hover {
+    -fx-font-size: 23px;
+    -fx-background-color: -fx-pp-light-theme-color;
+}
+
+#mainStackPane {
+    -fx-background-image: url("/images/waves.jpg");
+    -fx-background-size: cover;
+}
+
+#headText {
+    -fx-background-color: transparent;
+    -fx-font-size: 80px;
+    -fx-text-fill: -fx-pp-light-text-color;
+}
@@ -0,0 +1,17 @@
+#playerName {
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-font-size: 18px;
+}
+
+#playerListCell {
+    -fx-background-color: skyblue;
+    -fx-effect: -fx-pp-dropshadow-light;
+}
+
+#playerListCell:hover {
+    -fx-effect: -fx-pp-dropshadow-dark;
+}
+
+#playerCellVBox {
+    -fx-background-color: -fx-pp-background-color;
+}
@@ -0,0 +1,30 @@
+#serverListCell {
+    -fx-background-color: -fx-pp-front-color;
+    -fx-effect: -fx-pp-dropshadow-light;
+}
+
+#serverListCell:hover {
+    -fx-effect: -fx-pp-dropshadow-dark;
+}
+
+#serverCellVBox {
+    -fx-background-color: -fx-pp-background-color;
+}
+
+#serverConnButton {
+    -fx-background-color: -fx-pp-theme-color;
+    -fx-font-size: 14px;
+    -fx-text-fill: -fx-pp-light-text-color;
+}
+
+#serverName, #serverPlayerCount, #mapName {
+    -fx-text-fill: -fx-pp-dark-text-color;
+}
+
+#serverName {
+    -fx-font-size: 20px;
+}
+
+#serverPlayerCount, #mapName {
+    -fx-font-size:14px;
+}
@@ -0,0 +1,29 @@
+* {
+    -fx-text-fill: -fx-pp-dark-text-color;
+}
+
+#submitBtn {
+    -fx-background-color: -fx-pp-theme-color;
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-font-size: 20px !important;
+    -fx-effect: -fx-pp-dropshadow-dark;
+    -fx-min-width: 130px;
+}
+
+#submitBtn:hover {
+    -fx-font-size: 23px !important;
+    -fx-background-color: -fx-pp-light-theme-color;
+}
+
+#hostDialogHeader {
+    -fx-font-size: 23px !important;
+}
+
+#boatColorLabel, #colorPicker {
+    -fx-font-size: 18px;
+}
+
+#boatName {
+    -fx-font-size: 18px;
+    -fx-prompt-text-fill: -fx-pp-dark-text-color;
+}
@@ -0,0 +1,47 @@
+#maxPlayersGridPane VBox * {
+    -fx-font-family: monospace !important;
+}
+
+#submitBtn {
+    -fx-background-color: -fx-pp-theme-color;
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-font-size: 20px;
+    -fx-effect: -fx-pp-dropshadow-dark;
+}
+
+.jfx-rippler {
+    -jfx-rippler-fill: -fx-pp-light-theme-color; /* set rippler color for button */
+}
+
+#submitBtn:hover {
+    -fx-font-size: 23px;
+    -fx-background-color: -fx-pp-light-theme-color;
+}
+
+#hostDialogHeader {
+    -fx-font-size: 30px;
+    -fx-text-fill: -fx-pp-dark-text-color;
+}
+
+
+#serverName {
+    -jfx-focus-color: -fx-pp-dark-text-color;
+    -jfx-unfocus-color: -fx-pp-dark-text-color;
+    -fx-text-fill: -fx-pp-dark-text-color;
+    -fx-prompt-text-fill: -fx-pp-dark-text-color;
+    -fx-font-size: 16px;
+}
+
+#maxPlayersLabel {
+    -fx-text-fill: -fx-pp-dark-text-color;
+    -fx-font-size: 16px;
+}
+
+#maxPlayerPromptLabel {
+    -fx-text-fill: -fx-pp-dark-text-color;
+    -fx-font-size: 16px;
+}
+
+.maxPlayers {
+    -fx-font-size: 13px;
+}
@@ -1,201 +0,0 @@
-/**
-Background colours
- */
-.background-blue{
-    -fx-background-color: #119796;
-}
-
-.background-dark{
-    -fx-background-color: #2C2c36;
-}
-
-/**
-Exit button with no background
- */
-.clear-exit-btn{
-    -fx-background-insets: 0;
-    -fx-background-color:  #119796;
-    -fx-border-style: none;
-}
-
-/**
-Buttons
- */
-.blue-ui-btn{
-    -fx-background-color: #119796;
-    -fx-text-fill: #fff;
-}
-
-.text-white {
-    -fx-text-fill: white !important;
-    -fx-fill:white !important;
-}
-
-/**
-Sliders
- */
-.ui-slider .thumb {
-    -fx-background-color: rgb(60, 60, 60);
-    -fx-border-radius: 10;
-    -fx-border-color: darkgray;
-}
-
-.ui-slider .track{
-    -fx-background-color: #119796;
-}
-
-.ui-slider .axis{
-    -fx-tick-label-fill: white;
-}
-
-.ui-slider .axis .axis-label{
-    -fx-text-fill: white;
-}
-
-/**
-Checkbox
- */
-.ui-checkbox .box{
-    -fx-background-color: white;
-    -fx-graphic:none;
-    -fx-shape: none;
-}
-
-.ui-checkbox .box .mark{
-    -fx-background-image: none;
-    -fx-image: none;
-    -fx-graphic: none;
-    -fx-shape: none;
-}
-
-.ui-checkbox:selected .box{
-    -fx-background-color: #119796;
-    -fx-shape: none;
-}
-
-.ui-checkbox:selected .box .mark{
-    -fx-background-color: #119796;
-    -fx-shape: none;
-    -fx-graphic: none;
-}
-
-/**
-Table
- */
-.ui-table{
-    -fx-background-color: transparent;
-}
-
-.ui-table:focused{
-    -fx-background-color: transparent;
-}
-
-.ui-table .column-header-background{
-    -fx-background-color: white
-}
-
-.ui-table .column-header-background .label{
-    -fx-background-color: transparent;
-    -fx-text-fill: black;
-}
-
-/*server thread */
-.ui-table .column-header {
-    -fx-background-color: transparent;
-}
-
-.ui-table .table-cell{
-    -fx-text-fill: white;
-    -fx-border-style: none;
-}
-
-.table-row-cell{
-    -fx-background-color: #119796;
-    -fx-background-insets: 0, 0 0 1 0;
-    -fx-padding: 0.0em; /* 0 */
-    -fx-border-style: none;
-}
-
-.table-row-cell:odd{
-    -fx-background-color: #0e6d6c;
-    -fx-background-insets: 0, 0 0 1 0;
-    -fx-padding: 0.0em; /* 0 */
-    -fx-border-style: none;
-}
-
-.table-row-cell:selected {
-    -fx-background-color: #005797;
-    -fx-background-insets: 0;
-    -fx-border-style: none;
-}
-
-
-/**
-Combo Box
- */
-
-.combo-box-base {
-    -fx-background-color: #119796;
-    -fx-text-fill: white;
-}
-
-.combo-box-popup .list-view .list-cell:hover {
-    -fx-text-fill: white;
-}
-
-.combo-box .cell:selected {
-    -fx-text-fill: white;
-}
-
-/**
-Remove scroll bars
- */
-.ui-table *.scroll-bar:horizontal *.increment-button,
-.ui-table *.scroll-bar:horizontal *.decrement-button {
-    -fx-background-color: null;
-    -fx-background-radius: 0;
-    -fx-background-insets: 0;
-    -fx-padding: 0;
-}
-
-.ui-table *.scroll-bar:horizontal *.increment-arrow,
-.ui-table *.scroll-bar:horizontal *.decrement-arrow {
-    -fx-background-color: null;
-    -fx-background-radius: 0;
-    -fx-background-insets: 0;
-    -fx-padding: 0;
-    -fx-shape: null;
-}
-
-.ui-table *.scroll-bar:vertical *.increment-arrow,
-.ui-table *.scroll-bar:vertical *.decrement-arrow {
-    -fx-background-color: #0e6d6c;
-    -fx-background-radius: 0;
-    -fx-background-insets: 0;
-    -fx-padding: 0;
-    -fx-shape: null;
-}
-
-.ui-table *.scroll-bar:vertical *.increment-button,
-.ui-table *.scroll-bar:vertical *.decrement-button {
-    -fx-background-color: #0e6d6c;
-    -fx-background-radius: 0;
-    -fx-background-insets: 0;
-    -fx-padding: 0;
-}
-
-.chart{
-}
-
-.chart-title {
-    -fx-text-fill: #ffffff;
-    -fx-font-size: 1.6em;
-}
-
-.axis-label {
-    -fx-text-fill: #ffffff;
-}
-
-.axis {
-    -fx-tick-label-fill: #ffffff;
-}
@@ -1,5 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>

+<?import java.lang.*?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
@@ -10,6 +15,7 @@
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.RowConstraints?>
 <?import javafx.scene.text.Font?>
+
 <GridPane fx:id="finishScreenGridPane" maxHeight="837.0" maxWidth="837.0" minHeight="837.0" minWidth="837.0" nodeOrientation="LEFT_TO_RIGHT" prefHeight="837.0" prefWidth="837.0" style="-fx-background-color: #2C2c36;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.FinishScreenViewController">
  <columnConstraints>
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
@@ -42,6 +48,6 @@
            <Insets bottom="50.0" />
         </GridPane.margin>
      </TableView>
-      <Button mnemonicParsing="false" onAction="#switchToStartScreenView" styleClass="blue-ui-btn" text="Return to Start Screen" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="TOP" />
+      <Button mnemonicParsing="false" onAction="#switchToStartScreenView" onMouseEntered="#playButtonHoverSound" styleClass="blue-ui-btn" text="Return to Start Screen" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="TOP" />
   </children>
 </GridPane>
@@ -1,63 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-
-<?import javafx.scene.control.Button?>
-<?import javafx.scene.control.ListView?>
-<?import javafx.scene.layout.AnchorPane?>
-<?import javafx.scene.layout.ColumnConstraints?>
-<?import javafx.scene.layout.GridPane?>
-<?import javafx.scene.layout.RowConstraints?>
-<?import javafx.scene.text.Font?>
-<?import javafx.scene.text.Text?>
-<GridPane fx:id="lobbyScreen" nodeOrientation="LEFT_TO_RIGHT" prefHeight="533.0" prefWidth="802.0" style="-fx-background-color: #2C2c36;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.LobbyController">
-    <columnConstraints>
-      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
-    </columnConstraints>
-    <rowConstraints>
-      <RowConstraints maxHeight="171.0" minHeight="0.0" prefHeight="31.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="399.0" minHeight="10.0" prefHeight="394.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="63.0" minHeight="10.0" prefHeight="26.0" vgrow="SOMETIMES" />
-    </rowConstraints>
-   <children>
-      <Text fx:id="lobbyIpText" fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="Lobby: IP" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER">
-         <font>
-            <Font size="29.0" />
-         </font>
-      </Text>
-      <GridPane GridPane.rowIndex="2">
-        <columnConstraints>
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-        </columnConstraints>
-        <rowConstraints>
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-        </rowConstraints>
-         <children>
-            <Button focusTraversable="false" mnemonicParsing="false" onAction="#readyButtonPressed" prefWidth="101.0" text="Ready" GridPane.halignment="CENTER" />
-            <Button focusTraversable="false" mnemonicParsing="false" onAction="#leaveLobbyButtonPressed" text="Leave Lobby" GridPane.columnIndex="1" GridPane.halignment="CENTER" />
-         </children>
-      </GridPane>
-      <AnchorPane focusTraversable="true" prefHeight="200.0" prefWidth="200.0" GridPane.rowIndex="1">
-         <children>
-            <GridPane layoutX="335.0" layoutY="146.0" prefHeight="399.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
-              <columnConstraints>
-                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="261.0" minWidth="0.0" prefWidth="2.0" />
-                <ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity" />
-                <ColumnConstraints hgrow="SOMETIMES" maxWidth="261.0" minWidth="0.0" prefWidth="2.0" />
-              </columnConstraints>
-              <rowConstraints>
-                <RowConstraints maxHeight="125.0" minHeight="0.0" prefHeight="0.0" vgrow="SOMETIMES" />
-                <RowConstraints maxHeight="266.0" minHeight="10.0" prefHeight="266.0" vgrow="SOMETIMES" />
-                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-              </rowConstraints>
-               <children>
-                  <AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
-                     <children>
-                        <ListView fx:id="competitorsListView" layoutX="154.0" layoutY="59.0" prefHeight="266.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
-                     </children>
-                  </AnchorPane>
-               </children>
-            </GridPane>
-         </children></AnchorPane>
-   </children>
-</GridPane>
@@ -1,135 +1,104 @@
 <?xml version="1.0" encoding="UTF-8"?>

-<?import java.lang.*?>
-<?import javafx.geometry.*?>
-<?import javafx.scene.control.*?>
-<?import javafx.scene.image.*?>
-<?import javafx.scene.layout.*?>
-<?import javafx.scene.text.*?>
+<?import com.jfoenix.controls.JFXButton?>
+<?import java.lang.String?>
 <?import javafx.geometry.Insets?>
-<?import javafx.scene.control.Button?>
-<?import javafx.scene.control.ListView?>
-<?import javafx.scene.image.ImageView?>
-<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.ScrollPane?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.Pane?>
 <?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
-<?import javafx.scene.text.Text?>
-
-<GridPane fx:id="lobbyScreen" nodeOrientation="LEFT_TO_RIGHT" prefHeight="960.0" prefWidth="1530.0" style="-fx-background-color: #2C2c36;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.LobbyController">
-    <columnConstraints>
-      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
-    </columnConstraints>
-    <rowConstraints>
-      <RowConstraints maxHeight="171.0" minHeight="0.0" prefHeight="31.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="462.0" minHeight="10.0" prefHeight="462.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="100.0" minHeight="0.0" prefHeight="0.0" vgrow="SOMETIMES" />
-    </rowConstraints>
-   <children>
-      <GridPane prefHeight="166.0" prefWidth="1530.0" GridPane.rowIndex="2">
-        <columnConstraints>
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-        </columnConstraints>
-        <rowConstraints>
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-        </rowConstraints>
-         <children>
-            <Button fx:id="readyButton" focusTraversable="false" mnemonicParsing="false" onAction="#readyButtonPressed" prefWidth="101.0" text="Ready" GridPane.halignment="CENTER" />
-            <Button focusTraversable="false" mnemonicParsing="false" onAction="#leaveLobbyButtonPressed" text="Leave Lobby" GridPane.columnIndex="2" GridPane.halignment="CENTER" />
-            <Button fx:id="customizeButton" focusTraversable="false" mnemonicParsing="false" onAction="#customize" text="Customization" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-         </children>
-      </GridPane>
-      <GridPane GridPane.rowIndex="1">
-        <columnConstraints>
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-        </columnConstraints>
-        <rowConstraints>
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-        </rowConstraints>
-         <children>
-            <TextArea fx:id="playerFourTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerEightTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerSevenTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerThreeTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerSixTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerFiveTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerOneTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerTwoTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-            <ImageView fx:id="firstImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="secondImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="thirdImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="fourthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="fifthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="sixthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="seventhImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="eighthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-         </children>
-      </GridPane>
-      <GridPane>
-        <columnConstraints>
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-        </columnConstraints>
-        <rowConstraints>
-            <RowConstraints maxHeight="134.0" minHeight="10.0" prefHeight="32.0" vgrow="SOMETIMES" />
-          <RowConstraints maxHeight="134.0" minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="134.0" minHeight="10.0" prefHeight="32.0" vgrow="SOMETIMES" />
-          <RowConstraints maxHeight="79.0" minHeight="10.0" prefHeight="52.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="79.0" minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
-        </rowConstraints>
-         <children>
-            <Text fx:id="lobbyIpText" fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="Server Name" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="1">
-               <font>
-                  <Font size="29.0" />
-               </font>
-            </Text>
-            <Text fx:id="timeUntilStart" fill="#f8f8f8" strokeType="OUTSIDE" strokeWidth="0.0" text="00:00" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="3">
-               <font>
-                  <Font size="20.0" />
-               </font>
-            </Text>
-            <Text fx:id="courseNameText" fill="#e1e1e1" strokeType="OUTSIDE" strokeWidth="0.0" text="Course Name" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
-         </children>
-      </GridPane>
-   </children>
-</GridPane>
+<StackPane fx:id="serverListMainStackPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.LobbyController">
+    <children>
+        <GridPane fx:id="serverListMainGridPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308">
+            <children>
+                <GridPane fx:id="connectGridPane" GridPane.rowIndex="2">
+                    <children>
+                        <JFXButton fx:id="leaveLobbyButton" buttonType="RAISED" prefHeight="45.0" prefWidth="220.0" ripplerFill="#3493e3" styleClass="invertedButton" text="Leave Lobby" textFill="WHITE" GridPane.columnIndex="2" GridPane.halignment="LEFT" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets />
+                            </GridPane.margin>
+                        </JFXButton>
+                        <JFXButton fx:id="customizeButton" buttonType="RAISED" prefHeight="45.0" prefWidth="220.0" ripplerFill="#3493e3" styleClass="invertedButton" text="Customize Boat" textFill="WHITE" GridPane.halignment="RIGHT" GridPane.valignment="CENTER" />
+                        <JFXButton fx:id="beginRaceButton" buttonType="RAISED" prefHeight="45.0" prefWidth="220.0" ripplerFill="#3493e3" styleClass="invertedButton" text="Begin Race" textFill="WHITE" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+                    </children>
+                    <columnConstraints>
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="280.0" minWidth="180.0" prefWidth="180.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" minWidth="17.0" prefWidth="17.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="273.0" minWidth="250.0" prefWidth="273.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                    </rowConstraints>
+                </GridPane>
+                <GridPane>
+                    <children>
+                        <Label fx:id="serverName" text="Party Parrots In Space"
+                          GridPane.valignment="CENTER">
+                            <font>
+                                <Font size="31.0" />
+                            </font>
+                            <padding>
+                                <Insets left="35.0" top="10.0" />
+                            </padding>
+                        </Label>
+                        <Label fx:id="mapName" text="This is a map, it's called Haoming"
+                          GridPane.rowIndex="1">
+                            <padding>
+                                <Insets left="35.0" top="-15.0" />
+                            </padding>
+                        </Label>
+                    </children>
+                    <columnConstraints>
+                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints maxHeight="1.7976931348623157E308" minHeight="50.0" prefHeight="74.0" vgrow="SOMETIMES" />
+                        <RowConstraints maxHeight="1.7976931348623157E308" minHeight="23.0" prefHeight="26.0" vgrow="SOMETIMES" />
+                    </rowConstraints>
+                </GridPane>
+                <GridPane GridPane.rowIndex="1">
+                    <columnConstraints>
+                        <ColumnConstraints hgrow="SOMETIMES" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="400.0" minWidth="400.0" prefWidth="400.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints vgrow="SOMETIMES" />
+                    </rowConstraints>
+                    <children>
+                        <ScrollPane fx:id="playerListScrollPane" hbarPolicy="NEVER" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                            <content>
+                                <VBox fx:id="playerListVBox" prefHeight="200.0" prefWidth="100.0"/>
+                            </content>
+                            <GridPane.margin>
+                                <Insets bottom="15.0" left="7.0" right="15.0" top="15.0" />
+                            </GridPane.margin>
+                        </ScrollPane>
+                        <Pane fx:id="serverMap" style="-fx-background-color: skyblue;">
+                            <GridPane.margin>
+                                <Insets bottom="15.0" left="15.0" right="7.0" top="15.0" />
+                            </GridPane.margin>
+                        </Pane>
+                    </children>
+                </GridPane>
+            </children>
+            <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" minWidth="900.0" prefWidth="900.0" />
+            </columnConstraints>
+            <rowConstraints>
+                <RowConstraints maxHeight="80.0" minHeight="80.0" prefHeight="80.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="1.7976931348623157E308" minHeight="400.0" prefHeight="400.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="80.0" minHeight="80.0" prefHeight="80.0" vgrow="SOMETIMES" />
+            </rowConstraints>
+            <stylesheets>
+                <String fx:value="/css/Master.css"/>
+                <String fx:value="/css/LobbyView.css" />
+            </stylesheets>
+        </GridPane>
+    </children>
+</StackPane>
@@ -1,92 +1,142 @@
 <?xml version="1.0" encoding="UTF-8"?>

-<?import java.lang.*?>
-<?import javafx.scene.chart.*?>
-<?import javafx.scene.control.*?>
-<?import javafx.scene.layout.*?>
-<?import javafx.scene.shape.*?>
-<?import javafx.scene.text.*?>
-<?import javafx.scene.chart.CategoryAxis?>
-<?import javafx.scene.chart.LineChart?>
-<?import javafx.scene.chart.NumberAxis?>
-<?import javafx.scene.control.Button?>
-<?import javafx.scene.control.CheckBox?>
-<?import javafx.scene.control.ComboBox?>
+<?import com.jfoenix.controls.JFXButton?>
+<?import com.jfoenix.controls.JFXTextField?>
+<?import java.lang.String?>
+<?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Label?>
-<?import javafx.scene.control.Slider?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.ColumnConstraints?>
 <?import javafx.scene.layout.GridPane?>
 <?import javafx.scene.layout.Pane?>
 <?import javafx.scene.layout.RowConstraints?>
-<?import javafx.scene.layout.VBox?>
-<?import javafx.scene.shape.Circle?>
+<?import javafx.scene.layout.StackPane?>
 <?import javafx.scene.text.Font?>
-<?import javafx.scene.text.Text?>

-<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="998.0" prefWidth="1530.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.RaceViewController">
+<AnchorPane fx:id="rvAnchorPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="800.0" prefWidth="1200.0" style="-fx-background-color: skyblue;" xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.RaceViewController">
   <children>
-       <AnchorPane layoutX="322.0" layoutY="130.0" prefHeight="998.0" prefWidth="1281.0" style="-fx-background-color: skyblue;" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
-           <children>
-               <GridPane prefHeight="998.0" prefWidth="1281.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
-                   <columnConstraints>
-                       <ColumnConstraints hgrow="SOMETIMES" maxWidth="630.0" minWidth="10.0" prefWidth="68.0" />
-                       <ColumnConstraints hgrow="SOMETIMES" maxWidth="1213.0" minWidth="10.0" prefWidth="1213.0" />
-                   </columnConstraints>
-                   <rowConstraints>
-                       <RowConstraints maxHeight="489.0" minHeight="1.0" prefHeight="24.0" vgrow="SOMETIMES" />
-                       <RowConstraints maxHeight="997.0" minHeight="10.0" prefHeight="974.0" vgrow="SOMETIMES" />
-                   </rowConstraints>
-                   <children>
-                       <AnchorPane fx:id="contentAnchorPane" prefHeight="200.0" prefWidth="200.0" GridPane.columnSpan="2" GridPane.rowSpan="2" />
-                       <Text fx:id="fpsDisplay" strokeType="OUTSIDE" strokeWidth="0.0" text="60 FPS" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-                   </children>
-               </GridPane>
-           </children>
-       </AnchorPane>
-      <AnchorPane prefHeight="960.0" prefWidth="250.0" style="-fx-background-color: #2C2c36;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
+       <StackPane fx:id="contentAnchorPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="800.0" prefWidth="1200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+
+      </StackPane>
+       <GridPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="800.0" prefWidth="1200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+        <columnConstraints>
+            <ColumnConstraints hgrow="SOMETIMES" maxWidth="250.0" minWidth="250.0" prefWidth="250.0" />
+            <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" />
+            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="400.0" prefWidth="400.0" />
+        </columnConstraints>
+        <rowConstraints>
+            <RowConstraints maxHeight="70.0" minHeight="70.0" prefHeight="70.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="1.7976931348623157E308" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="200.0" minHeight="200.0" prefHeight="200.0" vgrow="SOMETIMES" />
+        </rowConstraints>
         <children>
-            <Label layoutX="11.0" layoutY="283.0" text="Team Position" textFill="WHITE" />
-            <Label layoutX="13.0" layoutY="432.0" text="Settings" textFill="WHITE" />
-            <Label layoutX="11.0" layoutY="41.0" text="Timer" textFill="WHITE" />
-            <Label layoutX="11.0" layoutY="112.0" text="Wind direction" textFill="WHITE" />
-            <Circle fx:id="windBackgroundCircle" blendMode="DARKEN" fill="#3dcdc8" layoutX="110.0" layoutY="190.0" radius="35.0" stroke="#d7d7d7" strokeType="INSIDE" strokeWidth="3.0" />
-            <Text fx:id="windDirectionText" fill="#d3d3d3" layoutX="171.0" layoutY="238.0" strokeType="OUTSIDE" strokeWidth="0.0" text="0.0°" textAlignment="RIGHT">
-               <font>
-                  <Font name="System Bold" size="13.0" />
-               </font>
-            </Text>
-            <Text fx:id="windSpeedText" fill="#d3d3d3" layoutX="12.0" layoutY="237.0" strokeType="OUTSIDE" strokeWidth="0.0" text="0.0 Knot" textAlignment="RIGHT">
-               <font>
-                  <Font name="System Bold" size="13.0" />
-               </font>
-            </Text>
-            <CheckBox fx:id="toggleFps" focusTraversable="false" graphicTextGap="0.0" layoutX="21.0" layoutY="453.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="143.0" selected="true" styleClass="ui-checkbox" text="Show FPS" textFill="WHITE" />
-            <VBox fx:id="positionVbox" layoutX="12.0" layoutY="304.0" prefHeight="116.0" prefWidth="200.0" styleClass="text-white" />
-            <Pane layoutX="11.0" layoutY="39.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="51.0" prefWidth="193.0">
+             <GridPane id="timerGrid" fx:id="timerGrid" prefWidth="192.0" styleClass=".timer">
+              <columnConstraints>
+                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0" minWidth="50.0" prefWidth="50.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="130.0" minWidth="130.0" prefWidth="130.0" />
+              </columnConstraints>
+              <rowConstraints>
+                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+              </rowConstraints>
+               <opaqueInsets>
+                  <Insets />
+               </opaqueInsets>
+               <GridPane.margin>
+                  <Insets left="10.0" right="200.0" top="10.0" />
+               </GridPane.margin>
               <children>
-                  <Text fx:id="timerLabel" fill="#f8f8f8" layoutX="-26.0" layoutY="51.0" strokeType="OUTSIDE" strokeWidth="0.0" text="00:00" textAlignment="CENTER" wrappingWidth="246.0">
+                  <ImageView fitHeight="40.0" fitWidth="40.0" pickOnBounds="true" preserveRatio="true" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                     <image>
+                        <Image url="@../images/timer.png" />
+                     </image>
+                     <GridPane.margin>
+                        <Insets />
+                     </GridPane.margin>
+                  </ImageView>
+                  <Label fx:id="timerLabel" text="00:03:34" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                     <font>
-                        <Font size="25.0" />
+                        <Font size="21.0" />
                     </font>
-                  </Text>
+                     <GridPane.margin>
+                        <Insets />
+                     </GridPane.margin>
+                  </Label>
               </children>
-            </Pane>
-            <Slider fx:id="annotationSlider" blockIncrement="1.0" layoutX="38.0" layoutY="527.0" majorTickUnit="1.0" max="2.0" minorTickCount="0" prefHeight="51.0" prefWidth="170.0" showTickLabels="true" showTickMarks="true" snapToTicks="true" styleClass="ui-slider" />
-            <Label layoutX="10.0" layoutY="499.0" text="Annotations" textFill="WHITE" />
-            <Button fx:id="selectAnnotationBtn" focusTraversable="false" layoutX="35.0" layoutY="578.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="170.0" styleClass="blue-ui-btn" text="Select Annotations" textFill="WHITE" />
-            <Text fill="WHITE" layoutX="11.0" layoutY="649.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Boat Selection" />
-            <ComboBox fx:id="yachtSelectionComboBox" focusTraversable="false" layoutX="37.0" layoutY="664.0" prefHeight="25.0" prefWidth="170.0" promptText="Select Yacht" styleClass="combo-box-base" />
-            <LineChart fx:id="raceSparkLine" layoutX="-1.0" layoutY="719.0" legendVisible="false" prefHeight="277.0" prefWidth="246.0" title="Boat Positions">
-               <xAxis>
-                  <CategoryAxis label="Leg Number" side="BOTTOM" styleClass="spark-line-xaxis" />
-               </xAxis>
-               <yAxis>
-                  <NumberAxis fx:id="sparklineYAxis" minorTickCount="1" minorTickLength="1.0" side="LEFT" styleClass="spark-line-yaxis" tickLabelGap="1.0" tickUnit="1.0" upperBound="7.0" />
-               </yAxis>
-            </LineChart>
-            <AnchorPane fx:id="windArrowHolder" layoutX="110.0" layoutY="175.0" prefHeight="15.0" prefWidth="20.0" />
+            </GridPane>
+            <GridPane GridPane.columnIndex="2">
+              <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+              </columnConstraints>
+              <rowConstraints>
+                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+              </rowConstraints>
+            </GridPane>
+             <GridPane fx:id="chatGridPane" GridPane.columnIndex="2" GridPane.rowIndex="2">
+              <columnConstraints>
+                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" minWidth="300.0" prefWidth="300.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="100.0" prefWidth="100.0" />
+              </columnConstraints>
+              <rowConstraints>
+                  <RowConstraints maxHeight="1.7976931348623157E308" vgrow="SOMETIMES" />
+                  <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
+              </rowConstraints>
+               <children>
+                   <Pane fx:id="chatHistoryHolder" prefHeight="200.0" prefWidth="200.0" GridPane.columnSpan="2" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
+                       <GridPane.margin>
+                           <Insets />
+                       </GridPane.margin>
+                       <padding>
+                           <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
+                       </padding>
+                   </Pane>
+                   <JFXButton fx:id="chatSend" alignment="CENTER" buttonType="RAISED" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="40.0" text="SEND" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER">
+                       <GridPane.margin>
+                           <Insets left="10.0" right="10.0" />
+                       </GridPane.margin>
+                   </JFXButton>
+                   <JFXTextField fx:id="chatInput" maxHeight="35.0" minHeight="-Infinity" prefHeight="35.0" GridPane.rowIndex="1">
+                       <GridPane.margin>
+                           <Insets left="10.0" />
+                       </GridPane.margin>
+                   </JFXTextField>
+               </children>
+             </GridPane>
+             <GridPane GridPane.halignment="CENTER" GridPane.rowIndex="2" GridPane.valignment="BOTTOM">
+                 <columnConstraints>
+                     <ColumnConstraints hgrow="SOMETIMES" maxWidth="110.0" minWidth="110.0" prefWidth="110.0" />
+                     <ColumnConstraints hgrow="SOMETIMES" maxWidth="132.0" minWidth="10.0" prefWidth="132.0" />
+                 </columnConstraints>
+                 <rowConstraints>
+                     <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
+                     <RowConstraints maxHeight="90.0" minHeight="90.0" prefHeight="90.0" vgrow="SOMETIMES" />
+                     <RowConstraints maxHeight="30.0" minHeight="30.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                 </rowConstraints>
+                 <children>
+                     <ImageView fx:id="windImageView" fitHeight="92.0" fitWidth="109.0" pickOnBounds="true" preserveRatio="true" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
+                     <Label fx:id="windDirectionLabel" text="180.0°" GridPane.halignment="LEFT" GridPane.rowIndex="2" GridPane.valignment="CENTER">
+                     <GridPane.margin>
+                        <Insets left="5.0" />
+                     </GridPane.margin></Label>
+                  <Label fx:id="windSpeedLabel" text="0.0 Knots" GridPane.halignment="RIGHT" GridPane.rowIndex="2" GridPane.valignment="CENTER">
+                     <GridPane.margin>
+                        <Insets right="5.0" />
+                     </GridPane.margin></Label>
+                 </children>
+               <opaqueInsets>
+                  <Insets />
+               </opaqueInsets>
+               <GridPane.margin>
+                  <Insets bottom="10.0" left="10.0" />
+               </GridPane.margin>
+             </GridPane>
         </children>
-      </AnchorPane>
+      </GridPane>
   </children>
+    <stylesheets>
+        <String fx:value="/css/Master.css" />
+        <String fx:value="/css/RaceView.css" />
+    </stylesheets>
 </AnchorPane>
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.JFXButton?>
+<?import com.jfoenix.controls.JFXTextField?>
+<?import java.lang.String?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.ScrollPane?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>
+<StackPane fx:id="serverListMainStackPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.ServerListController">
+    <children>
+        <GridPane fx:id="serverListMainGridPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308">
+            <children>
+                <GridPane fx:id="connectGridPane" GridPane.rowIndex="2">
+                    <children>
+                        <JFXButton fx:id="connectButton" buttonType="RAISED" onMouseEntered="#playButtonHoverSound" prefHeight="45.0" prefWidth="220.0" ripplerFill="#3493e3" text="CONNECT" textFill="WHITE" GridPane.columnIndex="5" GridPane.halignment="RIGHT" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets right="50.0" />
+                            </GridPane.margin>
+                        </JFXButton>
+                        <JFXTextField fx:id="serverHostName" maxHeight="30.0" minHeight="30.0" prefHeight="30.0" promptText="Host Name" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets left="20.0" right="20.0" />
+                            </GridPane.margin>
+                        </JFXTextField>
+                        <JFXTextField fx:id="serverPortNumber" maxHeight="30.0" minHeight="30.0" prefHeight="30.0" promptText="Port Number" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets left="20.0" right="20.0" />
+                            </GridPane.margin>
+                        </JFXTextField>
+                        <Label fx:id="connectLabel" text="Direct Connect:" GridPane.columnIndex="1" GridPane.halignment="RIGHT" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets right="45.0" />
+                            </GridPane.margin>
+                        </Label>
+                    </children>
+                    <columnConstraints>
+                  <ColumnConstraints hgrow="SOMETIMES" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="280.0" minWidth="180.0" prefWidth="180.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="320.0" minWidth="280.0" prefWidth="280.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="180.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="17.0" minWidth="17.0" prefWidth="17.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="273.0" minWidth="250.0" prefWidth="273.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                    </rowConstraints>
+                </GridPane>
+                <ScrollPane id="serverListPane" fx:id="serverListScrollPane" hbarPolicy="NEVER" prefHeight="1000.0" prefWidth="880.0" GridPane.rowIndex="1">
+                    <content>
+                        <VBox id="serverListVBox" fx:id="serverListVBox" prefHeight="200.0" prefWidth="100.0">
+                            <padding>
+                                <Insets left="30.0" right="30.0" />
+                            </padding>
+                        </VBox>
+                    </content>
+                    <GridPane.margin>
+                        <Insets />
+                    </GridPane.margin>
+                </ScrollPane>
+                <GridPane>
+                    <children>
+                        <Label text="Party Parrots At Sea" GridPane.valignment="CENTER">
+                            <font>
+                                <Font size="31.0" />
+                            </font>
+                            <padding>
+                                <Insets left="35.0" top="5.0" />
+                            </padding>
+                        </Label>
+                        <JFXButton id="hostButton" fx:id="serverListHostButton" buttonType="RAISED"
+                          onMouseEntered="#playButtonHoverSound" prefHeight="45.0" prefWidth="220.0"
+                          text="HOST" GridPane.columnIndex="1" GridPane.halignment="RIGHT"
+                          GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets right="50.0"/>
+                            </GridPane.margin>
+                        </JFXButton>
+                    </children>
+                    <columnConstraints>
+                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints maxHeight="1.7976931348623157E308" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
+                    </rowConstraints>
+                </GridPane>
+            </children>
+            <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" minWidth="900.0" prefWidth="900.0" />
+            </columnConstraints>
+            <rowConstraints>
+                <RowConstraints maxHeight="80.0" minHeight="80.0" prefHeight="80.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="1.7976931348623157E308" minHeight="400.0" prefHeight="400.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="80.0" minHeight="80.0" prefHeight="80.0" vgrow="SOMETIMES" />
+            </rowConstraints>
+            <stylesheets>
+                <String fx:value="/css/Master.css"/>
+                <String fx:value="/css/ServerListView.css" />
+            </stylesheets>
+        </GridPane>
+    </children>
+</StackPane>
@@ -1,71 +1,49 @@
 <?xml version="1.0" encoding="UTF-8"?>

-<?import java.lang.*?>
-<?import javafx.geometry.*?>
-<?import javafx.scene.control.*?>
-<?import javafx.scene.layout.*?>
-<?import javafx.scene.text.*?>
+<?import com.jfoenix.controls.JFXButton?>
+<?import java.lang.String?>
 <?import javafx.geometry.Insets?>
-<?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
-<?import javafx.scene.control.TextField?>
-<?import javafx.scene.layout.AnchorPane?>
-<?import javafx.scene.layout.ColumnConstraints?>
-<?import javafx.scene.layout.GridPane?>
-<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
-<?import javafx.scene.text.Text?>
-
-<AnchorPane fx:id="holder" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="960.0" prefWidth="1530.0" style="-fx-background-color: #2C2c36;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.StartScreenController">
+<StackPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="800.0" minWidth="1200.0" prefHeight="800.0" prefWidth="1200.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.StartScreenController">
+   <stylesheets>
+       <String fx:value="/css/Master.css"/>
+       <String fx:value="/css/StartScreenView.css" />
+   </stylesheets>
   <children>
-      <GridPane fx:id="startScreen2" layoutX="365.0" layoutY="285.0" nodeOrientation="LEFT_TO_RIGHT" prefWidth="800.0" style="-fx-background-color: #2C2c36;">
+      <VBox fx:id="mainStackPane" alignment="CENTER" StackPane.alignment="CENTER">
         <children>
-            <Label alignment="CENTER" text="Party Parrots at Sea" textFill="WHITE"
-              GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="1"
-              GridPane.valignment="BOTTOM">
+            <Label fx:id="headText" text="Party Parrots At Sea">
               <font>
-                  <Font size="40.0" />
+                  <Font name="System Bold" size="42.0" />
               </font>
+               <VBox.margin>
+                  <Insets bottom="100.0" />
+               </VBox.margin>
+               <StackPane.margin>
+                   <Insets bottom="150.0" />
+               </StackPane.margin>
            </Label>
-            <Button mnemonicParsing="false" onAction="#hostButtonPressed" prefHeight="25.0" prefWidth="175.0" text="Host" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
-            <Button mnemonicParsing="false" onAction="#connectButtonPressed" prefHeight="25.0" prefWidth="147.0" text="Connect" GridPane.columnIndex="1" GridPane.rowIndex="4">
-               <GridPane.margin>
-                  <Insets left="5.0" right="5.0" />
-               </GridPane.margin>
-            </Button>
-            <TextField fx:id="ipTextField" alignment="CENTER" maxWidth="-Infinity" prefHeight="25.0" prefWidth="148.0" promptText="Host IP" text="localhost" GridPane.halignment="RIGHT" GridPane.rowIndex="4">
-               <GridPane.margin>
-                  <Insets bottom="10.0" left="5.0" right="85.0" top="10.0" />
-               </GridPane.margin>
-            </TextField>
-            <Text fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="OR" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="3">
+             <JFXButton fx:id="startBtn" buttonType="RAISED" onMouseEntered="#playButtonHoverSound" prefHeight="80.0" prefWidth="337.0" text="START">
               <font>
-                  <Font size="21.0" />
+                   <Font size="20.0" />
               </font>
-            </Text>
-            <TextField fx:id="portTextField" alignment="CENTER" maxWidth="75.0" prefHeight="25.0" prefWidth="55.0" promptText="Port" text="4942" GridPane.halignment="RIGHT" GridPane.rowIndex="4">
-               <opaqueInsets>
-                  <Insets />
-               </opaqueInsets>
-               <GridPane.margin>
-                  <Insets left="5.0" right="5.0" />
-               </GridPane.margin>
-            </TextField>
+               <VBox.margin>
+                  <Insets top="50.0" />
+               </VBox.margin>
+               <StackPane.margin>
+                   <Insets />
+               </StackPane.margin>
+            </JFXButton>
         </children>
-         <columnConstraints>
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="442.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="358.0" />
-         </columnConstraints>
-         <rowConstraints>
-            <RowConstraints />
-            <RowConstraints />
-            <RowConstraints maxHeight="42.0" minHeight="10.0" prefHeight="42.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="26.0" minHeight="13.0" prefHeight="26.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="66.0" minHeight="59.0" prefHeight="59.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="65.0" minHeight="36.0" prefHeight="46.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="108.0" minHeight="72.0" prefHeight="98.0" vgrow="SOMETIMES" />
-            <RowConstraints minHeight="72.0" prefHeight="72.0" vgrow="SOMETIMES" />
-         </rowConstraints>
-      </GridPane>
+         <StackPane.margin>
+            <Insets />
+         </StackPane.margin>
+         <padding>
+            <Insets bottom="100.0" />
+         </padding>
+      </VBox>
   </children>
-</AnchorPane>
+</StackPane>
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-
-<?import javafx.scene.canvas.Canvas?>
-<?import javafx.scene.layout.Pane?>
-<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="960.0" prefWidth="1280.0" style="-fx-background-color: #ddd;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.map.TestMapController">
-   <children>
-      <Canvas fx:id="mapCanvas" height="960.0" width="1280.0" />
-   </children>
-</Pane>
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import java.lang.String?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.Pane?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.VBox?>
+<VBox fx:id="playerCellVBox" maxHeight="-Infinity" maxWidth="1.7976931348623157E308"
+  minHeight="-Infinity" minWidth="-Infinity" prefHeight="80.0"
+  xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
+   <stylesheets>
+       <String fx:value="/css/Master.css"/>
+       <String fx:value="/css/cells/PlayerCell.css"/>
+   </stylesheets>
+   <children>
+       <GridPane fx:id="playerListCell" maxHeight="-Infinity" maxWidth="1.7976931348623157E308"
+         minHeight="-Infinity" prefHeight="70.0">
+        <columnConstraints>
+            <ColumnConstraints hgrow="SOMETIMES" maxWidth="80.0" minWidth="80.0" prefWidth="80.0"/>
+            <ColumnConstraints hgrow="SOMETIMES" maxWidth="290.0" minWidth="290.0"
+              prefWidth="290.0"/>
+        </columnConstraints>
+        <rowConstraints>
+            <RowConstraints maxHeight="80.0" minHeight="80.0" prefHeight="80.0" vgrow="SOMETIMES"/>
+        </rowConstraints>
+         <children>
+             <Label fx:id="playerName" text="Party parrots in space" GridPane.columnIndex="1">
+               <padding>
+                  <Insets left="20.0" />
+               </padding></Label>
+             <Pane fx:id="boatPane" prefHeight="200.0" prefWidth="200.0"/>
+         </children>
+           <VBox.margin>
+               <Insets right="40.0"/>
+           </VBox.margin>
+      </GridPane>
+   </children>
+   <padding>
+       <Insets bottom="30.0" left="5.0" right="5.0" />
+   </padding>
+</VBox>
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.JFXButton?>
+<?import java.lang.String?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>
+<VBox fx:id="serverCellVBox" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" onMouseEntered="#playButtonHoverSound" prefHeight="95.0" prefWidth="900.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
+   <stylesheets>
+       <String fx:value="/css/Master.css"/>
+       <String fx:value="/css/cells/ServerCell.css" />
+   </stylesheets>
+   <children>
+      <GridPane fx:id="serverListCell" prefHeight="80.0">
+         <columnConstraints>
+             <ColumnConstraints hgrow="SOMETIMES" maxWidth="330.0" minWidth="330.0" prefWidth="330.0" />
+             <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" />
+             <ColumnConstraints hgrow="SOMETIMES" maxWidth="150.0" minWidth="150.0" prefWidth="150.0" />
+             <ColumnConstraints hgrow="SOMETIMES" maxWidth="180.0" minWidth="180.0" prefWidth="180.0" />
+         </columnConstraints>
+         <rowConstraints>
+             <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+         </rowConstraints>
+         <children>
+             <GridPane>
+                 <columnConstraints>
+                     <ColumnConstraints hgrow="SOMETIMES" maxWidth="10.0" minWidth="10.0" prefWidth="10.0" />
+                     <ColumnConstraints hgrow="SOMETIMES" maxWidth="330.0" minWidth="330.0" prefWidth="330.0" />
+                 </columnConstraints>
+                 <rowConstraints>
+                     <RowConstraints maxHeight="52.0" minHeight="10.0" prefHeight="51.0" vgrow="SOMETIMES" />
+                     <RowConstraints maxHeight="43.0" minHeight="10.0" prefHeight="29.0" vgrow="SOMETIMES" />
+                 </rowConstraints>
+                 <children>
+                     <Label fx:id="serverName" text="Party Parrot Server 1" GridPane.columnIndex="1">
+                         <font>
+                             <Font size="19.0" />
+                         </font>
+                     </Label>
+                     <Label fx:id="mapName" text="Party parrots in space" GridPane.columnIndex="1" GridPane.rowIndex="1" />
+                 </children>
+             </GridPane>
+             <JFXButton fx:id="serverConnButton" buttonType="RAISED" prefHeight="39.0" prefWidth="123.0" text="JOIN GAME" GridPane.columnIndex="3" />
+             <Label fx:id="serverPlayerCount" text="2/8 Players" GridPane.columnIndex="2" />
+         </children>
+      </GridPane>
+   </children>
+   <padding>
+       <Insets bottom="10.0" left="5.0" right="5.0" top="5.0" />
+   </padding>
+</VBox>
@@ -10,7 +10,7 @@
 <GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
  prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: #2C2c36;"
  xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
-  fx:controller="seng302.visualiser.controllers.CustomizationController">
+  fx:controller="seng302.visualiser.controllers.CustomizationController_old">
  <columnConstraints>
      <ColumnConstraints fillWidth="false" halignment="CENTER" hgrow="SOMETIMES"
        maxWidth="1.7976931348623157E308" minWidth="1.0" percentWidth="10.0" prefWidth="1.0"/>
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.JFXButton?>
+<?import com.jfoenix.controls.JFXColorPicker?>
+<?import com.jfoenix.controls.JFXDialogLayout?>
+<?import com.jfoenix.controls.JFXTextField?>
+<?import java.lang.String?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.RowConstraints?>
+<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
+  minWidth="-Infinity" prefWidth="400.0" xmlns="http://javafx.com/javafx/8"
+  xmlns:fx="http://javafx.com/fxml/1"
+  fx:controller="seng302.visualiser.controllers.dialogs.BoatCustomizeController">
+    <children>
+        <GridPane>
+            <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+            </columnConstraints>
+            <rowConstraints>
+                <RowConstraints maxHeight="90.0" minHeight="90.0" prefHeight="90.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="125.0" minHeight="61.0" prefHeight="61.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="164.0" minHeight="100.0" prefHeight="164.0" vgrow="SOMETIMES" />
+            </rowConstraints>
+            <children>
+                <Label fx:id="hostDialogHeader" text="Customize Boat" GridPane.halignment="CENTER"
+                  GridPane.valignment="CENTER"/>
+                <JFXButton fx:id="submitBtn" prefHeight="45.0" prefWidth="220.0" text="Customize Boat" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" />
+                <JFXTextField fx:id="boatName" focusColor="#6c6c6c" promptText="Boat Name"
+                  unFocusColor="#6b6b6b" GridPane.rowIndex="1">
+               <GridPane.margin>
+                  <Insets left="30.0" right="30.0" />
+               </GridPane.margin></JFXTextField>
+            <GridPane GridPane.rowIndex="2">
+              <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" maxWidth="139.0" minWidth="10.0" prefWidth="89.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="203.0" minWidth="10.0" prefWidth="203.0" />
+              </columnConstraints>
+              <rowConstraints>
+                <RowConstraints maxHeight="69.0" minHeight="10.0" percentHeight="60.0" prefHeight="19.6" vgrow="SOMETIMES" />
+              </rowConstraints>
+               <children>
+                   <Label fx:id="boatColorLabel" prefHeight="25.0" prefWidth="96.0"
+                     text="Boat Color">
+                     <GridPane.margin>
+                        <Insets top="-10.0" />
+                     </GridPane.margin>
+                  </Label>
+                  <JFXColorPicker fx:id="colorPicker" onAction="#colorChanged" GridPane.columnIndex="1">
+                     <GridPane.margin>
+                         <Insets left="30.0" top="-10.0"/>
+                     </GridPane.margin>
+                  </JFXColorPicker>
+               </children>
+               <GridPane.margin>
+                  <Insets left="30.0" right="30.0" />
+               </GridPane.margin>
+            </GridPane>
+            </children>
+        </GridPane>
+    </children>
+   <stylesheets>
+       <String fx:value="/css/dialogs/BoatCustomize.css"/>
+       <String fx:value="/css/Master.css"/>
+   </stylesheets>
+</JFXDialogLayout>
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.JFXButton?>
+<?import com.jfoenix.controls.JFXDialogLayout?>
+<?import com.jfoenix.controls.JFXSlider?>
+<?import com.jfoenix.controls.JFXTextField?>
+<?import java.lang.String?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.VBox?>
+<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefWidth="550.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.dialogs.ServerCreationController">
+    <children>
+        <GridPane>
+            <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+            </columnConstraints>
+            <rowConstraints>
+                <RowConstraints maxHeight="90.0" minHeight="90.0" prefHeight="90.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
+            </rowConstraints>
+            <children>
+                <Label fx:id="hostDialogHeader" text="HOST A GAME SERVER" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+                <JFXButton fx:id="submitBtn" onMouseEntered="#playButtonHoverSound" prefHeight="55.0" prefWidth="250.0" text="SUBMIT" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" />
+                <JFXTextField fx:id="serverName" promptText="SERVER NAME" GridPane.rowIndex="1">
+               <GridPane.margin>
+                  <Insets left="30.0" right="30.0" />
+               </GridPane.margin></JFXTextField>
+                <GridPane fx:id="maxPlayersGridPane" GridPane.rowIndex="2">
+              <columnConstraints>
+                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="30.0" prefWidth="100.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" minWidth="100.0" prefWidth="100.0" />
+              </columnConstraints>
+              <rowConstraints>
+                  <RowConstraints minHeight="10.0" percentHeight="60.0" prefHeight="10.0" vgrow="SOMETIMES" />
+                <RowConstraints minHeight="10.0" percentHeight="40.0" prefHeight="30.0" vgrow="SOMETIMES" />
+              </rowConstraints>
+               <children>
+                  <Label fx:id="maxPlayersLabel" text="20" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP">
+                     <GridPane.margin>
+                        <Insets right="30.0" />
+                     </GridPane.margin></Label>
+                   <Label fx:id="maxPlayerPromptLabel" text="MAX PLAYERS" GridPane.halignment="LEFT" GridPane.valignment="BOTTOM">
+                     <GridPane.margin>
+                         <Insets left="30.0" top="20.0" />
+                     </GridPane.margin>
+                  </Label>
+                   <VBox alignment="BOTTOM_CENTER" prefHeight="200.0" prefWidth="100.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                       <children>
+                           <JFXSlider fx:id="maxPlayersSlider" blockIncrement="1.0" majorTickUnit="2.0" max="20.0" min="1.0" minorTickCount="1" snapToTicks="true" styleClass="maxPlayers" value="11.0" />
+                       </children>
+                       <GridPane.margin>
+                           <Insets bottom="10.0" right="30.0" />
+                       </GridPane.margin>
+                   </VBox>
+               </children>
+            </GridPane>
+            </children>
+        </GridPane>
+    </children>
+   <stylesheets>
+       <String fx:value="/css/dialogs/ServerCreation.css" />
+       <String fx:value="/css/Master.css"/>
+   </stylesheets>
+</JFXDialogLayout>