Added Game Page (Fix #13)

Signed-off-by: Harsh Kumar <harsh19043@iiitd.ac.in>
hadron43 · Nov 22, 2020 · 377e611 · 377e611
1 parent 9d2e5a8
commit 377e611
Show file tree

Hide file tree

Showing 15 changed files with 261 additions and 20 deletions.
diff --git a/src/Controller.java b/src/Controller.java
@@ -20,7 +20,7 @@
 import java.util.ResourceBundle;
 
 public class Controller implements Initializable {
-    @FXML private Pane ring_1, ring_2, ring_3, icon_1, produced_btn, box;
+    @FXML private Pane ring_1, ring_2, ring_3, icon_1, produced_btn, box, ball, csContainer, colourSwitcher;
     @FXML private ImageView ring_4, ring_5;
 
     @FXML private ImageView backButton;
@@ -66,6 +66,7 @@ public void initialize(URL url, ResourceBundle rb) {
         r[3].setNode(ring_4);
         r[4].setNode(ring_5);
         r[5].setNode(icon_1);
+        r[5].setNode(csContainer);
         r[6].setNode(produced_btn);
 
         for(int i=0; i<items; ++i)
@@ -83,6 +84,30 @@ public void initialize(URL url, ResourceBundle rb) {
                 e.printStackTrace();
             }
         }
+
+        if(ball != null) {
+            Pane newPane;
+            try {
+                newPane = FXMLLoader.load(getClass().getResource("/elements/ball.fxml"));
+                List<Node> parentChildren = ((Pane) ball.getParent()).getChildren();
+                parentChildren.set(parentChildren.indexOf(ball), newPane);
+                box = newPane;
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+        }
+
+        if(colourSwitcher != null) {
+            Pane temp;
+            try {
+                temp = FXMLLoader.load(getClass().getResource("/elements/colourSwitcher.fxml"));
+                List<Node> parentChildren = ((Pane) colourSwitcher.getParent()).getChildren();
+                parentChildren.set(parentChildren.indexOf(colourSwitcher), temp);
+                colourSwitcher = temp;
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+        }
     }
 
     @FXML
@@ -107,4 +132,9 @@ private void loadStats(MouseEvent me) throws Exception {
     private void backToHome(MouseEvent me) throws Exception {
         Main.loadHome();
     }
+
+    @FXML
+    private void loadGamePage(MouseEvent me) throws Exception {
+        Main.loadGame();
+    }
 }
diff --git a/src/Main.java b/src/Main.java
@@ -53,6 +53,12 @@ protected static void loadStats() throws Exception{
         primaryStage.getScene().setRoot(root);
     }
 
+    protected static void loadGame() throws Exception {
+        Parent root = FXMLLoader.load(Main.class.getResource("scenes/game.fxml"));
+        scale(root);
+        primaryStage.getScene().setRoot(root);
+    }
+
     protected static void loadHome() throws Exception {
         Parent root = FXMLLoader.load(Main.class.getResource("scenes/home.fxml"));
         scale(root);

diff --git a/src/assets/README.md b/src/assets/README.md
@@ -12,4 +12,7 @@ This contains the references for all the resources used.
 - `home/trophy.png` <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from www.flaticon.com
 - `home.png` <a href="https://www.flaticon.com/authors/bqlqn" title="bqlqn">bqlqn</a> from www.flaticon.com
 - `stars-earned.png` <a href="https://www.flaticon.com/authors/dinosoftlabs" title="DinosoftLabs">DinosoftLabs</a> from www.flaticon.com
-- `score-trophy.png` <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from www.flaticon.com
+- `score-trophy.png` <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from www.flaticon.com
+- `game/pause.png` <a href="https://www.flaticon.com/authors/chanut" title="Chanut">Chanut</a> from www.flaticon.com
+- `game/tap.png` <a href="https://www.flaticon.com/authors/kiranshastry" title="Kiranshastry">Kiranshastry</a> from www.flaticon.com
+- `game/star.png` <a href="https://www.flaticon.com/authors/pixel-perfect" title="Pixel perfect">Pixel perfect</a> from www.flaticon.com
diff --git a/src/assets/game/pause.png b/src/assets/game/pause.png
diff --git a/src/assets/game/star.png b/src/assets/game/star.png
diff --git a/src/assets/game/tap.png b/src/assets/game/tap.png
diff --git a/src/elements/ElementsController.java b/src/elements/ElementsController.java
@@ -0,0 +1,51 @@
+package elements;
+
+import javafx.animation.Animation;
+import javafx.animation.Interpolator;
+import javafx.animation.RotateTransition;
+import javafx.animation.TranslateTransition;
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.Node;
+import javafx.scene.layout.Pane;
+import javafx.scene.transform.Rotate;
+import javafx.util.Duration;
+
+import java.net.URL;
+import java.util.ArrayList;
+import java.util.ResourceBundle;
+
+public class ElementsController implements Initializable {
+    static int defaultRotatingDuration = 4000;
+
+    ArrayList<RotateTransition> rotatingElements;
+    @FXML
+    Pane ball;
+
+    private void addRotatingNode(Node node, int timeInMillis, boolean clockwise) {
+        RotateTransition rt = new RotateTransition();
+        rt.setAxis(Rotate.Z_AXIS);
+        rt.setByAngle((clockwise) ? 360 : -360);
+        rt.setCycleCount(Animation.INDEFINITE);
+        rt.setInterpolator(Interpolator.LINEAR);
+        rt.setDuration(Duration.millis(timeInMillis));
+        rt.setNode(node);
+        rt.play();
+    }
+
+    private void addRotatingNode(Node node) {
+        addRotatingNode(node, defaultRotatingDuration, true);
+    }
+
+    @Override
+    public void initialize(URL url, ResourceBundle resourceBundle) {
+        rotatingElements = new ArrayList<>();
+        TranslateTransition tt = new TranslateTransition();
+        tt.setByY(-100);
+        tt.setDuration(Duration.millis(500));
+        tt.setCycleCount(Animation.INDEFINITE);
+        tt.setAutoReverse(true);
+        tt.setNode(ball);
+        tt.play();
+    }
+}
diff --git a/src/elements/ball.fxml b/src/elements/ball.fxml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.shape.*?>
+
+<Pane xmlns:fx="http://javafx.com/fxml/1" fx:id="ball" minHeight="28.0" minWidth="28.0" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="elements.ElementsController">
+   <children>
+      <Circle fill="DODGERBLUE" layoutX="14.0" layoutY="14.0" radius="14.0" stroke="BLACK" strokeType="INSIDE" styleClass="fill-pink" />
+   </children>
+</Pane>
diff --git a/src/elements/colourSwitcher.fxml b/src/elements/colourSwitcher.fxml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.shape.*?>
+
+<Pane xmlns:fx="http://javafx.com/fxml/1" fx:id="colourSwitcher" minHeight="28.0" minWidth="28.0" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="elements.ElementsController">
+   <children>
+       <Arc layoutX="14" layoutY="14" length="90.0" radiusX="14.0" radiusY="14.0" stroke="BLACK" strokeType="INSIDE" styleClass="fill-yellow" type="ROUND" />
+       <Arc layoutX="14" layoutY="14" length="90.0" radiusX="14.0" radiusY="14.0" startAngle="90.0" stroke="BLACK" strokeType="INSIDE" styleClass="fill-pink" type="ROUND" />
+       <Arc layoutX="14" layoutY="14" length="90.0" radiusX="14.0" radiusY="14.0" startAngle="180.0" stroke="BLACK" strokeType="INSIDE" styleClass="fill-blue" type="ROUND" />
+       <Arc layoutX="14" layoutY="14" length="90.0" radiusX="14.0" radiusY="14.0" startAngle="270.0" stroke="BLACK" strokeType="INSIDE" styleClass="fill-purple" type="ROUND" />
+   </children>
+</Pane>
diff --git a/src/elements/star.fxml b/src/elements/star.fxml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.layout.Pane?>
+<Pane xmlns:fx="http://javafx.com/fxml/1" fx:id="star" minHeight="75.0" maxHeight="75" minWidth="75.0" maxWidth="75" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="elements.ElementsController">
+    <ImageView fitWidth="75" fitHeight="75">
+        <Image url="@../assets/game/star.png" />
+    </ImageView>
+</Pane>
+
diff --git a/src/obstacles/ObstaclesController.java b/src/obstacles/ObstaclesController.java
@@ -4,22 +4,25 @@
 import javafx.animation.Interpolator;
 import javafx.animation.RotateTransition;
 import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
 import javafx.fxml.Initializable;
 import javafx.scene.Node;
 import javafx.scene.layout.Pane;
 import javafx.scene.transform.Rotate;
 import javafx.util.Duration;
 
+import java.io.IOException;
 import java.net.URL;
 import java.util.ArrayList;
+import java.util.List;
 import java.util.ResourceBundle;
 
 public class ObstaclesController implements Initializable {
     static int defaultRotatingDuration = 4000;
 
     ArrayList<RotateTransition> rotatingElements;
     @FXML
-    Pane circle, circleFlow;
+    Pane circle, circleFlow, star;
 
     private void addRotatingNode(Node node, int timeInMillis, boolean clockwise) {
         RotateTransition rt = new RotateTransition();
@@ -41,5 +44,18 @@ public void initialize(URL url, ResourceBundle resourceBundle) {
         rotatingElements = new ArrayList<>();
         addRotatingNode(circle);
         addRotatingNode(circleFlow);
+
+        // Load star
+        if(star != null) {
+            Pane temp;
+            try {
+                temp = FXMLLoader.load(getClass().getResource("/elements/star.fxml"));
+                List<Node> parentChildren = ((Pane) star.getParent()).getChildren();
+                parentChildren.set(parentChildren.indexOf(star), temp);
+                star = temp;
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+        }
     }
 }
diff --git a/src/obstacles/circle.fxml b/src/obstacles/circle.fxml
@@ -4,20 +4,17 @@
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.shape.*?>
 
-<Pane xmlns:fx="http://javafx.com/fxml/1" fx:id="circle" prefHeight="350" prefWidth="350"
-      xmlns="http://javafx.com/javafx/11.0.1" fx:controller="obstacles.ObstaclesController">
+<Pane xmlns:fx="http://javafx.com/fxml/1" fx:id="circle" prefHeight="350" prefWidth="350" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="obstacles.ObstaclesController">
 
     <stylesheets>
-        <URL value="@../style/style.css"/>
+        <URL value="@../style/style.css" />
     </stylesheets>
-    <Arc focusTraversable="true" layoutX="175.0" layoutY="175.0" length="90.0" radiusX="175.0" radiusY="175.0"
-         startAngle="0.0" styleClass="fill-yellow" type="ROUND"/>
-    <Arc focusTraversable="true" layoutX="175.0" layoutY="175.0" length="90.0" radiusX="175.0" radiusY="175.0"
-         startAngle="90.0" styleClass="fill-blue" type="ROUND"/>
-    <Arc focusTraversable="true" layoutX="175.0" layoutY="175.0" length="90.0" radiusX="175.0" radiusY="175.0"
-         startAngle="180.0" styleClass="fill-pink" type="ROUND"/>
-    <Arc focusTraversable="true" layoutX="175.0" layoutY="175.0" length="90.0" radiusX="175.0" radiusY="175.0"
-         startAngle="270.0" styleClass="fill-purple" type="ROUND"/>
-    <Circle fill="WHITE" layoutX="175.0" layoutY="175.0" radius="147.0" stroke="BLACK" strokeType="INSIDE"
-            styleClass="fill-soft-black"/>
+    <Arc focusTraversable="true" layoutX="175.0" layoutY="175.0" length="90.0" radiusX="175.0" radiusY="175.0" startAngle="0.0" styleClass="fill-yellow" type="ROUND" />
+    <Arc focusTraversable="true" layoutX="175.0" layoutY="175.0" length="90.0" radiusX="175.0" radiusY="175.0" startAngle="90.0" styleClass="fill-blue" type="ROUND" />
+    <Arc focusTraversable="true" layoutX="175.0" layoutY="175.0" length="90.0" radiusX="175.0" radiusY="175.0" startAngle="180.0" styleClass="fill-pink" type="ROUND" />
+    <Arc focusTraversable="true" layoutX="175.0" layoutY="175.0" length="90.0" radiusX="175.0" radiusY="175.0" startAngle="270.0" styleClass="fill-purple" type="ROUND" />
+    <Circle fill="WHITE" layoutX="175.0" layoutY="175.0" radius="147.0" stroke="BLACK" strokeType="INSIDE" styleClass="fill-soft-black" />
+    <Pane layoutX="138.0" layoutY="138.0" prefHeight="75" prefWidth="75">
+        <Pane fx:id="star" />
+    </Pane>
 </Pane>
diff --git a/src/obstacles/circleFlow.fxml b/src/obstacles/circleFlow.fxml
@@ -42,4 +42,7 @@
     <Circle layoutX="266.0" layoutY="42.0" radius="14.0" styleClass="fill-purple" />
     <Circle layoutX="314.0" layoutY="93.0" radius="14.0" styleClass="fill-purple" />
 
+    <Pane layoutX="138.0" layoutY="138.0" prefHeight="75" prefWidth="75">
+        <Pane fx:id="star" />
+    </Pane>
 </Pane>
diff --git a/src/scenes/game.fxml b/src/scenes/game.fxml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import java.lang.*?>
+<?import java.net.*?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.*?>
+<?import javafx.scene.image.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.shape.*?>
+<?import javafx.scene.text.*?>
+
+<BorderPane xmlns:fx="http://javafx.com/fxml/1" minHeight="1024" minWidth="768" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="Controller">
+    <center>
+        <Pane fx:id="obstaclesBox" maxHeight="1024" maxWidth="768" minHeight="1024" minWidth="768">
+            <Pane layoutX="214.0" layoutY="-20.0" mouseTransparent="true" prefHeight="340.0" prefWidth="340.0">
+                <Pane fx:id="box" />
+            </Pane>
+
+            <VBox alignment="CENTER" layoutX="219.0" layoutY="393.0" opacity="0.7" scaleX="0.75" scaleY="0.75">
+                <FlowPane prefHeight="134.0" prefWidth="213.0">
+                    <Text styleClass="home-heading" text="C" />
+
+                    <ImageView fx:id="ring_4">
+                        <Image requestedHeight="65" requestedWidth="65" url="@../assets/home/circle.png" />
+                        <FlowPane.margin>
+                            <Insets bottom="25.0" left="10.0" right="10.0" />
+                        </FlowPane.margin>
+                    </ImageView>
+
+                    <Text styleClass="home-heading" text="L" />
+
+                    <ImageView fx:id="ring_5">
+                        <Image requestedHeight="65" requestedWidth="65" url="@../assets/home/circle.png" />
+                        <FlowPane.margin>
+                            <Insets bottom="25.0" left="10.0" right="10.0" />
+                        </FlowPane.margin>
+                    </ImageView>
+
+                    <Text styleClass="home-heading" text="R" />
+                </FlowPane>
+                <Text styleClass="home-heading" text="SWITCH" wrappingWidth="330.56640625" />
+            </VBox>
+
+            <Pane fx:id="ballContainer" layoutX="367.0" layoutY="733.0" prefHeight="36.0" prefWidth="36.0">
+                <Pane fx:id="ball" prefHeight="110.0" prefWidth="36.0">
+
+                </Pane>
+            </Pane>
+
+            <Pane fx:id="csContainer" layoutX="367.0" layoutY="368.0" prefHeight="28.0" prefWidth="28.0">
+                <Pane fx:id="colourSwitcher" prefHeight="110.0" prefWidth="36.0">
+
+                </Pane>
+            </Pane>
+
+            <ImageView fitHeight="189.0" fitWidth="130.0" layoutX="354.0" layoutY="780.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="BOTTOM_CENTER">
+                <Image url="@../assets/game/tap.png" />
+            </ImageView>
+        </Pane>
+    </center>
+
+    <top>
+        <BorderPane>
+            <left>
+                <Pane layoutX="14.0" layoutY="14.0" prefHeight="101.0" prefWidth="94.0" styleClass="small-on-hover" AnchorPane.leftAnchor="40.0" AnchorPane.topAnchor="40.0" BorderPane.alignment="CENTER">
+                    <cursor>
+                        <Cursor fx:constant="HAND" />
+                    </cursor>
+                    <Circle fill="white" layoutX="48.0" layoutY="53.0" radius="43.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" AnchorPane.leftAnchor="19.0" AnchorPane.rightAnchor="19.0" BorderPane.alignment="CENTER">
+                     <styleClass>
+                        <String fx:value="back-button" />
+                        <String fx:value="fill-grey" />
+                     </styleClass></Circle>
+                    <Text fx:id="score" fill="WHITE" layoutX="16.0" layoutY="66.0" text="0" textAlignment="CENTER" wrappingWidth="63.0" />
+                </Pane>
+            </left>
+            <right>
+                <Pane layoutX="660.0" layoutY="14.0" onMouseClicked="#backToHome" prefHeight="101.0" prefWidth="94.0" styleClass="small-on-hover" AnchorPane.rightAnchor="40.0" AnchorPane.topAnchor="40.0" BorderPane.alignment="CENTER">
+                    <cursor>
+                        <Cursor fx:constant="HAND" />
+                    </cursor>
+                    <Circle layoutX="48.0" layoutY="53.0" radius="43.0" stroke="BLACK" strokeType="INSIDE" strokeWidth="0.0" AnchorPane.leftAnchor="19.0" AnchorPane.rightAnchor="19.0" BorderPane.alignment="CENTER">
+                     <styleClass>
+                        <String fx:value="back-button" />
+                        <String fx:value="fill-grey" />
+                     </styleClass></Circle>
+                    <ImageView fitHeight="54.0" fitWidth="59.0" layoutX="21.0" layoutY="26.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="BOTTOM_CENTER">
+                        <Image url="@../assets/game/pause.png" />
+                    </ImageView>
+                </Pane>
+            </right>
+         <padding>
+            <Insets left="25.0" right="25.0" top="25.0" />
+         </padding>
+        </BorderPane>
+    </top>
+
+    <stylesheets>
+        <URL value="@../style/style.css" />
+    </stylesheets>
+</BorderPane>
diff --git a/src/scenes/home.fxml b/src/scenes/home.fxml
@@ -102,7 +102,7 @@
                 <Arc layoutX="150.0" layoutY="150.0" length="90.0" radiusX="150.0" radiusY="150.0" startAngle="270.0" stroke="BLACK" strokeType="INSIDE" styleClass="fill-yellow" type="ROUND" />
                 <Circle layoutX="150.0" layoutY="150.0" radius="120.0" stroke="BLACK" strokeType="INSIDE" styleClass="fill-soft-black" />
             </Pane>
-            <Pane layoutX="84.0" layoutY="86.0" prefHeight="129.0" prefWidth="133.0" styleClass="small-on-hover">
+            <Pane layoutX="84.0" layoutY="86.0" onMouseClicked="#loadGamePage" prefHeight="129.0" prefWidth="133.0" styleClass="small-on-hover">
                 <Circle layoutX="66.0" layoutY="64.0" radius="67.0" stroke="BLACK" strokeType="INSIDE" styleClass="fill-grey">
                     <cursor>
                         <Cursor fx:constant="HAND" />
@@ -130,7 +130,7 @@
                     <padding>
                         <Insets bottom="50.0" top="100.0" />
                     </padding>
-                    <Pane fx:id="icon_1" prefHeight="101.0" prefWidth="90.0" onMouseClicked="#loadStats" styleClass="small-on-hover">
+                    <Pane fx:id="icon_1" onMouseClicked="#loadStats" prefHeight="101.0" prefWidth="90.0" styleClass="small-on-hover">
                         <cursor>
                             <Cursor fx:constant="HAND" />
                         </cursor>
@@ -143,15 +143,15 @@
             </left>
             <center>
                 <VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="266.0" prefWidth="359.0">
-                    <Button maxWidth="Infinity" styleClass="feedback-button" text="Resume Game">
+                    <Button maxWidth="Infinity" onMouseClicked="#loadGamePage" styleClass="feedback-button" text="Resume Game">
                         <cursor>
                             <Cursor fx:constant="HAND" />
                         </cursor>
                         <VBox.margin>
                             <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
                         </VBox.margin>
                     </Button>
-                    <Button maxWidth="Infinity" styleClass="feedback-button" text="Start New Game">
+                    <Button maxWidth="Infinity" onMouseClicked="#loadGamePage" styleClass="feedback-button" text="Start New Game">
                         <cursor>
                             <Cursor fx:constant="HAND" />
                         </cursor>