diff --git a/Assets/Scripts/Save/SaveMenuController.cs b/Assets/Scripts/Save/SaveMenuController.cs
new file mode 100644
index 0000000000000000000000000000000000000000..7dd6b3e9fe88866f3befaec65e3a0d74d3fec3cb
--- /dev/null
+++ b/Assets/Scripts/Save/SaveMenuController.cs
@@ -0,0 +1,118 @@
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+public class SaveMenuController : MonoBehaviour
+{
+ private SaveAndLoad saveAndLoadManager;
+ private SaveAndLoad.SaveSlot saveSlot;
+ private List<VisualElement> slots;
+ private VisualElement root;
+ private int selectedIndex;
+ private string selectedTitle;
+ private VisualElement promptConf;
+ private string tempTitle;
+ private VisualElement tempSlot;
+
+ private void Awake() {
+ saveAndLoadManager = new SaveAndLoad();
+ root = GetComponent<UIDocument>().rootVisualElement;
+ slots = root.Query<VisualElement>("card").ToList();
+
+ // Load the save from file
+ UpdateSaveUI();
+
+ // Set the save variable and register callback
+ foreach (var slot in slots)
+ {
+ slot.RegisterCallback<ClickEvent, VisualElement>(WriteTitle, slot);
+ slot[0].RegisterCallback<BlurEvent, VisualElement>(PromptConfirmation, slot);
+ }
+ promptConf = root.Query<VisualElement>("PromptConfirmation").First();
+ promptConf.Q<Button>("YesButton").RegisterCallback<ClickEvent,VisualElement>(ConfirmSave,promptConf);
+ promptConf.Q<Button>("NoButton").RegisterCallback<ClickEvent,VisualElement>(CancelSave,promptConf);
+ }
+
+ private string getSlotTitle(VisualElement slot)
+ {
+ TextField data = slot.Query<TextField>("slotTitle");
+ return data.text;
+ }
+
+ private void setSlotTitle(VisualElement slot, string newTitle)
+ {
+ TextField data = slot.Query<TextField>("slotTitle");
+ data.value = newTitle;
+ }
+
+ private void WriteTitle(ClickEvent evt, VisualElement slot)
+ {
+ tempTitle = getSlotTitle(slot);
+ slot[0].focusable = true;
+ slot[0].Focus();
+ }
+
+ private void PromptConfirmation(BlurEvent evt, VisualElement slot)
+ {
+ slot[0].focusable = false;
+ selectedTitle = slot.Q<TextField>("slotTitle").text;
+ selectedIndex = int.Parse(slot.Q<Label>("slotNumber").text);
+ root.Q<Label>("ConfirmQ").text = "Simpan di slot " + selectedIndex + "?";
+ promptConf.style.display = DisplayStyle.Flex;
+ }
+
+ private void ConfirmSave(ClickEvent evt, VisualElement prompt)
+ {
+ saveAndLoadManager.SaveState(
+ selectedIndex, 90, "Level01", "Quest1",selectedTitle
+ );
+ prompt.style.display = DisplayStyle.None;
+ UpdateSaveUI();
+ }
+
+ private void CancelSave(ClickEvent evt, VisualElement prompt)
+ {
+ setSlotTitle(tempSlot,tempTitle);
+ prompt.style.display = DisplayStyle.None;
+ }
+
+ private void UpdateSaveUI(){
+ saveSlot = saveAndLoadManager.LoadState();
+
+ int idx = 1;
+ foreach (var slot in slots)
+ {
+ SaveAndLoad.SaveInstance currentSlot;
+ switch (idx)
+ {
+ case 1:
+ currentSlot = saveSlot.slot1;
+ break;
+ case 2:
+ currentSlot = saveSlot.slot2;
+ break;
+ default:
+ currentSlot = saveSlot.slot3;
+ break;
+ }
+
+ // Check if empty
+ if (currentSlot.isEmpty)
+ {
+ continue;
+ }
+
+ // Fill the title
+ TextField data = slot.Query<TextField>("slotTitle");
+ data.value = currentSlot.saveTitle;
+ // Fill the datetime
+ Label dateTime = slot.Query<Label>("slotDate");
+ dateTime.text = currentSlot.dateTime;
+ // Fill the finished quest
+ dateTime = slot.Query<Label>("finishedQuest");
+ dateTime.text = currentSlot.completedQuest;
+
+ idx++;
+ }
+ }
+}
diff --git a/Assets/Scripts/Save/TabbedMenu.uss b/Assets/Scripts/Save/TabbedMenu.uss
new file mode 100644
index 0000000000000000000000000000000000000000..0747c63c23f102f02563fe14a409da3f27bee1f2
--- /dev/null
+++ b/Assets/Scripts/Save/TabbedMenu.uss
@@ -0,0 +1,78 @@
+VisualElement {
+}
+
+.card {
+ margin: 15px;
+ transition: all 0.2s ease-in-out;
+ margin-top: 10px;
+ margin-left: 2.5%;
+ margin-right: 10px;
+ margin-bottom: 10px;
+ transition-property: scale;
+ transition-duration: 0.1ms;
+ transition-timing-function: linear;
+ justify-content: space-around;
+ background-color: rgb(96, 96, 96);
+}
+
+.card:hover {
+ background-color: rgb(0, 132, 106);
+ scale: 1.05 1.05;
+ transition-property: scale, background-color;
+ transition-duration: 0.1ms, 0.1s;
+ transition-timing-function: linear, linear;
+ transition-delay: 0s, 0s;
+ justify-content: space-around;
+}
+
+.cards {
+ flex-direction: row;
+ justify-content: space-around;
+ height: 388px;
+ align-items: center;
+ color: rgba(210, 210, 210, 0);
+}
+
+.button {
+ width: 120px;
+ height: 50px;
+ font-size: 22px;
+ background-color: rgb(56, 166, 52);
+ -unity-font: url('project://database/Assets/TextMesh%20Pro/Examples%20&%20Extras/Fonts/Bangers.ttf?fileID=12800000&guid=5dd49b3eacc540408c98eee0de38e0f1&type=3#Bangers');
+ -unity-font-style: bold;
+ border-left-color: rgba(255, 255, 255, 0);
+ border-right-color: rgba(255, 255, 255, 0);
+ border-top-color: rgba(255, 255, 255, 0);
+ border-bottom-color: rgba(255, 255, 255, 0);
+ color: rgb(255, 255, 255);
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+}
+
+.button:hover {
+ width: 120px;
+ height: 50px;
+ font-size: 22px;
+ background-color: rgb(56, 166, 52);
+ -unity-font: url('project://database/Assets/TextMesh%20Pro/Examples%20&%20Extras/Fonts/Bangers.ttf?fileID=12800000&guid=5dd49b3eacc540408c98eee0de38e0f1&type=3#Bangers');
+ -unity-font-style: bold;
+ border-left-color: rgba(255, 255, 255, 0);
+ border-right-color: rgba(255, 255, 255, 0);
+ border-top-color: rgba(255, 255, 255, 0);
+ border-bottom-color: rgba(255, 255, 255, 0);
+ transition-duration: 0.1s;
+ transition-property: scale;
+ scale: 1.2 1.2;
+}
+
+.TextField > TextInput {
+ background-color: rgba(0, 0, 0, 0);
+ border-left-width: 0;
+ border-right-width: 0;
+ border-top-width: 0;
+ border-bottom-width: 0;
+ -unity-text-align: middle-center;
+ color: rgb(255, 255, 255);
+}
diff --git a/Assets/Scripts/Save/TabbedMenu.uxml b/Assets/Scripts/Save/TabbedMenu.uxml
new file mode 100644
index 0000000000000000000000000000000000000000..21878f668d77d7a0d6b7185b4f6044a63606b6ee
--- /dev/null
+++ b/Assets/Scripts/Save/TabbedMenu.uxml
@@ -0,0 +1,35 @@
+<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="project://database/Assets/Scripts/Shop/SaveMenu/TabbedMenu.uss?fileID=7433441132597879392&guid=cd74a0dd198ca2b4db9f89593aaf5037&type=3#TabbedMenu" />
+ <ui:VisualElement style="height: 92px;">
+ <ui:Label text="Save" display-tooltip-when-elided="true" style="top: auto; left: auto; -unity-text-align: upper-center; font-size: 40px; padding-left: 0; padding-top: 10px; color: rgb(255, 255, 255); height: 79px;" />
+ </ui:VisualElement>
+ <ui:VisualElement name="cards" class="cards">
+ <ui:VisualElement name="card" class="card" style="width: 30%; height: 50%; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; color: rgb(255, 18, 18); transition-property: scale; transition-timing-function: linear; transition-duration: 0.1s; justify-content: space-around; align-items: center; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;">
+ <ui:TextField picking-mode="Ignore" text="Save Slot 1" name="slotTitle" is-delayed="false" max-length="15" focusable="true" class="slotTitle slotTitleInput TextField" style="color: rgb(255, 255, 255); font-size: 20px; -unity-text-align: middle-center; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0); -unity-background-image-tint-color: rgb(255, 255, 255); display: flex; -unity-text-outline-color: rgb(255, 244, 244); -unity-font: initial; -unity-font-style: bold; border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); width: 100%;" />
+ <ui:Label display-tooltip-when-elided="true" name="slotDate" enable-rich-text="false" style="font-size: 20px; color: rgb(255, 255, 255); -unity-text-align: middle-center; -unity-font-style: bold; width: 100%;" />
+ <ui:Label display-tooltip-when-elided="true" name="finishedQuest" enable-rich-text="false" style="font-size: 20px; color: rgb(255, 255, 255); width: 100%; -unity-text-align: middle-center;" />
+ <ui:Label text="1" display-tooltip-when-elided="true" name="slotNumber" style="display: none; visibility: visible;" />
+ </ui:VisualElement>
+ <ui:VisualElement name="card" class="card" style="width: 30%; height: 50%; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; color: rgb(255, 18, 18); transition-property: scale; transition-timing-function: linear; transition-duration: 0.1s; justify-content: space-around; align-items: center; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;">
+ <ui:TextField picking-mode="Ignore" text="Save Slot 2" name="slotTitle" is-delayed="false" max-length="15" focusable="false" class="slotTitle slotTitleInput TextField" style="color: rgb(255, 255, 255); font-size: 20px; -unity-text-align: middle-center; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0); -unity-background-image-tint-color: rgb(255, 255, 255); display: flex; -unity-text-outline-color: rgb(255, 244, 244); -unity-font: initial; -unity-font-style: bold; border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); width: 100%;" />
+ <ui:Label display-tooltip-when-elided="true" name="slotDate" enable-rich-text="false" style="font-size: 20px; color: rgb(255, 255, 255); width: 100%; -unity-text-align: middle-center;" />
+ <ui:Label display-tooltip-when-elided="true" name="finishedQuest" enable-rich-text="false" style="font-size: 20px; color: rgb(255, 255, 255); width: 100%; -unity-text-align: middle-center;" />
+ <ui:Label text="2" display-tooltip-when-elided="true" name="slotNumber" style="display: none; visibility: visible;" />
+ </ui:VisualElement>
+ <ui:VisualElement name="card" class="card" style="width: 30%; height: 50%; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; color: rgb(255, 18, 18); transition-property: scale; transition-timing-function: linear; transition-duration: 0.1s; justify-content: space-around; align-items: center; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px;">
+ <ui:TextField picking-mode="Ignore" text="Save Slot 3" name="slotTitle" is-delayed="false" max-length="15" focusable="false" class="slotTitle slotTitleInput TextField" style="color: rgb(255, 255, 255); font-size: 20px; -unity-text-align: middle-center; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0); -unity-background-image-tint-color: rgb(255, 255, 255); display: flex; -unity-text-outline-color: rgb(255, 244, 244); -unity-font: initial; -unity-font-style: bold; border-left-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-top-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); width: 100%;" />
+ <ui:Label display-tooltip-when-elided="true" name="slotDate" enable-rich-text="false" style="font-size: 20px; color: rgb(255, 255, 255); width: 100%; -unity-text-align: middle-center;" />
+ <ui:Label display-tooltip-when-elided="true" name="finishedQuest" enable-rich-text="false" style="font-size: 20px; color: rgb(255, 255, 255); width: 100%; -unity-text-align: middle-center;" />
+ <ui:Label text="3" display-tooltip-when-elided="true" name="slotNumber" style="display: none; visibility: visible;" />
+ </ui:VisualElement>
+ </ui:VisualElement>
+ <ui:VisualElement name="PromptConfirmation" focusable="false" style="display: none; position: absolute; width: 100%; height: 100%; opacity: 0.71; background-image: url('project://database/Assets/Textures/_opacity.jpg?fileID=2800000&guid=44884c03736864560a55f7f08709bd01&type=3#_opacity'); -unity-background-image-tint-color: rgb(0, 0, 0); justify-content: center; align-items: center;">
+ <ui:VisualElement style="background-color: rgb(255, 255, 255); width: 50%; height: 40%; opacity: 1; justify-content: center; align-items: center; border-top-left-radius: 25px; border-bottom-left-radius: 25px; border-top-right-radius: 25px; border-bottom-right-radius: 25px;">
+ <ui:Label text="Simpan di sini?" display-tooltip-when-elided="true" enable-rich-text="false" name="ConfirmQ" style="color: rgb(0, 0, 0); -unity-font: url('project://database/Assets/TextMesh%20Pro/Examples%20&%20Extras/Fonts/Bangers.ttf?fileID=12800000&guid=5dd49b3eacc540408c98eee0de38e0f1&type=3#Bangers'); font-size: 25px; -unity-font-style: bold; margin-bottom: 30px;" />
+ <ui:VisualElement style="left: auto; top: auto; width: 100%; flex-direction: row; justify-content: space-around; align-items: center;">
+ <ui:Button text="Iya" display-tooltip-when-elided="true" name="YesButton" enable-rich-text="false" class="button" style="overflow: visible;" />
+ <ui:Button text="Tidak" display-tooltip-when-elided="true" name="NoButton" enable-rich-text="false" class="button" style="-unity-font: url('project://database/Assets/TextMesh%20Pro/Examples%20&%20Extras/Fonts/Bangers.ttf?fileID=12800000&guid=5dd49b3eacc540408c98eee0de38e0f1&type=3#Bangers'); font-size: 22px; background-color: rgb(164, 16, 0); overflow: visible;" />
+ </ui:VisualElement>
+ </ui:VisualElement>
+ </ui:VisualElement>
+</ui:UXML>