chore: Create question popup

src/main/java/io/rpg/controller/Controller.java

@@ -7,10 +7,7 @@
 import io.rpg.model.data.Position;
 import io.rpg.model.data.Vector;
 import io.rpg.model.location.LocationModel;
-import io.rpg.model.object.CollectibleGameObject;
-import io.rpg.model.object.GameObject;
-import io.rpg.model.object.InteractiveGameObject;
-import io.rpg.model.object.Player;
+import io.rpg.model.object.*;
 import io.rpg.util.Result;
 import io.rpg.view.GameObjectView;
 import io.rpg.view.LocationView;
@@ -147,6 +144,7 @@ public void onKeyboardEvent(KeyboardEvent event) {
       switch (payload.getCode()) {
         case F -> popupController.openPointsPopup(5, getWindowCenterX(), getWindowCenterY());
         case G -> popupController.openTextPopup("Hello!", getWindowCenterX(), getWindowCenterY());
+        case Q -> popupController.openQuestionPopup(new Question("How many bits are there in one byte?", new String[]{"1/8", "1024", "8", "256"}, 'C'), getWindowCenterX(), getWindowCenterY());
         case L -> onAction((Action) new LocationChangeAction("location-2", new Position(1, 2)));
       }
     }

src/main/java/io/rpg/controller/PopupController.java

@@ -1,5 +1,7 @@
 package io.rpg.controller;
 
+import io.rpg.model.object.Question;
+import io.rpg.view.popups.QuestionPopup;
 import io.rpg.view.popups.TextImagePopup;
 import io.rpg.view.popups.TextPopup;
 import javafx.scene.image.Image;
@@ -49,6 +51,13 @@ public void openPointsPopup(int pointsCount, int x, int y) {
     openTextImagePopup("You earned " + pointsCount + " points!", coinImage, x, y);
   }
 
+  public void openQuestionPopup(Question question, int x, int y) {
+    QuestionPopup popupScene = new QuestionPopup(question);
+    popupStage.setScene(popupScene);
+    popupStage.show();
+    popupStage.setX(x - popupScene.getWidth() / 2);
+    popupStage.setY(y - popupScene.getHeight() / 2);
+  }
 
   public void hidePopup() {
     popupStage.hide();

src/main/java/io/rpg/model/object/Question.java

@@ -0,0 +1,7 @@
+package io.rpg.model.object;
+
+public record Question(
+  String question,
+  String [] answers,
+  char correctAnswer
+) {}

src/main/java/io/rpg/view/popups/QuestionPopup.java

@@ -0,0 +1,73 @@
+package io.rpg.view.popups;
+
+import io.rpg.model.object.Question;
+import io.rpg.viewmodel.QuestionPopupViewModel;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Group;
+import javafx.scene.Parent;
+import javafx.scene.Scene;
+import javafx.scene.paint.Color;
+
+import java.io.IOException;
+import java.util.Objects;
+
+public class QuestionPopup extends Scene {
+
+  private final QuestionPopupViewModel viewModel;
+  private final Question question;
+
+  public QuestionPopup(Question question, String backgroundPath) {
+    this(question);
+    viewModel.setBackgroundImage(backgroundPath);
+  }
+
+  public QuestionPopup(Question question) {
+    super(new Group(), Color.TRANSPARENT);
+
+    this.question = question;
+
+    FXMLLoader loader = new FXMLLoader(Objects.requireNonNull(QuestionPopupViewModel.class.getResource("question-popup-view.fxml")));
+    Parent root = null;
+
+    try {
+      root = loader.load();
+    } catch (IOException e) {
+      e.printStackTrace();
+    }
+
+    this.setRoot(root);
+
+    viewModel = loader.getController();
+    viewModel.setQuestion(question.question(), question.answers());
+
+    viewModel.setButtonCallback('A', event -> this.answerSelected('A'));
+    viewModel.setButtonCallback('B', event -> this.answerSelected('B'));
+    viewModel.setButtonCallback('C', event -> this.answerSelected('C'));
+    viewModel.setButtonCallback('D', event -> this.answerSelected('D'));
+
+    this.setFill(Color.TRANSPARENT);
+  }
+
+  public void answerSelected(char answer) {
+    char correctAnswer = question.correctAnswer();
+    if (answer == correctAnswer){
+      viewModel.setQuestionLabel("Correct!");
+    } else {
+      viewModel.highlightWrong(answer);
+      viewModel.setQuestionLabel("Answer " + answer + " is incorrect. The correct answer is " + correctAnswer + ": " + question.answers()[getAnswerIndex(correctAnswer)]);
+    }
+
+    viewModel.highlightCorrect(correctAnswer);
+    viewModel.removeButtonCallbacks();
+  }
+
+  private int getAnswerIndex(char answerCode) {
+    return switch (answerCode) {
+      case 'A' -> 0;
+      case 'B' -> 1;
+      case 'C' -> 2;
+      case 'D' -> 3;
+      default -> throw new IllegalStateException("Unexpected answer code: " + answerCode);
+    };
+  }
+}

src/main/java/io/rpg/viewmodel/QuestionPopupViewModel.java

@@ -0,0 +1,66 @@
+package io.rpg.viewmodel;
+
+import javafx.event.EventHandler;
+import javafx.fxml.FXML;
+import javafx.scene.control.Button;
+import javafx.scene.control.Label;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.input.MouseEvent;
+import javafx.scene.layout.Pane;
+
+public class QuestionPopupViewModel {
+
+  @FXML private Label questionLabel;
+  @FXML private Pane backgroundPane;
+  @FXML private ImageView backgroundImage;
+  @FXML private Button aButton, bButton, cButton, dButton;
+
+  public void setQuestion(String question, String[] answers) {
+    questionLabel.setText(question);
+    aButton.setText("A: " + answers[0]);
+    bButton.setText("B: " + answers[1]);
+    cButton.setText("C: " + answers[2]);
+    dButton.setText("D: " + answers[3]);
+  }
+
+  public void setQuestionLabel(String text) {
+    questionLabel.setText(text);
+  }
+
+  public void setBackgroundImage(String url) {
+    Image image = new Image(url);
+    backgroundImage.setImage(image);
+  }
+
+  private Button getButtonFromCode(char buttonCode) {
+    return switch (buttonCode) {
+      case 'A' -> aButton;
+      case 'B' -> bButton;
+      case 'C' -> cButton;
+      case 'D' -> dButton;
+      default -> throw new IllegalStateException("Unexpected value: " + buttonCode);
+    };
+  }
+
+  public void setButtonCallback(char buttonCode, EventHandler<? super MouseEvent> callback) {
+    getButtonFromCode(buttonCode).setOnMouseClicked(callback);
+  }
+
+  public void removeButtonCallbacks() {
+    aButton.setOnMouseClicked(null);
+    bButton.setOnMouseClicked(null);
+    cButton.setOnMouseClicked(null);
+    dButton.setOnMouseClicked(null);
+  }
+
+  public void highlightCorrect(char buttonCode) {
+    Button button = getButtonFromCode(buttonCode);
+    button.setStyle(button.getStyle() + "-fx-border-color: #3b803b; -fx-border-width: 5px;");
+  }
+
+  public void highlightWrong(char buttonCode) {
+    Button button = getButtonFromCode(buttonCode);
+    button.setStyle(button.getStyle() + "-fx-border-color: #a93e3e; -fx-border-width: 5px;");
+  }
+}

src/main/java/io/rpg/viewmodel/TextImagePopupViewModel.java

@@ -30,7 +30,7 @@ public void setImage(Image image) {
   }
 
   public void setTextSize(int size) {
-    label.setStyle("-fx-font-family: Monospaced; -fx-text-fill: white; -fx-font-weight: bold; -fx-font-size: " + size);
+    label.setStyle("-fx-font-family: Monospaced; -fx-text-fill: white; -fx-font-weight: bold; -fx-font-size: " + size + ";");
   }
 
   public void setBackgroundImage(String url) {

src/main/java/io/rpg/viewmodel/TextPopupViewModel.java

@@ -25,7 +25,7 @@ public void setText(String text) {
   }
 
   public void setTextSize(int size) {
-    label.setStyle("-fx-font-family: Monospaced; -fx-text-fill: white; -fx-font-weight: bold; -fx-font-size: " + size);
+    label.setStyle("-fx-font-family: Monospaced; -fx-text-fill: white; -fx-font-weight: bold; -fx-font-size: " + size + ";");
   }
 
   public void setBackgroundImage(String url) {

src/main/resources/css/styles.css

@@ -1,3 +1,8 @@
-.button:hover {
+.ok_button:hover {
     -fx-text-fill: white;
+}
+
+.answer_button:hover {
+    -fx-border-color: white;
+    -fx-border-width: 5px;
 }

src/main/resources/io/rpg/viewmodel/question-popup-view.fxml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.image.Image?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.layout.Pane?>
+<?import javafx.scene.text.Font?>
+
+<Pane fx:id="backgroundPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="500.0" style="-fx-background-color: transparent;" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="io.rpg.viewmodel.QuestionPopupViewModel">
+   <children>
+      <ImageView fx:id="backgroundImage" fitHeight="516.0" fitWidth="500.0" pickOnBounds="true" preserveRatio="true">
+         <image>
+            <Image url="@../../../../../../assets/popup-background-3.png" />
+         </image>
+      </ImageView>
+      <Label fx:id="questionLabel" alignment="CENTER" contentDisplay="CENTER" layoutX="42.0" layoutY="52.0" prefHeight="138.0" prefWidth="416.0" text="QUESTION" textAlignment="CENTER" textFill="WHITE" wrapText="true">
+         <font>
+            <Font name="Monospaced Bold" size="18.0" />
+         </font>
+      </Label>
+      <Button fx:id="bButton" cancelButton="true" contentDisplay="CENTER" layoutX="255.0" layoutY="200.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="200.0" style="-fx-background-color: BB722E;" styleClass="answer_button" stylesheets="@../../../css/styles.css" text="B:" textAlignment="CENTER" textFill="WHITE">
+         <font>
+            <Font name="Monospaced Bold" size="14.0" />
+         </font>
+      </Button>
+      <Button fx:id="aButton" cancelButton="true" contentDisplay="CENTER" layoutX="45.0" layoutY="200.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="200.0" style="-fx-background-color: BB722E;" styleClass="answer_button" stylesheets="@../../../css/styles.css" text="A:" textAlignment="CENTER" textFill="WHITE">
+         <font>
+            <Font name="Monospaced Bold" size="14.0" />
+         </font>
+      </Button>
+      <Button fx:id="dButton" cancelButton="true" contentDisplay="CENTER" layoutX="255.0" layoutY="310.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="200.0" style="-fx-background-color: BB722E;" styleClass="answer_button" stylesheets="@../../../css/styles.css" text="D:" textAlignment="CENTER" textFill="WHITE">
+         <font>
+            <Font name="Monospaced Bold" size="14.0" />
+         </font>
+      </Button>
+      <Button fx:id="cButton" cancelButton="true" contentDisplay="CENTER" layoutX="45.0" layoutY="310.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="200.0" style="-fx-background-color: BB722E;" styleClass="answer_button" stylesheets="@../../../css/styles.css" text="C:" textAlignment="CENTER" textFill="WHITE">
+         <font>
+            <Font name="Monospaced Bold" size="14.0" />
+         </font>
+      </Button>
+   </children>
+</Pane>

src/main/resources/io/rpg/viewmodel/text-image-popup-view.fxml

@@ -19,7 +19,7 @@
             <Font name="Monospaced Bold" size="25.0" />
          </font>
       </Label>
-      <Button fx:id="okButton" cancelButton="true" contentDisplay="CENTER" layoutX="215.0" layoutY="205.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="58.0" style="-fx-background-color: transparent;" stylesheets="@../../../css/styles.css" text="OK" textAlignment="CENTER" textFill="#0d0c14">
+      <Button fx:id="okButton" cancelButton="true" contentDisplay="CENTER" layoutX="215.0" layoutY="205.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="58.0" style="-fx-background-color: transparent;" styleClass="ok_button" stylesheets="@../../../css/styles.css" text="OK" textAlignment="CENTER" textFill="#0d0c14">
          <font>
             <Font name="Monospaced Bold" size="20.0" />
          </font>

src/main/resources/io/rpg/viewmodel/text-popup-view.fxml

@@ -19,7 +19,7 @@
             <Font name="Monospaced Bold" size="25.0" />
          </font>
       </Label>
-      <Button fx:id="okButton" cancelButton="true" contentDisplay="CENTER" layoutX="216.0" layoutY="205.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="58.0" style="-fx-background-color: transparent;" stylesheets="@../../../css/styles.css" text="OK" textAlignment="CENTER" textFill="#97401d">
+      <Button fx:id="okButton" cancelButton="true" contentDisplay="CENTER" layoutX="216.0" layoutY="205.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="58.0" style="-fx-background-color: transparent;" styleClass="ok_button" stylesheets="@../../../css/styles.css" text="OK" textAlignment="CENTER" textFill="#97401d">
          <font>
             <Font name="Monospaced Bold" size="20.0" />
          </font>