Merge branch 'issue-112' into 'main'

Display game rules on the title screen (closes #112)

Closes #112

See merge request szt-ab-2022/group-01/tree-o!104

Assets/Scenes/MainMenu.unity

@@ -427,3 +427,43 @@ MonoBehaviour:
   m_Script: {fileID: 11500000, guid: bd5ff973fabe4977b60c0a9681cec3df, type: 3}
   m_Name: 
   m_EditorClassIdentifier: 
+  gameRules: 'In this game, two players face each other, trying to destroy the other''s
+    castle with units while defending theirs with towers. The game is divided into
+    rounds. Every round consists of 3 phases.
+
+    #First phase: Building
+
+    In
+    this phase, first the blue and then the red player can build, upgrade, and destroy
+    their towers. The players can choose a tower from the bottom-side bar and place
+    it on any of the highlighted squares if they have enough money. On the right
+    side of the screen are shown the stats of the selected tower. If a tower from
+    the gamefield is selected, the players can also upgrade it, or destroy it for
+    a refund.
+
+    #Second phase: Unit training
+
+    In the second phase, following
+    the team order stated in the first phase, the players can buy units and plan
+    their route to the enemy''s castle. Choosing a unit is similar to choosing a
+    tower, but after clicking on one of them from the bottom bar, if the player has
+    enough money, the unit gets queued up in one of the barracks and will be spawned
+    in the last phase. When clicking on one of the barracks, the players can add
+    a checkpoint to those units'' paths that will spawn from that barrack by clicking
+    on a reachable tile with a left-click, or remove a checkpoint with a right-click.
+    The brightness of the checkpoints indicates their order: the brightest checkpoint
+    is the last before the enemy castle. Note that the players have the same budget
+    for the towers and the units, and they have to manage it accordingly to succeed.
+
+    #Third
+    phase: Attacking
+
+    In this phase, the players can only inspect their fight.
+    The units that are left alive from the previous rounds continue their journey
+    into the enemy base, while the ones purchased in this round start to deploy from
+    the barracks. When a unit reaches its destination, it damages it and gets destroyed.
+    If one castle gets destroyed until the end of the round, the enemy team wins.
+    If both get destroyed, the game is tied.
+
+    When hovering the cursor over
+    a unit or a castle, a healthbar appears, showing its current health.'

Assets/Scripts/Presentation/UI/MainMenu.cs

@@ -7,16 +7,49 @@ namespace Presentation.UI {
 public class MainMenu : MonoBehaviour {
 	private const string NewGameButton = "NewGameButton";
 	private const string ExitButton = "ExitButton";
+	private const string ReturnButton = "ReturnButton";
+	private const string TextContent = "TextContent";
+	private const string RulesButton = "RulesButton";
+	private const string MainContent = "MainContent";
+	private const string GameDescription = "GameDescription";
+
+	private const string TitleStyle = "title-style";
+	private const string ParagraphStyle = "paragraph-style";
+
+	[SerializeField]
+	[TextArea]
+	private string gameRules;
+
+	private UIDocument _uiDocument;
+	private VisualElement RootElement => _uiDocument.rootVisualElement;
 
 	private void Start() {
-		var document = GetComponent<UIDocument>();
-		VisualElement root = document.rootVisualElement;
+		_uiDocument = GetComponent<UIDocument>();
+
+		RootElement.Q<Button>(NewGameButton).clicked += OnNewGameClicked;
+		RootElement.Q<Button>(ExitButton).clicked += OnExitClicked;
+		RootElement.Q<Button>(RulesButton).clicked += OnRulesClicked;
+		RootElement.Q<Button>(ReturnButton).clicked += ShowMainContent;
+		ShowMainContent();
+	}
+
+	private void ShowMainContent() {
+		RootElement.Q(GameDescription).style.display = DisplayStyle.None;
+		RootElement.Q(MainContent).style.display = DisplayStyle.Flex;
+	}
 
-		var newGameButton = root.Q<Button>(NewGameButton);
-		var exitButton = root.Q<Button>(ExitButton);
+	private void OnRulesClicked() {
+		RootElement.Q(GameDescription).style.display = DisplayStyle.Flex;
+		RootElement.Q(MainContent).style.display = DisplayStyle.None;
 
-		newGameButton.clicked += OnNewGameClicked;
-		exitButton.clicked += OnExitClicked;
+		var textContent = RootElement.Q(TextContent);
+		textContent.Clear();
+		foreach (string entry in gameRules.Split('\n')) {
+			bool isTitle = entry.StartsWith("#");
+			var label = new Label() { text = isTitle ? entry.Substring(1) : entry };
+			label.AddToClassList(isTitle ? TitleStyle : ParagraphStyle);
+			textContent.Add(label);
+		}
 	}
 
 	private void OnNewGameClicked() {

Assets/UI/MainMenu/MainMenuDocument.uxml

 <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
     <Style src="Styles/MainMenuStyles.uss" />
     <ui:VisualElement style="justify-content: space-between; align-items: stretch; height: 100%; width: 100%; flex-direction: row; padding-left: 56px; padding-right: 56px; padding-top: 56px; padding-bottom: 56px;">
-        <ui:VisualElement name="MainContent" style="align-items: center; justify-content: space-between; max-width: 35%;">
+        <ui:VisualElement name="MainContent" style="align-items: center; justify-content: space-between; max-width: 35%; display: none;">
             <ui:Label text="Do-o Tower Defense" display-tooltip-when-elided="true" style="font-size: 52px; white-space: normal; -unity-text-align: upper-center; color: rgb(255, 255, 255); -unity-font-style: bold;" />
             <ui:VisualElement style="align-items: stretch;">
                 <ui:Button text="NEW GAME" display-tooltip-when-elided="true" name="NewGameButton" class="button-style" style="background-color: rgb(255, 255, 255);" />
+                <ui:Button text="RULES" display-tooltip-when-elided="true" name="RulesButton" class="button-style" style="background-color: rgb(255, 255, 255);" />
                 <ui:Button text="EXIT" display-tooltip-when-elided="true" name="ExitButton" class="button-style" style="font-size: 24px; background-color: rgb(255, 255, 255);" />
             </ui:VisualElement>
         </ui:VisualElement>
+        <ui:VisualElement name="GameDescription" style="max-width: 35%; color: rgb(255, 255, 255); display: flex; align-items: flex-start;">
+            <ui:ScrollView scroll-deceleration-rate="0,135" elasticity="0,1" show-horizontal-scroller="false" show-vertical-scroller="false" horizontal-scroller-visibility="Hidden" vertical-scroller-visibility="Hidden" style="align-items: stretch;">
+                <ui:Button text="Return" display-tooltip-when-elided="true" name="ReturnButton" class="button-style" style="padding-left: 24px; padding-right: 24px; padding-top: 8px; padding-bottom: 8px; background-color: rgb(255, 255, 255); margin-left: 0; margin-right: 0;" />
+                <ui:Label text="Rules" display-tooltip-when-elided="true" style="font-size: 52px; white-space: normal; -unity-text-align: upper-left; color: rgb(255, 255, 255); -unity-font-style: bold; margin-top: 16px; margin-bottom: 16px;" />
+                <ui:VisualElement name="TextContent">
+                    <ui:Label text="This is a title" display-tooltip-when-elided="true" name="title" class="title-style" />
+                    <ui:Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." display-tooltip-when-elided="true" name="text" class="paragraph-style" />
+                    <ui:Label text="This is a title" display-tooltip-when-elided="true" name="title" style="font-size: 24px; -unity-font-style: bold;" />
+                    <ui:Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." display-tooltip-when-elided="true" name="text" style="white-space: normal; font-size: 16px;" />
+                    <ui:Label text="This is a title" display-tooltip-when-elided="true" name="title" style="font-size: 24px; -unity-font-style: bold;" />
+                    <ui:Label text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." display-tooltip-when-elided="true" name="text" style="white-space: normal; font-size: 16px;" />
+                </ui:VisualElement>
+            </ui:ScrollView>
+        </ui:VisualElement>
     </ui:VisualElement>
 </ui:UXML>

Assets/UI/MainMenu/Styles/MainMenuStyles.uss

@@ -12,5 +12,15 @@
     border-bottom-left-radius: 12px;
     border-top-right-radius: 12px;
     border-bottom-right-radius: 12px;
-    color: rgba(27, 27, 27, 255);
+    color: rgb(27, 27, 27);
+}
+
+.title-style {
+    font-size: 24px;
+    -unity-font-style: bold;
+}
+
+.paragraph-style {
+    white-space: normal;
+    font-size: 16px;
 }