{"id":109729,"date":"2025-04-27T12:17:30","date_gmt":"2025-04-27T05:17:30","guid":{"rendered":"https:\/\/jblstore.co.id\/?page_id=109729"},"modified":"2025-04-27T13:51:34","modified_gmt":"2025-04-27T06:51:34","slug":"dice-game","status":"publish","type":"page","link":"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/","title":{"rendered":"Dice"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"109729\" class=\"elementor elementor-109729\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c860d3f elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"c860d3f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<section class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-776caca\" data-id=\"776caca\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d2ee314 elementor-widget elementor-widget-shortcode\" data-id=\"d2ee314\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t    <style>\n        .jbl-tomorrowland {\n            max-width: var(--sizing-max-page);\n            margin: 0 auto;\n            overflow: visible;\n            background-image: url('\/wp-content\/uploads\/2025\/04\/tomorrowland2025-background-desktop.webp');\n            background-position: center;\n            background-size: cover;\n            background-repeat: no-repeat;\n            display: flex;\n\n            #title {\n                display: none;\n            }\n\n            @media (max-width: 767px) {\n                .is-desktop {\n                    display: none !important;\n                }\n            }\n\n            @media (min-width: 768px) {\n                .is-mobile {\n                    display: none !important;\n                }\n            }\n\n            .cta:not(:disabled),\n            .cta:not(.active) {\n                transition: all .2s ease-in;\n\n                &:focus,\n                &:hover {\n                    outline: none;\n                }\n\n                &:hover {\n                    opacity: 0.8;\n                }\n            }\n\n            .inside {\n                display: grid;\n                grid-template-columns: repeat(2, minmax(0, 1fr));\n                align-items: center;\n                position: relative;\n                width: 100%;\n                padding-inline: 100px;\n\n                @media (max-width: 960px) {\n                    padding-inline: 30px;\n                    padding-block: 50px;\n                }\n                \n                @media (max-width: 767px) {\n                    grid-template-columns: repeat(1, minmax(0, 1fr));\n                }\n\n                .text-section {\n                    display: flex;\n                    flex-direction: column;\n                    justify-content: space-between;\n                    \n                    .top-wrap {\n                        position: relative;\n\n                        .img-wrapper {\n                            display: flex;\n                            max-width: 200px;\n                        }\n\n                        .title-section {\n                            font-family: \"Kostic - Roc Grotesk Bold\",Arial, Helvetica, sans-serif;\n                            color: white;\n                            font-size: clamp(24px, calc(1.5rem + ((1vw - 3.76px) * 2.8195)), 54px);\n                            min-height: 0vw;\n                            margin: 0px;\n                            margin-bottom: 20px;\n                        }\n\n                        .description-section {\n                            font-family: \"Kostic - Roc Grotesk Regular\",Arial, Helvetica, sans-serif;\n                            color: white;\n                            margin: 0px;\n                            font-size: clamp(18px, calc(1.125rem + ((1vw - 3.76px) * 1.2218)), 31px);\n                            min-height: 0vw;\n                            line-height: 100%;\n                        }\n\n                        .form-link {\n                            color: white;\n                            margin: 0;\n                            margin-top: 20px;\n                            font-family: \"Kostic - Roc Grotesk Bold\",Arial, Helvetica, sans-serif;\n                            font-size: clamp(12px, calc(0.75rem + ((1vw - 3.76px) * 1.2218)), 25px);\n                            min-height: 0vw;\n\n                            a {\n                                color: var(--jblorange);\n                                \n                                &:hover {\n                                    text-decoration: underline;\n                                }\n                            }\n                        }\n                    }\n\n                    .tnc-link {\n                        margin-top: 30px;\n                        \n                        a {\n                            color: white;\n                            font-family: \"Kostic - Roc Grotesk Regular\",Arial, Helvetica, sans-serif;\n                            text-decoration: underline;\n\n                            &:hover {\n                                text-decoration: none;\n                            }\n                        }\n                    }\n                }\n\n                .mycta {\n                    color: white;\n                    background-color: var(--jblorange);\n                    font-family: Grostesk-ExtraBold, sans-serif;\n                    font-size: clamp(11px, calc(0.6875rem + ((1vw - 3.76px) * 0.8459)), 20px);\n                    min-height: 0vw;\n                    padding: 10px 35px;\n                    text-transform: uppercase;\n                    text-wrap: balance;\n                    margin-top: 100px;\n                    margin-bottom: 62px;\n                    margin-inline: auto;\n                    display: block;\n                    width: fit-content;\n\n                    @media (max-width: 767px) {\n                        padding: 9px 19px;\n                        margin-top: 80px;\n                        margin-bottom: 16px;\n                    }\n                }\n            }\n        }\n\n        .dice-wrap {\n            text-align: center;\n            padding: 30px;\n            max-width: 400px;\n            margin: 50px auto;\n        }\n\n        .dice-container {\n            perspective: 1000px;\n            width: 150px;\n            height: 150px;\n            margin: 30px auto;\n        }\n\n        .dice {\n            width: 100%;\n            height: 100%;\n            position: relative;\n            transform-style: preserve-3d;\n        }\n\n        .dice.idle {\n            animation: idle-spin 20s infinite linear;\n        }\n\n        .face {\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            background: #fff;\n            border: 3px solid #333;\n            border-radius: 12px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            font-size: 2.5em;\n            font-weight: bold;\n            backface-visibility: hidden;\n        }\n\n        \/* Dice face positions *\/\n        .face {\n            background-position: center;\n            background-size: cover;\n            background-repeat: no-repeat;\n            color: transparent;\n        }\n                .dice .front {\n            transform: \n                translateZ(75px);\n            background-image: url('https:\/\/jblstore.co.id\/wp-content\/uploads\/2025\/04\/tomorrowland2025-prize-traveloka-1.jpg');\n            background-size: cover;\n            background-position: center;\n        }\n                .dice .right {\n            transform: \n                rotateY(90deg) translateZ(75px);\n            background-image: url('https:\/\/jblstore.co.id\/wp-content\/uploads\/2025\/04\/tomorrowland2025-prize-blank.jpg');\n            background-size: cover;\n            background-position: center;\n        }\n                .dice .top {\n            transform: \n                rotateX(90deg) translateZ(75px);\n            background-image: url('https:\/\/jblstore.co.id\/wp-content\/uploads\/2025\/04\/tomorrowland2025-prize-jblstorevoucher.jpg');\n            background-size: cover;\n            background-position: center;\n        }\n                .dice .bottom {\n            transform: \n                rotateX(-90deg) translateZ(75px);\n            background-image: url('https:\/\/jblstore.co.id\/wp-content\/uploads\/2025\/04\/tomorrowland2025-prize-googleplay-1.jpg');\n            background-size: cover;\n            background-position: center;\n        }\n                .dice .left {\n            transform: \n                rotateY(-90deg) translateZ(75px);\n            background-image: url('https:\/\/jblstore.co.id\/wp-content\/uploads\/2025\/04\/tomorrowland2025-prize-blank.jpg');\n            background-size: cover;\n            background-position: center;\n        }\n                .dice .back {\n            transform: \n                rotateY(180deg) translateZ(75px);\n            background-image: url('https:\/\/jblstore.co.id\/wp-content\/uploads\/2025\/04\/tomorrowland2025-prize-map-1.jpg');\n            background-size: cover;\n            background-position: center;\n        }\n        \n        .shake-btn {\n            padding: 12px 25px;\n            font-size: 1.1em;\n            background: #218838;\n            color: white;\n            border: none;\n            border-radius: 8px;\n            cursor: pointer;\n            transition: all 0.3s;\n            margin: 20px 0;\n        }\n\n        .shake-btn:hover {\n            background: #1e7e34;\n            transform: scale(1.05);\n        }\n\n        .shake-btn:disabled {\n            background: #6c757d;\n            cursor: not-allowed;\n        }\n\n        #result {\n            font-size: 1.3em;\n            color: #2c3e50;\n            min-height: 30px;\n            margin-top: 20px;\n        }\n\n        @keyframes idle-spin {\n            from {\n                transform: rotateX(0deg) rotateY(0deg);\n            }\n\n            to {\n                transform: rotateX(360deg) rotateY(720deg);\n            }\n        }\n\n        @keyframes dice-shake {\n            0% {\n                transform: rotateX(0) rotateY(0) scale(1);\n            }\n\n            20% {\n                transform: rotateX(30deg) rotateY(60deg) scale(1.1);\n            }\n\n            40% {\n                transform: rotateX(-45deg) rotateY(-75deg) scale(0.9);\n            }\n\n            60% {\n                transform: rotateX(60deg) rotateY(120deg) scale(1.1);\n            }\n\n            80% {\n                transform: rotateX(-30deg) rotateY(-60deg) scale(0.95);\n            }\n\n            100% {\n                transform: rotateX(0) rotateY(0) scale(1);\n            }\n        }\n        \n        .modal-popup {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0,0,0,0.7);\n            z-index: 1000;\n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n\n        .modal-popup.show {\n            opacity: 1;\n        }\n\n        .modal-content h2 {\n            margin: 0;\n            font-family: \"Kostic - Roc Grotesk Bold\",Arial, Helvetica, sans-serif;\n            font-size: 25px;\n            \/* font-size: clamp(12px, calc(0.75rem + ((1vw - 3.76px) * 1.2218)), 25px); *\/\n            min-height: 0vw;\n        }\n\n        .modal-content {\n            background-color: #fff;\n            margin: 5% auto;\n            padding: 30px;\n            border-radius: 10px;\n            width: 80%;\n            max-width: 700px;\n            position: relative;\n            transform: translateY(-20px);\n            transition: transform 0.3s ease;\n\n            @media (max-width: 767px) {\n                padding: 20px;\n                width: 90%;\n            }\n        }\n\n        .modal-popup.show .modal-content {\n            transform: translateY(0);\n        }\n\n        #modalResult {\n            font-size: 18px;\n            text-align: center;\n            margin: 20px 0;\n            font-family: \"Kostic - Roc Grotesk Regular\",Arial, Helvetica, sans-serif;\n        }\n\n        .img-wrapper {\n            max-width: 200px;\n            margin: 0 auto;\n            display: block;\n            margin-top: 20px;\n        }\n\n        .close-modal {\n            position: absolute;\n            top: 20px;\n            right: 15px;\n            cursor: pointer;\n            width: 24px;\n            height: 24px;\n        }\n\n        .dice-wrap {\n            position: relative;\n            z-index: 1;\n        }\n\n        .invoice-lists {\n            overflow: auto;\n            max-height: 400px;\n            margin-top: 30px;\n\n            .invoice-list:not(:last-child) {\n                margin-bottom: 20px;\n\n                @media (max-width; 767px) {\n                    margin-bottom: 10px;\n                }\n            }\n\n            .invoice-list {\n                background-color: #F5F5F5;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n                padding: 20px;\n                border-radius: 10px;\n\n                h3 {\n                    font-family: \"Kostic - Roc Grotesk Light\",Arial, Helvetica, sans-serif;\n                    font-size: clamp(10px, calc(0.625rem + ((1vw - 3.76px) * 0.9398)), 20px);\n                    min-height: 0vw;\n                    margin: 0;\n                    display: -webkit-box;\n                    -webkit-line-clamp: 1;\n                    -webkit-box-orient: vertical;\n                    max-width: 70%; \/* atau 65%, tergantung seberapa besar tombolnya *\/\n                    overflow: hidden;\n                    white-space: nowrap;\n                    text-overflow: ellipsis;\n\n                    strong {\n                        font-family: \"Kostic - Roc Grotesk Bold\",Arial, Helvetica, sans-serif;\n                        font-size: clamp(10px, calc(0.625rem + ((1vw - 3.76px) * 0.9398)), 20px);\n                        min-height: 0vw;\n                    }\n                }\n\n                .spin, .already-spin {\n                    background-color: transparent;\n                    font-family: \"Kostic - Roc Grotesk Bold\",Arial, Helvetica, sans-serif;\n                    font-size: clamp(10px, calc(0.625rem + ((1vw - 3.76px) * 0.9398)), 20px);\n                    min-height: 0vw;\n                    margin: 0px;\n                    display: flex;\n                    gap: 5px;\n                    align-items: center;\n                }\n\n                .spin {\n                    color: var(--jblorange);\n                }\n\n                .already-spin {\n                    color: #B9B9B9;\n                }\n            }\n        }\n\n        .must-login {\n            font-family: \"Kostic - Roc Grotesk Regular\",Arial, Helvetica, sans-serif;\n            font-size: clamp(10px, calc(0.625rem + ((1vw - 3.76px) * 0.9398)), 20px);\n            min-height: 0vw;\n            margin: 0;\n            margin-top: 20px;\n        }\n\n        .link-must-login {\n            width: fit-content;\n            margin: 0 auto;\n            margin-top: 20px;\n            display: block;\n\n            @media (max-width: 767px) {\n                margin-top: 10px;\n            }\n        }\n        \n        .must-login-btn {\n            color: white;\n            background-color: var(--jblorange);\n            font-family: Grostesk-ExtraBold, sans-serif;\n            font-size: clamp(11px, calc(0.6875rem + ((1vw - 3.76px) * 0.8459)), 20px);\n            min-height: 0vw;\n            padding: 10px 35px;\n            text-transform: uppercase;\n            text-wrap: balance;\n            display: block;\n            width: fit-content;\n\n            @media (max-width: 767px) {\n                padding: 9px 19px;\n            }\n        }\n\n        .body-tnc {\n            max-height: 300px;\n            overflow: auto;\n            padding-left: 20px;\n\n            @media (max-width: 767px) {\n                padding-left: 10px;\n            }\n        }\n    <\/style>\n    <div class=\"jbl-tomorrowland\">\n        <div class=\"inside\">\n            <div class=\"text-section\">\n                <div class=\"top-wrap\">\n                    <picture class=\"img-wrapper\">\n                        <img loading=\"lazy\" decoding=\"async\" \n                        src=\"\/wp-content\/uploads\/2025\/04\/tomorrowland-logo-hd.png\" \n                        alt=\"JBL x Tomorrowland 2025 Logo\"\n                        width=\"542\"\n                        height=\"286\"\n                        >\n                    <\/picture>\n                    <br\/>\n                    <h1 class=\"title-section\">Roll and get the prize!<\/h1>\n                    <p class=\"description-section\">Get exclusive limited product from Tomorrowland.<\/p>\n                    <br\/>\n                    <!-- <p class=\"form-link\">For Retail or Store Customers, <br\/>\n                        <a href=\"\/tomorrowland\/form\/\" title=\"Form for Retail or Store Customers\" aria-label=\"Form for Retail or Store Customers\">Click<\/a> Here<\/p> -->\n                <\/div>\n                <div class=\"tnc-link\">\n                    <a id=\"showTNC\" href=\"#\" title=\"Terms & Conditions\">Terms & Conditions<\/a>\n                <\/div>\n            <\/div>\n            <div class=\"dice-wrap\">\n                <div class=\"dice-container\">\n                    <div class=\"dice idle\" id=\"dice\">\n                        <div class=\"face front\">1<\/div>\n                        <div class=\"face back\">6<\/div>\n                        <div class=\"face right\">2<\/div>\n                        <div class=\"face left\">5<\/div>\n                        <div class=\"face top\">3<\/div>\n                        <div class=\"face bottom\">4<\/div>\n                    <\/div>\n                <\/div>\n                <button class=\"cta mycta\" id=\"shakeBtn\">Roll Now<\/button>\n            <\/div>\n        <\/div>\n\n        <!-- RESULT -->\n        <div class=\"modal-popup\" id=\"diceModal\">\n            <div class=\"modal-content\">\n                <span class=\"close-modal\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" \/>\n                    <\/svg>\n                <\/span>\n                <h2 style=\"text-align: center;\">Congratulations!<\/h2>\n                <picture class=\"img-wrapper\">\n                    <img fetchpriority=\"high\" decoding=\"async\" \n                        src=\"\/wp-content\/uploads\/2025\/04\/tomorrowland2025-prize-blank.jpg\" \n                        alt=\"Prize Placeholder\"\n                        width=\"750\"\n                        height=\"750\"\n                        id=\"prizeThumbnail\"\n                    >\n                <\/picture>\n                <div id=\"modalResult\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- INVOICE -->\n                    <div class=\"modal-popup\" id=\"invoiceModal\">\n                <div class=\"modal-content\">\n                    <span class=\"cta close-modal\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" \/>\n                        <\/svg>\n                    <\/span>\n                    <h2>Info<\/h2>\n\n                    <div class=\"must-login\">\n                        Please login to start roll                    <\/div>\n\n                    <a class=\"link-must-login\" href=\"\/en\/login\/\" title=\"Login to JBLStore\" aria-label=\"Login to JBLStore\">\n                        <button class=\"cta must-login-btn\">Login<\/button>\n                    <\/a>\n                <\/div>\n            <\/div>\n        \n        <!-- INFORMATION -->\n        <div class=\"modal-popup\" id=\"infoModal\">\n            <div class=\"modal-content\">\n                <span class=\"cta close-modal\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" \/>\n                    <\/svg>\n                <\/span>\n                <h2>Info<\/h2>\n\n                <div class=\"must-login\">\n                    <span id=\"messagePopup\"><\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- TNC -->\n        <div class=\"modal-popup\" id=\"tncModal\">\n            <div class=\"modal-content\">\n                <span class=\"cta close-modal\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" \/>\n                    <\/svg>\n                <\/span>\n                <h2>Terms and Conditions<\/h2>\n\n                <div class=\"must-login\">\n                    <div class=\"body-tnc\">\n                        <ol>\n                            <li>Prizes are non-exchangeable, non-transferable, and non-refundable.<\/li>\n                            <li>Tomorrowland 2025 travel dates: July 24 - 28, 2025.<\/li>\n                            <li>Tomorrowland 2025 ticket package includes: 2 (two) economy class airfare, 1 (one) double\/twin hotel room, 2 (two) Tomorrowland Weekend Pass tickets (event dates July 25 - 27, 2025).<\/li>\n                            <li>Grand prize winner are required to create and post social media content (pre, during and post event) as specified by JBL, and tag to IG\/TikTok @JBLIndonesia.<\/li>\n                            <li>All social media post content is the sole and exclusive property of JBL and may be used, reproduced, and distributed by JBL for any marketing purposes, including but not limited to advertising, promotion, and public relations.<\/li>\n                            <li>eVoucher usage is subject to the terms and conditions of the respective voucher platform.<\/li>\n                            <li>Employees directly involved in the administration of this promo are not allowed to participate.<\/li>\n                            <li>By registering for the JBL x Tomorrowland 2025 promo, participants agree to register as JBL members and create a JBL account.<\/li>\n                            <li>JBL Indonesia reserves the right to cancel prizes if there is any indication of misuse, fraud, manipulation, and\/or non-compliance with the applicable terms and conditions.<\/li>\n                            <li>JBL Indonesia's decision is final and cannot be challenged.<\/li>\n                            <li>Winners will be announced on Instagram @JBLINDONESIA, JBL Indonesia website, JBLSTORE.CO.ID, and official JBL Indonesia Whatsapp account with number 085156759787 with all details on how to receive prizes.<\/li>\n                        <\/ol>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n         \n        <script>\n            const dice = document.getElementById('dice');\n            const shakeBtn = document.getElementById('shakeBtn');\n            const idleBtn = document.getElementById('idleBtn');\n            const modal = document.getElementById('diceModal');\n            const modalResult = document.getElementById('modalResult');\n            const prizeThumbnail = document.getElementById('prizeThumbnail');\n            const infoResult = document.getElementById('infoModal');\n            const messageInfoPopup = document.getElementById('messagePopup');\n            const invoiceModal = document.getElementById('invoiceModal');\n            const tncModal = document.getElementById('tncModal');\n            const tncBtn = document.getElementById('showTNC');\n            const startButtons = document.querySelectorAll('.start-spin');\n            let hasRolled = false;\n            let isRolling = false;\n\n            function showModal(modalElement) {\n                modalElement.style.display = 'block';\n                setTimeout(() => {\n                    modalElement.classList.add('show');\n                }, 10);\n            }\n\n            function hideModal(modalElement) {\n                modalElement.classList.remove('show');\n                setTimeout(() => {\n                    modalElement.style.display = 'none';\n                }, 300);\n            }\n\n            const closeButtons = document.querySelectorAll('.close-modal');\n\n            closeButtons.forEach(button => {\n                button.addEventListener('click', function() {\n                    const modalToClose = button.parentElement.parentElement;\n                    if (modalToClose) {\n                        hideModal(modalToClose);\n                    } else {\n                        console.log(\"not found\", modalToClose)\n                    }\n                });\n            });\n\n            function markButtonAsAlreadySpin(invoiceId) {\n                const invoiceLists = document.querySelectorAll('.invoice-list');\n\n                console.log(invoiceId, \"HAlo\")\n\n                invoiceLists.forEach(list => {\n                    const button = list.querySelector('button');\n                    if (button) {\n                        const buttonInvoice = button.getAttribute('data-invoice');\n\n                        if (buttonInvoice && buttonInvoice.includes(invoiceId)) {\n                            button.innerHTML = `<span>Already Spin<\/span>`;\n\n                            button.classList.remove('spin', 'start-spin');\n                            button.classList.add('already-spin');\n\n                            button.setAttribute('disabled', true);\n\n                            button.removeAttribute('data-invoice');\n\n                            const newButton = button.cloneNode(true);\n                            button.parentNode.replaceChild(newButton, button);\n                        }\n                    } else {\n                        console.log(\"Button not found\")\n                    }\n                });\n            }\n\n            async function rollDice(invoiceId) {\n                if (isRolling) return;\n\n                if (!invoiceId) {\n                    showModal(infoResult);\n                    messageInfoPopup.innerText = 'Invalid invoice. Please check again.';\n                    return;\n                }\n\n                isRolling = true;\n                shakeBtn.disabled = true;\n\n                if (!hasRolled) {\n                    dice.classList.remove('idle');\n                    hasRolled = true;\n                }\n\n                dice.style.animation = 'dice-shake 0.5s infinite';\n                startButtons.forEach(button => {\n                    button.setAttribute('disabled', true);\n                })\n\n                try {\n                    const response = await fetch('\/api\/roll_and_win.php', {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json'\n                        },\n                        body: JSON.stringify({\n                            nonce: 'a79f7eca34',\n                            invoiceId: invoiceId,\n                            type: 'process',\n                        })\n                    });\n\n                    const data = await response.json();\n                    \n                    if (!response.ok || data.success == false) {\n                        throw { \n                            status: response.status, \n                            data: data?.data\n                        };\n                    }\n\n                    setTimeout(() => {\n                        dice.style.animation = '';\n                        const result = data.data;\n                        showResult(result);\n                        showModal(diceModal);\n                        isRolling = false;\n                        shakeBtn.disabled = false;\n                        startButtons.forEach(button => {\n                            button.removeAttribute('disabled');\n                        })\n\n                        markButtonAsAlreadySpin(invoiceId)\n                    }, 1500);\n\n                } catch (error) {\n                    console.error('Error:', error);\n                    dice.style.animation = '';\n                    isRolling = false;\n                    shakeBtn.disabled = false;\n\n                    startButtons.forEach(button => {\n                        button.removeAttribute('disabled');\n                    })\n\n                    if (error && error.data && error.data.message && error.data.message === \"Invalid nonce\") {\n                        showModal(infoResult)\n                        messageInfoPopup.innerText = 'Session expired or invalid action detected. Please refresh the page and try again.';\n                    } else {\n                        showModal(infoResult)\n                        messageInfoPopup.innerText = 'An error occurred. Please try again later.';\n                    }\n\n                    returnToIdle()\n                }\n            }\n\n            function showResult(result) {\n                modalResult.innerText = `You receive  ${result?.prize_name} ${result?.description}. Please check your email for more information.`;\n                \n                const rotations = {\n                    1: 'rotateX(0) rotateY(0)',\n                    2: 'rotateY(-90deg)',\n                    3: 'rotateX(-90deg)',\n                    4: 'rotateX(90deg)',\n                    5: 'rotateY(90deg)',\n                    6: 'rotateY(180deg)'\n                };\n\n                dice.style.transform = rotations[result?.id];\n\n                prizeThumbnail.src = result?.image;\n                prizeThumbnail.alt = result?.prize_name || 'Prize';\n            }\n\n            function returnToIdle() {\n                dice.style.transform = '';\n                dice.style.animation = '';\n                dice.classList.add('idle');\n                hasRolled = false;\n            }\n\n            shakeBtn?.addEventListener('click', function() {\n                showModal(invoiceModal)\n            });\n            \/\/ idleBtn?.addEventListener('click', returnToIdle);\n            \/\/ closeModal.addEventListener('click', hideModal);\n\n            startButtons.forEach(button => {\n                const invoice = button.getAttribute('data-invoice');\n\n                button.addEventListener('click', () => {\n                    rollDice(invoice);\n                    hideModal(invoiceModal);\n                });\n            });\n\n            tncBtn.addEventListener('click', function(e) {\n                e.preventDefault();\n\n                showModal(tncModal);\n            })\n\n            window.addEventListener('click', (e) => {\n                if (e.target.classList.contains('modal') && !e.target.closest('.modal-content')) {\n                    hideModal(e.target);\n                }\n            });\n\n        <\/script>\n    <\/div>\n    \t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":88637,"featured_media":0,"parent":109629,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-109729","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JBL x Tomorrowland Dice Game - JBL Store<\/title>\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JBL x Tomorrowland Dice Game - JBL Store\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/\" \/>\n<meta property=\"og:site_name\" content=\"JBL Store\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-27T06:51:34+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/\",\"url\":\"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/\",\"name\":\"JBL x Tomorrowland Dice Game - JBL Store\",\"isPartOf\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\"},\"datePublished\":\"2025-04-27T05:17:30+00:00\",\"dateModified\":\"2025-04-27T06:51:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jblstore.co.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JBL x Tomorrowland 2025\",\"item\":\"https:\/\/jblstore.co.id\/tomorrowland\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dice\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"name\":\"JBL Store\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jblstore.co.id\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\",\"name\":\"JBL Store\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\",\"url\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"contentUrl\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"width\":70,\"height\":52,\"caption\":\"JBL Store\"},\"image\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\",\"https:\/\/www.instagram.com\/jblindonesia\/\",\"https:\/\/www.youtube.com\/c\/JBLIndonesia\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JBL x Tomorrowland Dice Game - JBL Store","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"en_US","og_type":"article","og_title":"JBL x Tomorrowland Dice Game - JBL Store","og_url":"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/","og_site_name":"JBL Store","article_publisher":"https:\/\/www.facebook.com\/JBLAudioIndonesia\/","article_modified_time":"2025-04-27T06:51:34+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/","url":"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/","name":"JBL x Tomorrowland Dice Game - JBL Store","isPartOf":{"@id":"https:\/\/jblstore.co.id\/en\/#website"},"datePublished":"2025-04-27T05:17:30+00:00","dateModified":"2025-04-27T06:51:34+00:00","breadcrumb":{"@id":"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jblstore.co.id\/en\/tomorrowland\/dice-game\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jblstore.co.id\/"},{"@type":"ListItem","position":2,"name":"JBL x Tomorrowland 2025","item":"https:\/\/jblstore.co.id\/tomorrowland\/"},{"@type":"ListItem","position":3,"name":"Dice"}]},{"@type":"WebSite","@id":"https:\/\/jblstore.co.id\/en\/#website","url":"https:\/\/jblstore.co.id\/en\/","name":"JBL Store","description":"","publisher":{"@id":"https:\/\/jblstore.co.id\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jblstore.co.id\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jblstore.co.id\/en\/#organization","name":"JBL Store","url":"https:\/\/jblstore.co.id\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","contentUrl":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","width":70,"height":52,"caption":"JBL Store"},"image":{"@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/JBLAudioIndonesia\/","https:\/\/www.instagram.com\/jblindonesia\/","https:\/\/www.youtube.com\/c\/JBLIndonesia"]}]}},"_links":{"self":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/109729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/users\/88637"}],"replies":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/comments?post=109729"}],"version-history":[{"count":8,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/109729\/revisions"}],"predecessor-version":[{"id":109739,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/109729\/revisions\/109739"}],"up":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/109629"}],"wp:attachment":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/media?parent=109729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}