Colorfader color list

app/mod/colorfader.conf.js

@@ -5,9 +5,9 @@ export const modConf = {
     delay: '0',
 
     /**
-    * fade duration in seconds.
+    * fade to next color duration in seconds.
     */
-    duration: '7',
+    duration: '3',
 
     /**
     * fade timing function to use.
@@ -18,5 +18,28 @@ export const modConf = {
     * - ease-out
     * - ease-in-out
     */
-    function: 'ease-in-out',
+    function: 'linear',
+
+    /**
+    * whether to use randomized colors or the values from the colors list below.
+    * true or false.
+    */
+    random: 'false',
+
+    /**
+    * if random is set to true, colors values from this list will be used.
+    * any valid css color value should work. e.g. hex, rgb, hsl, etc.
+    * color picker: https://duckduckgo.com/?t=ffab&q=color+picker&ia=answer
+    */
+    list: [
+        '#ff0000',
+        '#00ff00',
+        '#0000ff',
+    ],
+
+    /**
+    * whether to shuffle the colors list.
+    * true or false.
+    */
+    shuffle: 'true',
 }

app/mod/colorfader.js

@@ -1,13 +1,22 @@
+import { fyShuffle } from 'https://cdn.jsdelivr.net/gh/etrusci-org/nifty@main/javascript/fyShuffle.min.js'
+
+
+
+
 export class Mod extends ModBase
 {
+    queue = []
+
+
     onInit()
     {
         this.outputElement.innerHTML = ''
         this.outputElement.style.width = '100vw'
         this.outputElement.style.height = '100vh'
-        this.outputElement.style.backgroundColor = getRandomColorHex()
         this.outputElement.style.transition = `background-color ${this.conf.duration}s ${this.conf.function} ${this.conf.delay}s`
 
+        this.update()
+
         this.outputElement.addEventListener('transitionend', () => {
             this.update()
         })
@@ -16,6 +25,18 @@ export class Mod extends ModBase
 
     update()
     {
-        this.outputElement.style.backgroundColor = getRandomColorHex()
+        if (this.conf.random == 'true') {
+            this.outputElement.style.backgroundColor = getRandomColorHex()
+        }
+        else {
+            if (this.queue.length == 0) {
+                this.queue = [...this.conf.list]
+                if (this.conf.shuffle == 'true') {
+                    this.queue = fyShuffle(this.queue)
+                }
+            }
+
+            this.outputElement.style.backgroundColor = this.queue.splice(0, 1)[0]
+        }
     }
 }