Merge branch 'main' of https://github.com/R74nCom/sandboxels

mods/background_music.js

@@ -1,35 +1,75 @@
-// Huge WIP
+/*
-// Will be making an actual UI for this soon
+function loadJsDelivr(url, callback) {
+    const script = document.createElement('script');
+    script.src = url;
+    script.onload = () => {
+        console.log('Loaded:', url);
+        if (callback) callback();
+    };
+    script.onerror = () => {
+        console.error('Failed to load:', url);
+    };
+    document.head.appendChild(script);
+}
+*/
+
+/**
+ * @type {undefined | HTMLAudioElement}
+ */
 let currentMusic;
+const PLAY = "\u25B6";
+const PAUSE = "\u23F8";
 /**
  * 
- * @param {string} userURL 
+ * @param {string|File} userAudio 
  */
-function setBackgroundMisic(userURL) {
+function setBackgroundMusic(userAudio) {
-    if (!isValidAudioUrl(userURL)) promptText("Invalid audio url")
+    let audioSrc;
-    else {
+
-        const url = new URL(userURL)
+    if (typeof userAudio === "string") {
-        if (currentMusic && currentMusic.src === url.href) return;
+        if (!isValidAudioUrl(userAudio)) {
-        if (currentMusic) {
+            promptText("Invalid audio URL");
-            currentMusic.pause();
+            return;
-            currentMusic.remove();
         }
-        const audio = document.createElement('audio');
+        audioSrc = new URL(userAudio).href;
-        audio.src = url.href;
+    } else if (userAudio instanceof File) {
-        audio.loop = true;
+        if (!userAudio.type.startsWith("audio/")) {
-        audio.volume = 0.5;
+            promptText("Invalid audio file");
-        audio.id = "bgm";
+            return;
-        document.body.appendChild(audio);
+        }
-
+        audioSrc = URL.createObjectURL(userAudio);
-        currentMusic = audio;
+    } else {
-
+        promptText("Invalid audio input");
-        settings.bgMusic = url.href;
+        return;
-        saveSettings();
-        logMessage(`Now playing: ${settings.bgMusic}`)
-        return audio
     }
+
+    if (currentMusic && currentMusic.src === audioSrc) return;
+
+    if (currentMusic) {
+        currentMusic.pause();
+        currentMusic.remove();
+    }
+
+    const audio = document.createElement('audio');
+    audio.src = audioSrc;
+    audio.loop = true;
+    audio.volume = 0.5;
+    audio.id = "bgm";
+    document.body.appendChild(audio);
+
+    currentMusic = audio;
+
+    // Only save if it's a URL, not a local file
+    if (typeof userAudio === "string") {
+        settings.bgMusic = audioSrc;
+        saveSettings();
+    }
+
+    logMessage(`Now playing: ${audioSrc}`);
+    return audio;
 }
 
+
 function isValidAudioUrl(inpurl) {
     try {
         const url = new URL(inpurl);
@@ -43,44 +83,195 @@ function isValidAudioUrl(inpurl) {
 
 let music_setting;
 let play;
+let playing = false;
 dependOn("betterSettings.js", () => {
+    // @ts-ignore
     const settings_tab = new SettingsTab("background_music.js")
+    // @ts-ignore
     music_setting = new Setting("Background Music", "bgm", settingType.TEXT, false)
-    play = new Setting("Play", "bgm", settingType.BOOLEAN, false)
+    // @ts-ignore
-    settings_tab.registerSettings(undefined, music_setting)
+    play = new Setting("Play", "play", settingType.BOOLEAN, false)
     settings_tab.registerSettings(undefined, play)
+    settings_tab.registerSettings(undefined, music_setting)
+    // @ts-ignore
     settingsManager.registerTab(settings_tab)
-})
+}, true)
 
 keybinds["KeyK"] = () => {
-    if (play) {
+    if (playing) {
-        play.value = !play.value
+        document.getElementById('pauseButton').click()
-        clearLog()
-        !play.value ? logMessage("Pause: ▶") : logMessage("Play: ⏸")
     }
 }
 
+function addCss() {
+    const CSS = `
+    .songControl {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
 
-runEveryTick(() => {
+        display: flex;
-    if (!play.value) {
+        gap: 10px;
-        currentMusic?.pause();
+        flex-wrap: nowrap;
-        return;
+        align-items: center;
+        justify-content: center;
+        
+        padding: 10px;
+        height: 20px;
+        
+        pointer-events: none;
+        background-color: transparent;      
+        border: 2px solid white;      
+        box-shadow: 0 0 8px rgba(0,0,0,0.8);
+    }
+    .pixelArt {
+        image-rendering: pixelated; 
+        image-rendering: crisp-edges;
+        width: 15px;
+        height: auto;
     }
 
-    const url = music_setting.value;
-    if (!isValidAudioUrl(url)) return;
 
-    // Only set new music if its different
+    `
-    if (!currentMusic || currentMusic.src !== new URL(url).href) {
+    const style_div = document.createElement("style")
-        setBackgroundMisic(url);
+    style_div.innerHTML = CSS
+
+    document.head.appendChild(style_div)
+}
+
+function createPauseButton() {
+    const pauseImgLink = "https://raw.githubusercontent.com/Cube14yt/assets/main/images/pause.png"
+    const playImgLink = "https://raw.githubusercontent.com/Cube14yt/assets/main/images/play.png"
+    const pauseButton = document.createElement("button");
+    /**
+     * @this {HTMLButtonElement}
+     */
+    pauseButton.onclick = function () {
+        if (playing) {
+            this.replaceChildren()
+            let img = document.createElement("img")
+            img.src = playImgLink
+            img.classList.add("pixelArt")
+            this.appendChild(img)
+            playing = !playing
+            currentMusic?.pause();
+        } else {
+            this.replaceChildren()
+            let img = document.createElement("img")
+            img.src = pauseImgLink
+            img.classList.add("pixelArt")
+            this.appendChild(img)
+            playing = !playing
+            const url = music_setting.value;
+
+            if (!currentMusic) {
+                setBackgroundMusic(url);
+            }
+            currentMusic?.play()
+        }
     }
+    pauseButton.replaceChildren()
+    let img = document.createElement("img")
+    img.src = playImgLink
+    img.classList.add("pixelArt")
+    pauseButton.appendChild(img)
+    pauseButton.style.pointerEvents = 'auto'
+    pauseButton.style.border = '2px solid white'
+    pauseButton.id = 'pauseButton'
+    return pauseButton
+}
 
-    currentMusic?.play()?.catch(() => {
+function createResetButton() {
-        promptConfirm("User input needed to play music", (val) => {
+    const resetButton = document.createElement("button");
-            if (!val) {
+    /**
-                play.set(false)
+     * @this {HTMLButtonElement}
-                play.update()
+     */
+    resetButton.onclick = function () {
+        if (currentMusic) currentMusic.currentTime = 0
+    }
+    let img = document.createElement("img")
+    img.src = "https://raw.githubusercontent.com/Cube14yt/assets/main/images/reset.png"
+    img.classList.add("pixelArt")
+    resetButton.appendChild(img)
+    resetButton.style.pointerEvents = "auto"
+    resetButton.style.border = '2px solid white'
+    resetButton.id = 'resetButton'
+    return resetButton
+}
+
+function createVolumeButton() {
+    const volumeButton = document.createElement("button");
+    /**
+     * @this {HTMLButtonElement}
+     */
+    volumeButton.onclick = function () {
+        promptInput("Input the new volume of the current music", (vol) => {
+            if (!currentMusic) return;
+            let newVolume = Number(vol)
+            if (!(newVolume >= 0 && newVolume <= 1)) return
+            currentMusic.volume = newVolume
+        }) 
+    }
+    let img = document.createElement("img")
+    img.src = "https://raw.githubusercontent.com/Cube14yt/assets/main/images/volume.png"
+    img.classList.add("pixelArt")
+    volumeButton.appendChild(img)
+    volumeButton.style.pointerEvents = "auto"
+    volumeButton.style.border = '2px solid white'
+    volumeButton.id = "volumeButton"
+    return volumeButton
+}
+
+function createInputButton() {
+    const inputButton = document.createElement('button')
+    inputButton.onclick = function () {
+        promptChoose("How do you want to input your song?", ["URL", "File"], (choice) => {
+            if (choice === "URL") {
+                promptInput("Give the url your song should use", (url) => {
+                    music_setting.value = url
+                }, "Input URL")
+            } else if (choice === "File") {
+                const input = document.createElement('input')
+                input.type = "file"
+                input.addEventListener('change', (event) => {
+                    // @ts-ignore
+                    const file = event.target.files[0];
+                    if (file) setBackgroundMusic(file)
+                })
+                input.click()
             }
         })
-    });
+    }
-})
+    inputButton.textContent = "Input Song"
+    inputButton.style.pointerEvents = "auto"
+    inputButton.style.border = '2px solid white'
+    inputButton.id = 'inputButton'
+    return inputButton
+}
+
+function showSongUi() {
+    let songDiv = document.getElementById("songUiParent");
+
+    const canvas_div = document.getElementById("canvasDiv");
+    if (!canvas_div) {
+        requestAnimationFrame(showSongUi)
+        return
+    };
+
+    if (!songDiv) {
+
+        songDiv = document.createElement("div");
+        songDiv.classList.add("songControl");
+        songDiv.id = "songUiParent";
+        songDiv.appendChild(createPauseButton())
+        songDiv.append(createResetButton())
+        songDiv.append(createVolumeButton())
+        songDiv.append(createInputButton())
+        canvas_div.appendChild(songDiv);
+    }
+    console.log("UI loaded sucessfully")
+}
+
+addCss()
+showSongUi()

mods/dry_acid.js

@@ -0,0 +1,34 @@
+elements.dry_acid = {
+    name:"Anhydrous acid",
+    desc:"It's pretty much just acid without water in it.",
+    color: ["#62e36f", "#a5d9aa", "#b3c9b6"],
+    behavior: behaviors.POWDER,
+    category: "powders",
+    state: "solid",
+    reactions: {
+        "water": { elem1:"dry_acid", elem2:"acid", temp2:37.22},
+        "dirty_water": { elem1:null, elem2:"acid", temp2:37.22}
+    },
+    density: 1.522
+}
+
+if (elements.acid) {
+    if (!elements.acid.ignore) {
+        elements.acid.ignore = [];
+    }
+    elements.acid.ignore.push('dry_acid');
+}
+
+// Ensure the reactions object exists for the element
+if (!elements.acid.reactions) {
+    elements.acid.reactions = {};
+}
+
+// Add the new reaction
+elements.acid.reactions["dirty_water"] = {
+    elem1: "acid", // What this element turns into
+    elem2: "acid", // What the other element turns into
+}
+
+delete elements.acid.reactions.water
+delete elements.water.reactions.acid

mods/mixtureIII.js

@@ -0,0 +1,360 @@
+function getName(elementList)
+{
+    if(elementList.filter(function(item, pos, self) {
+            return self.indexOf(item) == pos;
+        }).length == 1)
+    {
+        return elementList[0];
+    }
+    let name = elementList.join("_") + "_mixture";
+    if(nameList[name])
+    {
+        name = nameList[name];
+    };
+    return name;
+}
+
+
+function makeColors(elementList)
+{
+    return elementList.map((c) => elements[c].color instanceof Array ? elements[c].color : [elements[c].color]);
+}
+
+
+function mixture(elementList)
+{
+    elementList.sort();
+    
+    let name = getName(elementList);
+    
+    if(!elements[name])
+    {
+        elements[name] = true;
+        let minTempHigh = Infinity;
+        let stateHigh = null;
+        let indexStateHigh = -1;
+        
+        let maxTempLow = -Infinity;
+        let stateLow = null;
+        let indexStateLow = -1;
+        
+        
+        for(let i = 0; i < elementList.length; i++)
+        {
+            if(elements[elementList[i]])
+            {
+                if(typeof elements[elementList[i]].tempHigh === "number" && elements[elementList[i]].stateHigh)
+                {
+                    if(elements[elementList[i]].tempHigh < minTempHigh)
+                    {
+                        minTempHigh = elements[elementList[i]].tempHigh;
+                        indexStateHigh = i;
+                        stateHigh = elements[elementList[i]].stateHigh;
+                    }
+                }
+                
+                if(typeof elements[elementList[i]].tempLow === "number" && elements[elementList[i]].stateLow)
+                {
+                    if(elements[elementList[i]].tempLow > maxTempLow)
+                    {
+                        maxTempLow = elements[elementList[i]].tempLow;
+                        indexStateLow = i;
+                        stateLow = elements[elementList[i]].stateLow;
+                    }
+                }
+            }
+        }
+        
+        let elementList2 = elementList.slice();
+        let elementHigh = null;
+        if(indexStateHigh >= 0)
+        {
+            if(stateHigh instanceof Array)
+            {
+                elementHigh = [];
+                for(let i = 0; i < stateHigh.length; i++)
+                {
+                    elementList2[indexStateHigh] = stateHigh[i];
+                    elementHigh.push(mixture(elementList2));
+                }
+            }
+            else
+            {
+                elementList2[indexStateHigh] = stateHigh;
+                elementHigh = mixture(elementList2);
+            }
+        }
+        
+        let elementList3 = elementList.slice();
+        let elementLow = null;
+        if(indexStateLow >= 0)
+        {
+            if(stateLow instanceof Array)
+            {
+                elementLow = [];
+                for(let i = 0; i < stateLow.length; i++)
+                {
+                    elementList3[indexStateLow] = stateLow[i];
+                    elementLow.push(mixture(elementList3));
+                }
+            }
+            else
+            {
+                elementList3[indexStateLow] = stateLow;
+                elementLow = mixture(elementList3);
+            }
+        }
+        
+        if(elementHigh instanceof Array && elementHigh.length === 0)
+        {
+            minTempHigh = Infinity;
+            elementHigh = null;
+        }
+        if(elementLow instanceof Array && elementLow.length === 0)
+        {
+            maxTempLow = -Infinity;
+            elementLow = null;
+        }
+        
+        let colors = makeColors(elementList.slice());
+        let colors2 = [];
+        let maxLength = Math.max(...(colors.map((c) => c.length)));
+        
+        for(let i = 0; i < maxLength; i++)
+        {
+            let colors3 = [];
+            for(let j = 0; j < colors.length; j++)
+            {
+                colors3.push(toObject(colors[j][i%colors[j].length]));
+            }
+            colors2.push(averageRGB(colors3));
+        }
+        let temp = airTemp;
+        if(maxTempLow < airTemp && minTempHigh > airTemp)
+        {
+            
+        }
+        else if(maxTempLow > -Infinity && minTempHigh < Infinity)
+        {
+            temp = (maxTempLow + minTempHigh)/2;
+        }
+        else if(maxTempLow > -Infinity)
+        {
+            temp = maxTempLow+20;
+        }
+        else if(minTempHigh < Infinity)
+        {
+            temp = Math.max(minTempHigh-20,absoluteZero);
+        }
+        
+        
+        let movable = elementList.some((c) => elements[c].movable || elements[c].movable === undefined);
+        
+        let density = elementList.map((c) => elements[c].density ? elements[c].density : 0).reduce((a,b)=>a+b)/elementList.length;
+        let stain = elementList.map((c) => elements[c].stain ? elements[c].stain : 0).reduce((a,b)=>a+b)/elementList.length;
+        
+        let states = elementList.map((c) => elements[c].state);
+        if(states.includes("gas"))
+        {
+            state = "gas";
+            density = 0;
+        }
+        else if(!movable)
+        {
+            state = "solid";
+        }
+        else if(states.includes("liquid"))
+        {
+            state = "liquid";
+        }
+        else
+        {
+            state = "solid";
+        }
+        addElement(name, {
+            color: colors2.length == 1 ? colors2[0] : colors2,
+            colorObject: colors2.length == 1 ? toObject(colors2[0]) :colors2.map((c) => toObject(c)),
+            tick: function(pixel) {
+                mixtureBehavior(pixel, elementList);
+            },
+            tempHigh: minTempHigh,
+            stateHigh: elementHigh,
+            tempLow: maxTempLow,
+            stateLow: elementLow,
+            temp: temp,
+            category: "mixture",
+            mixture: elementList,
+            movable: movable,
+            density: density,
+            state: state,
+            stain: stain,
+            reactions: {},
+            isGas: state === "gas"
+        });
+        
+        for(let i in elements)
+        {
+            for(let j = 0; j < elementList.length; j++)
+            {
+                if(elements[i].reactions && elements[i].reactions[elementList[j]] !== undefined)
+                {
+                    if(name === i)
+                    {
+                        continue;
+                    }
+                    elements[i].reactions[name] = {elem2: name, func: function(a,b){mixtureReact(b,a,elementList)}}
+                }
+                if(elements[elementList[j]].reactions && elements[elementList[j]].reactions[i] !== undefined)
+                {
+                    if(name === i)
+                    {
+                        continue;
+                    }
+                    elements[name].reactions[i] = {elem2: i, func: function(a,b){mixtureReact(a,b,elementList)}}
+                }
+            }
+        }
+    }
+    return name;
+}
+
+function mixtureBehavior(pixel, elementList)
+{
+    let prevCol = pixel.color;
+    let previous = pixel.element;
+    let elem = elementList[Math.floor(Math.random()*elementList.length)];
+    if (elements[elem].tick) { // Run tick function if it exists
+        elements[elem].tick(pixel);
+    }
+    
+    if (pixel.del) {return}
+    
+    if (elements[elem].behavior) { // Parse behavior if it exists
+        pixelTick(pixel,elements[elem].behavior);
+    }
+    if(pixel.element === previous)
+    {
+        pixel.color = prevCol;
+    }
+}
+
+
+function mixtureReact(pixel, pixel2, elementList)
+{
+    elementList = elementList.slice();
+    shuffleArray(elementList);
+    let previous = pixel.element;
+    let prevCol = pixel.color;
+    let previous2 = pixel2.element;
+    let prevCol2 = pixel2.color;
+    for(let i = 0; i < elementList.length; i++)
+    {
+        let elem = elementList[i];
+        if(pixel.del)
+        {
+            return;
+        }
+        changePixel(pixel,elem, false);
+        let rr1 = false;
+        if (elements[elem].reactions !== undefined && elements[elem].reactions[pixel2.element] !== undefined) {
+            rr1 = reactPixels(pixel,pixel2);
+        }
+        if (!rr1 && elements[pixel2.element].reactions !== undefined && elements[pixel2.element].reactions[elem] !== undefined && !elements[pixel2.element].reactions[elem].oneway) {
+            reactPixels(pixel2,pixel);
+        }
+        if(pixel2.element === previous2)
+        {
+            pixel2.color = prevCol2;
+        }
+        if(!pixel.del && pixel.element === elem)
+        {
+        }
+        else if(pixel.del)
+        {
+            elementList.splice(elementList.indexOf(elem),1);
+            createPixel(mixture(elementList),pixel.x,pixel.y);
+            currentPixels[currentPixels.length-1].temp = pixel.temp;
+            return;
+        }
+        else
+        {
+            elementList.splice(elementList.indexOf(elem),1)
+            changePixel(pixel, mixture(elementList.concat([pixel.element])), false);
+            return;
+        }
+        if(pixel2.del)
+        {
+            return;
+        }
+    }
+    changePixel(pixel, previous, false);
+    pixel.color = prevCol;
+}
+
+nameList = [];
+
+function toObject(color)
+{
+    color = color.match(/\d+/g);
+    return {
+                r: parseInt(color[0]),
+                g: parseInt(color[1]),
+                b: parseInt(color[2])
+    };
+}
+
+function averageRGB2(colors)
+{
+    return toObject(averageRGB(colors.map((d) => (toObject(d)))));
+}
+
+function averageRGB(rgblist) {
+    var r = 0;
+    var g = 0;
+    var b = 0;
+    for (var i = 0; i < rgblist.length; i++) {
+        var rgb = rgblist[i];
+        r += parseInt(rgb.r);
+        g += parseInt(rgb.g);
+        b += parseInt(rgb.b);
+    }
+    r = Math.floor(r/rgblist.length);
+    g = Math.floor(g/rgblist.length);
+    b = Math.floor(b/rgblist.length);
+    return "rgb("+r+","+g+","+b+")";
+}
+
+
+function blendColors(colorA, colorB, amount = 0.5) {
+    const [rA, gA, bA] = colorA.match(/\w\w/g).map((c) => parseInt(c, 16));
+    const [rB, gB, bB] = colorB.match(/\w\w/g).map((c) => parseInt(c, 16));
+    const r = Math.round(rA + (rB - rA) * amount).toString(16).padStart(2, '0');
+    const g = Math.round(gA + (gB - gA) * amount).toString(16).padStart(2, '0');
+    const b = Math.round(bA + (bB - bA) * amount).toString(16).padStart(2, '0');
+    return '#' + r + g + b;
+}
+
+elements.mixer2 = {
+    color: "#999999",
+    ignore: ["mixer2"],
+    category:"machines",
+    insulate:true,
+    hardness: 1,
+    tick: function(pixel) {
+        if (!isEmpty(pixel.x-1,pixel.y,true) && !isEmpty(pixel.x+1,pixel.y,true) && isEmpty(pixel.x,pixel.y+1,false))
+        {
+            if(elements.mixer2.ignore.includes(pixelMap[pixel.x-1][pixel.y].element) || elements.mixer2.ignore.includes(pixelMap[pixel.x+1][pixel.y].element))
+            {
+                return;
+            }
+            else
+            {
+                createPixel(mixture([pixelMap[pixel.x-1][pixel.y].element,pixelMap[pixel.x+1][pixel.y].element]),pixel.x,pixel.y+1);
+                deletePixel(pixel.x-1,pixel.y);
+                deletePixel(pixel.x+1,pixel.y);
+            }
+        }
+        doDefaults(pixel);
+    },
+    maxSize: 1
+};