gistfile1.txt

// Immutable
const COLOR_ARRAY = ['#CC231E', '#0F8A5F', '#F8D54C', '#C0C0C0', '#405685']
const MUSIC_ELEMENT_ID = 991
const mySong = new Audio("https://cdn.pixabay.com/download/audio/2022/12/06/audio_eeecf6c32f.mp3?filename=we-wish-you-a-merry-christmas-128367.mp3");
const image = new WebImage("https://miro.medium.com/max/256/1*xBsr6BcIR71gq8xMbJ67nw.png")

// Mutable
var currentColor = Color.BLACK
var isPlaying = false

function start() {
    // Initial setup
    buildPalette()
    buildMusicControlers()
    configureImage()
    mouseDragMethod(onTap);    
    // Handles click event to update color
    mouseClickMethod(handleClick);
}

function handleClick(e) {
    updateColor(e)
    var elem = getElementAt(e.getX(), e.getY());
    if (elem != null) {
        const id = elem.id
        if (MUSIC_ELEMENT_ID === id) {
            if (isPlaying) {
                mySong.pause()
            } else {
                mySong.play()
            
            }
            isPlaying = !isPlaying
            buildMusicControlers()
        }
    }
}

function updateColor(e) {
    // Get the current element, get color and update currentColor
    var elem = getElementAt(e.getX(), e.getY());
    if (elem != null) {
        currentColor = elem.getColor()
    } else {
        // if is null, go back to BLACK
        currentColor = Color.BLACK
    }
}

// Function that buils play and stop buttons
function buildMusicControlers() {
    var playButton = new Rectangle(200, 50);
    playButton.setPosition(getWidth() - 50, 0)
    playButton.setColor(Color.BLACK)
    playButton.id = MUSIC_ELEMENT_ID
    add(playButton)
    
    var textButton = ""
    if (isPlaying) {
        textButton = "Stop"
        add(image)
    } else {
        textButton = "Play"
        remove(image)
    }
    var play = new Text(textButton, "15pt Arial");
    play.setPosition(getWidth() - 45, 35);
    play.setColor("white");
    add(play);
}

function configureImage() {
    image.setSize(200, 200)
    image.setPosition(0, getHeight() - 200)
}

// Function that builds a palette of colors for the user to pick from
function buildPalette() {
    const size = 50
    for (let i = 0; i < COLOR_ARRAY.length; i++) {
        var rect = new Rectangle(size, size);
        rect.setPosition(i * size, 0);
        rect.setColor(COLOR_ARRAY[i]);
        add(rect)
    }
}

// This function takes a parameter named e
// To learn more about graphics and click/tap events, you can explore the
// Introduction to Computer Science in JavaScript course or check out docs.
function onTap(e) {
    console.log(e)
    drawCircle(e.getX(), e.getY());
}


// This function draws a circle at the given coordinates
// You can modify this function to play around
function drawCircle(x, y) {
    // Modify the radius to change the size of circles.
    var radius = 5;
    var circle = new Circle(radius);
    circle.setPosition(x, y);
    circle.setColor(currentColor);
    add(circle);
   
}