From 4f80640718be3862c50f77d630152d8b60f1ce66 Mon Sep 17 00:00:00 2001
From: Haoming Yin <hyi25@uclive.ac.nz>
Date: Thu, 28 Sep 2017 16:33:16 +1300
Subject: [PATCH] Polished raceview UI elements

- changed javaFx css style into Css file

tags: #story[1273]
---
 .../visualiser/controllers/ViewManager.java   |  15 +-
 src/main/resources/css/RaceView.css           |  17 ++
 src/main/resources/views/RaceView.fxml        | 247 ++++++++++--------
 3 files changed, 160 insertions(+), 119 deletions(-)

diff --git a/src/main/java/seng302/visualiser/controllers/ViewManager.java b/src/main/java/seng302/visualiser/controllers/ViewManager.java
index b12a6c52..4ebe0b25 100644
--- a/src/main/java/seng302/visualiser/controllers/ViewManager.java
+++ b/src/main/java/seng302/visualiser/controllers/ViewManager.java
@@ -6,10 +6,16 @@ import com.jfoenix.controls.JFXDialog;
 import com.jfoenix.controls.JFXDialog.DialogTransition;
 import com.jfoenix.controls.JFXSnackbar;
 import com.jfoenix.svg.SVGGlyph;
+import java.io.IOException;
+import java.util.HashMap;
 import javafx.application.Platform;
 import javafx.collections.ObservableList;
 import javafx.fxml.FXMLLoader;
-import javafx.scene.*;
+import javafx.scene.Cursor;
+import javafx.scene.Node;
+import javafx.scene.Parent;
+import javafx.scene.Scene;
+import javafx.scene.SceneAntialiasing;
 import javafx.scene.image.Image;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.StackPane;
@@ -24,9 +30,6 @@ import seng302.visualiser.GameClient;
 import seng302.visualiser.controllers.dialogs.KeyBindingDialogController;
 import seng302.visualiser.controllers.dialogs.PopupDialogController;
 
-import java.io.IOException;
-import java.util.HashMap;
-
 public class ViewManager {
 
     private static ViewManager instance;
@@ -376,8 +379,8 @@ public class ViewManager {
                 scene.setOnKeyPressed(gameClient::keyPressed);
                 scene.setOnKeyReleased(gameClient::keyReleased);
 
-                stage.setMinHeight(500);
-                stage.setMinWidth(800);
+                stage.setMinHeight(800);
+                stage.setMinWidth(1200);
                 stage.setTitle("Party Parrots At Sea");
                 stage.getIcons().add(new Image(getClass().getResourceAsStream("/PP.png")));
                 stage.setOnCloseRequest(e -> closeAll());
diff --git a/src/main/resources/css/RaceView.css b/src/main/resources/css/RaceView.css
index f38216c8..bf98c98b 100644
--- a/src/main/resources/css/RaceView.css
+++ b/src/main/resources/css/RaceView.css
@@ -5,6 +5,7 @@
 #timerGrid{
     -fx-background-color: rgba(255, 255, 255, 0.6);
     -fx-effect: -fx-pp-dropshadow-light;
+    -fx-background-radius: 5;
 }
 
 GridPane .timer * {
@@ -27,20 +28,24 @@ GridPane .timer * {
 #chatHistoryHolder {
     -fx-background-color: rgba(255, 255, 255, 0.6);
     -fx-effect: -fx-pp-dropshadow-light;
+    -fx-background-radius: 5;
 }
 
 #chatInputHolder {
     -fx-background-color: rgba(255, 255, 255, 0.6);
     -fx-effect: -fx-pp-dropshadow-light;
+    -fx-background-radius: 5;
 }
 
 #windGridPane {
     -fx-background-color: rgba(255, 255, 255, 0.6);
     -fx-effect: -fx-pp-dropshadow-light;
+    -fx-background-radius: 5;
 }
 
 #windHolder {
     -fx-background-color: rgba(255, 255, 255, 0.5);
+    -fx-background-radius: 5;
 }
 
 #chatSend {
@@ -63,4 +68,16 @@ GridPane .timer * {
 
 #windImageView {
     -fx-image: url("/images/wind-180.png");
+}
+
+#miniMapPane {
+    -fx-background-color: rgba(255, 255, 255, 0.6);
+    -fx-background-radius: 5;
+}
+
+#miniMapButton {
+    -fx-background-color: rgba(255, 255, 255, 0.6);
+    -fx-background-radius: 5;
+    -fx-min-width: 30;
+    -fx-min-height: 30;
 }
\ No newline at end of file
diff --git a/src/main/resources/views/RaceView.fxml b/src/main/resources/views/RaceView.fxml
index 4113af3a..267779f5 100644
--- a/src/main/resources/views/RaceView.fxml
+++ b/src/main/resources/views/RaceView.fxml
@@ -1,59 +1,54 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import com.jfoenix.controls.*?>
-<?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 com.jfoenix.controls.JFXSpinner?>
 <?import com.jfoenix.controls.JFXTextField?>
-<?import java.lang.String?>
+<?import java.net.URL?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Label?>
 <?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.StackPane?>
 <?import javafx.scene.text.Font?>
-
 <StackPane 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" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.RaceViewController">
         <children>
             <StackPane fx:id="contentStackPane" 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.111"
-                       xmlns:fx="http://javafx.com/fxml/1">
+              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.111" xmlns:fx="http://javafx.com/fxml/1">
                 <children>
                     <GridPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308"
-                              prefHeight="800.0" prefWidth="1200.0">
+                      prefHeight="800.0" prefWidth="1200.0">
                         <columnConstraints>
                             <ColumnConstraints hgrow="SOMETIMES" maxWidth="250.0" minWidth="250.0"
-                                               prefWidth="250.0"/>
+                              prefWidth="250.0"/>
                             <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308"/>
-                            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="400.0"
-                                               prefWidth="400.0"/>
+                            <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"/>
+                              vgrow="SOMETIMES"/>
                             <RowConstraints maxHeight="1.7976931348623157E308" vgrow="SOMETIMES"/>
                             <RowConstraints maxHeight="250.0" minHeight="250.0" prefHeight="250.0"
-                                            valignment="BOTTOM" vgrow="SOMETIMES"/>
+                              valignment="BOTTOM" vgrow="SOMETIMES"/>
                         </rowConstraints>
                         <children>
                             <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="135.0" minWidth="135.0"
-                                                       prefWidth="135.0"/>
+                                    <ColumnConstraints hgrow="SOMETIMES" maxWidth="50.0"
+                                      minWidth="50.0" prefWidth="50.0"/>
+                                    <ColumnConstraints hgrow="SOMETIMES" maxWidth="135.0"
+                                      minWidth="135.0" prefWidth="135.0"/>
                                 </columnConstraints>
                                 <rowConstraints>
-                                    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES"/>
+                                    <RowConstraints minHeight="10.0" prefHeight="30.0"
+                                      vgrow="SOMETIMES"/>
                                 </rowConstraints>
                                 <opaqueInsets>
                                     <Insets/>
@@ -63,8 +58,8 @@
                                 </GridPane.margin>
                                 <children>
                                     <ImageView fitHeight="40.0" fitWidth="40.0" pickOnBounds="true"
-                                               preserveRatio="true" GridPane.halignment="CENTER"
-                                               GridPane.valignment="CENTER">
+                                      preserveRatio="true" GridPane.halignment="CENTER"
+                                      GridPane.valignment="CENTER">
                                         <image>
                                             <Image url="@../images/timer.png"/>
                                         </image>
@@ -72,8 +67,9 @@
                                             <Insets/>
                                         </GridPane.margin>
                                     </ImageView>
-                                    <Label fx:id="timerLabel" text="00:03:34" GridPane.columnIndex="1"
-                                           GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                                    <Label fx:id="timerLabel" text="00:03:34"
+                                      GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                      GridPane.valignment="CENTER">
                                         <font>
                                             <Font size="21.0"/>
                                         </font>
@@ -85,57 +81,68 @@
                             </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 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>
                             <GridPane fx:id="chatGridPane" GridPane.columnIndex="2" GridPane.rowIndex="2">
                                 <columnConstraints>
-                                    <ColumnConstraints hgrow="SOMETIMES" maxWidth="390.0" minWidth="390.0"
-                                                       prefWidth="390.0"/>
+                                    <ColumnConstraints hgrow="SOMETIMES" maxWidth="390.0"
+                                      minWidth="390.0" prefWidth="390.0"/>
                                 </columnConstraints>
                                 <rowConstraints>
-                                    <RowConstraints maxHeight="1.7976931348623157E308" vgrow="SOMETIMES"/>
-                                    <RowConstraints maxHeight="60.0" minHeight="60.0" prefHeight="60.0"
-                                                    vgrow="SOMETIMES"/>
+                                    <RowConstraints maxHeight="1.7976931348623157E308"
+                                      vgrow="SOMETIMES"/>
+                                    <RowConstraints maxHeight="60.0" minHeight="60.0"
+                                      prefHeight="60.0" vgrow="SOMETIMES"/>
                                 </rowConstraints>
                                 <children>
-                                    <Pane fx:id="chatHistoryHolder" prefHeight="200.0" prefWidth="200.0"
-                                          GridPane.hgrow="ALWAYS" GridPane.valignment="BOTTOM"
-                                          GridPane.vgrow="ALWAYS">
+                                    <Pane fx:id="chatHistoryHolder" prefHeight="200.0"
+                                      prefWidth="200.0" GridPane.hgrow="ALWAYS"
+                                      GridPane.valignment="BOTTOM" GridPane.vgrow="ALWAYS">
                                         <GridPane.margin>
                                             <Insets/>
                                         </GridPane.margin>
                                         <padding>
-                                            <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
+                                            <Insets bottom="10.0" left="10.0" right="10.0"
+                                              top="10.0"/>
                                         </padding>
                                     </Pane>
                                     <GridPane fx:id="chatInputHolder" GridPane.rowIndex="1">
                                         <columnConstraints>
                                             <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"
-                                                               prefWidth="100.0"/>
-                                            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity"
-                                                               minWidth="90.0" prefWidth="90.0"/>
+                                              prefWidth="100.0"/>
+                                            <ColumnConstraints hgrow="SOMETIMES"
+                                              maxWidth="-Infinity" minWidth="90.0"
+                                              prefWidth="90.0"/>
                                         </columnConstraints>
                                         <rowConstraints>
-                                            <RowConstraints maxHeight="50.0" minHeight="50.0" prefHeight="50.0"
-                                                            valignment="CENTER" vgrow="SOMETIMES"/>
+                                            <RowConstraints maxHeight="50.0" minHeight="50.0"
+                                              prefHeight="50.0" valignment="CENTER"
+                                              vgrow="SOMETIMES"/>
                                         </rowConstraints>
                                         <children>
-                                            <JFXButton fx:id="chatSend" alignment="CENTER" buttonType="RAISED"
-                                                       focusTraversable="false" maxHeight="-Infinity"
-                                                       maxWidth="1.7976931348623157E308" minHeight="-Infinity"
-                                                       minWidth="-Infinity" prefHeight="35.0" text="SEND"
-                                                       GridPane.columnIndex="1">
+                                            <JFXButton fx:id="chatSend" alignment="CENTER"
+                                              buttonType="RAISED" focusTraversable="false"
+                                              maxHeight="-Infinity"
+                                              maxWidth="1.7976931348623157E308"
+                                              minHeight="-Infinity" minWidth="-Infinity"
+                                              prefHeight="35.0" text="SEND"
+                                              GridPane.columnIndex="1">
                                                 <GridPane.margin>
-                                                    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0"/>
+                                                    <Insets bottom="10.0" left="10.0" right="10.0"
+                                                      top="10.0"/>
                                                 </GridPane.margin>
                                             </JFXButton>
                                             <JFXTextField fx:id="chatInput" focusTraversable="false"
-                                                          maxHeight="35.0" minHeight="-Infinity" prefHeight="35.0">
+                                              maxHeight="35.0" minHeight="-Infinity"
+                                              prefHeight="35.0">
                                                 <GridPane.margin>
                                                     <Insets bottom="10.0" left="20.0" right="10.0"/>
                                                 </GridPane.margin>
@@ -153,31 +160,33 @@
                                     <Insets bottom="10.0" right="10.0"/>
                                 </GridPane.margin>
                             </GridPane>
-                            <GridPane fx:id="windGridPane" maxHeight="-Infinity" maxWidth="-Infinity"
-                                      prefHeight="150.0" prefWidth="240.0" GridPane.halignment="CENTER"
-                                      GridPane.rowIndex="2" GridPane.valignment="BOTTOM">
+                            <GridPane fx:id="windGridPane" maxHeight="-Infinity"
+                              maxWidth="-Infinity" prefHeight="150.0" prefWidth="240.0"
+                              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 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="120.0" minHeight="120.0" prefHeight="120.0"
-                                                    vgrow="SOMETIMES"/>
-                                    <RowConstraints maxHeight="30.0" minHeight="30.0" prefHeight="30.0"
-                                                    vgrow="SOMETIMES"/>
+                                    <RowConstraints maxHeight="120.0" minHeight="120.0"
+                                      prefHeight="120.0" vgrow="SOMETIMES"/>
+                                    <RowConstraints maxHeight="30.0" minHeight="30.0"
+                                      prefHeight="30.0" vgrow="SOMETIMES"/>
                                 </rowConstraints>
                                 <children>
-                                    <Label fx:id="positionLabel" text="Position:" GridPane.columnIndex="1"
-                                           GridPane.halignment="LEFT" GridPane.rowSpan="2" GridPane.valignment="TOP">
+                                    <Label fx:id="positionLabel" text="Position:"
+                                      GridPane.columnIndex="1" GridPane.halignment="LEFT"
+                                      GridPane.rowSpan="2" GridPane.valignment="TOP">
                                         <padding>
                                             <Insets bottom="5.0" left="10.0" right="5.0" top="5.0"/>
                                         </padding>
                                     </Label>
-                                    <Label fx:id="boatSpeedLabel" text="Boat Speed:" GridPane.columnIndex="1"
-                                           GridPane.halignment="LEFT" GridPane.rowSpan="2"
-                                           GridPane.valignment="CENTER">
+                                    <Label fx:id="boatSpeedLabel" text="Boat Speed:"
+                                      GridPane.columnIndex="1" GridPane.halignment="LEFT"
+                                      GridPane.rowSpan="2" GridPane.valignment="CENTER">
                                         <opaqueInsets>
                                             <Insets/>
                                         </opaqueInsets>
@@ -186,8 +195,8 @@
                                         </padding>
                                     </Label>
                                     <Label fx:id="boatHeadingLabel" text="Boat Heading:"
-                                           GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.rowSpan="2"
-                                           GridPane.valignment="BOTTOM">
+                                      GridPane.columnIndex="1" GridPane.halignment="LEFT"
+                                      GridPane.rowSpan="2" GridPane.valignment="BOTTOM">
                                         <padding>
                                             <Insets bottom="5.0" left="10.0" right="5.0" top="5.0"/>
                                         </padding>
@@ -195,29 +204,29 @@
                                     <GridPane fx:id="windHolder" GridPane.rowSpan="2">
                                         <columnConstraints>
                                             <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0"
-                                                               prefWidth="100.0"/>
+                                              prefWidth="100.0"/>
                                         </columnConstraints>
                                         <rowConstraints>
                                             <RowConstraints maxHeight="120.0" minHeight="120.0"
-                                                            prefHeight="120.0" vgrow="SOMETIMES"/>
-                                            <RowConstraints maxHeight="30.0" minHeight="30.0" prefHeight="30.0"
-                                                            vgrow="SOMETIMES"/>
+                                              prefHeight="120.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.rowSpan="2"
-                                                       GridPane.valignment="CENTER"/>
+                                            <ImageView fx:id="windImageView" fitHeight="92.0"
+                                              fitWidth="109.0" pickOnBounds="true"
+                                              preserveRatio="true" GridPane.halignment="CENTER"
+                                              GridPane.rowSpan="2" GridPane.valignment="CENTER"/>
                                             <Label fx:id="windSpeedLabel" text="0.0 Knots"
-                                                   GridPane.halignment="RIGHT" GridPane.rowIndex="1"
-                                                   GridPane.valignment="CENTER">
+                                              GridPane.halignment="RIGHT" GridPane.rowIndex="1"
+                                              GridPane.valignment="CENTER">
                                                 <GridPane.margin>
                                                     <Insets right="5.0"/>
                                                 </GridPane.margin>
                                             </Label>
                                             <Label fx:id="windDirectionLabel" text="180.0°"
-                                                   GridPane.halignment="LEFT" GridPane.rowIndex="1"
-                                                   GridPane.valignment="CENTER">
+                                              GridPane.halignment="LEFT" GridPane.rowIndex="1"
+                                              GridPane.valignment="CENTER">
                                                 <GridPane.margin>
                                                     <Insets left="5.0"/>
                                                 </GridPane.margin>
@@ -234,54 +243,61 @@
                             </GridPane>
                             <GridPane GridPane.columnIndex="1" 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 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 hgrow="SOMETIMES" minWidth="10.0"
+                                      prefWidth="100.0"/>
                                 </columnConstraints>
                                 <rowConstraints>
-                                    <RowConstraints maxHeight="152.0" minHeight="10.0" prefHeight="152.0"
-                                                    vgrow="SOMETIMES"/>
-                                    <RowConstraints maxHeight="118.0" minHeight="10.0" prefHeight="98.0"
-                                                    vgrow="SOMETIMES"/>
+                                    <RowConstraints maxHeight="152.0" minHeight="10.0"
+                                      prefHeight="152.0" vgrow="SOMETIMES"/>
+                                    <RowConstraints maxHeight="118.0" minHeight="10.0"
+                                      prefHeight="98.0" vgrow="SOMETIMES"/>
                                 </rowConstraints>
                                 <children>
-                                    <ImageView fx:id="velocityIcon" fitHeight="88.0" fitWidth="106.0"
-                                               pickOnBounds="true" preserveRatio="true" visible="false"
-                                               GridPane.halignment="CENTER" GridPane.rowIndex="1">
+                                    <ImageView fx:id="velocityIcon" fitHeight="88.0"
+                                      fitWidth="106.0" pickOnBounds="true" preserveRatio="true"
+                                      visible="false" GridPane.halignment="CENTER"
+                                      GridPane.rowIndex="1">
                                         <image>
                                             <Image url="@../icons/velocity.png"/>
                                         </image>
                                     </ImageView>
                                     <ImageView fx:id="handlingIcon" fitHeight="87.0" fitWidth="98.0"
-                                               pickOnBounds="true" preserveRatio="true" visible="false"
-                                               GridPane.columnIndex="1" GridPane.halignment="CENTER"
-                                               GridPane.rowIndex="1">
+                                      pickOnBounds="true" preserveRatio="true" visible="false"
+                                      GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                                      GridPane.rowIndex="1">
                                         <image>
                                             <Image url="@../icons/handlingIcon.png"/>
                                         </image>
                                     </ImageView>
-                                    <ImageView fx:id="windWalkerIcon" fitHeight="83.0" fitWidth="100.0"
-                                               pickOnBounds="true" preserveRatio="true" visible="false"
-                                               GridPane.columnIndex="2" GridPane.halignment="CENTER"
-                                               GridPane.rowIndex="1">
+                                    <ImageView fx:id="windWalkerIcon" fitHeight="83.0"
+                                      fitWidth="100.0" pickOnBounds="true" preserveRatio="true"
+                                      visible="false" GridPane.columnIndex="2"
+                                      GridPane.halignment="CENTER" GridPane.rowIndex="1">
                                         <image>
                                             <Image url="@../icons/windWalkerIcon.png"/>
                                         </image>
                                     </ImageView>
                                     <ImageView fx:id="bumperIcon" fitHeight="83.0" fitWidth="88.0"
-                                               pickOnBounds="true" preserveRatio="true" visible="false"
-                                               GridPane.columnIndex="3" GridPane.halignment="CENTER"
-                                               GridPane.rowIndex="1">
+                                      pickOnBounds="true" preserveRatio="true" visible="false"
+                                      GridPane.columnIndex="3" GridPane.halignment="CENTER"
+                                      GridPane.rowIndex="1">
                                         <image>
                                             <Image url="@../icons/bumperIcon.png"/>
                                         </image>
                                     </ImageView>
-                                    <ImageView fx:id="badRandomIcon" fitHeight="69.0" fitWidth="103.0"
-                                               pickOnBounds="true" preserveRatio="true" visible="false"
-                                               GridPane.columnIndex="4" GridPane.halignment="CENTER"
-                                               GridPane.rowIndex="1" GridPane.valignment="CENTER">
+                                    <ImageView fx:id="badRandomIcon" fitHeight="69.0"
+                                      fitWidth="103.0" pickOnBounds="true" preserveRatio="true"
+                                      visible="false" GridPane.columnIndex="4"
+                                      GridPane.halignment="CENTER" GridPane.rowIndex="1"
+                                      GridPane.valignment="CENTER">
                                         <image>
                                             <Image url="@../icons/slowedIcon.png"/>
                                         </image>
@@ -292,12 +308,14 @@
                     </GridPane>
                 </children>
             </StackPane>
-            <Pane fx:id="miniMapPane" maxHeight="200.0" maxWidth="200.0" minHeight="200.0" minWidth="200.0" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: white; -fx-opacity: 0.45; -fx-background-radius: 10;" StackPane.alignment="TOP_RIGHT">
+            <Pane fx:id="miniMapPane" maxHeight="200.0" maxWidth="200.0" minHeight="200.0"
+              minWidth="200.0" prefHeight="200.0" prefWidth="200.0" StackPane.alignment="TOP_RIGHT">
                 <StackPane.margin>
                     <Insets right="15.0" top="15.0" />
                 </StackPane.margin>
             </Pane>
-            <JFXButton fx:id="miniMapButton" style="-fx-background-color: white; -fx-opacity: 0.45; -fx-background-radius: 10;" text="—" StackPane.alignment="TOP_RIGHT">
+            <JFXButton fx:id="miniMapButton" text="—"
+              StackPane.alignment="TOP_RIGHT">
                 <font>
                     <Font size="15.0" />
                 </font>
@@ -306,12 +324,15 @@
                 </StackPane.margin>
             </JFXButton>
             <AnchorPane fx:id="loadingScreenPane">
-            <ImageView fx:id="loadingScreen" fitHeight="672.0" fitWidth="1200.0" pickOnBounds="true" preserveRatio="true" />
-            <JFXSpinner layoutX="566.0" layoutY="692.0" radius="30.0" />
+                <children>
+                    <ImageView fx:id="loadingScreen" fitHeight="672.0" fitWidth="1200.0"
+                      pickOnBounds="true" preserveRatio="true"/>
+                    <JFXSpinner layoutX="566.0" layoutY="692.0" radius="30.0"/>
+                </children>
             </AnchorPane>
         </children>
     <stylesheets>
-        <String fx:value="/css/Master.css" />
-        <String fx:value="/css/RaceView.css" />
+        <URL value="@../css/Master.css"/>
+        <URL value="@../css/RaceView.css"/>
     </stylesheets>
 </StackPane>