Merge pull request #16 from PrimaryCat/1.4.0

1.4.0

app.js

@@ -0,0 +1,53 @@
+import { AboutDisplay } from "./classes/aboutDisplay.js";
+import { ColorGenerator } from "./classes/colorGenerator.js";
+import { DomManager } from "./classes/domManager.js";
+import { Exporter } from "./classes/exporter.js";
+import { Indexer } from "./classes/indexer.js";
+import { NotificationManager } from "./classes/notificationManager.js";
+import { Debugger } from "./modules/debugger.js";
+import * as Elements from "./modules/elements.js";
+
+if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("./app/serviceWorker.js");
+};
+
+class App{
+    constructor(){
+        this.indexer        = new Indexer(this);
+        this.colorGenerator = new ColorGenerator(this);
+        this.domManager     = new DomManager(this);
+        this.exporter       = new Exporter(this);
+        this.notifier       = new NotificationManager(this);
+        this.aboutDisplay   = new AboutDisplay(this);
+    }
+
+    async init(){
+        // Initialize the modules
+        await this.indexer.init();
+        this.colorGenerator.init();
+        this.domManager.init();
+        this.exporter.init();
+
+        // Generate initial palette
+        await this.colorGenerator.generatePalette();
+
+        // Hide loading screen
+        Elements.LOADING_SCREEN.classList.add("hide");
+
+        // Display version
+        fetch('./data/version.json')
+        .then((response) => response.json())
+        .then((json) => {
+            Elements.VERSION_TEXT.innerText = "v" + json["version"];
+            this.aboutDisplay.init(json["changelog"]);
+        });
+
+        // Display DEBUG
+        Debugger.debugMessage();
+    }
+}
+
+addEventListener("DOMContentLoaded", () => {
+    const app = new App();
+    app.init();
+})

app/serviceWorker.js

@@ -1,11 +1,11 @@
-const version = "1.3.2";
+const version = "1.4.0";
 
 const cacheName = "colorThing-v" + version;
 const shellFiles = [
     // Enter point files
     "../index.html",
     "../style.css",
-    "../main.js",
+    "../app.js",
     // Data
     "../data/colors.json",
     "../data/version.json",
@@ -14,6 +14,24 @@ const shellFiles = [
     "../assets/lightMode.png",
     "../assets/logo.svg",
     "../assets/wheel.png",
+    "../assets/darkAbout.png",
+    "../assets/lightAbout.png",
+    // Classes
+    "../classes/color.js",
+    "../classes/colorGenerator.js",
+    "../classes/colorWheel.js",
+    "../classes/domManager.js",
+    "../classes/exporter.js",
+    "../classes/indexer.js",
+    "../classes/swatch.js",
+    "../classes/swatchDisplay.js",
+    "../classes/themer.js",
+    "../classes/notificationManager.js",
+    "../classes/aboutDisplay.js",
+    // Modules
+    "../modules/debugger.js",
+    "../modules/elements.js",
+    "../modules/tools.js"
 ];
 
 self.addEventListener("message", (event) => {

classes/aboutDisplay.js

@@ -0,0 +1,29 @@
+import * as Elements from "../modules/elements.js";
+
+class AboutDisplay{
+    constructor(parent){
+        this.parent = parent;
+    }
+
+    _updateChangelog(changelog){
+        changelog.forEach(change => {
+            const el = document.createElement("li");
+            el.innerText = change;
+            Elements.ABOUT_CHANGELOG.appendChild(el);
+        });
+    }
+
+    init(changelog){
+        this._updateChangelog(changelog);
+        Elements.ABOUT_BUTTON_C.onclick = () => {
+            Elements.ABOUT_DISPLAY.classList.remove("show");
+            Elements.DIMMER.classList.remove("show");
+        };
+        Elements.ABOUT_BUTTON_O.onclick = () => {
+            Elements.ABOUT_DISPLAY.classList.add("show");
+            Elements.DIMMER.classList.add("show");
+        }
+    }
+}
+
+export{AboutDisplay}

classes/color.js

@@ -0,0 +1,118 @@
+import { hexToNum, randomBetween, round, wrapAngle, numToHex, clamp } from "../modules/tools.js"
+
+class Color{
+    constructor(r = 0, g = 0, b = 0){
+        this.red = r;
+        this.green = g;
+        this.blue = b;
+    }
+
+    fromHSV(hue, saturation, value){
+        const C = value * saturation;
+        const X = C * (1 - Math.abs(((hue / 60) % 2) - 1));
+        const m = value - C;
+
+        let ranges;
+        if(hue > 300){
+            ranges = [C, 0, X];
+        }else if(hue > 240){
+            ranges = [X, 0, C];
+        }else if(hue > 180){
+            ranges = [0, X, C];
+        }else if(hue > 120){
+            ranges = [0, C, X];
+        }else if(hue > 60){
+            ranges = [X, C, 0];
+        }else{
+            ranges = [C, X, 0];
+        };
+
+        this.red = Math.floor((ranges[0] + m) * 255);
+        this.green = Math.floor((ranges[1] + m) * 255);
+        this.blue = Math.floor((ranges[2] + m) * 255);
+
+        return this;
+    }
+
+    fromHEX(hex){
+        const hexRed = hex.substring(1, 3);
+        const hexGreen = hex.substring(3, 5);
+        const hexBlue = hex.substring(5, 7);
+
+        this.red = hexToNum(hexRed);
+        this.green = hexToNum(hexGreen);
+        this.blue = hexToNum(hexBlue);
+
+        return this;
+    }
+
+    random(){
+        this.red = randomBetween(0, 255);
+        this.green = randomBetween(0, 255);
+        this.blue = randomBetween(0, 255);
+
+        return this;
+    }
+
+    hsv(){
+        const ranges = [round(this.red/255), round(this.green/255), round(this.blue/255)];
+        const sorted = [...ranges].sort().reverse();
+        const cMax = sorted[0];
+        const cMin = sorted[2];
+        const delta = cMax - cMin;
+
+        // Hue calculation
+        let hue;
+
+        if(delta === 0){
+            hue = 0;
+        }else if(sorted[0] === ranges[0]){
+            hue = 60 * (((ranges[1] - ranges[2]) / delta) % 6);
+            hue = wrapAngle(hue, 0);
+        }else if(sorted[0] === ranges[1]){
+            hue = 60 * (((ranges[2] - ranges[0]) / delta) + 2);
+        }else if(sorted[0] === ranges[2]){
+            hue = 60 * (((ranges[0] - ranges[1]) / delta) + 4);
+        };
+
+        // Saturation calculation
+        let saturation;
+
+        if(cMax === round(0)){
+            saturation = 0;
+        }else{
+            saturation = round(delta / cMax);
+        };
+
+        // Value is same as cMax
+        const value = cMax;
+
+        return{hue, saturation, value}
+    }
+
+    hex(){
+        return "#" + numToHex(this.red) + numToHex(this.green) + numToHex(this.blue);
+    }
+
+    tint(color){
+        this.red = clamp(this.red + color.red, 0, 255);
+        this.green = clamp(this.green + color.green, 0, 255);
+        this.blue = clamp(this.blue + color.blue, 0, 255);
+    }
+
+    clone(){
+        return new Color(this.red, this.green, this.blue);
+    }
+
+    async init(){
+        const color = this;
+
+        return new Promise(async function(resolve){
+            const similar = await(Indexer.findSimilar(color));
+            color.name = similar["name"];
+            resolve();
+        })
+    };
+}
+
+export{Color}