<spanclass="line"></span></code></pre></div><p>This code will create a component that will simply render the returned text, and update as required. However, there's one significant complication in writing the code for these conditions and resource values: you're working with a potentially incomplete save data object.</p><h2id="working-with-save-data"tabindex="-1">Working with save data <aclass="header-anchor"href="#working-with-save-data"aria-hidden="true">#</a></h2><p>The save component is passed down a save data object, that works quite a bit differently than how most of your project accesses data. First off, you are typically working with the objects within a layer directly, but you can't here as you want the information from this specific save, not the currently loaded save. Structurally it'll be like the <code>player</code> object, where all computed values and non-persistent refs are stripped away, and refs are already unwrapped. However, unlike the <code>player</code> object, you don't know for certain any given property is there - saves can be corrupted or incomplete, or come from older versions of the game that simply had the data structured differently. You'll need to account for that appropriately.</p><p>For most cases (specifically where new game versions only added new data to the save data object, rather than change the meaning of existing data), you can use the <code>LayerData</code> type to get proper typing for a given layer. For example, a type safe check for whether a save has earned a milestone called "nextSectionOfGame" on a layer called "main" would look like this:</p><divclass="language-ts"><spanclass="copy"></span><pre><code><spanclass="line"><spanstyle="color:#89DDFF;font-style:italic;">if</span><spanstyle="color:#A6ACCD;"> ((save</span><spanstyle="color:#89DDFF;">.</span><spanstyle="color:#A6ACCD;">value</span><spanstyle="color:#89DDFF;">?.</span><spanstyle="color:#A6ACCD;">layers</span><spanstyle="color:#89DDFF;">?.</span><spanstyle="color:#A6ACCD;">main </span><spanstyle="color:#89DDFF;font-style:italic;">as</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#FFCB6B;">LayerData</span><spanstyle="color:#89DDFF;"><typeof</span><spanstyle="color:#A6ACCD;"> main</span><spanstyle="color:#89DDFF;">></span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;">|</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#FFCB6B;">undefined</span><spanstyle="color:#A6ACCD;">)</span><spanstyle="color:#89DDFF;">?.</span><spanstyle="color:#A6ACCD;">nextSectionOfGame</span><spanstyle="color:#89DDFF;">.</span><spanstyle="color:#A6ACCD;">earned </span><spanstyle="color:#89DDFF;">??</span><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#FF9CAC;">false</span><spanstyle="color:#A6ACCD;">) </span><spanstyle="color:#89DDFF;">{</span></span>
<spanclass="line"><spanstyle="color:#F07178;"></span><spanstyle="color:#89DDFF;font-style:italic;">return</span><spanstyle="color:#F07178;"></span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#C3E88D;">Next section of game reached</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#89DDFF;">;</span></span>
<spanclass="line"></span></code></pre></div><h2id="displaying-the-component"tabindex="-1">Displaying the component <aclass="header-anchor"href="#displaying-the-component"aria-hidden="true">#</a></h2><p>The <code>Save.vue</code> template contains, amongst other things, an element that displays the details of the save. We'll be adding a new child within this element. You'll want to look near the bottom of the template for the element that looks like <code><div class="details" v-if="save.error == undefined && !isEditing"></code>. Note that there are <em>two</em> divs with this CSS class, and we specifically want the one that's active when isEditing is <code>false</code>. You'll then want to add our new element inside this div, like so:</p><divclass="language-html"><spanclass="copy"></span><pre><code><spanclass="line"><spanstyle="color:#89DDFF;"><</span><spanstyle="color:#F07178;">div</span><spanstyle="color:#89DDFF;"></span><spanstyle="color:#C792EA;">class</span><spanstyle="color:#89DDFF;">=</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#C3E88D;">details</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#89DDFF;"></span><spanstyle="color:#C792EA;">v-if</span><spanstyle="color:#89DDFF;">=</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#C3E88D;">save.error == undefined && !isEditing</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#89DDFF;">></span></span>
<spanclass="line"><spanstyle="color:#A6ACCD;"></span><spanstyle="color:#89DDFF;"><</span><spanstyle="color:#F07178;">div</span><spanstyle="color:#89DDFF;"></span><spanstyle="color:#C792EA;">v-if</span><spanstyle="color:#89DDFF;">=</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#C3E88D;">currentTime</span><spanstyle="color:#89DDFF;">"</span><spanstyle="color:#89DDFF;">></span><spanstyle="color:#A6ACCD;">Last played {{ dateFormat.format(currentTime) }}</span><spanstyle="color:#89DDFF;"></</span><spanstyle="color:#F07178;">div</span><spanstyle="color:#89DDFF;">></span></span>
<spanclass="line"></span></code></pre></div><p>And there you have it! Your dev environment should now show the component in all its glory in the saves manager.</p></div></div></main><footerclass="VPDocFooter"data-v-79ca2460data-v-04568844><divclass="edit-info"data-v-04568844><divclass="edit-link"data-v-04568844><aclass="VPLink link edit-link-button"href="https://github.com/profectus-engine/profectus-docs/edit/main/docs/guide/recipes/save-progress.md"target="_blank"rel="noopener noreferrer"data-v-04568844data-v-5704c677><!--[--><svgxmlns="http://www.w3.org/2000/svg"viewbox="0 0 24 24"class="edit-link-icon"data-v-04568844><pathd="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><pathd="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page<!--]--><!----></a></div><divclass="last-updated"data-v-04568844><pclass="VPLastUpdated"data-v-04568844data-v-0ce8c960>Last updated: <timedatatime="2022-11-17T03:38:27.000Z"data-v-0ce8c960></time></p></div></div><divclass="prev-next"data-v-04568844><divclass="pager"data-v-04568844><aclass="pager-link prev"href="/guide/important-concepts/persistence.html"data-v-04568844><spanclass="desc"data-v-04568844>Previous page</span><spanclass="title"data-v-04568844>Persistence</span></a></div><divclass="has-prev pager"data-v-04568844><aclass="pager-link next"href="/guide/advanced-concepts/creating-features.html"data-v-04568844><spanclass="desc"data-v-04568844>Next page</span><spanclass="title"data-v-04568844>Creating Features</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
