Stylin'

#story[1301]
2017-09-28 14:43:14 +13:00
parent 1196e853bf bab7749138
commit bd0c0ac5ef
17 changed files with 412 additions and 233 deletions
@@ -102,3 +102,236 @@
    -fx-border-color: #012256;
    -fx-border-width: 3;
 }
+
+/* Title menu buttons */
+#hostAGameBtn {
+    -fx-background-image: url("/visualiser/images/hostAGameBtn.png");
+    -fx-background-size: 150px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#hostAGameBtn:pressed {
+    -fx-background-image: url("/visualiser/images/hostAGameBtnPressed.png");
+    -fx-background-size: 150px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#btnJoin {
+    -fx-background-image: url("/visualiser/images/JoinAGameBtn.png");
+    -fx-background-size: 150px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#btnJoin:pressed {
+    -fx-background-image: url("/visualiser/images/JoinAGameBtnPressed.png");
+    -fx-background-size: 150px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#tutorialButton {
+    -fx-background-image: url("/visualiser/images/howToPlayBtn.png");
+    -fx-background-size: 150px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#tutorialButton:pressed {
+    -fx-background-image: url("/visualiser/images/howToPlayBtnPressed.png");
+    -fx-background-size: 150px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#controlsBtn {
+    -fx-background-image: url("/visualiser/images/controlsBtn.png");
+    -fx-background-size: 150px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#controlsBtn:pressed {
+    -fx-background-image: url("/visualiser/images/controlsBtnPressed.png");
+    -fx-background-size: 150px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+/* host game lobby buttons */
+
+#hostGameBtn {
+    -fx-background-image: url("/visualiser/images/startGameBtn.png");
+    -fx-background-size: 150px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#hostGameBtn:pressed {
+    -fx-background-image: url("/visualiser/images/startGameBtnPressed.png");
+    -fx-background-size: 150px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#mainMenuBtn {
+    -fx-background-image: url("/visualiser/images/mainMenuBtn.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+
+#mainMenuBtn:pressed {
+    -fx-background-image: url("/visualiser/images/mainMenuBtnPressed.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+/* match browsing lobby buttons */
+
+#addBtn {
+    -fx-background-image: url("/visualiser/images/addBtn.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#addBtn:pressed {
+    -fx-background-image: url("/visualiser/images/addBtnPressed.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#refreshBtn {
+    -fx-background-image: url("/visualiser/images/refreshBtn.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#refreshBtn:pressed {
+    -fx-background-image: url("/visualiser/images/refreshBtnPressed.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#refreshBtn {
+    -fx-background-image: url("/visualiser/images/refreshBtn.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#joinGameBtn {
+    -fx-background-image: url("/visualiser/images/participateBtn.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#joinGameBtn:pressed {
+    -fx-background-image: url("/visualiser/images/participateBtnPressed.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#spectateButton {
+    -fx-background-image: url("/visualiser/images/spectateBtn.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#spectateButton:pressed {
+    -fx-background-image: url("/visualiser/images/spectateBtnPressed.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+/* in-game lobby buttons */
+
+#quitBtn {
+    -fx-background-image: url("/visualiser/images/quitBtn.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#quitBtn:pressed {
+    -fx-background-image: url("/visualiser/images/quitBtnPressed.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#startButton {
+    -fx-background-image: url("/visualiser/images/startBtn.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
+
+#startButton:pressed {
+    -fx-background-image: url("/visualiser/images/startBtnPressed.png");
+    -fx-background-size: 115px;
+    -fx-background-repeat: no-repeat;
+    -fx-background-position: center center;
+    -fx-focus-color: transparent;
+    -fx-background-color: transparent;
+}
@@ -37,16 +37,16 @@
        </CompoundMark>
    </Course>
    <CourseLimit>
-        <Limit Lat="32.313922" Lon="-64.837168" SeqID="1"/>
-        <Limit Lat="32.317379" Lon="-64.839291" SeqID="2"/>
-        <Limit Lat="32.317911" Lon="-64.836996" SeqID="3"/>
-        <Limit Lat="32.317257" Lon="-64.83626" SeqID="4"/>
-        <Limit Lat="32.304273" Lon="-64.822834" SeqID="5"/>
-        <Limit Lat="32.279097" Lon="-64.841545" SeqID="6"/>
-        <Limit Lat="32.279604" Lon="-64.849871" SeqID="7"/>
-        <Limit Lat="32.289545" Lon="-64.854162" SeqID="8"/>
-        <Limit Lat="32.290198" Lon="-64.858711" SeqID="9"/>
-        <Limit Lat="32.297164" Lon="-64.856394" SeqID="10"/>
-        <Limit Lat="32.296148" Lon="-64.849184" SeqID="11"/>
+        <Limit Lat="32.311922" Lon="-64.841168" SeqID="1"/>
+        <Limit Lat="32.319379" Lon="-64.841291" SeqID="2"/>
+        <Limit Lat="32.319911" Lon="-64.836996" SeqID="3"/>
+        <Limit Lat="32.319257" Lon="-64.83326" SeqID="4"/>
+        <Limit Lat="32.305273" Lon="-64.821834" SeqID="5"/>
+        <Limit Lat="32.276097" Lon="-64.839545" SeqID="6"/>
+        <Limit Lat="32.275604" Lon="-64.851871" SeqID="7"/>
+        <Limit Lat="32.286545" Lon="-64.856162" SeqID="8"/>
+        <Limit Lat="32.288198" Lon="-64.860711" SeqID="9"/>
+        <Limit Lat="32.299164" Lon="-64.857394" SeqID="10"/>
+        <Limit Lat="32.299148" Lon="-64.851184" SeqID="11"/>
    </CourseLimit>
 </Race>
@@ -1,51 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<Race>
-    <RaceID>5326</RaceID>
-    <RaceType>FLEET</RaceType>
-    <CreationTimeDate>RACE_CREATION_TIME</CreationTimeDate>
-    <RaceStartTime Postpone="false" Time="RACE_START_TIME"/>
-    <Participants>
-    </Participants>
-    <CompoundMarkSequence>
-        <Corner SeqID="1" CompoundMarkID="1" Rounding="SP" ZoneSize="3" />
-        <Corner SeqID="2" CompoundMarkID="2" Rounding="Port" ZoneSize="3" />
-        <Corner SeqID="3" CompoundMarkID="4" Rounding="Port" ZoneSize="3" />
-        <Corner SeqID="4" CompoundMarkID="3" Rounding="Starboard" ZoneSize="3" />
-        <Corner SeqID="5" CompoundMarkID="4" Rounding="Port" ZoneSize="3" />
-        <Corner SeqID="6" CompoundMarkID="5" Rounding="SP" ZoneSize="3"/>
-    </CompoundMarkSequence>
-    <Course>
-        <CompoundMark CompoundMarkID="1" Name="Start Line">
-            <Mark SeqId="1" Name="PRO" TargetLat="32.296577" TargetLng="-64.854304" SourceID="101"/>
-            <Mark SeqId="2" Name="PIN" TargetLat="32.293771" TargetLng="-64.855242" SourceID="102"/>
-        </CompoundMark>
-        <CompoundMark CompoundMarkID="2" Name="Marker 1">
-            <Mark Name="Marker1" TargetLat="32.293039" TargetLng="-64.843983" SourceID="103"/>
-        </CompoundMark>
-        <CompoundMark CompoundMarkID="3" Name="Windward Gate">
-            <Mark Name="WGL" SeqId="1" TargetLat="32.28468" TargetLng="-64.850045" SourceID="104"/>
-            <Mark Name="WGR" SeqId="2" TargetLat="32.280164" TargetLng="-64.847591" SourceID="105"/>
-        </CompoundMark>
-        <CompoundMark CompoundMarkID="4" Name="Leeward Gate">
-            <Mark Name="LGL" SeqId="1" TargetLat="32.309693" TargetLng="-64.835249" SourceID="106"/>
-            <Mark Name="LGR" SeqId="2" TargetLat="32.308046" TargetLng="-64.831785" SourceID="107"/>
-        </CompoundMark>
-        <CompoundMark CompoundMarkID="5" Name="Finish Line">
-            <Mark Name="FL" SeqId="1" TargetLat="32.317379" TargetLng="-64.839291" SourceID="108"/>
-            <Mark Name="FR" SeqId="2" TargetLat="32.317257" TargetLng="-64.83626" SourceID="109"/>
-        </CompoundMark>
-    </Course>
-    <CourseLimit>
-        <Limit Lat="32.313922" Lon="-64.837168" SeqID="1"/>
-        <Limit Lat="32.317379" Lon="-64.839291" SeqID="2"/>
-        <Limit Lat="32.317911" Lon="-64.836996" SeqID="3"/>
-        <Limit Lat="32.317257" Lon="-64.83626" SeqID="4"/>
-        <Limit Lat="32.304273" Lon="-64.822834" SeqID="5"/>
-        <Limit Lat="32.279097" Lon="-64.841545" SeqID="6"/>
-        <Limit Lat="32.279604" Lon="-64.849871" SeqID="7"/>
-        <Limit Lat="32.289545" Lon="-64.854162" SeqID="8"/>
-        <Limit Lat="32.290198" Lon="-64.858711" SeqID="9"/>
-        <Limit Lat="32.297164" Lon="-64.856394" SeqID="10"/>
-        <Limit Lat="32.296148" Lon="-64.849184" SeqID="11"/>
-    </CourseLimit>
-</Race>
@@ -1,51 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<Race>
-    <RaceID>5326</RaceID>
-    <RaceType>FLEET</RaceType>
-    <CreationTimeDate>RACE_CREATION_TIME</CreationTimeDate>
-    <RaceStartTime Postpone="false" Time="RACE_START_TIME"/>
-    <Participants>
-    </Participants>
-    <CompoundMarkSequence>
-        <Corner SeqID="1" CompoundMarkID="1" Rounding="SP" ZoneSize="3" />
-        <Corner SeqID="2" CompoundMarkID="2" Rounding="Port" ZoneSize="3" />
-        <Corner SeqID="3" CompoundMarkID="4" Rounding="Port" ZoneSize="3" />
-        <Corner SeqID="4" CompoundMarkID="3" Rounding="Starboard" ZoneSize="3" />
-        <Corner SeqID="5" CompoundMarkID="4" Rounding="Port" ZoneSize="3" />
-        <Corner SeqID="6" CompoundMarkID="5" Rounding="SP" ZoneSize="3"/>
-    </CompoundMarkSequence>
-    <Course>
-        <CompoundMark CompoundMarkID="1" Name="Start Line">
-            <Mark SeqId="1" Name="PRO" TargetLat="32.296577" TargetLng="-64.854304" SourceID="101"/>
-            <Mark SeqId="2" Name="PIN" TargetLat="32.293771" TargetLng="-64.855242" SourceID="102"/>
-        </CompoundMark>
-        <CompoundMark CompoundMarkID="2" Name="Marker 1">
-            <Mark Name="Marker1" TargetLat="32.293039" TargetLng="-64.843983" SourceID="103"/>
-        </CompoundMark>
-        <CompoundMark CompoundMarkID="3" Name="Windward Gate">
-            <Mark Name="WGL" SeqId="1" TargetLat="32.28468" TargetLng="-64.850045" SourceID="104"/>
-            <Mark Name="WGR" SeqId="2" TargetLat="32.280164" TargetLng="-64.847591" SourceID="105"/>
-        </CompoundMark>
-        <CompoundMark CompoundMarkID="4" Name="Leeward Gate">
-            <Mark Name="LGL" SeqId="1" TargetLat="32.309693" TargetLng="-64.835249" SourceID="106"/>
-            <Mark Name="LGR" SeqId="2" TargetLat="32.308046" TargetLng="-64.831785" SourceID="107"/>
-        </CompoundMark>
-        <CompoundMark CompoundMarkID="5" Name="Finish Line">
-            <Mark Name="FL" SeqId="1" TargetLat="32.317379" TargetLng="-64.839291" SourceID="108"/>
-            <Mark Name="FR" SeqId="2" TargetLat="32.317257" TargetLng="-64.83626" SourceID="109"/>
-        </CompoundMark>
-    </Course>
-    <CourseLimit>
-        <Limit Lat="32.313922" Lon="-64.837168" SeqID="1"/>
-        <Limit Lat="32.317379" Lon="-64.839291" SeqID="2"/>
-        <Limit Lat="32.317911" Lon="-64.836996" SeqID="3"/>
-        <Limit Lat="32.317257" Lon="-64.83626" SeqID="4"/>
-        <Limit Lat="32.304273" Lon="-64.822834" SeqID="5"/>
-        <Limit Lat="32.279097" Lon="-64.841545" SeqID="6"/>
-        <Limit Lat="32.279604" Lon="-64.849871" SeqID="7"/>
-        <Limit Lat="32.289545" Lon="-64.854162" SeqID="8"/>
-        <Limit Lat="32.290198" Lon="-64.858711" SeqID="9"/>
-        <Limit Lat="32.297164" Lon="-64.856394" SeqID="10"/>
-        <Limit Lat="32.296148" Lon="-64.849184" SeqID="11"/>
-    </CourseLimit>
-</Race>
@@ -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?>
@@ -9,11 +14,11 @@
 <?import javafx.scene.layout.RowConstraints?>
 <?import javafx.scene.text.Font?>

-<AnchorPane fx:id="gameLobbyWrapper" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="780.0" style="-fx-background-color: rgba(100, 100, 100, 0.2);" xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1" fx:controller="visualiser.Controllers.InGameLobbyController">
+<AnchorPane fx:id="gameLobbyWrapper" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="780.0" style="-fx-background-color: rgba(100, 100, 100, 0.2);" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="visualiser.Controllers.InGameLobbyController">
    <children>
-      <GridPane style="-fx-background-color: rgba(0, 0, 0, 0.3);" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+      <GridPane style="-fx-background-color: #f1f1d4;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
-            <Button fx:id="quitButton" mnemonicParsing="false" onAction="#menuBtnPressed" text="Quit" GridPane.rowIndex="2">
+            <Button fx:id="quitBtn" maxHeight="50.0" maxWidth="125.0" mnemonicParsing="false" onAction="#menuBtnPressed" GridPane.rowIndex="2">
               <GridPane.margin>
                  <Insets left="20.0" />
               </GridPane.margin>
@@ -66,7 +71,7 @@
                  <Font name="Cabin-Bold" size="17.0" />
               </font>
            </Label>
-            <Button fx:id="startButton" disable="true" mnemonicParsing="false" onAction="#startBtnPressed" text="Start!" visible="false" GridPane.columnIndex="2" GridPane.rowIndex="2" />
+            <Button fx:id="startButton" disable="true" maxHeight="50.0" maxWidth="125.0" mnemonicParsing="false" onAction="#startBtnPressed" visible="false" GridPane.columnIndex="2" GridPane.rowIndex="2" />
         </children>
         <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
@@ -13,20 +13,20 @@
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>

-<AnchorPane fx:id="lobbyWrapper" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="780.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="visualiser.Controllers.LobbyController">
+<AnchorPane fx:id="lobbyWrapper" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="780.0" style="-fx-background-color: #f1f1d4;" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="visualiser.Controllers.LobbyController">
   <children>
      <GridPane fx:id="connection" prefHeight="600.0" prefWidth="780.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <columnConstraints>
-            <ColumnConstraints hgrow="SOMETIMES" maxWidth="600.0" minWidth="10.0" prefWidth="600.0" />
-            <ColumnConstraints hgrow="SOMETIMES" maxWidth="600.0" minWidth="10.0" prefWidth="600.0" />
+            <ColumnConstraints hgrow="SOMETIMES" maxWidth="600.0" minWidth="10.0" prefWidth="303.0" />
+            <ColumnConstraints hgrow="SOMETIMES" maxWidth="600.0" minWidth="10.0" prefWidth="477.0" />
         </columnConstraints>
         <rowConstraints>
-            <RowConstraints maxHeight="182.0" minHeight="10.0" prefHeight="182.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="434.0" minHeight="10.0" prefHeight="434.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="174.0" minHeight="10.0" prefHeight="174.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="182.0" minHeight="10.0" prefHeight="116.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="434.0" minHeight="10.0" prefHeight="348.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="174.0" minHeight="10.0" prefHeight="157.0" vgrow="SOMETIMES" />
         </rowConstraints>
         <children>
-            <TableView fx:id="lobbyTable" prefHeight="200.0" prefWidth="1080.0" GridPane.columnSpan="2" GridPane.rowIndex="1">
+            <TableView fx:id="lobbyTable" prefHeight="342.0" prefWidth="680.0" GridPane.columnSpan="2" GridPane.rowIndex="1">
               <columns>
                  <TableColumn fx:id="gameNameColumn" prefWidth="223.0" text="Game Name" />
                  <TableColumn fx:id="hostNameColumn" prefWidth="280.0" text="Host Name" />
@@ -44,23 +44,22 @@
            <GridPane fx:id="ipPortGridPane" GridPane.rowIndex="2">
               <columnConstraints>
                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
-                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
               </columnConstraints>
               <rowConstraints>
                  <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
               </rowConstraints>
               <children>
-                  <TextField fx:id="addressFld" promptText="Address">
+                  <TextField fx:id="addressFld" promptText="Address" GridPane.valignment="TOP">
                     <GridPane.margin>
-                        <Insets left="50.0" right="20.0" />
+                        <Insets left="50.0" right="20.0" top="20.0" />
                     </GridPane.margin>
                     <opaqueInsets>
                        <Insets />
                     </opaqueInsets>
                  </TextField>
-                  <TextField fx:id="portFld" promptText="Port Number" GridPane.columnIndex="1">
+                  <TextField fx:id="portFld" promptText="Port Number">
                     <GridPane.margin>
-                        <Insets left="20.0" right="20.0" />
+                        <Insets left="50.0" right="20.0" />
                     </GridPane.margin>
                  </TextField>
               </children>
@@ -70,31 +69,31 @@
            </GridPane>
            <GridPane fx:id="buttonsGridPane" GridPane.columnIndex="1" GridPane.rowIndex="2">
               <columnConstraints>
-                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
-                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
-                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="145.0" minWidth="10.0" prefWidth="132.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="133.0" minWidth="10.0" prefWidth="125.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="181.0" minWidth="10.0" prefWidth="132.0" />
               </columnConstraints>
               <rowConstraints>
                  <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
               </rowConstraints>
               <children>
-                  <Button mnemonicParsing="false" onAction="#refreshBtnPressed" text="Refresh" GridPane.columnIndex="1">
+                  <Button fx:id="refreshBtn" maxHeight="50.0" maxWidth="125.0" mnemonicParsing="false" onAction="#refreshBtnPressed" GridPane.columnIndex="1">
                     <GridPane.margin>
-                        <Insets left="10.0" right="10.0" />
+                        <Insets />
                     </GridPane.margin></Button>
-                  <Button mnemonicParsing="false" onAction="#addConnectionPressed" text="Add">
+                  <Button fx:id="addBtn" maxHeight="50.0" maxWidth="125.0" mnemonicParsing="false" onAction="#addConnectionPressed">
                     <GridPane.margin>
-                        <Insets left="20.0" />
+                        <Insets />
                     </GridPane.margin></Button>
                  <VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0" spacing="8.0" GridPane.columnIndex="2">
                     <children>
-                        <Button fx:id="joinGameBtn" mnemonicParsing="false" onAction="#connectParticipate" text="Participate!" />
-                        <Button fx:id="spectateButton" mnemonicParsing="false" onAction="#connectSpectate" text="Spectate!" />
+                        <Button fx:id="joinGameBtn" maxHeight="50.0" maxWidth="125.0" mnemonicParsing="false" onAction="#connectParticipate" prefHeight="50.0" prefWidth="125.0" />
+                        <Button fx:id="spectateButton" maxHeight="50.0" maxWidth="125.0" mnemonicParsing="false" onAction="#connectSpectate" prefHeight="50.0" prefWidth="125.0" />
                     </children>
                  </VBox>
               </children>
            </GridPane>
-            <Button mnemonicParsing="false" onAction="#menuBtnPressed" text="Main Menu">
+            <Button fx:id="mainMenuBtn" maxHeight="50.0" maxWidth="125.0" mnemonicParsing="false" onAction="#menuBtnPressed">
               <GridPane.margin>
                  <Insets left="50.0" />
               </GridPane.margin>
@@ -5,94 +5,60 @@
 <?import javafx.scene.image.*?>
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.text.*?>
+<?import java.lang.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
 <?import javafx.scene.control.RadioButton?>
-<?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.text.Font?>
-<?import javafx.scene.text.Text?>

 <AnchorPane fx:id="titleWrapper" maxHeight="600.0" maxWidth="800.0" minHeight="600.0" minWidth="800.0" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="visualiser.Controllers.TitleController">
   <children>
-      <GridPane layoutY="39.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+      <GridPane fx:id="view3DContainer" prefHeight="600.0" prefWidth="800.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <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 layoutY="39.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+        <columnConstraints>
+          <ColumnConstraints hgrow="SOMETIMES" maxWidth="318.0" minWidth="10.0" prefWidth="245.0" />
+            <ColumnConstraints hgrow="SOMETIMES" maxWidth="301.0" minWidth="10.0" prefWidth="301.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 maxHeight="175.0" minHeight="10.0" prefHeight="173.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="96.0" minHeight="10.0" prefHeight="27.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
-            <Pane prefHeight="20.0" prefWidth="20.0" style="-fx-background-color: #0061ff;" GridPane.columnSpan="4" GridPane.rowIndex="4" GridPane.rowSpan="2">
-               <children>
-                  <Text fx:id="txtTitle" layoutX="167.0" layoutY="136.0" strokeType="OUTSIDE" strokeWidth="0.0" text="The Boat Game!">
-                     <font>
-                        <Font name="Comic Sans MS" size="64.0" />
-                     </font>
-                  </Text>
-                  <Text layoutX="690.0" layoutY="80.0" strokeType="OUTSIDE" strokeWidth="0.0" text="TM">
-                     <font>
-                        <Font name="Comic Sans MS" size="12.0" />
-                     </font>
-                  </Text>
-                  <RadioButton fx:id="nightModeRD" layoutX="681.0" layoutY="168.0" mnemonicParsing="false" onAction="#setNightMode" text="Night Mode" />
-                  <RadioButton fx:id="dayModeRD" layoutX="574.0" layoutY="168.0" mnemonicParsing="false" onAction="#setDayMode" selected="true" text="Day Mode" />
-                  <Button layoutX="28.0" layoutY="152.0" mnemonicParsing="false" onAction="#showControls" text="Controls" />
-               </children>
-            </Pane>
-            <Pane fx:id="menuPane" prefHeight="20.0" prefWidth="20.0" style="-fx-background-color: #6be6ff;" GridPane.columnSpan="4" GridPane.rowSpan="4">
-               <children>
-                  <ImageView fx:id="imgBoat" fitHeight="404.0" fitWidth="296.0" layoutX="268.0" pickOnBounds="true" preserveRatio="true">
-                     <image>
-                        <Image url="@../images/boat.png" />
-                     </image>
-                  </ImageView>
-                  <ImageView fx:id="imgCloud1" fitHeight="291.0" fitWidth="307.0" pickOnBounds="true" preserveRatio="true">
-                     <image>
-                        <Image url="@../images/cloud.png" />
-                     </image>
-                  </ImageView>
-                  <ImageView fx:id="imgWhale" fitHeight="113.0" fitWidth="98.0" layoutX="69.0" layoutY="302.0" pickOnBounds="true" preserveRatio="true">
-                     <image>
-                        <Image url="@../images/whale.png" />
-                     </image>
-                  </ImageView>
-                  <ImageView fx:id="imgCloud2" fitHeight="291.0" fitWidth="307.0" layoutX="501.0" pickOnBounds="true" preserveRatio="true">
-                     <image>
-                        <Image url="@../images/cloud.png" />
-                     </image>
-                  </ImageView>
-                  <ImageView fx:id="imgSun" fitHeight="154.0" fitWidth="145.0" layoutX="701.0" layoutY="-39.0" pickOnBounds="true" preserveRatio="true">
-                     <image>
-                        <Image url="@../images/sun.png" />
-                     </image>
-                  </ImageView>
-                  <Button fx:id="btnJoin" layoutX="78.0" layoutY="149.0" mnemonicParsing="false" onAction="#joinAGame" prefHeight="31.0" prefWidth="130.0" text="Join a Game">
-                     <font>
-                        <Font name="Comic Sans MS Bold" size="16.0" />
-                     </font>
-                  </Button>
-                  <Button layoutX="578.0" layoutY="150.0" mnemonicParsing="false" onAction="#hostAGame" prefHeight="31.0" prefWidth="130.0" text="Host a Game">
-                     <font>
-                        <Font name="Comic Sans MS Bold" size="16.0" />
-                     </font>
-                  </Button>
-                  <Label fx:id="tutorialLabel" alignment="CENTER" layoutX="94.0" layoutY="223.0" onMouseClicked="#tutorialStartPressed" prefHeight="167.0" prefWidth="206.0" style="-fx-shape: &quot;M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0 M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 45.673,53.505 C 66.522,53.505 83.484,42.002 83.484,27.862 C 83.484,13.722 66.522,2.22 45.673,2.22 L 45.673,2.22 z &quot;; -fx-background-color: black, white; -fx-background-insets: 0,1; -fx-padding: 50;" text="How do you play this game? Click here!" textAlignment="CENTER" wrapText="true" />
-               </children>
-            </Pane>
+            <Button fx:id="btnJoin" maxHeight="80.0" maxWidth="200.0" mnemonicParsing="false" onAction="#joinAGame" GridPane.halignment="RIGHT" GridPane.rowIndex="2">
+               <font>
+                  <Font name="System Font" size="13.0" />
+               </font>
+            </Button>
+            <Button fx:id="controlsBtn" maxHeight="80.0" maxWidth="200.0" mnemonicParsing="false" onAction="#showControls" GridPane.halignment="RIGHT" GridPane.rowIndex="4" />
+            <Button fx:id="tutorialButton" maxHeight="80.0" maxWidth="200.0" mnemonicParsing="false" onAction="#tutorialStartPressed" GridPane.halignment="RIGHT" GridPane.rowIndex="3" />
+            <Button fx:id="hostAGameBtn" maxHeight="80.0" maxWidth="200.0" mnemonicParsing="false" onAction="#hostAGame" GridPane.halignment="RIGHT" GridPane.rowIndex="1" />
+            <RadioButton fx:id="nightModeRD" mnemonicParsing="false" onAction="#setNightMode" text="Night Mode" textFill="WHITE" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="5" />
+            <RadioButton fx:id="dayModeRD" mnemonicParsing="false" onAction="#setDayMode" selected="true" text="Day Mode" textFill="WHITE" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="5" />
+            <Label text="Smooth Sailing" textFill="WHITE" GridPane.columnSpan="2" GridPane.halignment="RIGHT">
+               <font>
+                  <Font name="Futura Medium Italic" size="72.0" />
+               </font>
+            </Label>
         </children>
      </GridPane>
   </children>