Merge pull request #482 from Jlu18/colorshiftbug

Fixed colorshift bug and added test

Author: kdvalin

src/myr/Myr.js

@@ -1775,23 +1775,21 @@ class Myr {
         //if the element is light
         if(String(el.id).includes("lgt")){
             let split = el.light.state.split(/\s|;/).filter(Boolean);
-            let colorIndex = split.indexOf("color:");
-            let baseCol = split[colorIndex+1];
+            let colorIndex = split.indexOf("color:")+1;
+            let baseCol = split[colorIndex];
             if(this.colourNameToHex(baseCol)!==false){
                 baseCol = this.colourNameToHex(baseCol);
             }
             if(this.colourNameToHex(color) !== false){
                 color = this.colourNameToHex(color);
             }
-            let anim = `
-            property: light.color;
+            let anim = `property: light.color;
             from: ${baseCol};
             to: ${color};
             dur: ${this.cursor.duration};
             dir: alternate;
             loop: ${Boolean(this.cursor.loop)};
-            type: color;
-          `;
+            type: color;`;
             el.animation__color = anim;
             return outerElId;
         }
@@ -1801,31 +1799,29 @@ class Myr {
                 let innerEl = el.els[i];
                 //innerEl.material.split(/\s|;/) returns an array of strings separated by " " and ";",
                 //color is always its first attribute (after "color: ")
-                let anim = `
-          property: components.material.material.color;
-          from: ${(innerEl.material.split(/\s|;/))[1]};
-          to: ${color};
-          dur: ${this.cursor.duration};
-          dir: alternate;
-          loop: ${Boolean(this.cursor.loop)};
-          isRawProperty: true;
-          type: color;
-        `;
+                let anim = `property: components.material.material.color;
+            from: ${(innerEl.material.split(/\s|;/))[1]};
+            to: ${color};
+            dur: ${this.cursor.duration};
+            dir: alternate;
+            loop: ${Boolean(this.cursor.loop)};
+            isRawProperty: true;
+            type: color;`;
                 innerEl.animation__color = anim;
 
             }
             return outerElId;
         }
-        let anim = `
-      property: components.material.material.color;
-      from: ${(el.material.split(/\s|;/))[2]};
-      to: ${color};
-      dur: ${this.cursor.duration};
-      dir: alternate;
-      loop: ${Boolean(this.cursor.loop)};
-      isRawProperty: true;
-      type: color;
-    `;
+    
+        const mat = el.material.split(/\s|;/);
+        let anim = `property: components.material.material.color;
+        from: ${mat[mat.indexOf("color:")+1]};
+        to: ${color};
+        dur: ${this.cursor.duration};
+        dir: alternate;
+        loop: ${Boolean(this.cursor.loop)};
+        isRawProperty: true;
+        type: color;`;
         el.animation__color = anim;
         return outerElId;
     }