commit f6d26072156c2dd2710c1ea5b4f5cc75c408dc43 parent 12ea818c5198954d3089f6b27a963a3889f36570 Author: A Koens <[email protected]> Date: Sat, 22 Oct 2022 22:00:31 +0200 TicTacToe With GUI Diffstat:
21 files changed, 601 insertions(+), 119 deletions(-)
diff --git a/pom.xml b/pom.xml @@ -52,7 +52,6 @@ <version>2.2.0-9.1.2</version> </dependency> - <!-- https://mvnrepository.com/artifact/de.jensd/fontawesomefx-fontawesome --> <dependency> <groupId>de.jensd</groupId> @@ -60,6 +59,15 @@ <version>4.7.0-9.1.2</version> </dependency> + <!-- JSON Dependencies --> + <!-- https://mvnrepository.com/artifact/com.googlecode.json-simple/json-simple --> + <dependency> + <groupId>com.googlecode.json-simple</groupId> + <artifactId>json-simple</artifactId> + <version>1.1.1</version> + </dependency> + + <!-- Junit Dependencies --> <dependency> <groupId>org.junit.jupiter</groupId> diff --git a/settings.json b/settings.json diff --git a/settings.properties b/settings.properties @@ -1,5 +1,5 @@ #Application Settings -#Thu Oct 13 22:35:41 CEST 2022 +#Mon Oct 17 20:12:28 CEST 2022 screenWidth=680 fullscreen=false screenHeight=480 diff --git a/src/main/java/module-info.java b/src/main/java/module-info.java @@ -11,6 +11,7 @@ module nl.isygameclient { exports nl.isygameclient; exports nl.isygameclient.controllers; + exports nl.isygameclient.models; opens nl.isygameclient to javafx.fxml; opens nl.isygameclient.controllers to javafx.fxml; } \ No newline at end of file diff --git a/src/main/java/nl/isygameclient/Application.java b/src/main/java/nl/isygameclient/Application.java @@ -3,25 +3,29 @@ package nl.isygameclient; import java.io.IOException; import javafx.fxml.FXMLLoader; import javafx.scene.Scene; +import javafx.scene.paint.Color; import javafx.stage.Stage; -import nl.isygameclient.util.SettingsHandler; + public class Application extends javafx.application.Application { + private Stage primaryStage; + @Override - public void start(Stage primaryStage) throws IOException { - FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("views/GameSelectorMenu.fxml")); - Scene scene = new Scene(fxmlLoader.load()); - primaryStage.setTitle(SettingsHandler.getSettings().getTitle()); + public void start(Stage stage) throws IOException { + primaryStage = stage; + FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("views/TicTacToeGame.fxml")); + Scene scene = new Scene(fxmlLoader.load(), Color.TRANSPARENT); primaryStage.setScene(scene); - primaryStage.setHeight(SettingsHandler.getSettings().getScreenHeight()); - primaryStage.setWidth(SettingsHandler.getSettings().getScreenWidth()); - primaryStage.setFullScreen(SettingsHandler.getSettings().isFullscreen()); primaryStage.show(); primaryStage.setOnCloseRequest((windowEvent) -> { - SettingsHandler.saveProperties(); +// SettingsHandler.saveProperties(); }); } + public Stage getPrimaryStage() { + return primaryStage; + } + public static void main(String[] args) { launch(); diff --git a/src/main/java/nl/isygameclient/controllers/GameController.java b/src/main/java/nl/isygameclient/controllers/GameController.java @@ -0,0 +1,7 @@ +package nl.isygameclient.controllers; + +public interface GameController { + void start(); + void reset(); + void stop(); +} diff --git a/src/main/java/nl/isygameclient/controllers/GameSelectorMenuController.java b/src/main/java/nl/isygameclient/controllers/GameSelectorMenuController.java @@ -1,12 +1,25 @@ package nl.isygameclient.controllers; +import com.jfoenix.controls.JFXButton; import javafx.application.Platform; import javafx.collections.FXCollections; import javafx.collections.ObservableList; +import javafx.event.ActionEvent; import javafx.fxml.FXML; +import javafx.fxml.FXMLLoader; +import javafx.scene.Node; +import javafx.scene.Scene; import javafx.scene.control.ListView; import javafx.scene.control.TextField; -import javafx.scene.layout.Pane; +import javafx.scene.layout.AnchorPane; +import javafx.scene.layout.GridPane; +import javafx.scene.layout.HBox; +import javafx.scene.layout.VBox; +import nl.isygameclient.Application; + +import java.io.IOException; +import java.util.ArrayList; +import java.util.List; public class GameSelectorMenuController { @@ -15,23 +28,43 @@ public class GameSelectorMenuController { @FXML public ListView<String> gamesList; + private final List<String> games = List.of("Tic Tac Toe", "Othello"); + + @FXML + public VBox gameDetail; + + @FXML + public VBox gameContainer; public GameSelectorMenuController() { - ObservableList<String> candidates = FXCollections.observableArrayList( - "Super man", - "Spider man", - "Wolverine", - "Police", - "Fire Rescue", - "Soldiers", - "Dad & Mom", - "Doctor", - "Politician", - "Pastor", - "Teacher"); - - Platform.runLater(() -> { - this.gamesList.setItems(candidates); + } + + @FXML + protected void initialize() throws IOException { + gamesList.setItems(FXCollections.observableList(games)); + searchBox.textProperty().addListener((observable, oldValue, newValue) -> { + gamesList.setItems(filterList(games, newValue)); + }); + for (String game : games) { + System.out.println(game); + } + + } + + public void onClearSearchButtonClick() { + searchBox.clear(); + } + + private boolean searchFindsOrder(String game, String searchText) { + return (game.toLowerCase().contains(searchText.toLowerCase())); + } + + private ObservableList<String> filterList(List<String> list, String searchText) { + List<String> filteredList = new ArrayList<>(); + for (String game : list) { + if (searchFindsOrder(game, searchText)) filteredList.add(game); + } + return FXCollections.observableList(filteredList); } } diff --git a/src/main/java/nl/isygameclient/controllers/HelloController.java b/src/main/java/nl/isygameclient/controllers/HelloController.java @@ -1,21 +0,0 @@ -package nl.isygameclient.controllers; - -import javafx.fxml.FXML; -import javafx.scene.control.Button; -import javafx.scene.control.Label; -import javafx.stage.Stage; -import nl.isygameclient.util.SettingsHandler; - -public class HelloController { - @FXML - private Label welcomeText; - - @FXML - private Button welcomeButton; - - @FXML - protected void onHelloButtonClick() { - welcomeText.setText(SettingsHandler.getSettings().getTitle()); - ((Stage) welcomeButton.getScene().getWindow()).setFullScreen(true); - } -} -\ No newline at end of file diff --git a/src/main/java/nl/isygameclient/controllers/TicTacToeGameController.java b/src/main/java/nl/isygameclient/controllers/TicTacToeGameController.java @@ -0,0 +1,76 @@ +package nl.isygameclient.controllers; + +import com.jfoenix.controls.JFXButton; +import javafx.event.ActionEvent; +import javafx.fxml.FXML; +import javafx.scene.layout.GridPane; +import nl.isygameclient.models.TicTacToe; + +import java.util.ArrayList; + +public class TicTacToeGameController implements GameController { + + private TicTacToe ttt = new TicTacToe(); + + private final ArrayList<JFXButton> buttons = new ArrayList<>(); + + @FXML + public GridPane grid; + + @FXML + protected void initialize() { + for (int i = 0; i < TicTacToe.BOARD_SIZE; i++) { + for (int j = 0; j < TicTacToe.BOARD_SIZE; j++) { + JFXButton button = new JFXButton(); + button.setId(String.valueOf(i + j * TicTacToe.BOARD_SIZE)); + button.setPrefSize(200.0, 200.0); + button.getStyleClass().add("ttt-button"); + button.setOnAction((ActionEvent event) -> { + onMoveButtonClick(button); + }); + buttons.add(button); + grid.add(button, i, j); + } + } + } + + + private void onMoveButtonClick(JFXButton button) { + // Move + int pos = Integer.parseInt(button.getId()); + System.out.println(pos); + if (ttt.isMoveValid(pos)) { + ttt.move(pos); + button.setText(ttt.getCurrentPlayer()); + ttt.nextPlayer(); + } + // Game Over + if (ttt.isGameOver()) { + System.out.println("Game Over"); + String winner = ttt.getWinner(); + if (winner == null) { + System.out.println("Draw!"); + } else { + System.out.printf("%s, Is the Winner!", winner); + } + } + } + + public void start() { + + } + + public void reset() { + // Make new Game + ttt = new TicTacToe(); + + // Clear Buttons + for (JFXButton button : buttons) { + button.setText(""); + } + } + + public void stop() { + + } +} diff --git a/src/main/java/nl/isygameclient/models/Game.java b/src/main/java/nl/isygameclient/models/Game.java @@ -0,0 +1,37 @@ +package nl.isygameclient.models; + +import lombok.Data; + + +@Data +public abstract class Game { + int currentPlayerIndex; + String[] players; + + public Game(int currentPlayer, String[] players) { + this.currentPlayerIndex = currentPlayer; + this.players = players; + } + + /*** + parameters + ***/ + public abstract void move(int pos); + + public abstract boolean isMoveValid(int pos); + + public abstract boolean isGameOver(); + + public abstract String getWinner(); + + public void nextPlayer() { + currentPlayerIndex += 1; + if (currentPlayerIndex >= players.length) { + currentPlayerIndex = 0; + } + } + + public String getCurrentPlayer() { + return players[currentPlayerIndex]; + } +} diff --git a/src/main/java/nl/isygameclient/models/TicTacToe.java b/src/main/java/nl/isygameclient/models/TicTacToe.java @@ -0,0 +1,55 @@ +package nl.isygameclient.models; + + +public class TicTacToe extends Game { + + public static final int BOARD_SIZE = 3; + + String[] board = new String[BOARD_SIZE * BOARD_SIZE]; + + public TicTacToe() { + super(0, new String[]{"X", "O"}); + } + + public boolean isMoveValid(int pos) { + return (pos >= 0 && pos < (BOARD_SIZE * BOARD_SIZE)) && board[pos] == null; + } + + public void move(int pos) { + board[pos] = players[currentPlayerIndex]; + } + + // TODO Draw Condition When board is full + public boolean isGameOver() { + return getWinner() != null || board.length >= BOARD_SIZE * BOARD_SIZE; + } + + public String getWinner() { + for (String player : players) { + boolean topRow = player.equals(board[0]) && player.equals(board[1]) && player.equals(board[2]); + boolean midRow = player.equals(board[3]) && player.equals(board[4]) && player.equals(board[5]); + boolean botRow = player.equals(board[6]) && player.equals(board[7]) && player.equals(board[8]); + + boolean leftCol = player.equals(board[0]) && player.equals(board[3]) && player.equals(board[6]); + boolean midCol = player.equals(board[1]) && player.equals(board[4]) && player.equals(board[7]); + boolean rightCol = player.equals(board[2]) && player.equals(board[5]) && player.equals(board[8]); + + boolean lrCross = player.equals(board[0]) && player.equals(board[4]) && player.equals(board[8]); + boolean rlCross = player.equals(board[2]) && player.equals(board[4]) && player.equals(board[6]); + + if (topRow || midRow || botRow || leftCol || midCol || rightCol || lrCross || rlCross) { + return player; + } + } + return null; + } + + public void printGameBoard() { + for (int i = 0; i < board.length; i++) { + System.out.print(board[i] == null ? " " : board[i]); + if (i % BOARD_SIZE < BOARD_SIZE -1) System.out.print("|"); + if (i % BOARD_SIZE == BOARD_SIZE-1 && i < board.length-1) System.out.println("\n-+-+-"); + } + System.out.println(); + } +} +\ No newline at end of file diff --git a/src/main/java/nl/isygameclient/util/Save.java b/src/main/java/nl/isygameclient/util/Save.java @@ -0,0 +1,12 @@ +package nl.isygameclient.util; + +import java.util.List; + +public class Save { + + private String title; + private boolean fullscreen; + private int screenHeight; + private int screenWidth; + private List<String> games; +} diff --git a/src/main/java/nl/isygameclient/util/SaveHandler.java b/src/main/java/nl/isygameclient/util/SaveHandler.java @@ -0,0 +1,14 @@ +package nl.isygameclient.util; + +public abstract class SaveHandler { + + private Save save; + + public void save(){ + + } + + public void load() { + + } +} diff --git a/src/main/java/nl/isygameclient/util/Settings.java b/src/main/java/nl/isygameclient/util/Settings.java @@ -6,8 +6,9 @@ import lombok.Data; @Data public class Settings { - private String title = "ISY Game Client"; - private boolean fullscreen = true; - private int screenHeight = 1080; - private int screenWidth = 1920; + private String title = "ISY Game Client"; + private boolean fullscreen = true; + private int screenHeight = 1080; + private int screenWidth = 1920; + } diff --git a/src/main/resources/nl/isygameclient/css/modules/colors.module.css b/src/main/resources/nl/isygameclient/css/modules/colors.module.css @@ -5,30 +5,49 @@ .inverse-primary-text { -fx-text-fill: -md-sys-color-inverse-primary; } +.inverse-primary-fill { + -fx-fill: -md-sys-color-inverse-primary; +} + .on-primary-container { -fx-background-color: -md-sys-color-on-primary-container; } .on-primary-container-text { -fx-text-fill: -md-sys-color-on-primary-container; } +.on-primary-container-fill { + -fx-fill: -md-sys-color-on-primary-container; +} + .on-primary { -fx-background-color: -md-sys-color-on-primary; } .on-primary-text { -fx-text-fill: -md-sys-color-on-primary; } +.on-primary-fill { + -fx-fill: -md-sys-color-on-primary; +} + .primary-container { -fx-background-color: -md-sys-color-primary-container; } .primary-container-text { -fx-text-fill: -md-sys-color-primary-container; } +.primary-container-fill { + -fx-fill: -md-sys-color-primary-container; +} + .primary { -fx-background-color: -md-sys-color-primary; } .primary-text { -fx-text-fill: -md-sys-color-primary; } +.primary-fill { + -fx-fill: -md-sys-color-primary; +} /* Secondary */ .on-secondary-container { @@ -37,24 +56,39 @@ .on-secondary-container-text { -fx-text-fill: -md-sys-color-on-secondary-container; } +.on-secondary-container-fill { + -fx-fill: -md-sys-color-on-secondary-container; +} + .on-secondary { -fx-background-color: -md-sys-color-on-secondary; } .on-secondary-text { -fx-text-fill: -md-sys-color-on-secondary; } +.on-secondary-fill { + -fx-fill: -md-sys-color-on-secondary; +} + .secondary-container { -fx-background-color: -md-sys-color-secondary-container; } .secondary-container-text { -fx-text-fill: -md-sys-color-secondary-container; } +.secondary-container-fill { + -fx-fill: -md-sys-color-secondary-container; +} + .secondary { -fx-background-color: -md-sys-color-secondary; } .secondary-text { -fx-text-fill: -md-sys-color-secondary; } +.secondary-fill { + -fx-fill: -md-sys-color-secondary; +} /* Tertiary */ .on-tertiary-container { @@ -63,24 +97,40 @@ .on-tertiary-container-text { -fx-text-fill: -md-sys-color-on-tertiary-container; } +.on-tertiary-container-fill { + -fx-fill: -md-sys-color-on-tertiary-container; +} + .on-tertiary { -fx-background-color: -md-sys-color-on-tertiary; } .on-tertiary-text { -fx-text-fill: -md-sys-color-on-tertiary; } +.on-tertiary-fill { + -fx-fill: -md-sys-color-on-tertiary; +} + .tertiary-container { -fx-background-color: -md-sys-color-tertiary-container; } .tertiary-container-text { -fx-text-fill: -md-sys-color-tertiary-container; } +.tertiary-container-text { + -fx-fill: -md-sys-color-tertiary-container; +} + .tertiary { -fx-background-color: -md-sys-color-tertiary; } .tertiary-text { -fx-text-fill: -md-sys-color-tertiary; } +.tertiary-fill { + -fx-text-fill: -md-sys-color-tertiary; +} + /* Error */ .on-error-container { @@ -89,24 +139,39 @@ .on-error-container-text { -fx-text-fill: -md-sys-color-on-error-container; } +.on-error-container-fill { + -fx-fill: -md-sys-color-on-error-container; +} + .on-error { -fx-background-color: -md-sys-color-on-error; } .on-error-text { -fx-text-fill: -md-sys-color-on-error; } +.on-error-fill { + -fx-fill: -md-sys-color-on-error; +} + .error-container { -fx-background-color: -md-sys-color-error-container; } .error-container-text { -fx-text-fill: -md-sys-color-error-container; } +.error-container-fill { + -fx-fill: -md-sys-color-error-container; +} + .error { -fx-background-color: -md-sys-color-error; } .error-text { -fx-text-fill: -md-sys-color-error; } +.error-fill { + -fx-fill: -md-sys-color-error; +} /* Surface */ .inverse-on-surface { @@ -115,48 +180,79 @@ .inverse-on-surface-text { -fx-text-fill: -md-sys-color-inverse-on-surface; } +.inverse-on-surface-fill { + -fx-fill: -md-sys-color-inverse-on-surface; +} + .inverse-surface { -fx-background-color: -md-sys-color-inverse-surface; } .inverse-surface-text { -fx-text-fill: -md-sys-color-inverse-surface; } +.inverse-surface-fill { + -fx-fill: -md-sys-color-inverse-surface; +} + .on-surface-variant { -fx-background-color: -md-sys-color-on-surface-variant; } .on-surface-variant-text { -fx-text-fill: -md-sys-color-on-surface-variant; } +.on-surface-variant-fill { + -fx-fill: -md-sys-color-on-surface-variant; +} + .on-surface { -fx-background-color: -md-sys-color-on-surface; } .on-surface-text { -fx-text-fill: -md-sys-color-on-surface; } +.on-surface-fill { + -fx-fill: -md-sys-color-on-surface; +} + .surface-variant { -fx-background-color: -md-sys-color-surface-variant; } .surface-variant-text { -fx-text-fill: -md-sys-color-surface-variant; } +.surface-variant-fill { + -fx-fill: -md-sys-color-surface-variant; +} + .surface { -fx-background-color: -md-sys-color-surface; } .surface-text { -fx-text-fill: -md-sys-color-surface; } +.surface-fill { + -fx-fill: -md-sys-color-surface; +} + .surface-tint { -fx-background-color: -md-sys-color-surface-tint; } .surface-tint-text { -fx-text-fill: -md-sys-color-surface-tint; } +.surface-tint-fill { + -fx-fill: -md-sys-color-surface-tint; +} + .surface-tint-color { -fx-background-color: -md-sys-color-surface-tint-color; } .surface-tint-color-text { -fx-text-fill: -md-sys-color-surface-tint-color; } +.surface-tint-color-fill { + -fx-fill: -md-sys-color-surface-tint-color; +} /* Background */ .on-background { @@ -171,6 +267,10 @@ .background-text { -fx-text-fill: -md-sys-color-background; } +.background-fill { + -fx-text-fill: -md-sys-color-background; +} + /* Shadow */ .outline { @@ -179,12 +279,19 @@ .outline-text { -fx-text-fill: -md-sys-color-outline; } +.outline-fill { + -fx--fill: -md-sys-color-outline; +} + .shadow { -fx-background-color: -md-sys-color-shadow; } .shadow-text { -fx-text-fill: -md-sys-color-shadow; } +.shadow-fill { + -fx-fill: -md-sys-color-shadow; +} diff --git a/src/main/resources/nl/isygameclient/css/modules/icons.module.css b/src/main/resources/nl/isygameclient/css/modules/icons.module.css @@ -1,11 +0,0 @@ -.search { - -fx-shape: "M9 2C5.1458514 2 2 5.1458514 2 9C2 12.854149 5.1458514 16 9 16C10.747998 16 12.345009 15.348024 13.574219 14.28125L14 14.707031L14 16L20 22L22 20L16 14L14.707031 14L14.28125 13.574219C15.348024 12.345009 16 10.747998 16 9C16 5.1458514 12.854149 2 9 2 z M 9 4C11.773268 4 14 6.2267316 14 9C14 11.773268 11.773268 14 9 14C6.2267316 14 4 11.773268 4 9C4 6.2267316 6.2267316 4 9 4 z"; -} - -.close { - -fx-shape: "M4.7070312 3.2929688L3.2929688 4.7070312L10.585938 12L3.2929688 19.292969L4.7070312 20.707031L12 13.414062L19.292969 20.707031L20.707031 19.292969L13.414062 12L20.707031 4.7070312L19.292969 3.2929688L12 10.585938L4.7070312 3.2929688 z"; -} - -.settings { - -fx-shape: "M11.423828 2C11.179828 2 10.969688 2.1769687 10.929688 2.4179688L10.646484 4.1230469C10.159736 4.2067166 9.689176 4.3360771 9.2363281 4.5039062L8.1347656 3.1679688C7.9797656 2.9789688 7.7100469 2.9297344 7.4980469 3.0527344L6.5019531 3.6289062C6.2899531 3.7509062 6.1972031 4.0083281 6.2832031 4.2363281L6.8886719 5.8535156C6.513238 6.1663963 6.1663963 6.513238 5.8535156 6.8886719L4.2363281 6.2832031C4.0083281 6.1972031 3.7509062 6.2899531 3.6289062 6.5019531L3.0527344 7.4980469C2.9297344 7.7100469 2.9789688 7.9797656 3.1679688 8.1347656L4.5039062 9.2363281C4.3360771 9.689176 4.2067166 10.159736 4.1230469 10.646484L2.4179688 10.929688C2.1769687 10.970688 2 11.178828 2 11.423828L2 12.576172C2 12.820172 2.1769687 13.030312 2.4179688 13.070312L4.1230469 13.353516C4.2067166 13.840264 4.3360771 14.310824 4.5039062 14.763672L3.1679688 15.865234C2.9789687 16.020234 2.9307344 16.289953 3.0527344 16.501953L3.6289062 17.498047C3.7509062 17.710047 4.0083281 17.802797 4.2363281 17.716797L5.8535156 17.111328C6.1663963 17.486762 6.513238 17.833604 6.8886719 18.146484L6.2832031 19.763672C6.1972031 19.992672 6.2909531 20.249094 6.5019531 20.371094L7.4980469 20.947266C7.7100469 21.069266 7.9797656 21.020031 8.1347656 20.832031L9.234375 19.496094C9.6877476 19.664236 10.15912 19.793178 10.646484 19.876953L10.929688 21.582031C10.970688 21.823031 11.178828 22 11.423828 22L12.576172 22C12.820172 22 13.030312 21.823031 13.070312 21.582031L13.353516 19.876953C13.840264 19.793283 14.310824 19.663923 14.763672 19.496094L15.865234 20.832031C16.020234 21.021031 16.289953 21.069266 16.501953 20.947266L17.498047 20.371094C17.710047 20.249094 17.802797 19.991672 17.716797 19.763672L17.111328 18.146484C17.486762 17.833604 17.833604 17.486762 18.146484 17.111328L19.763672 17.716797C19.992672 17.802797 20.249094 17.709047 20.371094 17.498047L20.947266 16.501953C21.069266 16.289953 21.020031 16.020234 20.832031 15.865234L19.496094 14.765625C19.664236 14.312252 19.793178 13.84088 19.876953 13.353516L21.582031 13.070312C21.823031 13.029312 22 12.821172 22 12.576172L22 11.423828C22 11.179828 21.823031 10.969688 21.582031 10.929688L19.876953 10.646484C19.793283 10.159736 19.663923 9.689176 19.496094 9.2363281L20.832031 8.1347656C21.021031 7.9797656 21.069266 7.7100469 20.947266 7.4980469L20.371094 6.5019531C20.249094 6.2899531 19.991672 6.1972031 19.763672 6.2832031L18.146484 6.8886719C17.833604 6.513238 17.486762 6.1663963 17.111328 5.8535156L17.716797 4.2363281C17.802797 4.0073281 17.709047 3.7509062 17.498047 3.6289062L16.501953 3.0527344C16.289953 2.9307344 16.020234 2.9799687 15.865234 3.1679688L14.765625 4.5039062C14.312252 4.3357635 13.84088 4.2068225 13.353516 4.1230469L13.070312 2.4179688C13.029312 2.1769687 12.821172 2 12.576172 2L11.423828 2 z M 11 6.0898438L11 9.1738281 A 3 3 0 0 0 9 12 A 3 3 0 0 0 9.0507812 12.548828L6.3789062 14.089844C6.1382306 13.438833 6 12.736987 6 12C6 9.0161425 8.1553612 6.5637988 11 6.0898438 z M 13 6.0898438C15.844639 6.5637988 18 9.0161425 18 12C18 12.737875 17.86037 13.440133 17.619141 14.091797L14.947266 12.546875 A 3 3 0 0 0 15 12 A 3 3 0 0 0 13 9.1757812L13 6.0898438 z M 13.947266 14.277344L16.628906 15.826172C15.530388 17.156023 13.868625 18 12 18C10.131375 18 8.4696124 17.156023 7.3710938 15.826172L10.050781 14.279297 A 3 3 0 0 0 12 15 A 3 3 0 0 0 13.947266 14.277344 z"; -} diff --git a/src/main/resources/nl/isygameclient/css/style.css b/src/main/resources/nl/isygameclient/css/style.css @@ -1,27 +1,73 @@ +.transparent { + -fx-background-color: transparent; +} + + +/* Menu Bar */ +.menu-bar { + -fx-effect: dropshadow(three-pass-box, black, 10, 0, 0, 0); +} +.menu-bar-settings { + -fx-fill: -md-sys-color-inverse-surface; +} + + +/* Search Bar */ .search-bar { -fx-border-color: -md-sys-color-on-surface; - -fx-border-width: 2; - -fx-border-radius: 10 10 10 10; + -fx-border-width: 1; + -fx-border-radius: 2 2 2 2; } .search-field { - -fx-padding: 0 0 0 35; -fx-text-fill: -md-sys-color-inverse-surface; } -.icon { - -fx-fill: -md-sys-color-inverse-surface; +.ttt-button { + -fx-background-insets: 5px; + -fx-background-color: -md-sys-color-surface-variant; + -fx-text-fill: -md-sys-color-inverse-surface; } -.menu-bar-settings { - -fx-fill: -md-sys-color-inverse-surface; + +/* Game List */ +#gamesList { + -fx-background-radius: 0; + -fx-vbar-policy: never; } -.transparent { - -fx-background-color: transparent; +#gamesList .list-cell { + -fx-background-color: transparent; + -fx-text-fill: -md-sys-color-inverse-surface; + + /* Large Body Type Style */ + -fx-font-size: 16; + -fx-font-style: normal; + -fx-font-weight: 400; } -#gamesList { - -fx-margin: 10 0 0 0; - -fx-background-radius: 10; +#gamesList .list-cell:filled:selected:focused, .list-cell:filled:selected { + -fx-background-color: -md-ref-palette-tertiary50; + -fx-text-fill: white; +} + +#gamesList .list-cell:even { + -fx-background-color: -md-sys-color-surface-variant; } + +#gamesList .list-cell:odd { + -fx-background-color: -md-sys-color-inverse-on-surface; +} + +#gamesList .list-cell:filled:hover { + -fx-background-color: -md-ref-palette-tertiary60; + -fx-text-fill: white; +} + + +/* Game Detail */ + +#gameDetail { + -fx-border-color: -md-sys-color-surface; + -fx-border-width: 0 5 0 0; +} +\ No newline at end of file diff --git a/src/main/resources/nl/isygameclient/views/GameCard.fxml b/src/main/resources/nl/isygameclient/views/GameCard.fxml @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> + +<?import java.lang.*?> +<?import javafx.geometry.*?> +<?import javafx.scene.control.*?> +<?import javafx.scene.image.*?> +<?import javafx.scene.layout.*?> +<AnchorPane> + <VBox prefHeight="200.0" prefWidth="100.0" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" + alignment="CENTER"> + <VBox.margin> + <Insets topRightBottomLeft="5"/> + </VBox.margin> + <styleClass> + <String fx:value="on-surface"/> + </styleClass> + <ImageView fitHeight="150.0" fitWidth="150.0" pickOnBounds="true" preserveRatio="true"/> + <Separator prefWidth="200"/> + <Label alignment="TOP_RIGHT" text="Title"/> + </VBox> +</AnchorPane> diff --git a/src/main/resources/nl/isygameclient/views/GameSelectorMenu.fxml b/src/main/resources/nl/isygameclient/views/GameSelectorMenu.fxml @@ -8,7 +8,8 @@ <?import javafx.geometry.Insets?> -<AnchorPane minHeight="480.0" minWidth="600.0" prefHeight="1080.0" prefWidth="1920.0" styleClass="inverse-on-surface" +<?import javafx.scene.image.ImageView?> +<AnchorPane minHeight="480.0" minWidth="600.0" prefHeight="1080.0" prefWidth="1920.0" styleClass="white" stylesheets="@../css/theme.css" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="nl.isygameclient.controllers.GameSelectorMenuController"> <BorderPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" @@ -17,8 +18,10 @@ <HBox prefHeight="50.0" prefWidth="Infinity"> <styleClass> <String fx:value="menu-bar"/> - <String fx:value="surface"/> + <String fx:value="background"/> </styleClass> + + <!-- Menu Buttons --> <JFXButton text="Store" disable="true" prefHeight="Infinity"> <styleClass> <String fx:value="title-medium"/> @@ -51,39 +54,107 @@ </top> <left> <AnchorPane> - <VBox prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" - AnchorPane.topAnchor="0.0"> - <StackPane styleClass="search-bar" minHeight="35.0"> - <TextField fx:id="searchBox" promptText="Search" prefHeight="40.0"> + <HBox AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0"> + + <!-- Search Container --> + <VBox prefWidth="200.0" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" + AnchorPane.leftAnchor="0.0"> + <padding> + <Insets left="5" right="5"/> + </padding> + <styleClass> + <String fx:value="search-container"/> + <String fx:value="surface"/> + </styleClass> + + <!-- Search Field --> + <StackPane> <styleClass> - <String fx:value="search-field"/> - <String fx:value="transparent"/> + <String fx:value="search-bar"/> + <String fx:value="inverse-on-surface"/> </styleClass> - </TextField> + <VBox.margin> + <Insets bottom="5.0" top="10.0"/> + </VBox.margin> - <JFXButton StackPane.alignment="CENTER_LEFT" prefHeight="40.0" disable="true"> - <graphic> - <MaterialIconView StackPane.alignment="CENTER_LEFT" glyphName="SEARCH" glyphSize="20" styleClass="icon"/> - </graphic> - </JFXButton> + <TextField fx:id="searchBox" promptText="Search"> + <padding> + <Insets left="35" right="35"/> + </padding> + <styleClass> + <String fx:value="search-field"/> + <String fx:value="transparent"/> + </styleClass> + </TextField> - <JFXButton StackPane.alignment="CENTER_RIGHT" prefHeight="40.0"> - <graphic> - <MaterialIconView glyphName="CLOSE" glyphSize="16" styleClass="icon"/> - </graphic> - </JFXButton> + <JFXButton StackPane.alignment="CENTER_LEFT" disable="true"> + <graphic> + <MaterialIconView StackPane.alignment="CENTER_LEFT" glyphName="SEARCH" + glyphSize="20" styleClass="icon"> + <styleClass> + <String fx:value="on-surface-fill"/> + </styleClass> + </MaterialIconView> + </graphic> + </JFXButton> - </StackPane> - <ListView fx:id="gamesList" VBox.vgrow="ALWAYS" styleClass="surface"> + <JFXButton onAction="#onClearSearchButtonClick" StackPane.alignment="CENTER_RIGHT"> + <graphic> + <MaterialIconView glyphName="CLOSE" glyphSize="16" styleClass="icon"> + <styleClass> + <String fx:value="on-surface-fill"/> + </styleClass> + </MaterialIconView> + </graphic> + </JFXButton> + </StackPane> + + <!-- Search List --> + <ListView fx:id="gamesList" VBox.vgrow="ALWAYS" styleClass="surface"> + <padding> + <Insets topRightBottomLeft="1"/> + </padding> + </ListView> + </VBox> + + + <!-- Game Detail Container --> + <VBox fx:id="gameDetail" prefWidth="400" HBox.hgrow="ALWAYS" alignment="TOP_CENTER" + styleClass="inverse-on-surface"> <padding> - <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> + <Insets topRightBottomLeft="20"/> </padding> - </ListView> - </VBox> + <Label text="Game Title"> + <styleClass> + <String fx:value="display-small"/> + <String fx:value="on-surface-text"/> + <String fx:value="on-surface-fill"/> + </styleClass> + </Label> + </VBox> + </HBox> </AnchorPane> </left> <center> + <AnchorPane> + <VBox fx:id="gameContainer" AnchorPane.bottomAnchor="0" AnchorPane.leftAnchor="0" + AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0"> + <styleClass> + <String fx:value="surface-variant"/> + </styleClass> + <HBox> + <padding> + <Insets topRightBottomLeft="10"/> + </padding> + <fx:include source="GameCard.fxml"/> + <fx:include source="GameCard.fxml"/> + <fx:include source="GameCard.fxml"/> + <fx:include source="GameCard.fxml"/> + <fx:include source="GameCard.fxml"/> + </HBox> + </VBox> + </AnchorPane> </center> </BorderPane> </AnchorPane> diff --git a/src/main/resources/nl/isygameclient/views/TicTacToeGame.fxml b/src/main/resources/nl/isygameclient/views/TicTacToeGame.fxml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="UTF-8"?> + +<?import java.lang.*?> +<?import javafx.scene.layout.*?> + +<?import com.jfoenix.controls.JFXButton?> +<?import javafx.geometry.Insets?> +<AnchorPane stylesheets="@../css/theme.css" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" + fx:controller="nl.isygameclient.controllers.TicTacToeGameController"> + <styleClass> + <String fx:value="surface"/> + </styleClass> + <BorderPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" + AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0"> + <left> + <VBox prefWidth="200" styleClass="on-surface" alignment="BOTTOM_CENTER"> + <padding> + <Insets topRightBottomLeft="20"/> + </padding> + <JFXButton text="new game"> + <styleClass> + <String fx:value="primary-container"/> + <String fx:value="inverse-surface-text"/> + <String fx:value="body-large"/> + <String fx:value="bordered"/> + </styleClass> + </JFXButton> + </VBox> + </left> + <center> + + <GridPane fx:id="grid" alignment="CENTER"> + + </GridPane> + + </center> + </BorderPane> + +</AnchorPane> diff --git a/src/main/resources/nl/isygameclient/views/hello-view.fxml b/src/main/resources/nl/isygameclient/views/hello-view.fxml @@ -1,19 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> - -<?import javafx.geometry.*?> -<?import javafx.scene.control.*?> -<?import javafx.scene.layout.*?> - - -<AnchorPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="nl.isygameclient.controllers.HelloController"> - <children> - <VBox alignment="CENTER" spacing="20.0" stylesheets="@../css/hello.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> - <padding> - <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" /> - </padding> - - <Label fx:id="welcomeText" /> - <Button fx:id="welcomeButton" onAction="#onHelloButtonClick" text="Hello!" /> - </VBox> - </children> -</AnchorPane>