main.js

// Define initial state
let currentTaskIndex = 0;
let totalTasks = 5;
let tasks = [];
let reward = "";

// Create a new Alpine component
document.addEventListener("DOMContentLoaded", () => {
    const rootElem = document.getElementById("rootelm");
    const alpineComponent = {
        data: {
            currentTaskIndex,
            totalTasks,
            tasks,
            reward
        },
        methods: {
            
        }
    };
    Alpine.store(alpineComponent);
    const alpine = new Alpine(rootElem, alpineComponent);
    Alpine.start();
    alpineComponent.$watch("reward", (newValue) => {
        reward = newValue;
    });
});

// Add task
function addTask(title, description, reward) {
    tasks.push({
        title,
        description,
        reward
    });
    currentTaskIndex++;
}

// Complete tasks
function completeTasks() {
    Alpine.store(alpineComponent);
    Alpine.start();
}

// Reward the user
function rewardUser() {
    Alpine.store(alpineComponent);
    Alpine.start();
}

// Play the rick roll
function playRickRoll() {
    const audio = new Audio();
    audio.src = "https://www.soundjay.com/pack-oregondave-rick.mp3";
    audio.play();
}

// Pass in tasks and rewards
addTask("Do a chore", "Clean your room", "You get a dollar");
addTask("Watch a video", "Watch a funny cat video", "You get a candy");
addTask("Complete a task", "Complete a task", "You get a toy");

// Call the functions
completeTasks();
rewardUser();
playRickRoll();