11class PlayGround extends HTMLElement {
22 static get observedAttributes ( ) {
3- return [ 'type' ] ;
3+ return [ 'type' , 'await' , 'max' ] ;
44 }
55
66 constructor ( ) {
77 super ( ) ;
88 document . addEventListener ( 'voightkampff' , this ) ;
99 this . type = this . hasAttribute ( 'type' ) ? this . getAttribute ( 'type' ) : '' ;
10+ this . max = this . hasAttribute ( 'max' ) ? this . getAttribute ( 'max' ) : 100 ;
11+ this . async = this . hasAttribute ( 'await' ) ;
1012 this . portal = document . getElementById ( 'portal' ) ;
1113 this . over = document . getElementById ( 'game-over' ) ;
1214 this . replay = document . getElementById ( 'replay' ) ;
1315 }
1416
1517 connectedCallback ( ) {
16- this . _invade ( ) ;
17-
1818 this . spyer = new MutationObserver ( mutations => {
1919 for ( const mutation of mutations ) {
20- if ( this . over && mutation . addedNodes . length && document . querySelectorAll ( 'mu-tant' ) . length >= 100 ) {
20+ if ( this . over && mutation . addedNodes . length && this . querySelectorAll ( 'mu-tant' ) . length >= this . max ) {
2121 this . _gameOver ( ) ;
2222 }
2323
2424 if ( this . portal && mutation . removedNodes . length && this . _isMutant ( mutation . removedNodes [ 0 ] ) ) {
25- if ( ! document . querySelector ( 'mu-tant' ) ) {
25+ if ( ! this . querySelector ( 'mu-tant' ) ) {
2626 this . _nextLevel ( ) ;
27- } else if ( ( this . type === 'all' && ! document . querySelector ( 'mu-tant:not([type=""])' ) ) ) {
27+ } else if ( ( this . type === 'all' && ! this . querySelector ( 'mu-tant:not([type=""])' ) ) ) {
2828 this . _nextLevel ( ) ;
2929 }
3030 }
3131 }
3232 } ) ;
33- this . spyer . observe ( this , { "childList" : true } ) ;
33+
34+ if ( this . async ) {
35+ this . scout = new IntersectionObserver ( entries => {
36+ if ( entries [ 0 ] . isIntersecting === true ) {
37+ this . _invade ( ) ;
38+ this . spyer . observe ( this , { "childList" : true } ) ;
39+ } else {
40+ this . querySelectorAll ( 'mu-tant' ) . forEach (
41+ mutant => mutant . remove ( )
42+ ) ;
43+ clearTimeout ( this . invader ) ;
44+ clearTimeout ( this . timeout ) ;
45+ this . spyer . disconnect ( ) ;
46+ }
47+ } , {
48+ root : document . querySelector ( 'main' ) ,
49+ threshold : [ 1 ]
50+ } ) ;
51+ this . scout . observe ( this ) ;
52+ } else {
53+ this . _invade ( ) ;
54+ this . spyer . observe ( this , { "childList" : true } ) ;
55+ }
56+ }
57+
58+ disconnectedCallback ( ) {
59+ this . scout . disconnect ( ) ;
60+ this . spyer . disconnect ( ) ;
61+ clearTimeout ( this . invader ) ;
62+ clearTimeout ( this . timeout ) ;
63+ document . removeEventListener ( 'voightkampff' , this ) ;
64+ this . portal . removeEventListener ( 'close' , this ) ;
65+ this . over . removeEventListener ( 'close' , this ) ;
66+ this . replay . removeEventListener ( 'close' , this ) ;
3467 }
3568
3669 handleEvent ( event ) {
@@ -43,15 +76,11 @@ class PlayGround extends HTMLElement {
4376 event . detail . type
4477 ) ;
4578 if ( this . replay ) {
46- if ( event . detail . data . fonction === '' ) {
47- this . timeout = setTimeout ( ( ) => this . _replay ( ) , 2000 ) ;
48- } else {
49- this . timeout = setTimeout ( ( ) => {
50- if ( this . querySelectorAll ( 'mu-tant:not([type=""])' ) . length ) {
51- this . _replay ( ) ;
52- }
53- } , 2000 ) ;
54- }
79+ this . timeout = setTimeout ( ( ) => {
80+ if ( this . querySelectorAll ( 'mu-tant:not([type=""])' ) . length > 0 ) {
81+ this . _replay ( ) ;
82+ }
83+ } , 2000 ) ;
5584 }
5685 break ;
5786 case 'close' :
@@ -111,6 +140,17 @@ class PlayGround extends HTMLElement {
111140 this . _killMutant ( leon , options , condition , fonction , watchTextNode , watchSubtree ) ;
112141 }
113142 ) ;
143+
144+ const observer = new MutationObserver ( mutations => {
145+ for ( const mutation of mutations ) {
146+ for ( const leon of mutation . addedNodes ) {
147+ if ( this . _isMutant ( leon ) ) {
148+ this . _killMutant ( leon , options , condition , fonction , watchTextNode , watchSubtree ) ;
149+ }
150+ }
151+ }
152+ } ) ;
153+ observer . observe ( this , { "childList" : true } ) ;
114154 }
115155
116156 _killMutant ( mutant , options , condition , fonction , watchTextNode , watchSubtree ) {
@@ -151,13 +191,20 @@ class PlayGround extends HTMLElement {
151191 }
152192
153193 _nextLevel ( ) {
154- if ( this . observer ) this . observer . disconnect ( ) ;
155194 this . portal . showModal ( ) ;
156- this . portal . addEventListener ( 'close' , this ) ;
195+ if ( this . async ) {
196+ const level = this . closest ( 'section' ) ?. id ?. split ( '-' ) [ 1 ] ;
197+ this . portal . addEventListener ( 'close' , ( ) => {
198+ const target = document . getElementById ( `slide-${ ( Number ( level ) + 1 ) . toString ( ) } ) ;
199+ target ?. scrollIntoView ( { inline : 'start' } ) ;
200+ target ?. focus ( ) ;
201+ } ) ;
202+ } else {
203+ this . portal . addEventListener ( 'close' , this ) ;
204+ }
157205 }
158206
159207 _gameOver ( ) {
160- if ( this . observer ) this . observer . disconnect ( ) ;
161208 clearTimeout ( this . invader ) ;
162209 this . over . showModal ( ) ;
163210 this . over . addEventListener ( 'close' , this ) ;
0 commit comments