Fixed some UI bugs, and redesigned some UI elements.

- Changed class structure (added dialogs, cells folder)
- Changed font to Baloo as it has better font height
- Figured out a way to change the font color of max player slider thumb
- Added cursor effect when mouse hover on any button
- Fixed drop shadow bug for lobby view player cell
- Moved drop shadow effect from player cell controller to css

#story[1245]

src/main/java/seng302/visualiser/controllers/LobbyController.java

@@ -2,7 +2,6 @@ package seng302.visualiser.controllers;
 
 import com.jfoenix.controls.JFXButton;
 import com.jfoenix.controls.JFXDialog;
-import com.jfoenix.controls.JFXDialog.DialogTransition;
 
 import java.io.IOException;
 import java.net.URL;
@@ -24,7 +23,7 @@ import seng302.gameServer.GameStages;
 import seng302.gameServer.GameState;
 import seng302.model.Colors;
 import seng302.model.RaceState;
-import seng302.visualiser.ServerListener;
+import seng302.visualiser.controllers.cells.PlayerCell;
 
 public class LobbyController implements Initializable {
 

src/main/java/seng302/visualiser/controllers/PlayerCell.java

@@ -1,48 +0,0 @@
-package seng302.visualiser.controllers;
-
-import javafx.fxml.FXML;
-import javafx.scene.control.Label;
-import javafx.scene.effect.DropShadow;
-import javafx.scene.layout.GridPane;
-import javafx.scene.paint.Color;
-
-
-public class PlayerCell {
-    @FXML
-    private Label playerName;
-
-    @FXML
-    private GridPane playerListCell;
-
-    private String name;
-
-    public PlayerCell(String playerName) {
-        this.name = playerName;
-    }
-
-    public void initialize() {
-        playerName.setText(name);
-
-        DropShadow dropShadow = new DropShadow();
-        dropShadow.setRadius(10.0);
-        dropShadow.setOffsetX(3.0);
-        dropShadow.setOffsetY(4.0);
-        dropShadow.setColor(Color.color(0, 0, 0, 0.1));
-        playerListCell.setEffect(dropShadow);
-
-        DropShadow dropShadow2 = new DropShadow();
-        dropShadow2.setRadius(10.0);
-        dropShadow2.setOffsetX(5.0);
-        dropShadow2.setOffsetY(6.0);
-        dropShadow2.setColor(Color.color(0, 0, 0, 0.3));
-
-        playerListCell.setOnMouseEntered(event -> {
-            playerListCell.setEffect(dropShadow2);
-        });
-
-        playerListCell.setOnMouseExited(event -> {
-            playerListCell.setEffect(dropShadow);
-        });
-
-    }
-}

src/main/java/seng302/visualiser/controllers/ServerListController.java

@@ -18,9 +18,9 @@ import javafx.scene.layout.VBox;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import seng302.gameServer.ServerDescription;
-import seng302.visualiser.GameClient;
 import seng302.visualiser.ServerListener;
 import seng302.visualiser.ServerListenerDelegate;
+import seng302.visualiser.controllers.cells.ServerCell;
 
 public class ServerListController implements Initializable, ServerListenerDelegate {
 

src/main/java/seng302/visualiser/controllers/ViewManager.java

@@ -11,11 +11,11 @@ import javafx.scene.layout.StackPane;
 import javafx.scene.paint.Color;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
-import seng302.model.ClientYacht;
 import seng302.visualiser.GameClient;
 
 import java.io.IOException;
 import java.util.HashMap;
+import seng302.visualiser.controllers.dialogs.BoatCustomizeController;
 
 public class ViewManager {
 

src/main/java/seng302/visualiser/controllers/cells/PlayerCell.java

@@ -0,0 +1,26 @@
+package seng302.visualiser.controllers.cells;
+
+import javafx.fxml.FXML;
+import javafx.scene.control.Label;
+import javafx.scene.effect.DropShadow;
+import javafx.scene.layout.GridPane;
+import javafx.scene.paint.Color;
+
+
+public class PlayerCell {
+    @FXML
+    private Label playerName;
+
+    @FXML
+    private GridPane playerListCell;
+
+    private String name;
+
+    public PlayerCell(String playerName) {
+        this.name = playerName;
+    }
+
+    public void initialize() {
+        playerName.setText(name);
+    }
+}

src/main/java/seng302/visualiser/controllers/cells/ServerCell.java

@@ -1,4 +1,4 @@
-package seng302.visualiser.controllers;
+package seng302.visualiser.controllers.cells;
 
 import com.jfoenix.controls.JFXButton;
 import com.jfoenix.controls.JFXDecorator;
@@ -17,6 +17,7 @@ import javafx.scene.layout.GridPane;
 import javafx.scene.paint.Color;
 import seng302.gameServer.ServerDescription;
 import seng302.visualiser.GameClient;
+import seng302.visualiser.controllers.ViewManager;
 
 public class ServerCell implements Initializable {
 

src/main/java/seng302/visualiser/controllers/dialogs/BoatCustomizeController.java

@@ -1,4 +1,4 @@
-package seng302.visualiser.controllers;
+package seng302.visualiser.controllers.dialogs;
 
 import com.jfoenix.controls.JFXButton;
 import com.jfoenix.controls.JFXColorPicker;
@@ -13,6 +13,7 @@ import seng302.visualiser.ClientToServerThread;
 
 import java.net.URL;
 import java.util.ResourceBundle;
+import seng302.visualiser.controllers.LobbyController;
 
 public class BoatCustomizeController implements Initializable{
 

src/main/java/seng302/visualiser/controllers/dialogs/ServerCreationController.java

@@ -1,20 +1,16 @@
-package seng302.visualiser.controllers;
+package seng302.visualiser.controllers.dialogs;
 
 import com.jfoenix.controls.JFXButton;
-import com.jfoenix.controls.JFXDecorator;
 import com.jfoenix.controls.JFXSlider;
-import java.io.IOException;
 import java.net.URL;
 import java.util.ResourceBundle;
 
 import com.jfoenix.controls.JFXTextField;
 import javafx.fxml.FXML;
-import javafx.fxml.FXMLLoader;
 import javafx.fxml.Initializable;
-import javafx.scene.Parent;
 import javafx.scene.control.Label;
-import javafx.scene.layout.StackPane;
 import seng302.gameServer.ServerDescription;
+import seng302.visualiser.controllers.ViewManager;
 
 public class ServerCreationController implements Initializable {
 
@@ -23,7 +19,7 @@ public class ServerCreationController implements Initializable {
     private JFXTextField serverName;
 
     @FXML
-    private JFXSlider maxPlayers;
+    private JFXSlider maxPlayersSlider;
     @FXML
     private Label maxPlayersLabel;
 
@@ -33,23 +29,26 @@ public class ServerCreationController implements Initializable {
 
     public void initialize(URL location, ResourceBundle resources) {
         updateMaxPlayerLabel();
-        maxPlayers.valueProperty().addListener((observable, oldValue, newValue) -> {
+        maxPlayersSlider.valueProperty().addListener((observable, oldValue, newValue) -> {
             updateMaxPlayerLabel();
         });
 
+        submitBtn.setOnMouseClicked(event -> submitBtn.setText("CREATING..."));
         submitBtn.setOnMouseReleased(event -> createServer());
     }
 
     public void createServer() {
 
-        ServerDescription serverDescription = ViewManager.getInstance().getGameClient().runAsHost("localhost", 4941, serverName.getText(), (int) maxPlayers.getValue());
+        ServerDescription serverDescription = ViewManager.getInstance().getGameClient()
+            .runAsHost("localhost", 4941, serverName.getText(), (int) maxPlayersSlider
+                .getValue());
 
         ViewManager.getInstance().setProperty("serverName", serverDescription.getName());
         ViewManager.getInstance().setProperty("mapName", serverDescription.getMapName());
     }
 
     private void updateMaxPlayerLabel() {
-        maxPlayers.setValue(Math.floor(maxPlayers.getValue()));
+        maxPlayersSlider.setValue(Math.floor(maxPlayersSlider.getValue()));
-        maxPlayersLabel.setText(Double.toString(maxPlayers.getValue()));
+        maxPlayersLabel.setText(String.format("YOU SELECTED: %.0f", maxPlayersSlider.getValue()));
     }
 }

src/main/resources/css/ServerCreate.css

@@ -1,5 +0,0 @@
-#submitBtn {
-    -fx-background-color: -fx-pp-theme-color;
-    -fx-font-size: 14px;
-    -fx-text-fill: -fx-pp-light-text-color;
-}

src/main/resources/css/ServerCreation.css

@@ -1,26 +0,0 @@
-#submitBtn {
-    -fx-background-color: -fx-pp-theme-color;
-    -fx-text-fill: -fx-pp-light-text-color;
-    -fx-font-size: 20px;
-}
-
-#hostDialogHeader {
-    -fx-font-size: 30px;
-    -fx-text-fill: -fx-pp-dark-text-color;
-}
-
-
-#serverName {
-    -jfx-focus-color: -fx-pp-dark-text-color;
-    -jfx-unfocus-color: -fx-pp-dark-text-color;
-    -fx-text-fill: -fx-pp-dark-text-color;
-    -fx-prompt-text-fill: -fx-pp-dark-text-color;
-}
-
-#maxPlayerLabel {
-    -fx-text-fill: -fx-pp-dark-text-color;
-}
-
-#maxPlayers .thumb, #maxPlayers .track {
-    -fx-background-color: -fx-pp-theme-color;
-}

src/main/resources/css/cells/PlayerCell.css

@@ -5,6 +5,11 @@
 
 #playerListCell {
     -fx-background-color: -fx-pp-front-color;
+    -fx-effect: -fx-pp-dropshadow-light;
+}
+
+#playerListCell:hover {
+    -fx-effect: -fx-pp-dropshadow-dark;
 }
 
 #playerCellVBox {

src/main/resources/css/dialogs/ServerCreation.css

@@ -0,0 +1,55 @@
+#maxPlayersGridPane VBox * {
+    -fx-font-family: monospace !important;
+}
+
+#submitBtn {
+    -fx-background-color: -fx-pp-theme-color;
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-font-size: 20px;
+    -fx-effect: -fx-pp-dropshadow-dark;
+}
+
+.jfx-rippler {
+    -jfx-rippler-fill: -fx-pp-light-theme-color; /* set rippler color for button */
+}
+
+#submitBtn:hover {
+    -fx-font-size: 23px;
+    -fx-background-color: -fx-pp-light-theme-color;
+}
+
+#hostDialogHeader {
+    -fx-font-size: 30px;
+    -fx-text-fill: -fx-pp-dark-text-color;
+}
+
+
+#serverName {
+    -jfx-focus-color: -fx-pp-dark-text-color;
+    -jfx-unfocus-color: -fx-pp-dark-text-color;
+    -fx-text-fill: -fx-pp-dark-text-color;
+    -fx-prompt-text-fill: -fx-pp-dark-text-color;
+    -fx-font-size: 16px;
+}
+
+#maxPlayersLabel {
+    -fx-text-fill: -fx-pp-dark-text-color;
+    -fx-font-size: 16px;
+}
+
+#maxPlayerPromptLabel {
+    -fx-text-fill: -fx-pp-dark-text-color;
+    -fx-font-size: 16px;
+}
+
+.maxPlayers {
+    -fx-font-size: 13px;
+}
+
+#maxPlayersSlider .thumb {
+    -fx-background-color: -fx-pp-theme-color;
+}
+
+#maxPlayersSlider .track {
+    -fx-background-color: -fx-pp-dark-text-color;
+}

src/main/resources/css/master.css

@@ -1,5 +1,5 @@
 @font-face {
-    src: url("BalooTammudu-Regular.ttf");
+    src: url("Baloo-Regular.ttf");
 }
 
 * {
@@ -9,12 +9,24 @@
     -fx-pp-light-theme-color: #38a2fa;
     -fx-pp-background-color: transparent;
     -fx-pp-front-color: #fff;
-    -fx-font-family: "Baloo Tammudu";
+    -fx-font-family: "Baloo";
 
     -fx-pp-dropshadow-light: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 10.0, 0.2, 3, 4);
     -fx-pp-dropshadow-dark: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10.0, 0.2, 5, 6);
 }
 
+GridPane .jfx-button {
+    -fx-min-height: 65px; /* because we changed the font, we now need to set mini height for all buttons */
+}
+
+.jfx-button {
+    -fx-cursor: hand;
+}
+
+.jfx-button:pressed {
+    -fx-cursor: wait;
+}
+
 .jfx-text-field {
     -jfx-label-float: true;
 }

src/main/resources/views/LobbyView.fxml

@@ -33,7 +33,8 @@
                 </GridPane>
                 <GridPane>
                     <children>
-                        <Label text="Party Parrots In Space" GridPane.valignment="CENTER" fx:id="serverName">
+                        <Label fx:id="serverName" text="Party Parrots In Space"
+                          GridPane.valignment="CENTER">
                             <font>
                                 <Font size="31.0" />
                             </font>
@@ -41,7 +42,8 @@
                                 <Insets left="35.0" top="10.0" />
                             </padding>
                         </Label>
-                        <Label text="This is a map, it's called Haoming" GridPane.rowIndex="1" fx:id="mapName">
+                        <Label fx:id="mapName" text="This is a map, it's called Haoming"
+                          GridPane.rowIndex="1">
                             <padding>
                                 <Insets left="35.0" top="-15.0" />
                             </padding>
@@ -67,7 +69,7 @@
                     <children>
                         <ScrollPane fx:id="playerListScrollPane" hbarPolicy="NEVER" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
                             <content>
-                                <VBox fx:id="playerListVBox" fillWidth="false" prefHeight="200.0" prefWidth="100.0" />
+                                <VBox fx:id="playerListVBox" prefHeight="200.0" prefWidth="100.0"/>
                             </content>
                             <GridPane.margin>
                                 <Insets bottom="15.0" left="7.0" right="15.0" top="15.0" />

src/main/resources/views/cells/PlayerCell.fxml

@@ -7,15 +7,19 @@
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.text.*?>
 
-<VBox fx:id="playerCellVBox" fillWidth="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="80.0" prefWidth="330.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
+<VBox fx:id="playerCellVBox" maxHeight="-Infinity" maxWidth="1.7976931348623157E308"
+  minHeight="-Infinity" minWidth="-Infinity" prefHeight="80.0" xmlns="http://javafx.com/javafx/8"
+  xmlns:fx="http://javafx.com/fxml/1">
    <stylesheets>
        <String fx:value="/css/master.css" />
-       <String fx:value="/css/PlayerCell.css" />
+       <String fx:value="/css/cells/PlayerCell.css"/>
    </stylesheets>
    <children>
-      <GridPane fx:id="playerListCell" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" prefHeight="70.0">
+       <GridPane fx:id="playerListCell" maxHeight="-Infinity" maxWidth="1.7976931348623157E308"
+         minHeight="-Infinity" prefHeight="70.0">
         <columnConstraints>
-          <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="380.0" prefWidth="380.0" />
+            <ColumnConstraints hgrow="SOMETIMES" maxWidth="355.0" minWidth="355.0"
+              prefWidth="355.0"/>
         </columnConstraints>
         <rowConstraints>
           <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
@@ -26,6 +30,9 @@
                   <Insets left="20.0" />
                </padding></Label>
          </children>
+           <VBox.margin>
+               <Insets right="40.0"/>
+           </VBox.margin>
       </GridPane>
    </children>
    <padding>

src/main/resources/views/cells/ServerCell.fxml

@@ -19,7 +19,7 @@
 <VBox fx:id="serverCellVBox" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="95.0" prefWidth="900.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <stylesheets>
        <String fx:value="/css/master.css" />
-       <String fx:value="/css/ServerCell.css" />
+       <String fx:value="/css/cells/ServerCell.css"/>
    </stylesheets>
    <children>
       <GridPane fx:id="serverListCell" prefHeight="80.0">

src/main/resources/views/dialogs/BoatCustomizeDialog.fxml

@@ -9,7 +9,10 @@
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
 
-<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefWidth="400.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.BoatCustomizeController">
+<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
+  minWidth="-Infinity" prefWidth="400.0" xmlns="http://javafx.com/javafx/8"
+  xmlns:fx="http://javafx.com/fxml/1"
+  fx:controller="seng302.visualiser.controllers.dialogs.BoatCustomizeController">
     <children>
         <GridPane>
             <columnConstraints>
@@ -56,7 +59,7 @@
         </GridPane>
     </children>
    <stylesheets>
-      <String fx:value="/css/ServerCreation.css" />
+       <String fx:value="/css/dialogs/ServerCreation.css"/>
       <String fx:value="/css/master.css" />
    </stylesheets>
 </JFXDialogLayout>

src/main/resources/views/dialogs/ServerCreationDialog.fxml

@@ -9,7 +9,10 @@
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
 
-<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefWidth="550.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.ServerCreationController">
+<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
+  minWidth="-Infinity" prefWidth="550.0" xmlns="http://javafx.com/javafx/8"
+  xmlns:fx="http://javafx.com/fxml/1"
+  fx:controller="seng302.visualiser.controllers.dialogs.ServerCreationController">
     <children>
         <GridPane>
             <columnConstraints>
@@ -18,47 +21,59 @@
             <rowConstraints>
                 <RowConstraints maxHeight="90.0" minHeight="90.0" prefHeight="90.0" vgrow="SOMETIMES" />
                 <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="125.0" minHeight="125.0" prefHeight="125.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0"
+                  vgrow="SOMETIMES"/>
                 <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
             </rowConstraints>
             <children>
-                <Label fx:id="hostDialogHeader" text="Host a game..." GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+                <Label fx:id="hostDialogHeader" text="HOST A GAME SERVER"
-                <JFXButton fx:id="submitBtn" prefHeight="45.0" prefWidth="220.0" text="Submit" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" />
+                  GridPane.halignment="CENTER" GridPane.valignment="CENTER"/>
-            <JFXTextField fx:id="serverName" promptText="Server Name" GridPane.rowIndex="1">
+                <JFXButton fx:id="submitBtn" prefHeight="55.0" prefWidth="250.0" text="SUBMIT"
+                  GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER"/>
+                <JFXTextField fx:id="serverName" promptText="SERVER NAME" GridPane.rowIndex="1">
                <GridPane.margin>
                   <Insets left="30.0" right="30.0" />
                </GridPane.margin></JFXTextField>
-            <GridPane GridPane.rowIndex="2">
+                <GridPane fx:id="maxPlayersGridPane" GridPane.rowIndex="2">
               <columnConstraints>
                   <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="30.0" prefWidth="100.0" />
-                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" minWidth="100.0" prefWidth="100.0"/>
               </columnConstraints>
               <rowConstraints>
-                <RowConstraints minHeight="10.0" percentHeight="60.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                  <RowConstraints minHeight="10.0" percentHeight="60.0" prefHeight="10.0"
+                    vgrow="SOMETIMES"/>
                 <RowConstraints minHeight="10.0" percentHeight="40.0" prefHeight="30.0" vgrow="SOMETIMES" />
               </rowConstraints>
                <children>
-                  <JFXSlider fx:id="maxPlayers" max="20.0" min="2.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
-                     <GridPane.margin>
-                        <Insets left="10.0" right="30.0" top="20.0" />
-                     </GridPane.margin>
-                  </JFXSlider>
                   <Label fx:id="maxPlayersLabel" text="20" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP">
                      <GridPane.margin>
                         <Insets right="30.0" />
                      </GridPane.margin></Label>
-                  <Label text="Max Player Count" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                   <Label fx:id="maxPlayerPromptLabel" text="MAX PLAYERS" GridPane.halignment="LEFT"
+                     GridPane.valignment="BOTTOM">
                      <GridPane.margin>
-                        <Insets left="25.0" top="20.0" />
+                         <Insets left="30.0" top="20.0"/>
                      </GridPane.margin>
                   </Label>
+                   <VBox alignment="BOTTOM_CENTER" prefHeight="200.0" prefWidth="100.0"
+                     GridPane.columnIndex="1" GridPane.halignment="CENTER"
+                     GridPane.valignment="CENTER">
+                       <children>
+                           <JFXSlider fx:id="maxPlayersSlider" blockIncrement="1.0"
+                             majorTickUnit="2.0" max="20.0" min="1.0" minorTickCount="1"
+                             snapToTicks="true" styleClass="maxPlayers" value="11.0"/>
+                       </children>
+                       <GridPane.margin>
+                           <Insets bottom="10.0" right="30.0"/>
+                       </GridPane.margin>
+                   </VBox>
                </children>
             </GridPane>
             </children>
         </GridPane>
     </children>
    <stylesheets>
-      <String fx:value="/css/ServerCreation.css" />
+       <String fx:value="/css/dialogs/ServerCreation.css"/>
       <String fx:value="/css/master.css" />
    </stylesheets>
 </JFXDialogLayout>