2023-04-19 05:06:57 +00:00
import { _ as s , c as a , o as n , N as e } from "./chunks/framework.0799945b.js" ; const d = JSON . parse ( '{"title":"Your First Layer","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started/first-layer.md","lastUpdated":1681880763000}' ) , o = { name : "guide/getting-started/first-layer.md" } , l = e ( ` <h1 id="your-first-layer" tabindex="-1">Your First Layer <a class="header-anchor" href="#your-first-layer" aria-label="Permalink to "Your First Layer"">
2023-04-19 04:21:41 +00:00
< span class = "line" > < span style = "color:#C792EA;" > const < / 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 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 : # 8 2 A A F F ; " > c r e a t e L a y e r < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > ( i 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 ; " > f u n c t i o n < / 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 : # 8 9 D D F F ; f o n t - s t y l e : i t a l i c ; " > t h 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 : # 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 ; " > B a s e L a y e 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 ; " > ) < / 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 ; " > { < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > display < / 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 : # 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 2 A A F F ; " > j s x < / 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 : # F 0 7 1 7 8 ; " > < / 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 : # F 0 7 1 7 8 ; " > & l t ; & 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 ; " > M y < / 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 ; " > l a y e 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 ; " > & l t ; / & g 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 >
< 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:#89DDFF;" > } < / 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 > < / c o d e > < / p r e > < / d i v > < h 2 i d = " a d d i n g - a - r e s o u r c e " t a b i n d e x = " - 1 " > A d d i n g a r e s o u r c e < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # a d d i n g - a - r e s o u r c e " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; A d d i n g a r e s o u r c e & q u o t ; " > < / a > < / h 2 > < p > G a m e e l e m e n t s i n P r o f e c t u s a r e c a l l e d & q u o t ; f e a t u r e s & q u o t ; . Y o u & # 3 9 ; l l c r e a t e t h e m i n s i d e t h e l a y e r & # 3 9 ; s c o n s t r u c t o r f u n c t i o n a n d r e t u r n t h e m i n t h e o b j e c t a t t h e e n d . M a n y f e a t u r e s c a n a l s o b e r e n d e r e d i n t h e l a y e r & # 3 9 ; s d i s p l a y . < / p > < p > I n t h e f i l e t r e e , t h e r e & # 3 9 ; s a f o l d e r c a l l e d < c o d e > s r c / f e a t u r e s < / c o d e > , w h i c h c o n t a i n s a l l t h e d i f f e r e n t f e a t u r e s t h a t a r e i n c l u d e d i n P r o f e c t u s ( a n d a n y o t h e r s y o u & # 3 9 ; v e c r e a t e d o r d o w n l o a d e d f r o m o t h e r s ! ) . Y o u c a n b r o w s e t h e f o l d e r t o s e e a l l t h e f e a t u r e s a n d l e a r n w h a t e a c h o n e d o e s . S o m e f e a t u r e s a l s o h a v e d e d i c a t e d g u i d e p a g e s o n h o w t o u s e t h e m . < / p > < p > L e t & # 3 9 ; s a d d o n e o f t h e s e f e a t u r e s t o o u r l a y e r : a R e s o u r c e . A s w i t h m o s t f e a t u r e s , t h e r e & # 3 9 ; s a < a h r e f = " . / . . / . . / a p i / m o d u l e s / f e a t u r e s / r e s o u r c e # c r e a t e r e s o u r c e " > c r e a t e R e s o u r c e < / a > c o n s t r u c t o r f o r c r e a t i n g t h i s f e a t u r e . T h e s e c o n s t r u c t o r s t y p i c a l l y t a k e a f u n c t i o n t h a t r e t u r n s a n o b j e c t w i t h a l l t h e o p t i o n s f o r t h a t f e a t u r e . H o w e v e r , r e s o u r c e s a r e s i m p l e f e a t u r e s , s o t h e y j u s t t a k e t h e o p t i o n s a s p a r a m e t e r s . C r e a t i n g a r e s o u r c e w i l l 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 : # C 7 9 2 E A ; " > c o n s 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 ; " > p o i n t 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 ; " > < / 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 r e a t e R e s o u r c 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 F C B 6 B ; " > D e c i m a l S o u r c 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 ; " > & 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 : # F 7 8 C 6 C ; " > 0 < / 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 : # 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 e s t i g e p o i n t 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 : # 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 > < / c o d e > < / p r e > < / d i v > < p > I n y o u r I D E y o u & # 3 9 ; l l b e a b l e t o s e e t h e d o c u m e n t a t i o n f o r e a c h p a r a m e t e r - i n t h i s c a s e , t h e f i r s t o n e i s t h e d e f a u l t v a l u e f o r t h i s r e s o u r c e , a n d t h e s e c o n d i s t h e d i s p l a y n a m e f o r t h e r e s o u r c e . N o w w e c a n m a k e s u r e t o a d d t h e p o i n t s t o o u r l a y e r & # 3 9 ; s o b j e c t a n d d i s p l a y i t u s i n g t h e < a h r e f = " . / . . / . . / a p i / m o d u l e s / f e a t u r e s / r e s o u r c e # m a i n d i s p l a y - c o m p o n e n t " > M a i n D i s p l a y < / a > V u e c o m p o n e n t . A l l i n a l l , o u r l a y e r s h o u l d l o o k l i k e t h i s n o w : < / 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 : # C 7 9 2 E A ; " > c o n s 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 ; " > i 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 : # 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 < / 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:#C792EA;" > const < / 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 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 : # 8 2 A A F F ; " > c r e a t e L a y e r < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; " > ( i 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 ; " > f u n c t i o n < / 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 : # 8 9 D D F F ; f o n t - s t y l e : i t a l i c ; " > t h 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 : # 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 ; " > B a s e L a y e 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 ; " > ) < / 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 : # C 7 9 2 E A ; " > c o n s 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 t y l e = " c o l o r : # A 6 A C C D ; " > p o i n t s < / 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 : # 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 2 A A F F ; " > c r e a t e R e s o u r c 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 F C B 6 B ; " > D e c i m a l S o u r c 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 ; " > & g 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 t y l e = " c o l o r : # F 7 8 C 6 C ; " > 0 < / 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 : # 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 ; " > p r e s t i g e p o i n t 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 : # 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" > < / 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 >
< 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 : # A 6 A C C D ; " > p o i n t 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 >
< span class = "line" > < span style = "color:#F07178;" > display < / 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 : # 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 2 A A F F ; " > j s x < / 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 : # F 0 7 1 7 8 ; " > < / 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 : # F 0 7 1 7 8 ; " > ( < / 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 ; " > & l t ; & g t ; < / 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 ; " > & l 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 ; " > M a i n 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 : # 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 ; " > r e s o u r c 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 ; " > p o i n t 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 : # 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 ; " > / & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > < /span><span style="color:#89DDFF;"></ & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#F07178;" > ) ) < / 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:#89DDFF;" > } < / 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 > < / c o d e > < / p r e > < / d i v > < h 2 i d = " u p d a t e - l o o p " t a b i n d e x = " - 1 " > U p d a t e l o o p < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # u p d a t e - l o o p " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; U p d a t e l o o p & q u o t ; " > < / a > < / h 2 > < p > S o m e t h i n g s h a p p e n e v e r y t i c k , s u c h a s p a s s i v e r e s o u r c e g e n e r a t i o n . Y o u c a n h o o k i n t o t h e u p d a t e l o o p u s i n g a n e v e n t b u s . T h e r e & # 3 9 ; s a g l o b a l o n e a n d o n e f o r e a c h l a y e r . F o r e x a m p l e , w i t h i n t h e l a y e r f u n c t i o n , y o u c a n a d d t h i s c o d e t o o u r e x a m p l e t o i n c r e a s e o u r p o i n t s a t a r a t e o f 1 p e r s e c o n d : < / 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 h a s - d i f f " > < 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 ; " > t h i s . < / s p a n > < s p a n s t y l e = " c o l o r : # 8 2 A A F F ; " > o n < / 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 ; " > & 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 p d a t 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 ; " > , < / 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 : # A 6 A C C D ; f o n t - s t y l e : i t a l i c ; " > d i 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 : # A 6 A C C D ; " > p o i n t 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 ; " > v a l u e < / 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 : # 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 ; " > D e c i m a l < / 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 ; " > a d d < / 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 ; " > p o i n t 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 ; " > 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 : # 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 ; " > d i f 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 : # 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 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 > < / c o d e > < / p r e > < / d i v > < p > N o t e t h a t w i t h i n t h e < c o d e > c r e a t e L a y e r < / c o d e > & # 3 9 ; s f u n c t i o n , < c o d e > t h i s < / c o d e > r e f e r s t o t h e l a y e r y o u & # 3 9 ; r e a c t i v e l y c r e a t i n g , a n d t h e < c o d e > d i f f < / c o d e > p a r a m e t e r r e p r e s e n t s t h e s e c o n d s t h a t h a v e p a s s e d s i n c e t h e l a s t u p d a t e - w h i c h w i l l t y p i c a l l y b e a r o u n d 0 . 0 5 u n l e s s t h r o t t l i n g i s d i s a b l e d i n t h e s e t t i n g s . I f w e w a n t e d t o g e n e r a t e a n a m o u n t o t h e r t h a n 1 / s , w e c o u l d m u l t i p l y d i f f b y t h e p e r - s e c o n d r a t e . < / p > < h 2 i d = " a d d i n g - a n - u p g r a d e " t a b i n d e x = " - 1 " > A d d i n g a n u p g r a d e < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # a d d i n g - a n - u p g r a d e " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; A d d i n g a n u p g r a d e & q u o t ; " > < / a > < / h 2 > < p > L e t & # 3 9 ; s a d d a m o r e c o m p l e x f e a t u r e t o t h e l a y e r n o w - a n u p g r a d e . U p g r a d e s r e p r e s e n t o n e - t i m e p u r c h a s e s . T h i s t i m e t h e < a h r e f = " . / . . / . . / a p i / m o d u l e s / f e a t u r e s / u p g r a d e # c r e a t e u p g r a d e " > c r e a t e U p g r a d e < / a > f u n c t i o n r e q u i r e s a n o p t i o n s f u n c t i o n . W e c a n c r e a t e a l a m b d a t h a t r e t u r n s t h e o p t i o n s o b j e c t . W e & # 3 9 ; l l n e e d t o g i v e i t a c o s t r e q u i r e m e n t a n d d i s p l a y . A f t e r w a r d s , i t s h 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 : # C 7 9 2 E A ; " > c o n s 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 ; " > m y U p g r a d 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 ; " > < / 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 r e a t e U p g r a d 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 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:#A6ACCD;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > r e q u i r e m e n t 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 ; " > < / 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 r e a t e C o s t R e q u i r e m e n 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 : # 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:#A6ACCD;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > r e s o u r c 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 ; " > < / s p a n > < s p a n s t y l e = " c o l o r : # 8 2 A A F F ; " > n o P e r s i s 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 ; " > ( p o i n t 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 >
< 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 : # F 0 7 1 7 8 ; " > c o s 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 : # 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 7 8 C 6 C ; " > 1 0 < / 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 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:#A6ACCD;" > < / 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 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 ; " > : < / 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:#A6ACCD;" > < / 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 e s c r i p t 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 ; " > : < / 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 ; " > & 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 o u b l e p o i n t s g e n e r a t 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 >
< 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 >
< span class = "line" > < span style = "color:#89DDFF;" > } < / 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 > < / c o d e > < / p r e > < / d i v > < p > W e & # 3 9 ; l l a d d t h i s u p g r a d e t o o u r r e t u r n e d o b j e c t a n d o u r d i s p l a y . U p g r a d e s a r e a r e n d e r a b l e f e a t u r e , w h i c h m e a n s w e c a n u s e t h e < a h r e f = " . / . . / . . / a p i / m o d u l e s / u t i l / v u e # r e n d e r " > r e n d e r < / a > f u n c t i o n t o d i s p l a y t h e m . T h e r e t u r n e d l a y e r o b j e c t w i l l n o w 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 ; " > r e t u r n < / 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:#A6ACCD;" > points < / 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:#A6ACCD;" > myUpgrade < / 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:#A6ACCD;" > < / 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 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 ; " > : < / 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 2 A A F F ; " > j s x < / 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 >
< 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 ; & 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 : # A 6 A C C D ; " > M a i n D i s p l a y r e s o u r c 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 ; " > p o i n t 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 ; " > < / 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 ; " > { < / s p a n > < s p a n s t y l e = " c o l o r : # A 6 A C C D ; f o n t - s t y l e : i t a l i c ; " > r e n d e r < / 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 : # A 6 A C C D ; f o n t - s t y l e : i t a l i c ; " > m y U p g r a d 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:#A6ACCD;" > < /span><span style="color:#89DDFF;"></ & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span style = "color:#A6ACCD;" > ) ) < / 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 > < p > T h e l a s t t h i n g t o d o t o i m p l e m e n t o u r u p g r a d e i s t o g i v e i t a n e f f e c t ! I f < c o d e > m y U p g r a d e . b o u g h t . v a l u e < / c o d e > i s t r u e , t h e n t h e p o i n t s g e n e r a t i o n s h o u l d d o u b l e . W e & # 3 9 ; l l r e p r e s e n t t h a t b y c r e a t i n g a p o i n t s g a i n m o d i f i e r , w h i c h w i l l m a k e i t e a s y t o h a n d l e m a n y t h i n g s a f f e c t i n g p o i n t s g a i n . T h e m o d i f i e r s h 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 : # C 7 9 2 E A ; " > c o n s 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 ; " > m y M o d i f i e 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 ; " > = < / 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 2 A A F F ; " > c r e a t e S e q u e n t i a l M o d i f i e r < / 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 >
< 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 r e a t e M u l t i p l i c a t i v e M o d i f i e r < / 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:#A6ACCD;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > m u l t i p l i e 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 ; " > : < / 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 7 8 C 6 C ; " > 2 < / 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:#A6ACCD;" > < / s p a n > < s p a n s t y l e = " c o l o r : # F 0 7 1 7 8 ; " > e n a b l 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 ; " > m y U p g r a d 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 ; " > b o u g h 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 ; " > } < / 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 > N o w t o m a k e t h e p o i n t s g a i n u s e t h e m o d i f i e r , w e & # 3 9 ; l l u p d a t e t h e l i n e t h a t a d d s p o i n t s t o 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 h a s - d i f f " > < 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 : # A 6 A C C D ; " > p o i n t 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 ; " > 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 ; " > D e c i m a l < / 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 ; " > a d 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 ; " > ( p o i n t 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 ; " > 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 ; " > D e c i m a l < / 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 ; " > t i m e 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 ; " > ( m y M o d i f i e 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 ; " > . < / s p a n > < s p a n s t y l e = " c o l o r : # 8 2 A A F F ; " > a p p l y < / 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 7 8 C 6 C ; " > 1 < / 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 ; " > d i 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 > < / c o d e > < / p r e > < / d i v > < p > Y o u n o w h a v e a f u n c t i o n i n g u p g r a d e , a n d a r e p r e p a r e d t o c r e a t e m a n y m o r e u p g r a d e s a n d o t h e r f e a t u r e s ! < / p > < h 2 i d = " n e x t - s t e p s " t a b i n d e x = " - 1 " > N e x t S t e p s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # n e x t - s t e p s " a r i a - l a b e l = " P e r m a l i n k t o & q u o t ; N e x t S t e p s & q u o t ; " > < / a > < / h 2 > < p > S i n c e P r o f e c t u s i s a n e n g i n e , w h a t t o d o w i t h i t i s a f a i r l y o p e n - e n d e d q u e s t i o n . I f y o u & # 3 9 ; r e n o t q u i t e r e a d y t o g o o u t o n y o u r o w n , t h e r e a r e m o r e g u i d e s t o h e l p p r e p a r e y o u . A g o o d n e x t s t e p w o u l d b e t h e < a h r e f = " . / . . / r e c i p e s / p r e s t i g e " > P r e s t i g e M e c h a n i c < / a > r e c i p e p a g e . < / p > < p > T h e & q u o t ; I m p o r t a n t C o n c e p t s & q u o t ; s e c t i o n o f t h e g u i d e g o e s f u r t h e r i n t o v a r i o u s p a r t s o f t h e e n g i n e t h a t a r e p r u d e n t t o u n d e r s t a n d . I f a n y o f t h o s e l o o k i n t e r e s t i n g o r l i k e s o m e t h i n g y o u n e e d h e l p w i t h , t h e y c a n b e a g r e a t h e l p . < / p > < p > B e y o n d t h a t , t h e b e s t w a y t o l e a r n i s t o j u s t c o n t i n u e u s i n g t h e e n g i n e a n d e x p l o r i n g i t s v a r i o u s f e a t u r e s . H a v e f u n ! < / p > ` , 3 2 ) , p = [ l ] ; f u n c t i o n t ( r , c , i , y , D , F ) { r e t u r n n ( ) , a ( " d i v " , n u l l , p ) } c o n s t C = s ( o , [ [ " r e n d e r " , t ] ] ) ; e x p o r t { d a s _ _ p a g e D a t a , C a s d e f a u l t } ;
