2023-04-13 12:52:46 +00:00
import { _ as s , c as a , o as e , N as n } from "./chunks/framework.0799945b.js" ; const o = "/assets/save-progress.2c9d1bae.png" , u = JSON . parse ( '{"title":"Display Save Progress","description":"","frontmatter":{},"headers":[],"relativePath":"guide/recipes/save-progress.md","lastUpdated":1681388423000}' ) , t = { name : "guide/recipes/save-progress.md" } , l = n ( '<h1 id="display-save-progress" tabindex="-1">Display Save Progress <a class="header-anchor" href="#display-save-progress" aria-label="Permalink to "Display Save Progress""> </a></h1><p>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.</p><p><img src="' + o + ` " alt="save progress display"></p><p>This recipe will involve modifying the <code>Save.vue</code> file within your project to include an extra component in the saves details. It will go over creating the new component, how to work with the save data object, and then displaying the component.</p><h2 id="creating-the-component" tabindex="-1">Creating the component <a class="header-anchor" href="#creating-the-component" aria-label="Permalink to "Creating the component""> </a></h2><p>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 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 <code><script></code> tag in <code>Save.vue</code>) similar to this example:</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> progressDisplay </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">computeComponent</span><span style="color:#A6ACCD;">(</span></span>
2023-04-06 05:16:50 +00:00
< span class = "line" > < span style = "color:#A6ACCD;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 2 A A F F ; " > c o m p u t e d < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > ( < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > ( ) < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # C 7 9 2 E A ; " > = & g t ; < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; f o n t - s t y l e : i t a l i c ; " > i f < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > ( < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > s o m e C o n d i t i o n < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > ) < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; f o n t - s t y l e : i t a l i c ; " > r e t u r n < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > J u s t s t a r t e d < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; f o n t - s t y l e : i t a l i c ; " > i f < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > ( < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > s o m e O t h e r C o n d i t i o n < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > ) < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; f o n t - s t y l e : i t a l i c ; " > r e t u r n < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > \ ` < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > E a r l y g a m e ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > \ $ { < / s p a n > < s p a n s t y l e = " c o l o r : # 8 2 A A F F ; " > f o r m a t W h o l e < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > ( s o m e R e s o u r c e V a l u e ) < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > r e s o u r c e n a m e < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > \ ` < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > . . . < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; f o n t - s t y l e : i t a l i c ; " > r e t u r n < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > U n k n o w n p r o g r e s s < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > } < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > ) < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#A6ACCD;" > ) < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > T h i s c o d e w i l l c r e a t e a c o m p o n e n t t h a t w i l l s i m p l y r e n d e r t h e r e t u r n e d t e x t , a n d u p d a t e a s r e q u i r e d . H o w e v e r , t h e r e & # 3 9 ; s o n e s i g n i f i c a n t c o m p l i c a t i o n i n w r i t i n g t h e c o d e f o r t h e s e c o n d i t i o n s a n d r e s o u r c e v a l u e s : y o u & # 3 9 ; r e w o r k i n g w i t h a p o t e n t i a l l y i n c o m p l e t e s a v e d a t a o b j e c t . < / p > < h 2 i d = " w o r k i n g - w i t h - s a v e - d a t a " t a b i n d e x = " - 1 " > W o r k i n g w i t h s a v e d a t a < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # w o r k i n g - w i t h - s a v e - d a t a " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; W o r k i n g w i t h s a v e d a t a & q u o t ; " > < / a > < / h 2 > < p > T h e s a v e c o m p o n e n t i s p a s s e d d o w n a s a v e d a t a o b j e c t , t h a t w o r k s q u i t e a b i t d i f f e r e n t l y t h a n h o w m o s t o f y o u r p r o j e c t a c c e s s e s d a t a . F i r s t o f f , y o u a r e t y p i c a l l y w o r k i n g w i t h t h e o b j e c t s w i t h i n a l a y e r d i r e c t l y , b u t y o u c a n & # 3 9 ; t h e r e a s y o u w a n t t h e i n f o r m a t i o n f r o m t h i s s p e c i f i c s a v e , n o t t h e c u r r e n t l y l o a d e d s a v e . S t r u c t u r a l l y i t & # 3 9 ; l l b e l i k e t h e < c o d e > p l a y e r < / c o d e > o b j e c t , w h e r e a l l c o m p u t e d v a l u e s a n d n o n - p e r s i s t e n t r e f s a r e s t r i p p e d a w a y , a n d r e f s a r e a l r e a d y u n w r a p p e d . H o w e v e r , u n l i k e t h e < c o d e > p l a y e r < / c o d e > o b j e c t , y o u d o n & # 3 9 ; t k n o w f o r c e r t a i n a n y g i v e n p r o p e r t y i s t h e r e - s a v e s c a n b e c o r r u p t e d o r i n c o m p l e t e , o r c o m e f r o m o l d e r v e r s i o n s o f t h e g a m e t h a t s i m p l y h a d t h e d a t a s t r u c t u r e d d i f f e r e n t l y . Y o u & # 3 9 ; l l n e e d t o a c c o u n t f o r t h a t a p p r o p r i a t e l y . < / p > < p > F o r m o s t c a s e s ( s p e c i f i c a l l y w h e r e n e w g a m e v e r s i o n s o n l y a d d e d n e w d a t a t o t h e s a v e d a t a o b j e c t , r a t h e r t h a n c h a n g e t h e m e a n i n g o f e x i s t i n g d a t a ) , y o u c a n u s e t h e < c o d e > L a y e r D a t a < / c o d e > t y p e t o g e t p r o p e r t y p i n g f o r a g i v e n l a y e r . F o r e x a m p l e , a t y p e s a f e c h e c k f o r w h e t h e r a s a v e h a s e a r n e d a m i l e s t o n e c a l l e d & q u o t ; n e x t S e c t i o n O f G a m e & q u o t ; o n a l a y e r c a l l e d & q u o t ; m a i n & q u o t ; w o u l d l o o k l i k e t h i s : < / p > < d i v c l a s s = " l a n g u a g e - t s " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > t s < / s p a n > < p r e c l a s s = " s h i k i m a t e r i a l - t h e m e - p a l e n i g h t " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; f o n t - s t y l e : i t a l i c ; " > i f < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > ( ( s a v e < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > v a l u e < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > ? . < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > l a y e r s < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > ? . < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > m a i n < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; f o n t - s t y l e : i t a l i c ; " > a s < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > L a y e r D a t a < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & l t ; t y p e o f < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > m a i n < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > | < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # F F C B 6 B ; " > u n d e f i n e d < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > ) < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > ? . < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > n e x t S e c t i o n O f G a m e < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > . < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > e a r n e d < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > ? ? < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # F F 9 C A C ; " > f a l s e < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > ) < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; f o n t - s t y l e : i t a l i c ; " > r e t u r n < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > N e x t s e c t i o n o f g a m e r e a c h e d < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#89DDFF;" > } < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < h 2 i d = " d i s p l a y i n g - t h e - c o m p o n e n t " t a b i n d e x = " - 1 " > D i s p l a y i n g t h e c o m p o n e n t < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # d i s p l a y i n g - t h e - c o m p o n e n t " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; D i s p l a y i n g t h e c o m p o n e n t & q u o t ; " > < / a > < / h 2 > < p > T h e < c o d e > S a v e . v u e < / c o d e > t e m p l a t e c o n t a i n s , a m o n g s t o t h e r t h i n g s , a n e l e m e n t t h a t d i s p l a y s t h e d e t a i l s o f t h e s a v e . W e & # 3 9 ; l l b e a d d i n g a n e w c h i l d w i t h i n t h i s e l e m e n t . Y o u & # 3 9 ; l l w a n t t o l o o k n e a r t h e b o t t o m o f t h e t e m p l a t e f o r t h e e l e m e n t t h a t l o o k s l i k e < c o d e > & l t ; d i v c l a s s = & q u o t ; d e t a i l s & q u o t ; v - i f = & q u o t ; s a v e . e r r o r = = u n d e f i n e d & a m p ; & a m p ; ! i s E d i t i n g & q u o t ; & g t ; < / c o d e > . N o t e t h a t t h e r e a r e < e m > t w o < / e m > d i v s w i t h t h i s C S S c l a s s , a n d w e s p e c i f i c a l l y w a n t t h e o n e t h a t & # 3 9 ; s a c t i v e w h e n i s E d i t i n g i s < c o d e > f a l s e < / c o d e > . Y o u & # 3 9 ; l l t h e n w a n t t o a d d o u r n e w e l e m e n t i n s i d e t h i s d i v , l i k e s o : < / p > < d i v c l a s s = " l a n g u a g e - h t m l " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > h t m l < / s p a n > < p r e c l a s s = " s h i k i m a t e r i a l - t h e m e - p a l e n i g h t " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > d i v < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # C 7 9 2 E A ; " > c l a s s < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > d e t a i l s < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # C 7 9 2 E A ; " > v - i f < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > s a v e . e r r o r = = u n d e f i n e d & a m p ; & a m p ; ! i s E d i t i n g < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#A6ACCD;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > b u t t o n < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # C 7 9 2 E A ; " > c l a s s < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > b u t t o n o p e n < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # C 7 9 2 E A ; " > @ c l i c k < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > e m i t ( & # 3 9 ; o p e n & # 3 9 ; ) < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#A6ACCD;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > h 3 < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > { { s a v e . n a m e } } < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & l t ; / < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > h 3 < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#A6ACCD;" > < /span><span style="color:#89DDFF;"></ < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > b u t t o n < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#A6ACCD;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > s p a n < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # C 7 9 2 E A ; " > c l a s s < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > s a v e - v e r s i o n < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > v { { s a v e . m o d V e r s i o n } } < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & l t ; / < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > s p a n < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#89DDFF;" > & gt ; & lt ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > b r < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > / & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#A6ACCD;" > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > d i v < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # C 7 9 2 E A ; " > v - i f < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > c u r r e n t T i m e < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > L a s t p l a y e d { { d a t e F o r m a t . f o r m a t ( c u r r e n t T i m e ) } } < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & l t ; / < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > d i v < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#A6ACCD;" > ++ < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & l t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > d i v < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # C 7 9 2 E A ; " > v - i f < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > p r o g r e s s D i s p l a y < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; & l t ; < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > c o m p o n e n t < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # C 7 9 2 E A ; " > : i s < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > = < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # C 3 E 8 8 D ; " > p r o g r e s s D i s p l a y < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & q u o t ; < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > / & g t ; & l t ; / < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > d i v < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#89DDFF;" > & lt ; / < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > d i v < / s p a n > < s p a n s t y l e = " c o l o r : # 8 9 D D F F ; " > & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > A n d t h e r e y o u h a v e i t ! Y o u r d e v e n v i r o n m e n t s h o u l d n o w s h o w t h e c o m p o n e n t i n a l l i t s g l o r y i n t h e s a v e s m a n a g e r . < / p > ` , 1 6 ) , p = [ l ] ; f u n c t i o n r ( c , i , y , D , F , d ) { r e t u r n e ( ) , a ( " d i v " , n u l l , p ) } c o n s t m = s ( t , [ [ " r e n d e r " , r ] ] ) ; e x p o r t { u a s _ _ p a g e D a t a , m a s d e f a u l t } ;