Created a slider on the Host Game screen.

- slider has min and max minutes
- a label is updated as the slider is moved
- the value of the slider selection is saved
- slider resizes appropriately with the window

#story[1323]

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

@@ -4,6 +4,8 @@ import javafx.application.Platform;
 import javafx.fxml.FXML;
 import javafx.scene.control.Alert;
 import javafx.scene.control.ButtonType;
+import javafx.scene.control.Label;
+import javafx.scene.control.Slider;
 import javafx.scene.image.Image;
 import javafx.scene.image.ImageView;
 import mock.app.Event;
@@ -28,8 +30,12 @@ import java.util.logging.Logger;
  */
 public class HostGameController extends Controller {
     private @FXML ImageView mapImage;
+    private @FXML Slider sliderLength;
+    private @FXML Label lblLength;
     private ArrayList<Image> listOfMaps;
     private int currentMapIndex = 0;
+    private int selectedRaceLength; // in minutes
+    private final int MAX_RACE_LENGTH = 30; // in minutes
     private DatagramSocket udpSocket;
     private MatchBrowserInterface matchBrowserInterface;
 
@@ -37,8 +43,31 @@ public class HostGameController extends Controller {
         loadMaps();
         this.udpSocket = MatchBrowserSingleton.getInstance().getUdpSocket();
         this.matchBrowserInterface = MatchBrowserSingleton.getInstance().getMatchBrowserInterface();
+        setRaceLengthSlider();
     }
 
+    /**
+     * Sets up the values and display for a slider object which allows a user
+     * to select how many minutes long they would like their race to be.
+     */
+    private void setRaceLengthSlider(){
+        // set the listener to update the label
+        sliderLength.valueProperty().addListener((ov, old_val, new_val) -> {
+            selectedRaceLength = new_val.intValue();
+            if (selectedRaceLength == 1){
+                lblLength.setText(selectedRaceLength + " minute.");
+            } else {
+                lblLength.setText(selectedRaceLength + " minutes.");
+            }
+        });
+
+        // set values and marks to be displayed
+        sliderLength.setMin(1);
+        sliderLength.setMax(MAX_RACE_LENGTH);
+        sliderLength.setShowTickLabels(true);
+        sliderLength.setMajorTickUnit(MAX_RACE_LENGTH-1);
+        sliderLength.setBlockIncrement(1);
+    }
 
 
     /**

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

@@ -3,6 +3,7 @@
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
+<?import javafx.scene.control.Slider?>
 <?import javafx.scene.image.ImageView?>
 <?import javafx.scene.layout.AnchorPane?>
 <?import javafx.scene.layout.ColumnConstraints?>
@@ -12,19 +13,20 @@
 
 <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.HostGameController">
     <children>
-        <GridPane layoutY="14.0" AnchorPane.bottomAnchor="-14.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="14.0">
+        <GridPane layoutY="14.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
             <columnConstraints>
-                <ColumnConstraints hgrow="SOMETIMES" maxWidth="170.0" minWidth="10.0" prefWidth="170.0" />
+                <ColumnConstraints hgrow="NEVER" prefWidth="170.0" />
-                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                <ColumnConstraints hgrow="NEVER" prefWidth="100.0" />
-                <ColumnConstraints hgrow="SOMETIMES" maxWidth="170.0" minWidth="10.0" prefWidth="170.0" />
+                <ColumnConstraints hgrow="NEVER" prefWidth="170.0" />
             </columnConstraints>
             <rowConstraints>
-                <RowConstraints maxHeight="60.0" minHeight="60.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                <RowConstraints prefHeight="50.0" vgrow="NEVER" />
-                <RowConstraints minHeight="10.0" prefHeight="435.0" vgrow="SOMETIMES" />
+                <RowConstraints prefHeight="419.5" vgrow="NEVER" />
-                <RowConstraints maxHeight="80.0" minHeight="80.0" prefHeight="80.0" vgrow="SOMETIMES" />
+            <RowConstraints prefHeight="50.0" vgrow="NEVER" />
+                <RowConstraints prefHeight="80.0" vgrow="NEVER" />
             </rowConstraints>
             <children>
-                <Button fx:id="hostGameBtn" mnemonicParsing="false" onAction="#hostGamePressed" text="Start Game" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2" GridPane.valignment="CENTER">
+                <Button fx:id="hostGameBtn" mnemonicParsing="false" onAction="#hostGamePressed" text="Start Game" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER">
                     <font>
                         <Font size="20.0" />
                     </font>
@@ -50,6 +52,16 @@
                 <ImageView fx:id="mapImage" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS" />
                 <Button fx:id="previousButton" maxHeight="80.0" maxWidth="80.0" mnemonicParsing="false" onAction="#previousImage" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
                 <Button fx:id="nextButton" maxHeight="80.0" maxWidth="80.0" mnemonicParsing="false" onAction="#nextImage" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
+            <Slider fx:id="sliderLength" prefHeight="14.0" prefWidth="100.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2">
+               <GridPane.margin>
+                  <Insets left="50.0" right="50.0" />
+               </GridPane.margin>
+            </Slider>
+            <Label fx:id="lblLength" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="2" GridPane.valignment="BOTTOM">
+               <GridPane.margin>
+                  <Insets />
+               </GridPane.margin>
+            </Label>
             </children>
         </GridPane>
     </children>