Merge branch 'story86-3D' into 'master'

Story86 3D

Provide a 3D view for the lobby to view boats.

Acceptance Criteria:
- Mesh is loaded from file and is displayed rotating at a reasonable turn rate.
- 3D view can be used as a JavaFX node with no coupling to model.

See merge request !33

racevisionGame/pom.xml

@@ -46,14 +46,17 @@
             <version>15.0</version>
         </dependency>
 
-
-
         <dependency>
             <groupId>org.geotools</groupId>
             <artifactId>gt-referencing</artifactId>
             <version>9.0</version>
         </dependency>
 
+        <dependency>
+            <groupId>JavaInteractiveMesh</groupId>
+            <artifactId>STLImporter</artifactId>
+            <version>0.7</version>
+        </dependency>
 
     </dependencies>
 
@@ -72,7 +75,11 @@
             <url>http://download.osgeo.org/webdav/geotools/</url>
         </repository>
 
-
+        <repository>
+            <id>interactivemesh</id>
+            <name>Interactive Mesh</name>
+            <url>http://umbrasheep.com:8888/repository/internal/</url>
+        </repository>
 
 
     </repositories>

racevisionGame/src/main/java/visualiser/Controllers/HostController.java

@@ -1,21 +1,29 @@
 package visualiser.Controllers;
 
+import com.interactivemesh.jfx.importer.stl.StlMeshImporter;
+import javafx.animation.AnimationTimer;
+import javafx.collections.FXCollections;
+import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
-import javafx.scene.control.TextField;
+import javafx.scene.control.Alert;
+import javafx.scene.control.ButtonType;
+import javafx.scene.control.SplitPane;
+import javafx.scene.image.ImageView;
 import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.GridPane;
+import javafx.scene.shape.Box;
+import javafx.scene.shape.Mesh;
+import javafx.scene.shape.MeshView;
+import javafx.scene.shape.Shape3D;
+import javafx.scene.transform.Rotate;
 import mock.app.Event;
-import org.xml.sax.SAXException;
 import mock.exceptions.EventConstructionException;
-import shared.exceptions.InvalidBoatDataException;
+import visualiser.model.View3D;
-import shared.exceptions.InvalidRaceDataException;
-import shared.exceptions.InvalidRegattaDataException;
-import shared.exceptions.XMLReaderException;
 
-import javax.xml.bind.JAXBException;
-import javax.xml.parsers.ParserConfigurationException;
 import java.io.IOException;
 import java.net.Socket;
 import java.net.URL;
+import java.util.Optional;
 import java.util.ResourceBundle;
 import java.util.logging.Level;
 import java.util.logging.Logger;
@@ -26,27 +34,70 @@ import java.util.logging.Logger;
 public class HostController extends Controller {
 
 
-    @FXML
+//    @FXML
-    TextField gameNameField;
+//    TextField gameNameField;
+//
+//    @FXML
+//    TextField hostNameField;
 
     @FXML
-    TextField hostNameField;
+    private ImageView imageView;
 
     @FXML
     AnchorPane hostWrapper;
 
+    @FXML
+    AnchorPane imagePane;
+
+    @FXML
+    SplitPane splitPane;
+
+    @FXML
+    AnchorPane specPane;
+
+    @FXML
+    GridPane playerContainer;
+
     private Event game;
 
+    private View3D view3D;
 
     @Override
     public void initialize(URL location, ResourceBundle resources) {
+        ObservableList<Shape3D> shapes = FXCollections.observableArrayList();
+
+        view3D = new View3D();
+        view3D.setItems(shapes);
+        playerContainer.add(view3D, 0,0);
+
+        URL asset = HostController.class.getClassLoader().getResource("assets/V1.2 Complete Boat.stl");
+
+        StlMeshImporter importer = new StlMeshImporter();
+        importer.read(asset);
+        MeshView mesh = new MeshView(importer.getImport());
+        shapes.add(mesh);
+
+        view3D.setPivot(mesh);
+        view3D.setDistance(50);
+        view3D.setYaw(45);
+        view3D.setPitch(20);
+
+        Rotate rotation = new Rotate(0, Rotate.Y_AXIS);
+        mesh.getTransforms().addAll(rotation, new Rotate(-90, Rotate.X_AXIS));
+
+        AnimationTimer rotate = new AnimationTimer() {
+            @Override
+            public void handle(long now) {
+                rotation.setAngle(rotation.getAngle() + 0.1);
+            }
+        };
+        rotate.start();
     }
 
     /**
      * Hosts a game
-     * @throws IOException if socket cannot be connected to
      */
-    public void hostGamePressed() throws IOException{
+    public void hostGamePressed() {
         try {
             this.game = new Event(false);
             connectSocket("localhost", 4942);
@@ -81,12 +132,34 @@ public class HostController extends Controller {
      * Hosts a game.
      */
     public void hostGame(){
+        splitPane.setResizableWithParent(specPane, false);
+        splitPane.lookupAll(".split-pane-divider").stream().forEach(div -> div.setMouseTransparent(true));
+        imageView.fitWidthProperty().bind(imagePane.widthProperty());
+        imageView.fitHeightProperty().bind(imagePane.heightProperty());
         hostWrapper.setVisible(true);
     }
 
+    /**
+     * Menu button pressed. Prompt alert then return to menu
+     */
     public void menuBtnPressed(){
+        Alert alert = new Alert(Alert.AlertType.CONFIRMATION);
+        alert.setTitle("Quitting race");
+        alert.setContentText("Do you wish to quit the race?");
+        alert.setHeaderText("You are about to quit the race");
+        Optional<ButtonType> result = alert.showAndWait();
+        if(result.get() == ButtonType.OK){
             hostWrapper.setVisible(false);
             parent.enterTitle();
         }
+    }
+
+    /**
+     * Start button pressed. Currently only prints out start
+     */
+    public void startBtnPressed(){
+        //System.out.println("Should start the race. This button is only visible for the host");
+        hostGamePressed();
+    }
 
 }

racevisionGame/src/main/java/visualiser/Controllers/LobbyController.java

@@ -21,7 +21,7 @@ import java.util.ResourceBundle;
 public class LobbyController extends Controller {
 
     @FXML
-    AnchorPane lobbyWrapper;
+    private AnchorPane lobbyWrapper;
     @FXML
     private TableView<RaceConnection> lobbyTable;
     @FXML

racevisionGame/src/main/java/visualiser/Controllers/RaceController.java

@@ -356,7 +356,7 @@ public class RaceController extends Controller {
     private void initialiseRaceCanvas(VisualiserRaceEvent race) {
 
         //Create canvas.
-        raceCanvas = new ResizableRaceCanvas(race);
+        raceCanvas = new ResizableRaceCanvas(race.getVisualiserRaceState());
 
         //Set properties.
         raceCanvas.setMouseTransparent(true);

racevisionGame/src/main/java/visualiser/Controllers/TitleController.java

@@ -81,7 +81,6 @@ public class TitleController extends Controller {
 
     @Override
     public void initialize(URL location, ResourceBundle resources) {
-
     }
 
     /**

racevisionGame/src/main/java/visualiser/app/App.java

@@ -96,15 +96,15 @@ public class App extends Application {
                         );
 
                 updateMessage("Preparing ingredients . . .");
-                Thread.sleep(1000);
+                Thread.sleep(200);
                 for (int i = 0; i < burgerFilling.size(); i++) {
-                    Thread.sleep(800);
+                    Thread.sleep(100);
                     updateProgress(i + 1, burgerFilling.size());
                     String nextFilling = burgerFilling.get(i);
                     addedFilling.add(nextFilling);
                     updateMessage("Adding the " + nextFilling + " . . .");
                 }
-                Thread.sleep(400);
+                Thread.sleep(100);
                 updateMessage("Burger's done!");
 
                 return addedFilling;

racevisionGame/src/main/java/visualiser/model/BoatDisplay3D.java

@@ -0,0 +1,18 @@
+package visualiser.model;
+
+import com.interactivemesh.jfx.importer.Importer;
+import javafx.scene.layout.Pane;
+
+/**
+ * Created by fwy13 on 29/08/17.
+ */
+public class BoatDisplay3D extends Pane {
+
+
+    public BoatDisplay3D(String filePath){
+        super();
+//        Shape3D
+//        this.getChildren().add();
+    }
+
+}

racevisionGame/src/main/java/visualiser/model/ResizableRaceCanvas.java

@@ -39,9 +39,9 @@ public class ResizableRaceCanvas extends ResizableCanvas {
     private Image sailsLuff = new Image("/images/sailsLuff.gif", 25, 10, false, false);
 
     /**
-     * The race we read data from and draw.
+     * The race state we read data from and draw.
      */
-    private VisualiserRaceEvent visualiserRace;
+    private VisualiserRaceState raceState;
 
 
     private boolean annoName = true;
@@ -56,14 +56,14 @@ public class ResizableRaceCanvas extends ResizableCanvas {
 
     /**
      * Constructs a {@link ResizableRaceCanvas} using a given {@link VisualiserRaceEvent}.
-     * @param visualiserRace The race that data is read from in order to be drawn.
+     * @param raceState The race state to be drawn.
      */
-    public ResizableRaceCanvas(VisualiserRaceEvent visualiserRace) {
+    public ResizableRaceCanvas(VisualiserRaceState raceState) {
         super();
 
-        this.visualiserRace = visualiserRace;
+        this.raceState = raceState;
 
-        RaceDataSource raceData = visualiserRace.getVisualiserRaceState().getRaceDataSource();
+        RaceDataSource raceData = raceState.getRaceDataSource();
 
         double lat1 = raceData.getMapTopLeft().getLatitude();
         double long1 = raceData.getMapTopLeft().getLongitude();
@@ -276,8 +276,8 @@ public class ResizableRaceCanvas extends ResizableCanvas {
                 boat.getCountry(),
                 boat.getCurrentSpeed(),
                 this.map.convertGPS(boat.getPosition()),
-                boat.getTimeToNextMarkFormatted(this.visualiserRace.getVisualiserRaceState().getRaceClock().getCurrentTime()),
+                boat.getTimeToNextMarkFormatted(raceState.getRaceClock().getCurrentTime()),
-                boat.getTimeSinceLastMarkFormatted(this.visualiserRace.getVisualiserRaceState().getRaceClock().getCurrentTime()),
+                boat.getTimeSinceLastMarkFormatted(raceState.getRaceClock().getCurrentTime()),
                 Color.BLACK,
                 20  );
 
@@ -291,7 +291,7 @@ public class ResizableRaceCanvas extends ResizableCanvas {
      */
     private void drawBoats() {
 
-        List<VisualiserBoat> boats = new ArrayList<>(visualiserRace.getVisualiserRaceState().getBoats());
+        List<VisualiserBoat> boats = new ArrayList<>(raceState.getBoats());
         //Sort to ensure we draw boats in consistent order.
         boats.sort(Comparator.comparingInt(Boat::getSourceID));
 
@@ -510,7 +510,7 @@ public class ResizableRaceCanvas extends ResizableCanvas {
      */
     private void drawMarks() {
 
-        for (Mark mark : new ArrayList<>(visualiserRace.getVisualiserRaceState().getMarks())) {
+        for (Mark mark : new ArrayList<>(raceState.getMarks())) {
             drawMark(mark);
         }
     }
@@ -574,7 +574,7 @@ public class ResizableRaceCanvas extends ResizableCanvas {
 
 
         //Calculate the screen coordinates of the boundary.
-        List<GPSCoordinate> boundary = new ArrayList<>(visualiserRace.getVisualiserRaceState().getBoundary());
+        List<GPSCoordinate> boundary = new ArrayList<>(raceState.getBoundary());
         double[] xpoints = new double[boundary.size()];
         double[] ypoints = new double[boundary.size()];
 
@@ -601,8 +601,8 @@ public class ResizableRaceCanvas extends ResizableCanvas {
     public void drawRace() {
 
         //Update RaceMap with new GPS values of race.
-        this.map.setGPSTopLeft(visualiserRace.getVisualiserRaceState().getRaceDataSource().getMapTopLeft());
+        this.map.setGPSTopLeft(raceState.getRaceDataSource().getMapTopLeft());
-        this.map.setGPSBotRight(visualiserRace.getVisualiserRaceState().getRaceDataSource().getMapBottomRight());
+        this.map.setGPSBotRight(raceState.getRaceDataSource().getMapBottomRight());
 
 
         clear();
@@ -627,7 +627,7 @@ public class ResizableRaceCanvas extends ResizableCanvas {
      * draws a transparent line around the course that shows the paths boats must travel
      */
     public void drawRaceLine(){
-        List<Leg> legs = this.visualiserRace.getVisualiserRaceState().getLegs();
+        List<Leg> legs = raceState.getLegs();
         GPSCoordinate legStartPoint = legs.get(0).getStartCompoundMark().getAverageGPSCoordinate();
         GPSCoordinate nextStartPoint;
         for (int i = 0; i < legs.size() -1; i++) {

racevisionGame/src/main/java/visualiser/model/View3D.java

@@ -0,0 +1,145 @@
+package visualiser.model;
+
+import javafx.collections.ListChangeListener;
+import javafx.collections.ObservableList;
+import javafx.scene.Group;
+import javafx.scene.PerspectiveCamera;
+import javafx.scene.SubScene;
+import javafx.scene.layout.Pane;
+import javafx.scene.paint.Color;
+import javafx.scene.shape.Shape3D;
+import javafx.scene.transform.Rotate;
+import javafx.scene.transform.Translate;
+
+/**
+ * Control for rendering 3D objects visible through a PerspectiveCamera. Implements Adapter Pattern to
+ * interface with camera, and allows clients to add shapes to the scene. All scenes contain sea plane and
+ * sky box, whose textures are set with special methods.
+ */
+public class View3D extends Pane {
+    /**
+     * Observable list of renderable items
+     */
+    private ObservableList<Shape3D> items;
+    /**
+     * Rendering container for shapes
+     */
+    private Group world;
+    /**
+     * Near limit of view frustum
+     */
+    private double nearClip;
+    /**
+     * Far limit of view frustum
+     */
+    private double farClip;
+    /**
+     * Position camera pivots around
+     */
+    private Translate pivot;
+    /**
+     * Distance of camera from pivot point
+     */
+    private Translate distance;
+    /**
+     * Angle along ground between z-axis and camera
+     */
+    private Rotate yaw;
+    /**
+     * Angle between ground plane and camera direction
+     */
+    private Rotate pitch;
+
+    /**
+     * Default constructor for View3D. Sets up Scene and PerspectiveCamera.
+     */
+    public View3D() {
+        world = new Group();
+
+        SubScene scene = new SubScene(world, 300, 300);
+        scene.widthProperty().bind(this.widthProperty());
+        scene.heightProperty().bind(this.heightProperty());
+        scene.setFill(Color.BLACK);
+
+        scene.setCamera(buildCamera());
+
+        this.getChildren().add(scene);
+    }
+
+    /**
+     * Sets up camera view frustum and binds transformations
+     * @return perspective camera
+     */
+    private PerspectiveCamera buildCamera() {
+        PerspectiveCamera camera = new PerspectiveCamera(true);
+
+        // Set up view frustum
+        nearClip = 0.1;
+        farClip = 1000.0;
+        camera.setNearClip(nearClip);
+        camera.setFarClip(farClip);
+
+        // Set up transformations
+        pivot = new Translate();
+        distance = new Translate();
+        yaw = new Rotate(0, Rotate.Y_AXIS);
+        pitch = new Rotate(0, Rotate.X_AXIS);
+        camera.getTransforms().addAll(pivot, yaw, pitch, distance);
+
+        return camera;
+    }
+
+    public void setItems(ObservableList<Shape3D> items) {
+        this.items = items;
+        this.items.addListener((ListChangeListener<? super Shape3D>) c -> {
+            while(c.next()) {
+                if (c.wasRemoved() || c.wasAdded()) {
+                    for (Shape3D shape : c.getRemoved()) world.getChildren().remove(shape);
+                    for (Shape3D shape : c.getAddedSubList()) world.getChildren().add(shape);
+                }
+            }
+        });
+    }
+
+    public void setNearClip(double nearClip) {
+        this.nearClip = nearClip;
+    }
+
+    public void setFarClip(double farClip) {
+        this.farClip = farClip;
+    }
+
+    /**
+     * Set object to centre on camera
+     * @param pivot centred object
+     */
+    public void setPivot(Shape3D pivot) {
+        this.pivot.setX(pivot.getTranslateX());
+        this.pivot.setY(pivot.getTranslateY());
+        this.pivot.setZ(pivot.getTranslateZ());
+    }
+
+    /**
+     * Set distance of camera from pivot
+     * @param distance in units
+     */
+    public void setDistance(double distance) {
+        this.distance.setZ(-distance);
+    }
+
+    /**
+     * Set angle of camera from z-axis along ground
+     * @param yaw in degrees
+     */
+    public void setYaw(double yaw) {
+        this.yaw.setAngle(yaw);
+    }
+
+    /**
+     * Set elevation of camera
+     * @param pitch in degrees
+     */
+    public void setPitch(double pitch) {
+        this.pitch.setAngle(-pitch);
+    }
+}

racevisionGame/src/main/resources/visualiser/scenes/hostgame.fxml

@@ -1,40 +1,44 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<!--<?xml version="1.0" encoding="UTF-8"?>-->
 
-<?import javafx.scene.control.Button?>
+<!--<?import java.lang.*?>-->
-<?import javafx.scene.control.Label?>
+<!--<?import javafx.scene.control.*?>-->
-<?import javafx.scene.layout.*?>
+<!--<?import javafx.scene.text.*?>-->
-<?import javafx.scene.text.Font?>
+<!--<?import javafx.scene.control.Button?>-->
-<AnchorPane fx:id="hostWrapper" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="780.0" visible="false" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="visualiser.Controllers.HostController">
+<!--<?import javafx.scene.control.Label?>-->
-   <children>
+<!--<?import javafx.scene.layout.*?>-->
-      <GridPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+<!--<?import javafx.scene.text.Font?>-->
-        <columnConstraints>
+
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+<!--<AnchorPane fx:id="hostWrapper" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="780.0" visible="false" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">-->
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+   <!--<children>-->
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+      <!--<GridPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">-->
-        </columnConstraints>
+        <!--<columnConstraints>-->
-        <rowConstraints>
+            <!--<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />-->
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+          <!--<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />-->
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+          <!--<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />-->
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+        <!--</columnConstraints>-->
-        </rowConstraints>
+        <!--<rowConstraints>-->
-         <children>
+          <!--<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />-->
-            <Button fx:id="hostGameBtn" mnemonicParsing="false" onAction="#hostGamePressed" text="Start Game" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2">
+          <!--<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />-->
-               <font>
+          <!--<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />-->
-                  <Font size="20.0" />
+        <!--</rowConstraints>-->
-               </font>
+         <!--<children>-->
-            </Button>
+            <!--<Button fx:id="hostGameBtn" mnemonicParsing="false" onAction="#hostGamePressed" text="Start Game" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2">-->
-            <Label text="Address: 127.0.0.1" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP">
+               <!--<font>-->
-               <font>
+                  <!--<Font size="20.0" />-->
-                  <Font size="17.0" />
+               <!--</font>-->
-               </font>
+            <!--</Button>-->
-            </Label>
+            <!--<Label text="Address: 127.0.0.1" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP">-->
-            <Label text="Port: 4942" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1">
+               <!--<font>-->
-               <font>
+                  <!--<Font size="17.0" />-->
-                  <Font size="17.0" />
+               <!--</font>-->
-               </font>
+            <!--</Label>-->
-            </Label>
+            <!--<Label text="Port: 4942" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1">-->
-            <Button mnemonicParsing="false" onAction="#menuBtnPressed" text="Main Menu" GridPane.halignment="CENTER" />
+               <!--<font>-->
-         </children>
+                  <!--<Font size="17.0" />-->
-      </GridPane>
+               <!--</font>-->
-   </children>
+            <!--</Label>-->
-</AnchorPane>
+            <!--<Button mnemonicParsing="false" onAction="#menuBtnPressed" text="Main Menu" GridPane.halignment="CENTER" />-->
+         <!--</children>-->
+      <!--</GridPane>-->
+   <!--</children>-->
+<!--</AnchorPane>-->

racevisionGame/src/main/resources/visualiser/scenes/hostlobby.fxml

@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.SplitPane?>
+<?import javafx.scene.control.TableColumn?>
+<?import javafx.scene.control.TableView?>
+<?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.RowConstraints?>
+<?import javafx.scene.text.Font?>
+
+<AnchorPane fx:id="hostWrapper" 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.HostController">
+   <children>
+      <SplitPane fx:id="splitPane" dividerPositions="0.7724935732647815" layoutX="580.0" layoutY="129.0" prefHeight="160.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+        <items>
+          <AnchorPane fx:id="imagePane" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
+               <children>
+                  <ImageView fx:id="imageView" fitHeight="376.0" fitWidth="597.0" nodeOrientation="INHERIT" pickOnBounds="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+                     <image>
+                        <Image url="@../images/lobby.gif" />
+                     </image></ImageView>
+                  <GridPane style="-fx-background-color: rgba(0, 0, 0, 0.5);" 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 hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                      <RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" prefHeight="173.0" vgrow="SOMETIMES" />
+                      <RowConstraints maxHeight="50.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                    </rowConstraints>
+                     <children>
+                        <Button mnemonicParsing="false" onAction="#menuBtnPressed" text="Quit" GridPane.rowIndex="2">
+                           <GridPane.margin>
+                              <Insets left="20.0" />
+                           </GridPane.margin>
+                        </Button>
+                        <Button alignment="CENTER_RIGHT" contentDisplay="RIGHT" mnemonicParsing="false" onAction="#startBtnPressed" text="Start Game" GridPane.columnIndex="2" GridPane.halignment="RIGHT" GridPane.rowIndex="2">
+                           <GridPane.margin>
+                              <Insets right="20.0" />
+                           </GridPane.margin>
+                        </Button>
+                        <Label alignment="CENTER" contentDisplay="CENTER" text="Map: MapNameHere" textFill="WHITE" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2">
+                           <font>
+                              <Font size="16.0" />
+                           </font>
+                        </Label>
+                        <GridPane fx:id="playerContainer" GridPane.columnSpan="3" 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>
+                          <rowConstraints>
+                            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                          </rowConstraints>
+                        </GridPane>
+                     </children>
+                  </GridPane>
+                  <Label alignment="TOP_CENTER" text="Get Ready For The Next Race" textFill="#fffdfd" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="20.0">
+                     <font>
+                        <Font size="22.0" />
+                     </font>
+                  </Label>
+               </children>
+            </AnchorPane>
+          <AnchorPane fx:id="specPane" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
+               <children>
+                  <TableView prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: rgba(60, 60, 60, 1);" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+                    <columns>
+                      <TableColumn prefWidth="173.0" text="Spectators" />
+                    </columns>
+                     <columnResizePolicy>
+                        <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
+                     </columnResizePolicy>
+                  </TableView>
+               </children>
+            </AnchorPane>
+        </items>
+      </SplitPane>
+   </children>
+</AnchorPane>

racevisionGame/src/main/resources/visualiser/scenes/main.fxml

@@ -7,7 +7,7 @@
         <fx:include fx:id="start" source="start.fxml" />
         <fx:include fx:id="connection" source="connect.fxml" />
         <fx:include fx:id="finish" source="finish.fxml" />
-        <fx:include fx:id="host" source="hostgame.fxml" />
+        <fx:include fx:id="host" source="hostlobby.fxml" />
         <fx:include fx:id="title" source="titleScreen.fxml" />
         <fx:include fx:id="lobby" source="lobby.fxml" />
     </children>

racevisionGame/src/main/resources/visualiser/scenes/title.fxml

@@ -1,61 +1,61 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<!--<?xml version="1.0" encoding="UTF-8"?>-->
 
-<?import javafx.geometry.*?>
+<!--<?import javafx.geometry.*?>-->
-<?import javafx.scene.control.*?>
+<!--<?import javafx.scene.control.*?>-->
-<?import javafx.scene.layout.*?>
+<!--<?import javafx.scene.layout.*?>-->
-<?import javafx.scene.text.Font?>
+<!--<?import javafx.scene.text.Font?>-->
-<AnchorPane fx:id="connectionWrapper" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="780.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="visualiser.Controllers.ConnectionController">
+<!--<AnchorPane fx:id="connectionWrapper" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="780.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="visualiser.Controllers.ConnectionController">-->
-   <children>
+   <!--<children>-->
-      <GridPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
+      <!--<GridPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">-->
-        <columnConstraints>
+        <!--<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>
+        <!--</columnConstraints>-->
-        <rowConstraints>
+        <!--<rowConstraints>-->
-          <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 minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+          <!--<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />-->
-        </rowConstraints>
+        <!--</rowConstraints>-->
-         <children>
+         <!--<children>-->
-            <Button fx:id="hostGameTitleBtn" maxWidth="204.0" mnemonicParsing="false" text="Host Game" GridPane.halignment="LEFT" GridPane.rowIndex="1">
+            <!--<Button fx:id="hostGameTitleBtn" maxWidth="204.0" mnemonicParsing="false" text="Host Game" GridPane.halignment="LEFT" GridPane.rowIndex="1">-->
-               <font>
+               <!--<font>-->
-                  <Font size="20.0" />
+                  <!--<Font size="20.0" />-->
-               </font>
+               <!--</font>-->
-               <GridPane.margin>
+               <!--<GridPane.margin>-->
-                  <Insets left="50.0" />
+                  <!--<Insets left="50.0" />-->
-               </GridPane.margin>
+               <!--</GridPane.margin>-->
-            </Button>
+            <!--</Button>-->
-            <Button fx:id="connectGameBtn" maxWidth="204.0" mnemonicParsing="false" text="Connect to Game" GridPane.columnIndex="2" GridPane.halignment="RIGHT" GridPane.rowIndex="1">
+            <!--<Button fx:id="connectGameBtn" maxWidth="204.0" mnemonicParsing="false" text="Connect to Game" GridPane.columnIndex="2" GridPane.halignment="RIGHT" GridPane.rowIndex="1">-->
-               <font>
+               <!--<font>-->
-                  <Font size="20.0" />
+                  <!--<Font size="20.0" />-->
-               </font>
+               <!--</font>-->
-               <GridPane.margin>
+               <!--<GridPane.margin>-->
-                  <Insets right="50.0" />
+                  <!--<Insets right="50.0" />-->
-               </GridPane.margin>
+               <!--</GridPane.margin>-->
-            </Button>
+            <!--</Button>-->
-            <RadioButton fx:id="nightRadioBtn" mnemonicParsing="false" text="Night Mode" GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.rowIndex="2">
+            <!--<RadioButton fx:id="nightRadioBtn" mnemonicParsing="false" text="Night Mode" GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.rowIndex="2">-->
-               <padding>
+               <!--<padding>-->
-                  <Insets bottom="-50.0" />
+                  <!--<Insets bottom="-50.0" />-->
-               </padding>
+               <!--</padding>-->
-               <GridPane.margin>
+               <!--<GridPane.margin>-->
-                  <Insets left="80.0" />
+                  <!--<Insets left="80.0" />-->
-               </GridPane.margin>
+               <!--</GridPane.margin>-->
-            </RadioButton>
+            <!--</RadioButton>-->
-            <RadioButton fx:id="dayRadioBtn" mnemonicParsing="false" text="Day Mode" GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.rowIndex="2">
+            <!--<RadioButton fx:id="dayRadioBtn" mnemonicParsing="false" text="Day Mode" GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.rowIndex="2">-->
-               <padding>
+               <!--<padding>-->
-                  <Insets top="-50.0" />
+                  <!--<Insets top="-50.0" />-->
-               </padding>
+               <!--</padding>-->
-               <GridPane.margin>
+               <!--<GridPane.margin>-->
-                  <Insets left="80.0" />
+                  <!--<Insets left="80.0" />-->
-               </GridPane.margin>
+               <!--</GridPane.margin>-->
-            </RadioButton>
+            <!--</RadioButton>-->
-            <Label text="Game" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.halignment="CENTER">
+            <!--<Label text="Game" textAlignment="CENTER" GridPane.columnIndex="1" GridPane.halignment="CENTER">-->
-               <font>
+               <!--<font>-->
-                  <Font size="60.0" />
+                  <!--<Font size="60.0" />-->
-               </font>
+               <!--</font>-->
-            </Label>
+            <!--</Label>-->
-         </children>
+         <!--</children>-->
-      </GridPane>
+      <!--</GridPane>-->
-   </children>
+   <!--</children>-->
-</AnchorPane>
+<!--</AnchorPane>-->