@dcrackel/meyersquaredui/src/stories/Organisms/Tableau/utils/timerFunctions.js

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

// /Tableau/utils/timerFunctions.js

export function formatSecondsMMSS(totalSeconds = 0) {
    const t = Math.max(0, Number(totalSeconds) || 0);
    const minutes = Math.floor(t / 60);
    const seconds = t % 60;
    return `${minutes}:${String(seconds).padStart(2, "0")}`;
}

/**
 * Starts an internal ticking countdown that mutates `ctx.remainingTime`.
 * Returns a cleanup function.
 *
 * ctx must be a Vue component instance (this)
 * - ctx.remainingTime (number)
 * - ctx._timerId (internal)
 */
export function startCountdown(ctx, { onDone } = {}) {
    stopCountdown(ctx);

    ctx._timerId = setInterval(() => {
        if (ctx.remainingTime > 0) ctx.remainingTime -= 1;

        if (ctx.remainingTime <= 0) {
            ctx.remainingTime = 0;
            stopCountdown(ctx);
            onDone?.();
        }
    }, 1000);

    return () => stopCountdown(ctx);
}

export function stopCountdown(ctx) {
    if (!ctx?._timerId) return;
    clearInterval(ctx._timerId);
    ctx._timerId = null;
}

/**
 * Determines whether we should tick.
 * (You can tweak rules here once and share across components.)
 */
export function shouldTickBout(bout, remainingTime) {
    if (!bout) return false;
    if (bout.Status !== "Active") return false;

    const isRunning = bout.TimerStatus === "running";
    const isActive = bout.Status === "Active";
    return (isRunning || isActive) && (remainingTime ?? 0) > 0;
}