mirror of
				https://github.com/eugene-serb/wavelovers.git
				synced 2023-09-09 23:41:16 +03:00 
			
		
		
		
	Added update function in library for loading patterns from assets
This commit is contained in:
		
							
								
								
									
										265
									
								
								js/scripts.js
									
									
									
									
									
								
							
							
						
						
									
										265
									
								
								js/scripts.js
									
									
									
									
									
								
							| @@ -14,243 +14,24 @@ class Library { | ||||
|         return this; | ||||
|     }; | ||||
|     init = () => { | ||||
|         this.patterns = this.getBase(); | ||||
|         this.state = 'load'; | ||||
|         this.patterns = this.update(); | ||||
|     }; | ||||
|     getBase = () => { | ||||
|         return [ | ||||
|             { | ||||
|                 "name": "Dotted Weak", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "😌", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 100, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 0.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Dotted Strong", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "😉", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 100, | ||||
|                         "weakMagnitude": 0.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Dotted AC", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "🤨", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 100, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 0.0 | ||||
|                     }, | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 100, | ||||
|                         "weakMagnitude": 0.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Dotted Max", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "🙃", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 100, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Short Dashed Weak", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "🙂", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 250, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 0.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Short Dashed Strong", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "😇", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 250, | ||||
|                         "weakMagnitude": 0.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Short Dashed AC", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "🤤", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 250, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 0.0 | ||||
|                     }, | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 250, | ||||
|                         "weakMagnitude": 0.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Short Dashed Max", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "😊", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 250, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Long Dashed Weak", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "😋", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 500, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 0.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Long Dashed Strong", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "😜", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 500, | ||||
|                         "weakMagnitude": 0.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Long Dashed AC", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "😝", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 500, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 0.0 | ||||
|                     }, | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 500, | ||||
|                         "weakMagnitude": 0.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Long Dashed Max", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "🤪", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 100, | ||||
|                         "duration": 500, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Constant Weak", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "😏", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 0, | ||||
|                         "duration": 1000, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 0.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Constant Strong", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "🤩", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 0, | ||||
|                         "duration": 1000, | ||||
|                         "weakMagnitude": 0.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Constant AC", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "😵", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 0, | ||||
|                         "duration": 1000, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 0.0 | ||||
|                     }, | ||||
|                     { | ||||
|                         "startDelay": 0, | ||||
|                         "duration": 1000, | ||||
|                         "weakMagnitude": 0.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             }, | ||||
|             { | ||||
|                 "name": "Constant Max", | ||||
|                 "type": "Simple", | ||||
|                 "icon": "😍", | ||||
|                 "pattern": [ | ||||
|                     { | ||||
|                         "startDelay": 0, | ||||
|                         "duration": 1000, | ||||
|                         "weakMagnitude": 1.0, | ||||
|                         "strongMagnitude": 1.0 | ||||
|                     } | ||||
|                 ] | ||||
|             } | ||||
|         ]; | ||||
|     update = async () => { | ||||
|         const url = 'https://wavelovers.ru/assets/patterns.json'; | ||||
|         try { | ||||
|             const response = await fetch(url); | ||||
|             if (response.ok) { | ||||
|                 let json = await response.json(); | ||||
|                 this.patterns = json; | ||||
|                 this.state = 'draw'; | ||||
|             } else { | ||||
|                 console.log('Connect to the Internet for download more patterns...'); | ||||
|                 this.state = 'fail'; | ||||
|             }; | ||||
|         } catch (error) { | ||||
|             console.log('[error]', error); | ||||
|         }; | ||||
|     }; | ||||
| }; | ||||
|  | ||||
| @@ -340,9 +121,7 @@ class Wavelovers { | ||||
|     }; | ||||
|     init = () => { | ||||
|         this.#DOMs(); | ||||
|  | ||||
|         this.library = new Library(); | ||||
|         this.print(this.library.patterns); | ||||
|  | ||||
|         if (!this.checkGamepadSupport()) { | ||||
|             console.log(`This browser does not support of gamepads.`); | ||||
| @@ -380,6 +159,16 @@ class Wavelovers { | ||||
|                 gamepad.draw(); | ||||
|             }); | ||||
|         }; | ||||
|         if (this.library.state === 'draw') { | ||||
|             this.print(this.library.patterns); | ||||
|             this.library.state = 'ready'; | ||||
|         }; | ||||
|         if (this.library.state === 'fail') { | ||||
|             this.$PATTERN_LIST.innerHTML = ` | ||||
|                 <div class="message"> | ||||
|                     <span>Loading error...</span> | ||||
|                 </div>`; | ||||
|         }; | ||||
|     }; | ||||
|  | ||||
|     print = (patterns) => { | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Eugene Serb
					Eugene Serb