From daad80c098f8ab3e66f5e2c07071dc5b84e79a2a Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Sun, 17 Jul 2022 16:57:57 -0500 Subject: [PATCH] Add recipe for displaying a save's progress --- docs/.vitepress/config.js | 7 ++++ docs/guide/recipes/save-progress.md | 54 +++++++++++++++++++++++++++ docs/guide/recipes/save-progress.png | Bin 0 -> 58883 bytes docs/index.md | 2 +- 4 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 docs/guide/recipes/save-progress.md create mode 100644 docs/guide/recipes/save-progress.png diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index 4341c7eb..ae123689 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -66,6 +66,13 @@ module.exports = { { text: "Persistence", link: "/guide/important-concepts/persistence" } ] }, + { + text: "Recipes", + collapsible: true, + items: [ + { text: "Display Save Progress", link: "/guide/recipes/save-progress" } + ] + }, { text: "Advanced Concepts", collapsible: true, diff --git a/docs/guide/recipes/save-progress.md b/docs/guide/recipes/save-progress.md new file mode 100644 index 00000000..16f4b617 --- /dev/null +++ b/docs/guide/recipes/save-progress.md @@ -0,0 +1,54 @@ +# Display Save Progress + +This is a recipe to add a section to each save in the Saves Manager that will describe the amount of progress within that save. This can allow the player to more easily compare the saves to determine which is which. This would be in addition to the game version, last time played, and the name of the save itself, which can already be used for comparing saves without any configuration. + +![save progress display](./save-progress.png) + +This recipe only requires modifying the `Save.vue` file within your project. You'll notice it has quite a bit going on, but all we need to focus on is adding a new coerced component for the progress display, and adding it to the template. + +## Creating the component + +Let's start with creating the coerced component. For this recipe we're going to make a couple assumptions about what this display should be. We'll assume the text will be more complex than just displaying a single value. That is, at different stages of the game progress will be indicated by different metrics. We'll also assume it will be a single line of descriptive text - no images or anything else that would justify making a new .vue component. Breaking these assumptions is left as an exercise for the reader. But for now, with those assumptions in mind, we'll write our component (in the `