Merge pull request #2 from GGodPL/main

add image.js mod

image.js

@@ -0,0 +1,163 @@
+{
+let colors = Object.keys(ingredients).filter(k => ingredients[k].color).map(key => ({
+    name: key,
+    color: ingredients[key].color[0].slice(1).match(/../g).map(a => Math.floor(parseInt(a, 16)))
+}))
+
+function distance(rgb, rgb2) {
+    return Math.sqrt(Math.pow(rgb[0] - rgb2[0], 2) + Math.pow(rgb[1] - rgb2[1], 2) + Math.pow(rgb[2] - rgb2[2], 2));
+}
+
+function drawImage() {
+    const file = document.createElement("input");
+    file.type = "file";
+    file.accept = "image/*";
+    let width = canvas.width;
+    let height = canvas.height;
+    file.onchange = function() {
+        setTimeout(function(){
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const img = new Image();
+                img.onload = function() {
+                    const placingImage = img;
+                    const canvas = document.createElement("canvas")
+                    const ctx = canvas.getContext("2d")
+                    let imageWidth = Math.floor(width / ((70 / 2.25) * foodScale));
+                    let imageHeight = Math.floor(height / ((70 / 2.25) * foodScale));
+                    ctx.drawImage(placingImage, 0, 0, imageWidth, imageHeight);
+                    const image = ctx.getImageData(0, 0, imageWidth, imageHeight);
+                    for (let i = 0; i < imageWidth; i++) {
+                        for (let j = 0; j < imageHeight; j++) {
+                            const index = (j * imageWidth + i) * 4;
+                            const r = image.data[index];
+                            const g = image.data[index + 1];
+                            const b = image.data[index + 2];
+                            const a = image.data[index + 3];
+                            const closest = colors.map(c => ({value: distance([r, g, b], c.color), name: c.name, color: c.color})).sort((a, b) => a.value - b.value);
+                            const color = rgbToHsl(...closest[0].color);
+                            viewData.bowl.total.push({
+                                x: i * (70 / 2.25) * foodScale + (35 / 2.25) * foodScale,
+                                y: j * (70 / 2.25) * foodScale + (35 / 2.25) * foodScale,
+                                done: true,
+                                id: closest[0].name,
+                                h: color[0] * 360,
+                                s: color[1] * 100,
+                                l: color[2] * 100
+                            })
+                        }
+                    }
+                }
+                img.src = e.target.result;
+                file.value = "";
+            }
+            reader.readAsDataURL(file.files[0]);
+        },500);
+    }
+    file.click();
+}
+
+let disableBowl = false;
+
+viewRenderer.bowl = function(hideGUI) {
+    // draw from file table.png to fit the whole canvas
+    ctx.drawImage(loadImage('table.png'), 0, 0, canvas.width, canvas.height);
+    ctx.shadowOffsetY = 7;
+    // Heat glow
+    if (viewData[currentView].temp >= 20) {
+      var heatIndex = Math.min(255, Math.round((viewData[currentView].temp-20)*10));
+      ctx.shadowColor = "rgb("+heatIndex+",0,0)"
+    }
+    else {
+      // -30 to 19
+      var heatIndex = Math.min(255, Math.round((20-viewData[currentView].temp)*10));
+      ctx.shadowColor = "rgb(0,0,"+heatIndex+")"
+    }
+    ctx.shadowBlur = 20;
+    var bowlImg = loadImage('bowl.png');
+    // put in the middle on the table
+    if (!disableBowl) ctx.drawImage(bowlImg, canvas.width/2 - bowlImg.width/2*5, canvas.height/2 - bowlImg.height/2*5+75, bowlImg.width*5, bowlImg.height*5);
+    ctx.shadowColor = "transparent";
+    if (viewData.bowl.liquid) {
+      var liquidColor = [viewData.bowl.liquidR/viewData.bowl.liquid, viewData.bowl.liquidG/viewData.bowl.liquid, viewData.bowl.liquidB/viewData.bowl.liquid]
+      var hsl = rgbToHsl(liquidColor[0], liquidColor[1], liquidColor[2]);
+      liquidColor = [Math.round(hsl[0]*360), Math.round(hsl[1]*100), Math.round(hsl[2]*100)];
+      var liquidImg = colorizeStandard('bowl_liquid.png', liquidColor[0], liquidColor[1], liquidColor[2]);
+      if (liquidImg.loaded === false) {
+        if (lastLiquidColor) {
+          liquidColor = lastLiquidColor;
+          liquidImg = colorizeStandard('bowl_liquid.png', lastLiquidColor[0], lastLiquidColor[1], lastLiquidColor[2]);
+        }
+      }
+      else {
+        lastLiquidColor = liquidColor;
+      }
+      if (!disableBowl) ctx.drawImage(liquidImg, canvas.width/2 - liquidImg.width/2*5, canvas.height/2 - liquidImg.height/2*5+75, liquidImg.width*5, liquidImg.height*5);
+    }
+    else if (lastLiquidColor) {
+      lastLiquidColor = null;
+      lastLiquidImg2 = null;
+    }
+    drawPlaced();
+    // draw transparent ingredient at mousePos
+    if (!hideGUI) drawCursor();
+    if (viewData.bowl.liquid) {
+      ctx.globalAlpha = 0.75;
+      var liquidImg2 = colorizeStandard('bowl_liquid_front.png', liquidColor[0], liquidColor[1], liquidColor[2]);
+      if (liquidImg2.loaded === false) {
+        if (lastLiquidImg2) {
+          var liquidImg2 = lastLiquidImg2;
+          liquidColor = lastLiquidColor;
+        }
+      }
+      else {
+        lastLiquidImg2 = liquidImg2;
+      }
+      if (!disableBowl) ctx.drawImage(liquidImg2, canvas.width/2 - liquidImg2.width/2*5, canvas.height/2 - liquidImg2.height/2*5+75, liquidImg2.width*5, liquidImg2.height*5);
+      ctx.globalAlpha = 1;
+    }
+    var bowlImg2 = loadImage('bowl_front.png');
+    if (!disableBowl) ctx.drawImage(bowlImg2, canvas.width/2 - bowlImg.width/2*5, canvas.height/2 - bowlImg.height/2*5+75, bowlImg.width*5, bowlImg.height*5);
+    // draw line in yellow
+    // ctx.fillStyle = "rgba(255,255,0)";
+    // ctx.fillRect(leftBound, hitLine, rightBound - leftBound, 5);
+}
+
+const controls = document.getElementById("prepControls");
+const disableBowlButton = document.createElement("button");
+disableBowlButton.id = "button-disableBowl";
+disableBowlButton.onclick = () => {
+    disableBowl = !disableBowl;
+    toggle("disableBowl");
+}
+disableBowlButton.setAttribute("on", "true")
+
+const bowlIconImage = document.createElement("img");
+bowlIconImage.src = "../shapes/png/hemisphere.png";
+bowlIconImage.className = "pixelart";
+disableBowlButton.appendChild(bowlIconImage);
+
+const imageButton = document.createElement("button");
+imageButton.id = "button-imageButton";
+imageButton.onclick = () => {
+    drawImage();
+}
+const randomImage = document.createElement("img");
+randomImage.src = "../shapes/png/assorted.png";
+randomImage.className = "pixelart";
+imageButton.appendChild(randomImage);
+
+const setSizeButton = document.createElement("button");
+setSizeButton.id = "button-imageButton";
+setSizeButton.onclick = () => {
+    const size = prompt("Enter food scale");
+    if (isNaN(parseFloat(size))) alert("Invalid food scale");
+    else foodScale = size;
+}
+const sizeImage = document.createElement("img");
+sizeImage.src = "../shapes/png/arrow_diagonal_forward.png";
+sizeImage.className = "pixelart";
+setSizeButton.appendChild(sizeImage);
+
+controls.append(disableBowlButton, imageButton, setSizeButton)
+}