fixed css styles breaking game over text (#79)

Stacked-Success · Aug 21, 2024 · 8735e91 · 8735e91
1 parent e0218b2
commit 8735e91
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 33 deletions.
diff --git a/src/main/resources/css/homescreen.css b/src/main/resources/css/homescreen.css
@@ -1,13 +1,14 @@
 /* Import the Poppins font from Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
 
 /* Apply a background color to the AnchorPane */
 .anchor-pane {
     -fx-background-color: #f0f0f0; /* Light grey background */
 }
 
 /* Style the Text elements */
-.text {
+.gen-text {
     -fx-fill: #333333; /* Dark grey text color */
     -fx-font-family: "Poppins", sans-serif; /* Stylish and clean font family */
 }
@@ -98,3 +99,36 @@
     -fx-border-width: 2px; /* Border width */
     -fx-shape: "M 0 0 H 30 V 30 H 0 Z"; /* Larger square shape for thumb */
 }
+
+/* GAMEBOARD STYLING */
+#gameOverLabel {
+    -fx-font-family: "Press Start 2P";
+    -fx-font-size: 30px; 
+    -fx-fill: white; 
+    -fx-opacity: 1;
+    -fx-alignment: center;
+}
+
+#gameOverScoreLabel {
+    -fx-font-family: "Press Start 2P";
+    -fx-font-size: 20px;
+    -fx-font-weight: Normal; 
+    -fx-fill: #ffffff; 
+}
+
+#gameOverHighScoreLabel {
+    -fx-font-family: "Press Start 2P";
+    -fx-font-size: 20px;
+    -fx-font-weight: Normal; 
+    -fx-fill: #ffffff; 
+}
+
+.button#gameOverRestartButton {
+    -fx-text-fill: Black;
+    -fx-font-size: 17px;
+}
+
+.button#gameOverExitButton {
+    -fx-text-fill: Black;
+    -fx-font-size: 17px;
+}
diff --git a/src/main/resources/fxml/GameBoard.fxml b/src/main/resources/fxml/GameBoard.fxml
@@ -45,7 +45,7 @@
 <?import javafx.scene.shape.Rectangle?>
 <?import javafx.scene.text.Font?>
 
-<Pane fx:id="basePane" onKeyPressed="#onKeyPressed" prefHeight="900.0" prefWidth="1350.0" xmlns="http://javafx.com/javafx/22" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.stackedsuccess.controllers.GameBoardController">
+<Pane fx:id="basePane" onKeyPressed="#onKeyPressed" prefHeight="900.0" prefWidth="1350.0" xmlns="http://javafx.com/javafx/20.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.stackedsuccess.controllers.GameBoardController">
    <children>
       <Pane fx:id="pauseBackground" onKeyPressed="#onKeyPressed" opacity="0.0" prefHeight="900.0" prefWidth="1350.0" style="-fx-background-color: grey;" />
       <Pane fx:id="pauseLabelBackground" onKeyPressed="#onKeyPressed" opacity="0.0" prefHeight="900.0" prefWidth="1350.0">
@@ -58,58 +58,52 @@
          </children>
       </Pane>
       <Button fx:id="gameOverRestartButton" disable="true" layoutX="54.0" layoutY="567.0" mnemonicParsing="false" onAction="#onClickRestart" prefHeight="40.0" prefWidth="222.0" style="-fx-background-color: #ffffff;" text="Restart / Main Menu" visible="false">
-         <font>
-            <Font name="Agency FB" size="17.0" />
-         </font>
          <cursor>
             <Cursor fx:constant="HAND" />
          </cursor>
       </Button>
       <Button fx:id="gameOverExitButton" disable="true" layoutX="55.0" layoutY="665.0" mnemonicParsing="false" onAction="#onClickExit" prefHeight="40.0" prefWidth="220.0" style="-fx-background-color: #ffffff;" text="EXIT" visible="false">
-         <font>
-            <Font name="Agency FB" size="17.0" />
-         </font>
          <cursor>
             <Cursor fx:constant="HAND" />
          </cursor>
       </Button>
       <VBox alignment="CENTER" layoutX="979.0" layoutY="500.0" prefHeight="330.0" prefWidth="250.0" style="-fx-background-insets: 5; -fx-border-width: 3; -fx-border-style: solid; -fx-border-radius: 18 18 18 18; -fx-background-color: #afafaf; -fx-background-radius: 17 17 17 17;">
          <children>
-            <Label alignment="CENTER" prefHeight="50.0" prefWidth="315.0" style="-fx-font-weight: BOLD;" text="SCORE" textFill="WHITE">
+            <Label alignment="CENTER" prefHeight="50.0" prefWidth="315.0" style="-fx-font-weight: BOLD;" styleClass="gen-text" text="SCORE" textFill="WHITE">
                <effect>
                   <DropShadow color="GRAY" offsetX="5.0" offsetY="5.0" />
                </effect>
                <font>
                   <Font name="Arial Bold" size="36.0" />
                </font>
             </Label>
-            <Label fx:id="scoreLabel" alignment="CENTER" contentDisplay="TOP" prefHeight="50.0" prefWidth="200.0" style="-fx-background-color: LIGHTGRAY; -fx-background-radius: 18 18 18 18; -fx-border-color: BLACK; -fx-border-radius: 18 18 18 18;" text="0">
+            <Label fx:id="scoreLabel" alignment="CENTER" contentDisplay="TOP" prefHeight="50.0" prefWidth="200.0" style="-fx-background-color: LIGHTGRAY; -fx-background-radius: 18 18 18 18; -fx-border-color: BLACK; -fx-border-radius: 18 18 18 18;" styleClass="gen-text" text="0">
                <font>
                   <Font name="Arial" size="36.0" />
                </font>
             </Label>
-            <Label alignment="CENTER" prefHeight="50.0" prefWidth="315.0" style="-fx-font-weight: BOLD;" text="LINE" textFill="WHITE">
+            <Label alignment="CENTER" prefHeight="50.0" prefWidth="315.0" style="-fx-font-weight: BOLD;" styleClass="gen-text" text="LINE" textFill="WHITE">
                <effect>
                   <DropShadow color="GRAY" offsetX="5.0" offsetY="5.0" />
                </effect>
                <font>
                   <Font name="Arial Bold" size="36.0" />
                </font>
             </Label>
-            <Label fx:id="lineLabel" alignment="CENTER" contentDisplay="TOP" prefHeight="50.0" prefWidth="200.0" style="-fx-background-color: LIGHTGRAY; -fx-background-radius: 18 18 18 18; -fx-border-color: BLACK; -fx-border-radius: 18 18 18 18;" text="0">
+            <Label fx:id="lineLabel" alignment="CENTER" contentDisplay="TOP" prefHeight="50.0" prefWidth="200.0" style="-fx-background-color: LIGHTGRAY; -fx-background-radius: 18 18 18 18; -fx-border-color: BLACK; -fx-border-radius: 18 18 18 18;" styleClass="gen-text" text="0">
                <font>
                   <Font name="Arial" size="36.0" />
                </font>
             </Label>
-            <Label alignment="CENTER" prefHeight="50.0" prefWidth="315.0" style="-fx-font-weight: BOLD;" text="LEVEL" textFill="WHITE">
+            <Label alignment="CENTER" prefHeight="50.0" prefWidth="315.0" style="-fx-font-weight: BOLD;" styleClass="gen-text" text="LEVEL" textFill="WHITE">
                <effect>
                   <DropShadow color="GRAY" offsetX="5.0" offsetY="5.0" />
                </effect>
                <font>
                   <Font name="Arial" size="36.0" />
                </font>
             </Label>
-            <Label fx:id="levelLabel" alignment="CENTER" contentDisplay="TOP" prefHeight="50.0" prefWidth="200.0" style="-fx-background-color: LIGHTGRAY; -fx-background-radius: 18 18 18 18; -fx-border-color: BLACK; -fx-border-radius: 18 18 18 18;" text="1">
+            <Label fx:id="levelLabel" alignment="CENTER" contentDisplay="TOP" prefHeight="50.0" prefWidth="200.0" style="-fx-background-color: LIGHTGRAY; -fx-background-radius: 18 18 18 18; -fx-border-color: BLACK; -fx-border-radius: 18 18 18 18;" styleClass="gen-text" text="1">
                <font>
                   <Font name="Arial" size="36.0" />
                </font>
@@ -118,7 +112,7 @@
       </VBox>
       <VBox alignment="CENTER" layoutX="979.0" layoutY="176.0" prefHeight="150.0" prefWidth="250.0" style="-fx-background-insets: 5; -fx-border-width: 3; -fx-border-style: solid; -fx-border-radius: 18 18 18 18; -fx-background-color: #afafaf; -fx-background-radius: 17 17 17 17;">
          <children>
-            <Label alignment="CENTER" prefHeight="50.0" prefWidth="315.0" style="-fx-font-weight: BOLD;" text="NEXT" textFill="WHITE">
+            <Label alignment="CENTER" prefHeight="50.0" prefWidth="315.0" style="-fx-font-weight: BOLD;" styleClass="gen-text" text="NEXT" textFill="WHITE">
                <effect>
                   <DropShadow color="GRAY" offsetX="5.0" offsetY="5.0" />
                </effect>
@@ -135,22 +129,22 @@
       </VBox>
       <VBox alignment="CENTER" layoutX="55.0" layoutY="176.0" prefHeight="150.0" prefWidth="250.0" style="-fx-background-insets: 5; -fx-border-width: 3; -fx-border-style: solid; -fx-border-radius: 18 18 18 18; -fx-background-color: #afafaf; -fx-background-radius: 17 17 17 17;">
          <children>
-            <Label alignment="CENTER" prefHeight="50.0" prefWidth="315.0" style="-fx-font-weight: BOLD;" text="HOLD" textFill="WHITE">
+            <Label alignment="CENTER" prefHeight="50.0" prefWidth="315.0" style="-fx-font-weight: BOLD;" styleClass="gen-text" text="HOLD" textFill="WHITE">
                <effect>
                   <DropShadow color="GRAY" offsetX="5.0" offsetY="5.0" />
                </effect>
                <font>
                   <Font name="Arial Bold" size="36.0" />
                </font>
             </Label>
-            <Pane fx:id="holdPiece" maxWidth="-Infinity" prefHeight="80.0" prefWidth="200.0" style="-fx-border-color: black; -fx-background-color: LIGHTGRAY; -fx-border-radius: 18 18 18 18; -fx-background-radius: 18 18 18 18;">
+            <Pane fx:id="holdPiece" maxWidth="-Infinity" prefHeight="80.0" prefWidth="200.0" style="-fx-border-color: black; -fx-background-color: LIGHTGRAY; -fx-border-radius: 18 18 18 18; -fx-background-radius: 18 18 18 18;" styleClass="gen-text">
                <children>
                   <ImageView fx:id="holdPieceView" fitHeight="49.0" fitWidth="65.0" layoutX="68.0" layoutY="16.0" pickOnBounds="true" preserveRatio="true" />
                </children>
             </Pane>
          </children>
       </VBox>
-      <Label alignment="TOP_LEFT" layoutX="19.0" layoutY="33.0" prefHeight="92.0" prefWidth="364.0" style="-fx-font-weight: BOLD;" text="TETRIS: STACKED SUCCESS" textFill="#525252" wrapText="true">
+      <Label alignment="TOP_LEFT" layoutX="19.0" layoutY="33.0" prefHeight="92.0" prefWidth="364.0" style="-fx-font-weight: BOLD;" styleClass="gen-text" text="TETRIS: STACKED SUCCESS" textFill="#525252" wrapText="true">
          <effect>
             <DropShadow color="GRAY" offsetX="5.0" offsetY="5.0" />
          </effect>
@@ -168,23 +162,15 @@
             <Cursor fx:constant="DISAPPEAR" />
          </cursor>
          <children>
-            <VBox fx:id="gameOverBox" alignment="CENTER" disable="true" layoutX="18.0" layoutY="20.0" prefHeight="820.0" prefWidth="453.0" spacing="60.0" visible="false">
+            <VBox fx:id="gameOverBox" alignment="CENTER" layoutX="12.0" prefHeight="820.0" prefWidth="453.0" spacing="60.0" visible="false">
                <children>
-                  <Label fx:id="gameOverLabel" text="GAME OVER!" textAlignment="CENTER" textFill="WHITE">
-                     <font>
-                        <Font name="Agency FB" size="86.0" />
-                     </font>
-                  </Label>
-                  <Label fx:id="gameOverScoreLabel" text="Label" textFill="WHITE">
-                     <font>
-                        <Font name="Agency FB" size="30.0" />
-                     </font>
-                  </Label>
-                  <Label fx:id="gameOverHighScoreLabel" layoutX="10.0" layoutY="10.0" text="Label" textFill="WHITE">
+                  <Label id="gameOverLabel" fx:id="gameOverLabel" text="GAME OVER!" textFill="WHITE">
                      <font>
-                        <Font name="Agency FB" size="30.0" />
+                        <Font name="Agency FB" size="60.0" />
                      </font>
                   </Label>
+                  <Label id="gameOverScoreLabel" fx:id="gameOverScoreLabel" text="Label" textFill="WHITE" />
+                  <Label id="gameOverHighScoreLabel" fx:id="gameOverHighScoreLabel" text="label" textFill="#fcfcfc" />
                </children>
             </VBox>
          </children>

diff --git a/src/main/resources/fxml/HomeScreen.fxml b/src/main/resources/fxml/HomeScreen.fxml
@@ -11,11 +11,11 @@
 
 <AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" onKeyPressed="#onKeyPressed" prefHeight="900.0" prefWidth="1300.0" xmlns="http://javafx.com/javafx/22" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.stackedsuccess.controllers.HomeScreenController">
     <children>
-        <Text id="titleText" layoutX="368.0" layoutY="98.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Stacked Success Presents" textAlignment="CENTER" wrappingWidth="483.88671875">
+        <Text id="titleText" layoutX="368.0" layoutY="98.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Stacked Success Presents" textAlignment="CENTER" wrappingWidth="483.88671875" styleClass="gen-text">
          <font>
             <Font size="30.0" />
          </font></Text>
-      <Text id="difficultyText" layoutX="593.0" layoutY="635.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Difficulty">
+      <Text styleClass="gen-text" id="difficultyText" layoutX="593.0" layoutY="635.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Difficulty">
          <font>
             <Font size="30.0" />
          </font>