Race view is default to be full screen now and minor bug fixes.

- race view is force to be full screen and run in a new stage
- fixed button animations in lobby view
- polished UI element is boat customization dialog

#story[1245]
This commit is contained in:
Haoming Yin
2017-09-11 23:04:41 +12:00
parent 131cd80e02
commit 0d7201e235
6 changed files with 103 additions and 37 deletions
@@ -5,12 +5,15 @@ import com.jfoenix.controls.JFXDialog;
import javafx.application.Platform; import javafx.application.Platform;
import javafx.collections.ObservableList; import javafx.collections.ObservableList;
import javafx.fxml.FXMLLoader; import javafx.fxml.FXMLLoader;
import javafx.geometry.Rectangle2D;
import javafx.scene.Node; import javafx.scene.Node;
import javafx.scene.Parent; import javafx.scene.Parent;
import javafx.scene.Scene; import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.image.Image; import javafx.scene.image.Image;
import javafx.scene.layout.StackPane; import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color; import javafx.scene.paint.Color;
import javafx.stage.Screen;
import javafx.stage.Stage; import javafx.stage.Stage;
import org.slf4j.Logger; import org.slf4j.Logger;
import org.slf4j.LoggerFactory; import org.slf4j.LoggerFactory;
@@ -162,21 +165,40 @@ public class ViewManager {
public RaceViewController loadRaceView() { public RaceViewController loadRaceView() {
FXMLLoader loader = loadFxml("/views/RaceView.fxml"); FXMLLoader loader = loadFxml("/views/RaceView.fxml");
// have to create a new stage and set the race view maximized as JFoenix decorator has
// bug causes stage cannot be fully maximised.
Platform.runLater(() -> {
try { try {
setScene(loader.load()); stage.close();
} catch (IOException e) {
Scene scene = new Scene(loader.load());
// set key press event to catch key stoke
scene.setOnKeyPressed(gameClient::keyPressed);
scene.setOnKeyReleased(gameClient::keyReleased);
Rectangle2D visualBounds = Screen.getPrimary().getVisualBounds();
stage = new Stage();
stage.setOnCloseRequest(e -> closeAll());
stage.setX(visualBounds.getMinX());
stage.setY(visualBounds.getMinY());
stage.setWidth(visualBounds.getWidth());
stage.setHeight(visualBounds.getHeight());
stage.setMaximized(true);
stage.setFullScreen(true);
stage.setScene(scene);
stage.show();
} catch (Exception e) {
e.printStackTrace(); e.printStackTrace();
} }
});
decorator.getScene().setOnKeyPressed(gameClient::keyPressed);
decorator.getScene().setOnKeyReleased(gameClient::keyReleased);
Sounds.stopMusic(); Sounds.stopMusic();
Sounds.playRaceMusic(); Sounds.playRaceMusic();
return loader.getController(); return loader.getController();
} }
public JFXDialog loadCustomizationDialog(StackPane parent, LobbyController lobbyController, Color playerColor, String name) { public JFXDialog loadCustomizationDialog(StackPane parent, LobbyController lobbyController,
Color playerColor, String name) {
FXMLLoader dialog = loadFxml("/views/dialogs/BoatCustomizeDialog.fxml"); FXMLLoader dialog = loadFxml("/views/dialogs/BoatCustomizeDialog.fxml");
JFXDialog customizationDialog = null; JFXDialog customizationDialog = null;
@@ -189,7 +211,6 @@ public class ViewManager {
e.printStackTrace(); e.printStackTrace();
} }
BoatCustomizeController controller = dialog.getController(); BoatCustomizeController controller = dialog.getController();
controller.setParentController(lobbyController); controller.setParentController(lobbyController);
@@ -198,7 +219,6 @@ public class ViewManager {
controller.setServerThread(gameClient.getServerThread()); controller.setServerThread(gameClient.getServerThread());
controller.setPlayerColor(lobbyController.playersColor); controller.setPlayerColor(lobbyController.playersColor);
return customizationDialog; return customizationDialog;
} }
} }
+9 -8
View File
@@ -21,11 +21,18 @@
-fx-background: transparent; -fx-background: transparent;
} }
#customizeButton, #leaveLobbyButton, #beginRaceButton { #customizeButton, #leaveLobbyButton, #beginRaceButton {
-fx-background-color: -fx-pp-light-text-color; /* inverted */ -fx-background-color: -fx-pp-light-text-color; /* inverted */
-fx-text-fill: -fx-pp-theme-color; /* inverted */ -fx-text-fill: -fx-pp-theme-color; /* inverted */
-fx-font-size: 16px; -fx-font-size: 18px;
}
#customizeButton:hover, #leaveLobbyButton:hover, #beginRaceButton:hover {
-fx-font-size: 20px;
}
.invertedButton .jfx-rippler {
-jfx-rippler-fill: white;
} }
#connectLabel, #serverPortNumber, #serverHostName { #connectLabel, #serverPortNumber, #serverHostName {
@@ -52,12 +59,6 @@
-fx-background-color: transparent; -fx-background-color: transparent;
} }
.invertedButton {
-fx-background-color: -fx-pp-light-text-color; /* inverted */
-fx-text-fill: -fx-pp-theme-color; /* inverted */
-fx-font-size: 16px;
}
#serverMap { #serverMap {
-fx-background-image: url("/images/bg.jpg"); -fx-background-image: url("/images/bg.jpg");
-fx-background-repeat: no-repeat; -fx-background-repeat: no-repeat;
@@ -32,12 +32,21 @@
-fx-text-fill: -fx-pp-light-text-color; -fx-text-fill: -fx-pp-light-text-color;
} }
#hostButton:hover {
-fx-background-color: -fx-pp-light-theme-color;
-fx-font-size: 23px;
}
#connectButton { #connectButton {
-fx-background-color: -fx-pp-light-text-color; /* inverted */ -fx-background-color: -fx-pp-light-text-color; /* inverted */
-fx-text-fill: -fx-pp-theme-color; /* inverted */ -fx-text-fill: -fx-pp-theme-color; /* inverted */
-fx-font-size: 20px; -fx-font-size: 20px;
} }
#connectButton:hover {
-fx-font-size: 23px;
}
#connectLabel, #serverPortNumber, #serverHostName { #connectLabel, #serverPortNumber, #serverHostName {
-fx-text-fill: -fx-pp-light-text-color; -fx-text-fill: -fx-pp-light-text-color;
-fx-font-size: 18px; -fx-font-size: 18px;
@@ -0,0 +1,29 @@
* {
-fx-text-fill: -fx-pp-dark-text-color;
}
#submitBtn {
-fx-background-color: -fx-pp-theme-color;
-fx-text-fill: -fx-pp-light-text-color;
-fx-font-size: 20px !important;
-fx-effect: -fx-pp-dropshadow-dark;
-fx-min-width: 130px;
}
#submitBtn:hover {
-fx-font-size: 23px !important;
-fx-background-color: -fx-pp-light-theme-color;
}
#hostDialogHeader {
-fx-font-size: 23px !important;
}
#boatColorLabel, #colorPicker {
-fx-font-size: 18px;
}
#boatName {
-fx-font-size: 18px;
-fx-prompt-text-fill: -fx-pp-dark-text-color;
}
+5 -1
View File
@@ -4,7 +4,11 @@
<?import java.lang.*?> <?import java.lang.*?>
<?import javafx.scene.layout.*?> <?import javafx.scene.layout.*?>
<AnchorPane fx:id="rvAnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.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"> <AnchorPane fx:id="rvAnchorPane" maxHeight="1.7976931348623157E308"
maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0"
prefWidth="800.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> <children>
<StackPane fx:id="contentAnchorPane" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> <StackPane fx:id="contentAnchorPane" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
@@ -25,9 +25,11 @@
<RowConstraints maxHeight="164.0" minHeight="100.0" prefHeight="164.0" vgrow="SOMETIMES" /> <RowConstraints maxHeight="164.0" minHeight="100.0" prefHeight="164.0" vgrow="SOMETIMES" />
</rowConstraints> </rowConstraints>
<children> <children>
<Label fx:id="hostDialogHeader" text="Customize Boat..." GridPane.halignment="CENTER" GridPane.valignment="CENTER" /> <Label fx:id="hostDialogHeader" text="Customize Boat" GridPane.halignment="CENTER"
GridPane.valignment="CENTER"/>
<JFXButton fx:id="submitBtn" prefHeight="45.0" prefWidth="220.0" text="Customize Boat" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" /> <JFXButton fx:id="submitBtn" prefHeight="45.0" prefWidth="220.0" text="Customize Boat" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" />
<JFXTextField fx:id="boatName" promptText="Boat Name" GridPane.rowIndex="1"> <JFXTextField fx:id="boatName" focusColor="#6c6c6c" promptText="Boat Name"
unFocusColor="#6b6b6b" GridPane.rowIndex="1">
<GridPane.margin> <GridPane.margin>
<Insets left="30.0" right="30.0" /> <Insets left="30.0" right="30.0" />
</GridPane.margin></JFXTextField> </GridPane.margin></JFXTextField>
@@ -40,14 +42,15 @@
<RowConstraints maxHeight="69.0" minHeight="10.0" percentHeight="60.0" prefHeight="19.6" vgrow="SOMETIMES" /> <RowConstraints maxHeight="69.0" minHeight="10.0" percentHeight="60.0" prefHeight="19.6" vgrow="SOMETIMES" />
</rowConstraints> </rowConstraints>
<children> <children>
<Label fx:id="hostDialogHeader1" prefHeight="25.0" prefWidth="96.0" text="Boat Color"> <Label fx:id="boatColorLabel" prefHeight="25.0" prefWidth="96.0"
text="Boat Color">
<GridPane.margin> <GridPane.margin>
<Insets top="-10.0" /> <Insets top="-10.0" />
</GridPane.margin> </GridPane.margin>
</Label> </Label>
<JFXColorPicker fx:id="colorPicker" onAction="#colorChanged" GridPane.columnIndex="1"> <JFXColorPicker fx:id="colorPicker" onAction="#colorChanged" GridPane.columnIndex="1">
<GridPane.margin> <GridPane.margin>
<Insets top="-10.0" /> <Insets left="30.0" top="-10.0"/>
</GridPane.margin> </GridPane.margin>
</JFXColorPicker> </JFXColorPicker>
</children> </children>
@@ -59,7 +62,7 @@
</GridPane> </GridPane>
</children> </children>
<stylesheets> <stylesheets>
<String fx:value="/css/dialogs/ServerCreation.css"/> <String fx:value="/css/dialogs/BoatCustomize.css"/>
<String fx:value="/css/master.css" /> <String fx:value="/css/master.css" />
</stylesheets> </stylesheets>
</JFXDialogLayout> </JFXDialogLayout>