hyapp-h5/activity/invite/script.js

(function () {
    var rankRows = Array.from({ length: 30 }, function (_, index) {
        return {
            rank: index + 1,
            name: "hanneem",
            score: "123",
        };
    });

    function $(selector) {
        return document.querySelector(selector);
    }

    function toast(message) {
        if (window.HyToast && window.HyToast.show) {
            window.HyToast.show(message);
            return;
        }
        window.alert(message);
    }

    function t(key, fallback) {
        if (window.HyAppI18n && window.HyAppI18n.t) {
            return window.HyAppI18n.t(key, fallback);
        }
        return fallback || key;
    }

    function formatPeople(value) {
        return t("invite.peopleSuffix", "{value} people").replace(
            "{value}",
            value
        );
    }

    function pad(value) {
        return String(Math.max(0, value)).padStart(2, "0");
    }

    function updateCountdown() {
        var now = Date.now();
        var end = new Date();
        end.setDate(end.getDate() + 1);
        end.setHours(0, 0, 0, 0);
        var diff = Math.max(0, end.getTime() - now);
        var totalSeconds = Math.floor(diff / 1000);
        var days = Math.floor(totalSeconds / 86400);
        var hours = Math.floor((totalSeconds % 86400) / 3600);
        var minutes = Math.floor((totalSeconds % 3600) / 60);
        var seconds = totalSeconds % 60;
        $("#days").textContent = pad(days);
        $("#hours").textContent = pad(hours);
        $("#minutes").textContent = pad(minutes);
        $("#seconds").textContent = pad(seconds);
    }

    function renderRank() {
        var list = $("#rankList");
        list.textContent = "";
        rankRows.forEach(function (item) {
            var row = document.createElement("article");
            var rank = document.createElement("span");
            var medal = document.createElement("img");
            var avatar = document.createElement("img");
            var name = document.createElement("strong");
            var score = document.createElement("span");

            row.className = "rank-row";
            rank.className = "rank-no";
            medal.className = "rank-medal";
            avatar.className = "rank-avatar";
            name.className = "rank-name";
            score.className = "rank-score";

            if (item.rank <= 3) {
                medal.src = "./assets/medal-" + item.rank + ".png";
                medal.alt = "Rank " + item.rank;
                rank.textContent = "";
            } else {
                medal.alt = "";
                rank.textContent = item.rank;
            }

            avatar.src = "./assets/rank-avatar.png";
            avatar.alt = "";
            name.textContent = item.name;
            score.textContent = formatPeople(item.score);

            row.appendChild(rank);
            row.appendChild(item.rank <= 3 ? medal : document.createElement("span"));
            row.appendChild(avatar);
            row.appendChild(name);
            row.appendChild(score);
            list.appendChild(row);
        });
    }

    function setTab(tabName) {
        var monthly = $("#monthlyTask");
        var isQuota = tabName === "quota";
        monthly.classList.toggle("is-quota", isQuota);

        document.querySelectorAll(".task-tab").forEach(function (button) {
            var active = button.getAttribute("data-tab") === tabName;
            button.classList.toggle("is-active", active);
            button.setAttribute("aria-selected", String(active));
        });

        $("#transportPane").classList.toggle("is-active", !isQuota);
        $("#quotaPane").classList.toggle("is-active", isQuota);
        $("#rankPanel").hidden = !isQuota;
    }

    function copyTextFrom(selector) {
        var node = $(selector);
        var text = node ? node.textContent.trim() : "";
        if (!text) {
            toast(t("invite.copyFailed", "Copy failed"));
            return;
        }
        function fallbackCopy() {
            var input = document.createElement("textarea");
            input.value = text;
            input.setAttribute("readonly", "readonly");
            input.style.position = "fixed";
            input.style.left = "-9999px";
            input.style.top = "0";
            document.body.appendChild(input);
            input.select();
            var ok = false;
            try {
                ok = document.execCommand("copy");
            } catch (error) {
                ok = false;
            }
            document.body.removeChild(input);
            toast(
                ok
                    ? t("invite.copied", "Copied")
                    : t("invite.copyFailed", "Copy failed")
            );
        }
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard
                .writeText(text)
                .then(function () {
                    toast(t("invite.copied", "Copied"));
                })
                .catch(function () {
                    fallbackCopy();
                });
            return;
        }
        fallbackCopy();
    }

    function copyInviteLink() {
        copyTextFrom("#inviteLink");
    }

    function copyInviteCode() {
        copyTextFrom("#inviteCode");
    }

    function bindEvents() {
        document.querySelectorAll(".task-tab").forEach(function (button) {
            button.addEventListener("click", function () {
                setTab(button.getAttribute("data-tab") || "transport");
            });
        });
        $("#copyLinkButton").addEventListener("click", copyInviteLink);
        $("#copyCodeButton").addEventListener("click", copyInviteCode);
        document
            .querySelectorAll(".copy-task-button")
            .forEach(function (button) {
                button.addEventListener("click", copyInviteLink);
            });
        document.querySelectorAll(".claim-button").forEach(function (button) {
            button.addEventListener("click", function () {
                if (!button.classList.contains("is-ready")) {
                    toast(t("invite.notAvailable", "Not available yet"));
                    return;
                }
                toast(t("invite.claimed", "Claimed"));
                button.classList.remove("is-ready");
            });
        });
    }

    function init() {
        renderRank();
        updateCountdown();
        setInterval(updateCountdown, 1000);
        bindEvents();
    }

    window.addEventListener("hyapp:i18n-ready", function () {
        renderRank();
    });

    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
    } else {
        init();
    }
})();