EDU/Website/NEducation/Views/MiniGame/Index.cshtml

@model NEducation.Models.CheckMiniGameModel
@{
    ViewBag.Title = "MiniGame";
    Layout = "~/Views/Shared/_LayoutMiniGame.cshtml";
}

<div class="main minigame">
    <div class="minigame-container fixed top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-screen max-h-full z-[99999] backdrop-filter-1">

        <div class="fixed z-[1] w-full blend-mode bottom-[0%] left-[0%]">
            <img src="~/Content/assets/mini_game/assets/images/bg_icon_2.png" class="" />
        </div>

        <div class="fixed z-[1] blend-mode bottom-[0%] right-[0px] flex flex-col">
            <img src="~/Content/assets/mini_game/assets/images/bg_icon_3.png" class="" />
        </div>

        <div class="fixed z-[1] blend-mode top-[-20%] left-[-30%]">
            <img src="~/Content/assets/mini_game/assets/images/bg_icon_4.png" class="" />
        </div>

        <div class="minigame_content">
            <div class="text-c-1 text-s-36 justify-center top-50">
                MINI GAME
            </div>
            <div class="pb-[10px]">
                <div class="text-c-2 w-full justify-center font-z-10 top-30 bottom-30 text-s-15">
                    Let me know your answers!
                </div>
            </div>
            <div class="w-full min-h-[200px] flex relative mb-[10px]" id="div_clock" style="display: @(ViewBag.ShowClock ? "block" : "none")">
                <div class="absolute right-[-10px] top-[10px] w-[100%] h-full card-monthly">
                    <div class="px-[30px]">
                        <div class="flex justify-between items-center">
                            <div class="relative">
                                <img src="~/Content/assets/mini_game/assets/images/Clender.png" class="h-[101px]" />
                                <div class="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
                                    <div id="days" class="text-calender text-c-1" style="font-size: 50px;">
                                        0
                                    </div>
                                </div>
                                <div class="text-c-1 justify-center">
                                    Days
                                </div>
                            </div>
                            <div class="relative">
                                <img src="~/Content/assets/mini_game/assets/images/Clock.png" class="h-[101px]" />
                                <div class="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
                                    <div id="hours" class="text-calender text-c-1" style="font-size: 50px;">
                                        0
                                    </div>
                                </div>
                                <div class="text-c-1 justify-center">
                                    hours
                                </div>
                            </div>
                            <div class="relative mt-[5px]">
                                <img src="~/Content/assets/mini_game/assets/images/Clock.png" class="h-[101px]" />
                                <div class="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
                                    <div id="minutes" class="text-calender text-c-1" style="font-size: 50px;">
                                        0
                                    </div>
                                </div>
                                <div class="text-c-1 justify-center">
                                    minutes
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex justify-center items-center gap-[20px] top-50" id="div_play" style="display: @(ViewBag.ShowPlayButton ? "flex" : "none")">
                <a href="javascript:void(0);" id="playNowButton" style="z-index: 10;">
                    <div class="btn-c-2">
                        <div>
                            <img src="~/Content/assets/mini_game/assets/images/cup_icon.png" />
                        </div>
                        <div class="text-c-1 font-z-18">
                            Play Now
                        </div>
                    </div>
                </a>
            </div>

            <div class="relative content-history">
                <div class="w-full justify-center gap-[1rem] items-center mb-[2px] pt-[10px] relative z-[999]">
                    <a onclick="redirectToRank()">
                        <div class="btn-option active_predict">
                            Ranking
                        </div>
                    </a>
                    <a onclick="ruleClick()">
                        <div class="btn-option">
                            How to play
                        </div>
                    </a>
                </div>
            </div>
            <div id="minigame-ranking-data-box" class="">
                <div class="ranking-box" id="winner-infomation">
                    <div class="h-full w-full flex justify-center items-center box">
                        <div class="max-w-[350px] w-full min-h-[20px] rounded-[20px] relative p-[10px] box-item">
                            <div class="pt-[35px]">
                                <div class="ranking-box-header">
                                    <div class="flex justify-center items-center pb-1">
                                        <div class="text-c-1">List of special prize winners</div>
                                    </div>
                                    <div class="flex justify-center items-center">
                                        <div class="text-c-1" style="font-size: 20px;">20 $</div>
                                    </div>
                                </div>
                                <div class="ranking-data" id="ranking_data"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="minigame-rule-data-box" class="hide" style="border-radius: 0px 24px 24px 24px;">
                <div class="rule-box">
                    <p>1. The mini-game starts at 10:00 AM every Sunday.</p>
                    <p>2. You have 15 seconds to think and give your answer.</p>
                    <p>3. Each person can only participate in the minigame once per day. If there is a system error during the minigame, the participant cannot play again, and it will be counted as one play. <br /> 4. Participants must be subscribers of the service.</p>
                    <p>5. The minigame consists of 20 questions.</p>
                    <p>6. Each question must be answered within 15 seconds.</p>
                    <p>7. If a participant answers incorrectly, the game will immediately end, and they will not be able to play again.</p>
                    <p>8. Prizes:</p>
                    <p>- There is only one prize for the participant who correctly answers all 20 questions the fastest.</p>
                    <p>- The prize is 20$, added to Emoney</p>
                    <p>- If multiple participants answer correctly at the same time, the prize money will be evenly divided among them.</p>
                    <p>- Results will be sent to the participants via SMS at 09:00 AM on the following Monday.</p>
                </div>
            </div>

            <!-- Popup container -->
            <div id="popup-container" class="popup-container hidden">
                <div class="popup-content">
                    <!-- Close button -->
                    <button id="close-popup" class="close-popup-button">✕</button>
                    <h2>Oops...!</h2>
                    <p>You haven't registered MEDU service yet. Please try to register and come back to play the mini-game. Thank you.</p>
                    <div class="flex justify-center items-center gap-[20px] top-50">
                        <a href="/Home" style="z-index:10">
                            <div class="btn-c-2">
                                <div class="text-c-1 font-z-18 button-box">
                                    Home
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        redirectToRank();
    });

    var sysdateString = '@ViewBag.Sysdate';
    var startDateString = '@ViewBag.StartDate';
    var endDateString = '@ViewBag.EndDate';
    var isSubscribed = '@ViewBag.IsSubscribed';

    var sysdate = new Date(sysdateString);
    var startDate = new Date(startDateString);
    var endDate = new Date(endDateString);

    var countDownDate;

    function showPopup() {
        document.getElementById('popup-container').classList.remove('hidden');
    }

    document.getElementById('close-popup').onclick = function() {
        document.getElementById('popup-container').classList.add('hidden');
    };

    document.getElementById("playNowButton").onclick = function() {
        if (isSubscribed != "1") {
            showPopup();
        } else {
            window.location.href = '@Url.Action("StartPlay", "MiniGame")';
        }
    };

    if (sysdate < startDate) {
        countDownDate = startDate.getTime();
        $("#div_clock").show();
        $("#div_play").hide();
    } else if (sysdate >= startDate && sysdate <= endDate) {
        countDownDate = endDate.getTime();
        $("#div_clock").show();
        $("#div_play").hide();
    } else {
        $("#div_clock").hide();
        $("#div_play").show();
    }

    if (countDownDate) {
        $("#div_clock").show();
        var x = setInterval(function () {
            var now = new Date().getTime();
            var distance = countDownDate - now;

            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("days").innerHTML = days;
            document.getElementById("hours").innerHTML = hours;
            document.getElementById("minutes").innerHTML = minutes;

            if (distance < 0) {
                clearInterval(x);
                document.getElementById("days").innerHTML = '0';
                document.getElementById("hours").innerHTML = '0';
                document.getElementById("minutes").innerHTML = '0';
            }
        }, 1000);
    } else {
        $("#div_clock").hide();
    }

    function redirectToRank() {
        document.getElementById('minigame-ranking-data-box').style.display = 'block';
        document.getElementById('minigame-rule-data-box').style.display = 'none';
    }

    function ruleClick() {
        document.getElementById('minigame-ranking-data-box').style.display = 'none';
        document.getElementById('minigame-rule-data-box').style.display = 'block';
    }
</script>