Source: changeimg.js

/**
 * Change Image module
 * @module changeImg
 * @requires interactables.js
 */

import * as interactables from './interactables.js';

/**
 * Updates the patch image to display stitched thread lines in black or white.
 * 
 * @function stich
 * @memberof module:changeImg
 * 
 * @param {HTMLElement} thread - The needle element used to stitch the patch, containing either black or white thread.
 * @param {HTMLElement} patch - The patch element to apply the stitched thread lines.
 * 
 * @description
 * Depending on the color of the thread (`blackNeedle` or `whiteNeedle`), 
 * this function updates the `src` of the given patch (`heartPatch`, `starPatch`, or `smileyPatch`) 
 * to reflect the appropriate stitched thread color.
 * 
 * @example
 * // Using a black thread to stitch a heart patch:
 * stich(interactables.blackNeedle, interactables.heartPatch);
 * 
 * // Using a white thread to stitch a smiley patch:
 * stich(interactables.whiteNeedle, interactables.smileyPatch);
 */
export function stich(thread, patch) {
    if (thread == interactables.blackNeedle) {
        if (patch == interactables.heartPatch) {
            patch.src = "img/heart-patch-black.png";
        }
        if (patch == interactables.starPatch) {
            patch.src = "img/star-patch-black.png";
        }
        if (patch == interactables.smileyPatch) {
            patch.src = "img/smiley-patch-black.png";
        }
    }
    if (thread == interactables.whiteNeedle) {
        if (patch == interactables.heartPatch) {
            patch.src = "img/heart-patch-white.png";
        }
        if (patch == interactables.starPatch) {
            patch.src = "img/star-patch-white.png";
        }
        if (patch == interactables.smileyPatch) {
            patch.src = "img/smiley-patch-white.png";
        }
    }
}

/**
 * @type {string | null} Remembers the color in which the shirt was dyed.
 */
export let color = null;

/**
 * Changes the shirt image to match the selected dye bucket and updates the color variable.
 * 
 * @function dye
 * @memberof module:changeImg
 * 
 * @param {HTMLElement} bucket - The bucket element used to dye the shirt.
 * @param {HTMLElement} shirt - The shirt element whose color is being changed.
 * 
 * @description
 * This function modifies the `src` of the shirt element to reflect the selected dye color. 
 * Additionally, it updates the `color` variable (defined above) to store the current color 
 * of the shirt.
 * 
 * @example
 * // Dye the shirt green using the green bucket:
 * dye(interactables.greenBucket, shirtElement);
 */
export function dye(bucket, shirt) {
    if (bucket == interactables.greenBucket) {
        shirt.src = "img/shirt-green.png";
        color = "green";
    }

    if (bucket == interactables.orangeBucket) {
        shirt.src = "img/shirt-orange.png";
        color = "orange";
    }

    if (bucket == interactables.pinkBucket) {
        shirt.src = "img/shirt-pink.png";
        color = "pink";
    }
}

/**
 * Changes the shirt to a crop top based on its current color.
 * 
 * @function cut
 * @memberof module:changeImg
 * 
 * @param {HTMLElement} shirt - The shirt element to be transformed into a crop top.
 * 
 * @description
 * Converts the shirt into a crop top by updating its `src` attribute 
 * based on the current color of the shirt stored in the `color` variable.
 * 
 * @example
 * // Change the shirt to a green crop top if it's currently green:
 * cut(shirtElement);
 */
export function cut(shirt) {
    if (color === "green")
        shirt.src = "img/croptop-green.png";
    if (color === "orange")
        shirt.src = "img/croptop-orange.png";
    if (color === "pink")
        shirt.src = "img/croptop-pink.png";
}