diff --git a/js/scripts.js b/js/scripts.js index adae607..3e142cd 100644 --- a/js/scripts.js +++ b/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 = ` +
+ Loading error... +
`; + }; }; print = (patterns) => {