diff --git a/electron/package.json b/electron/package.json index dfb09ed5..2d65a371 100644 --- a/electron/package.json +++ b/electron/package.json @@ -1,19 +1,19 @@ -{ - "name": "electron", - "version": "1.0.0", - "main": "index.js", - "license": "MIT", - "private": true, - "scripts": { - "startDev": "electron --disable-direct-composition --in-process-gpu . --dev --local", - "startDevGpu": "electron --enable-gpu-rasterization --enable-accelerated-2d-canvas --num-raster-threads=8 --enable-zero-copy . --dev --local", - "start": "electron --disable-direct-composition --in-process-gpu ." - }, - "devDependencies": {}, - "optionalDependencies": {}, - "dependencies": { - "async-lock": "^1.4.1", - "electron": "^30.0.0", - "electron-window-state": "^5.0.3" - } -} \ No newline at end of file +{ + "name": "electron", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "private": true, + "scripts": { + "startDev": "electron --disable-direct-composition --in-process-gpu . --dev --local", + "startDevGpu": "electron --enable-gpu-rasterization --enable-accelerated-2d-canvas --num-raster-threads=8 --enable-zero-copy . --dev --local", + "start": "electron --disable-direct-composition --in-process-gpu ." + }, + "devDependencies": {}, + "optionalDependencies": {}, + "dependencies": { + "async-lock": "^1.4.1", + "electron": "^30.0.0", + "electron-window-state": "^5.0.3" + } +} diff --git a/res_raw/sprites/belt/generate_wire_sprites.js b/res_raw/sprites/belt/generate_wire_sprites.js index 7db9782c..1a88c508 100644 --- a/res_raw/sprites/belt/generate_wire_sprites.js +++ b/res_raw/sprites/belt/generate_wire_sprites.js @@ -1,212 +1,212 @@ -/** - * - * Run `yarn global add canvas` first - */ - -const { createCanvas } = require("canvas"); -const fs = require("fs"); -const path = require("path"); - -const outputFolder = path.join(__dirname, "..", "wires", "sets"); - -const dimensions = 192; -const lineSize = 14; -const lowerLineSize = 32; - -const variants = { - first: "#61ef6f", - second: "#5fb2f1", - conflict: "#f74c4c", -}; - -function hexToRGB(h) { - let r = 0, - g = 0, - b = 0; - - // 3 digits - if (h.length == 4) { - r = "0x" + h[1] + h[1]; - g = "0x" + h[2] + h[2]; - b = "0x" + h[3] + h[3]; - - // 6 digits - } else if (h.length == 7) { - r = "0x" + h[1] + h[2]; - g = "0x" + h[3] + h[4]; - b = "0x" + h[5] + h[6]; - } - - return [+r, +g, +b]; -} - -function RGBToHSL(r, g, b) { - // Make r, g, and b fractions of 1 - r /= 255; - g /= 255; - b /= 255; - - // Find greatest and smallest channel values - let cmin = Math.min(r, g, b), - cmax = Math.max(r, g, b), - delta = cmax - cmin, - h = 0, - s = 0, - l = 0; - // Calculate hue - // No difference - if (delta == 0) h = 0; - // Red is max - else if (cmax == r) h = ((g - b) / delta) % 6; - // Green is max - else if (cmax == g) h = (b - r) / delta + 2; - // Blue is max - else h = (r - g) / delta + 4; - - h = Math.round(h * 60); - - // Make negative hues positive behind 360° - if (h < 0) h += 360; - - // Calculate lightness - l = (cmax + cmin) / 2; - - // Calculate saturation - s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); - - // Multiply l and s by 100 - s = +(s * 100).toFixed(1); - l = +(l * 100).toFixed(1); - - return [h, s, l]; -} - -function HSLToRGB(h, s, l) { - // Must be fractions of 1 - s /= 100; - l /= 100; - - let c = (1 - Math.abs(2 * l - 1)) * s, - x = c * (1 - Math.abs(((h / 60) % 2) - 1)), - m = l - c / 2, - r = 0, - g = 0, - b = 0; - - if (0 <= h && h < 60) { - r = c; - g = x; - b = 0; - } else if (60 <= h && h < 120) { - r = x; - g = c; - b = 0; - } else if (120 <= h && h < 180) { - r = 0; - g = c; - b = x; - } else if (180 <= h && h < 240) { - r = 0; - g = x; - b = c; - } else if (240 <= h && h < 300) { - r = x; - g = 0; - b = c; - } else if (300 <= h && h < 360) { - r = c; - g = 0; - b = x; - } - r = Math.round((r + m) * 255); - g = Math.round((g + m) * 255); - b = Math.round((b + m) * 255); - - return [r, g, b]; -} - -async function run() { - console.log("Running"); - - const promises = []; - - for (const variantId in variants) { - const variantColor = variants[variantId]; - const variantHSL = RGBToHSL(...hexToRGB(variantColor)); - const darkenedColor = HSLToRGB(variantHSL[0], variantHSL[1] - 15, variantHSL[2] - 20); - const hexDarkenedColor = "rgb(" + darkenedColor.join(",") + ")"; - - console.log(variantColor, "->", hexToRGB(variantColor), variantHSL, "->", darkenedColor); - - const parts = { - forward: [[0.5, 0, 0.5, 1]], - turn: [ - [0.5, 0.5, 0.5, 1], - [0.5, 0.5, 1, 0.5], - ], - split: [ - [0.5, 0.5, 0.5, 1], - [0, 0.5, 1, 0.5], - ], - cross: [ - [0, 0.5, 1, 0.5], - [0.5, 0, 0.5, 1], - ], - }; - - for (const partId in parts) { - const partLines = parts[partId]; - - const canvas = createCanvas(dimensions, dimensions); - const context = canvas.getContext("2d"); - context.quality = "best"; - context.clearRect(0, 0, dimensions, dimensions); - - const lineCanvas = createCanvas(dimensions, dimensions); - const lineContext = lineCanvas.getContext("2d"); - lineContext.quality = "best"; - lineContext.clearRect(0, 0, dimensions, dimensions); - lineContext.strokeStyle = hexDarkenedColor; - lineContext.lineWidth = lowerLineSize; - lineContext.lineCap = "square"; - lineContext.imageSmoothingEnabled = false; - - // Draw lower lines - partLines.forEach(([x1, y1, x2, y2]) => { - lineContext.beginPath(); - lineContext.moveTo(x1 * dimensions, y1 * dimensions); - lineContext.lineTo(x2 * dimensions, y2 * dimensions); - lineContext.stroke(); - }); - - context.globalAlpha = 0.4; - context.drawImage(lineCanvas, 0, 0, dimensions, dimensions); - - context.globalAlpha = 1; - context.imageSmoothingEnabled = false; - context.lineCap = "square"; - context.strokeStyle = variantColor; - context.lineWidth = lineSize; - - // Draw upper lines - partLines.forEach(([x1, y1, x2, y2]) => { - context.beginPath(); - context.moveTo(x1 * dimensions, y1 * dimensions); - context.lineTo(x2 * dimensions, y2 * dimensions); - context.stroke(); - }); - - const out = fs.createWriteStream(path.join(outputFolder, variantId + "_" + partId + ".png")); - const stream = canvas.createPNGStream(); - stream.pipe(out); - promises.push(new Promise(resolve => stream.on("end", resolve))); - } - } - - console.log("Waiting for completion"); - await Promise.all(promises); - - console.log("Done!"); -} - -run(); +/** + * + * Run `yarn global add canvas` first + */ + +const { createCanvas } = require("canvas"); +const fs = require("fs"); +const path = require("path"); + +const outputFolder = path.join(__dirname, "..", "wires", "sets"); + +const dimensions = 192; +const lineSize = 14; +const lowerLineSize = 32; + +const variants = { + first: "#61ef6f", + second: "#5fb2f1", + conflict: "#f74c4c", +}; + +function hexToRGB(h) { + let r = 0, + g = 0, + b = 0; + + // 3 digits + if (h.length == 4) { + r = "0x" + h[1] + h[1]; + g = "0x" + h[2] + h[2]; + b = "0x" + h[3] + h[3]; + + // 6 digits + } else if (h.length == 7) { + r = "0x" + h[1] + h[2]; + g = "0x" + h[3] + h[4]; + b = "0x" + h[5] + h[6]; + } + + return [+r, +g, +b]; +} + +function RGBToHSL(r, g, b) { + // Make r, g, and b fractions of 1 + r /= 255; + g /= 255; + b /= 255; + + // Find greatest and smallest channel values + let cmin = Math.min(r, g, b), + cmax = Math.max(r, g, b), + delta = cmax - cmin, + h = 0, + s = 0, + l = 0; + // Calculate hue + // No difference + if (delta == 0) h = 0; + // Red is max + else if (cmax == r) h = ((g - b) / delta) % 6; + // Green is max + else if (cmax == g) h = (b - r) / delta + 2; + // Blue is max + else h = (r - g) / delta + 4; + + h = Math.round(h * 60); + + // Make negative hues positive behind 360° + if (h < 0) h += 360; + + // Calculate lightness + l = (cmax + cmin) / 2; + + // Calculate saturation + s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); + + // Multiply l and s by 100 + s = +(s * 100).toFixed(1); + l = +(l * 100).toFixed(1); + + return [h, s, l]; +} + +function HSLToRGB(h, s, l) { + // Must be fractions of 1 + s /= 100; + l /= 100; + + let c = (1 - Math.abs(2 * l - 1)) * s, + x = c * (1 - Math.abs(((h / 60) % 2) - 1)), + m = l - c / 2, + r = 0, + g = 0, + b = 0; + + if (0 <= h && h < 60) { + r = c; + g = x; + b = 0; + } else if (60 <= h && h < 120) { + r = x; + g = c; + b = 0; + } else if (120 <= h && h < 180) { + r = 0; + g = c; + b = x; + } else if (180 <= h && h < 240) { + r = 0; + g = x; + b = c; + } else if (240 <= h && h < 300) { + r = x; + g = 0; + b = c; + } else if (300 <= h && h < 360) { + r = c; + g = 0; + b = x; + } + r = Math.round((r + m) * 255); + g = Math.round((g + m) * 255); + b = Math.round((b + m) * 255); + + return [r, g, b]; +} + +async function run() { + console.log("Running"); + + const promises = []; + + for (const variantId in variants) { + const variantColor = variants[variantId]; + const variantHSL = RGBToHSL(...hexToRGB(variantColor)); + const darkenedColor = HSLToRGB(variantHSL[0], variantHSL[1] - 15, variantHSL[2] - 20); + const hexDarkenedColor = "rgb(" + darkenedColor.join(",") + ")"; + + console.log(variantColor, "->", hexToRGB(variantColor), variantHSL, "->", darkenedColor); + + const parts = { + forward: [[0.5, 0, 0.5, 1]], + turn: [ + [0.5, 0.5, 0.5, 1], + [0.5, 0.5, 1, 0.5], + ], + split: [ + [0.5, 0.5, 0.5, 1], + [0, 0.5, 1, 0.5], + ], + cross: [ + [0, 0.5, 1, 0.5], + [0.5, 0, 0.5, 1], + ], + }; + + for (const partId in parts) { + const partLines = parts[partId]; + + const canvas = createCanvas(dimensions, dimensions); + const context = canvas.getContext("2d"); + context.quality = "best"; + context.clearRect(0, 0, dimensions, dimensions); + + const lineCanvas = createCanvas(dimensions, dimensions); + const lineContext = lineCanvas.getContext("2d"); + lineContext.quality = "best"; + lineContext.clearRect(0, 0, dimensions, dimensions); + lineContext.strokeStyle = hexDarkenedColor; + lineContext.lineWidth = lowerLineSize; + lineContext.lineCap = "square"; + lineContext.imageSmoothingEnabled = false; + + // Draw lower lines + partLines.forEach(([x1, y1, x2, y2]) => { + lineContext.beginPath(); + lineContext.moveTo(x1 * dimensions, y1 * dimensions); + lineContext.lineTo(x2 * dimensions, y2 * dimensions); + lineContext.stroke(); + }); + + context.globalAlpha = 0.4; + context.drawImage(lineCanvas, 0, 0, dimensions, dimensions); + + context.globalAlpha = 1; + context.imageSmoothingEnabled = false; + context.lineCap = "square"; + context.strokeStyle = variantColor; + context.lineWidth = lineSize; + + // Draw upper lines + partLines.forEach(([x1, y1, x2, y2]) => { + context.beginPath(); + context.moveTo(x1 * dimensions, y1 * dimensions); + context.lineTo(x2 * dimensions, y2 * dimensions); + context.stroke(); + }); + + const out = fs.createWriteStream(path.join(outputFolder, variantId + "_" + partId + ".png")); + const stream = canvas.createPNGStream(); + stream.pipe(out); + promises.push(new Promise(resolve => stream.on("end", resolve))); + } + } + + console.log("Waiting for completion"); + await Promise.all(promises); + + console.log("Done!"); +} + +run(); diff --git a/src/html/index.html b/src/html/index.html index 9209c2fc..da67db6d 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -1,4 +1,4 @@ - +
-
-- Do the changes you wish to do (Be sure **not** to translate placeholders! For example, `
-
-- Click "Create pull request"
-
-
-
-- I will review your changes and make comments, and eventually merge them so they will be in the next release! Be sure to regulary check the created pull request for comments.
-
-## Adding a new language
-
-Please DM me on Discord (tobspr#5407), so I can add the language template for you.
-
-**Important: I am currently not accepting new languages until the wires update is out!**
-
-Please use the following template:
-
-```
-Hey, could you add a new translation?
-
-Language:
+
+- Do the changes you wish to do (Be sure **not** to translate placeholders! For example, `
+
+- Click "Create pull request"
+
+
+
+- I will review your changes and make comments, and eventually merge them so they will be in the next release! Be sure to regulary check the created pull request for comments.
+
+## Adding a new language
+
+Please DM me on Discord (tobspr#5407), so I can add the language template for you.
+
+**Important: I am currently not accepting new languages until the wires update is out!**
+
+Please use the following template:
+
+```
+Hey, could you add a new translation?
+
+Language: