[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"storyblokStory:kids/dobbelsteen/?nl":3},{"story":4,"resolvedLinks":86},{"name":5,"created_at":6,"published_at":7,"updated_at":8,"id":9,"uuid":10,"content":11,"slug":70,"full_slug":71,"sort_by_date":15,"position":72,"tag_list":73,"is_startpage":46,"parent_id":74,"meta_data":15,"group_id":75,"first_published_at":76,"release_id":15,"lang":77,"path":15,"alternates":78,"default_full_slug":71,"translated_slugs":79},"Dobbelsteen","2026-03-27T09:34:45.484Z","2026-03-30T07:44:03.625Z","2026-03-30T07:44:03.644Z",159393732594009,"c28b81d2-6ad0-4d64-9383-b62bfe13488e",{"_uid":12,"tags":13,"ogImage":14,"ogTitle":16,"sections":19,"component":66,"metaTitle":16,"metaRobots":67,"metaKeywords":16,"overviewDate":16,"ogDescription":16,"overviewImage":68,"overviewTitle":16,"metaDescription":16,"overviewSubtitle":16},"0b20b216-ecac-460f-ba1c-0746e6d5ca83",[],{"id":15,"alt":15,"name":16,"focus":15,"title":15,"source":15,"filename":16,"copyright":15,"fieldtype":17,"meta_data":18},null,"","asset",{},[20,36,54,60],{"_uid":21,"text":22,"title":32,"section":16,"titleTag":33,"component":34,"textAlign":35},"ee4e57f3-b2a0-4543-9bf4-329fa15338dc",{"type":23,"content":24},"doc",[25,29],{"type":26,"attrs":27},"paragraph",{"textAlign":15,"key":28},"p-0",{"type":26,"attrs":30},{"textAlign":15,"key":31},"p-1","BEN JIJ KLAAR OM TE DOBBELEN?","h1","content-text","center",{"_uid":37,"link":38,"size":41,"text":16,"align":35,"image":42,"section":47,"component":53,"aspectRatio":16},"25d72318-67c7-428b-ba6f-40fdfd6ea3bb",{"id":16,"url":16,"linktype":39,"fieldtype":40,"cached_url":16},"story","multilink","sm",{"id":43,"alt":16,"name":16,"focus":16,"title":16,"source":16,"filename":44,"copyright":16,"fieldtype":17,"meta_data":45,"is_external_url":46},159445386006862,"https://a.storyblok.com/f/299645/1800x1923/be6cacb479/timo-dobbelstenen-crop.png",{},false,{"spacing":48,"background":49,"overlapTop":50,"contentWidth":51,"sectionWidth":52},"_","gray",true,"md","full","content-image",{"url":16,"_uid":55,"html":56,"section":57,"autoplay":46,"component":58,"aspectRatio":59},"88f77d09-ef79-4a5b-95f5-84f2ef4279ed","\u003Cstyle>\n    .embed-container { text-align: center; }\n\n    .dice-container {\n        display: flex;\n        gap: 60px;\n        justify-content: center;\n        align-items: center;\n        margin: 40px auto;\n        height: 100px;\n        width: 240px;\n    }\n\n    .dice-wrapper {\n        perspective: 600px;\n        -webkit-perspective: 600px;\n        width: 80px;\n        height: 80px;\n        flex-shrink: 0;\n    }\n\n    .dice {\n        width: 80px;\n        height: 80px;\n        position: relative;\n        transform-style: preserve-3d;\n        -webkit-transform-style: preserve-3d;\n        transform: translateZ(0); /* FIX 1 */\n        cursor: pointer;\n        will-change: transform;\n    }\n\n    .face {\n        position: absolute;\n        width: 80px;\n        height: 80px;\n        background: linear-gradient(135deg, #d31818, #e38317) !important;\n        border: 3px solid white;\n        border-radius: 10px;\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        grid-template-rows: 1fr 1fr 1fr;\n        padding: 15px;\n        box-sizing: border-box;\n        backface-visibility: hidden;\n        -webkit-backface-visibility: hidden;\n        transform: translateZ(0); /* FIX 2 */\n        box-shadow: inset 0 0 20px rgba(0,0,0,0.2);\n    }\n\n    /* FIX 7: use hidden class instead of display:none */\n    .hidden {\n        visibility: hidden;\n        pointer-events: none;\n        position: absolute;\n    }\n\n    .dot {\n        width: 16px;\n        height: 16px;\n        background: white;\n        border-radius: 50%;\n        justify-self: center;\n        align-self: center;\n        box-shadow: 0 1px 3px rgba(0,0,0,0.4);\n    }\n\n    .face1 { transform: rotateY(0deg) translateZ(40px); }\n    .face2 { transform: rotateY(90deg) translateZ(40px); }\n    .face3 { transform: rotateY(180deg) translateZ(40px); }\n    .face4 { transform: rotateY(-90deg) translateZ(40px); }\n    .face5 { transform: rotateX(90deg) translateZ(40px); }\n    .face6 { transform: rotateX(-90deg) translateZ(40px); }\n\n    .face1 .dot:nth-child(1) { grid-column:2; grid-row:2; }\n    .face2 .dot:nth-child(1) { grid-column:1; grid-row:1; }\n    .face2 .dot:nth-child(2) { grid-column:3; grid-row:3; }\n    .face3 .dot:nth-child(1) { grid-column:1; grid-row:1; }\n    .face3 .dot:nth-child(2) { grid-column:2; grid-row:2; }\n    .face3 .dot:nth-child(3) { grid-column:3; grid-row:3; }\n    .face4 .dot:nth-child(1) { grid-column:1; grid-row:1; }\n    .face4 .dot:nth-child(2) { grid-column:3; grid-row:1; }\n    .face4 .dot:nth-child(3) { grid-column:1; grid-row:3; }\n    .face4 .dot:nth-child(4) { grid-column:3; grid-row:3; }\n    .face5 .dot:nth-child(1) { grid-column:1; grid-row:1; }\n    .face5 .dot:nth-child(2) { grid-column:3; grid-row:1; }\n    .face5 .dot:nth-child(3) { grid-column:1; grid-row:3; }\n    .face5 .dot:nth-child(4) { grid-column:3; grid-row:3; }\n    .face5 .dot:nth-child(5) { grid-column:2; grid-row:2; }\n    .face6 .dot:nth-child(1) { grid-column:1; grid-row:1; }\n    .face6 .dot:nth-child(2) { grid-column:1; grid-row:2; }\n    .face6 .dot:nth-child(3) { grid-column:1; grid-row:3; }\n    .face6 .dot:nth-child(4) { grid-column:3; grid-row:1; }\n    .face6 .dot:nth-child(5) { grid-column:3; grid-row:2; }\n    .face6 .dot:nth-child(6) { grid-column:3; grid-row:3; }\n\n    .img-button {\n        background: none;\n        border: none;\n        padding: 0;\n        cursor: pointer;\n        display: inline-block;\n    }\n    .img-button:disabled { opacity: 0.5; cursor: not-allowed; }\n    .img-button img { display: block; height: 55px; width: auto; }\n\n    .controls {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n        gap: 16px;\n        margin-top: 10px;\n    }\n\n    .result {\n        font-size: 1.8em;\n        margin-top: 20px;\n        margin-bottom: 60px;\n        min-height: 60px;\n        font-weight: bold;\n        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n    }\n\u003C/style>\n\n\u003Cdiv class=\"embed-container\">\n    \u003Cdiv class=\"dice-container\" id=\"diceContainer\">\n        \u003Cdiv class=\"dice-wrapper\">\n            \u003Cdiv class=\"dice\" id=\"dice1\">\n                \u003Cdiv class=\"face face1\">\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n                \u003Cdiv class=\"face face2\">\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n                \u003Cdiv class=\"face face3\">\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n                \u003Cdiv class=\"face face4\">\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n                \u003Cdiv class=\"face face5\">\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n                \u003Cdiv class=\"face face6\">\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n            \u003C/div>\n        \u003C/div>\n\n        \u003Cdiv class=\"dice-wrapper hidden\" id=\"dice2-wrapper\">\n            \u003Cdiv class=\"dice\" id=\"dice2\">\n                \u003Cdiv class=\"face face1\">\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n                \u003Cdiv class=\"face face2\">\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n                \u003Cdiv class=\"face face3\">\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n                \u003Cdiv class=\"face face4\">\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n                \u003Cdiv class=\"face face5\">\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n                \u003Cdiv class=\"face face6\">\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003Cdiv class=\"dot\">\u003C/div>\u003C/div>\n            \u003C/div>\n        \u003C/div>\n    \u003C/div>\n\n    \u003Cdiv class=\"controls\">\n        \u003Cbutton class=\"img-button\" id=\"rollBtn\">\n            \u003Cimg src=\"https://a.storyblok.com/f/299645/309x135/e806b61065/btn-gooien.png\" alt=\"Gooien\" />\n        \u003C/button>\n        \u003Cbutton class=\"img-button\" id=\"toggleBtn\">\n            \u003Cimg id=\"toggleImg\" src=\"https://a.storyblok.com/f/299645/326x127/ca6142b968/btn-1-steen.png\" alt=\"Toggle mode\" />\n        \u003C/button>\n    \u003C/div>\n\n    \u003Cdiv class=\"result\" id=\"result\">\u003C/div>\n\u003C/div>\n\n\u003Cscript>\n    const dice1El = document.getElementById('dice1');\n    const dice2El = document.getElementById('dice2');\n    const dice2Wrapper = document.getElementById('dice2-wrapper');\n    const diceContainer = document.getElementById('diceContainer');\n    const rollBtn = document.getElementById('rollBtn');\n    const toggleBtn = document.getElementById('toggleBtn');\n    const toggleImg = document.getElementById('toggleImg');\n    const result = document.getElementById('result');\n\n    let twoMode = false;\n\n    const faceRotations = {\n        1: { x: 0, y: 0 },\n        2: { x: 0, y: -90 },\n        3: { x: 0, y: 180 },\n        4: { x: 0, y: 90 },\n        5: { x: -90, y: 0 },\n        6: { x: 90, y: 0 }\n    };\n\n    function easeOutQuart(t) { return 1 - Math.pow(1 - t, 4); }\n\n    function animateDice(diceElement, targetValue, startTime, duration, spinX, spinY, spinZ) {\n        const elapsed = Date.now() - startTime;\n        const progress = Math.min(elapsed / duration, 1);\n        const eased = easeOutQuart(progress);\n        const spin = 1 - eased;\n\n        const rotX = spinX * spin + faceRotations[targetValue].x * eased;\n        const rotY = spinY * spin + faceRotations[targetValue].y * eased;\n        const rotZ = spinZ * spin;\n\n        const t = `rotateX(${rotX}deg) rotateY(${rotY}deg) rotateZ(${rotZ}deg)`;\n        diceElement.style.transform = t;\n        diceElement.style.webkitTransform = t;\n\n        if (progress \u003C 1) {\n            requestAnimationFrame(() => animateDice(diceElement, targetValue, startTime, duration, spinX, spinY, spinZ));\n        } else {\n            const final = `rotateX(${faceRotations[targetValue].x}deg) rotateY(${faceRotations[targetValue].y}deg) rotateZ(0deg)`;\n            diceElement.style.transform = final;\n            diceElement.style.webkitTransform = final;\n        }\n    }\n\n  // slower initial speed by reducing total rotation distance\n  function rand() { return 720 + Math.random()*360; }\n  function randZ() { return 360 + Math.random()*180; }\n\n    function rollDice() {\n        rollBtn.disabled = true;\n        result.textContent = '';\n\n        const v1 = Math.floor(Math.random() * 6) + 1;\n        const v2 = Math.floor(Math.random() * 6) + 1;\n        const duration = 2000;\n        const startTime = Date.now();\n\n        animateDice(dice1El, v1, startTime, duration, rand(), rand(), randZ());\n        if (twoMode) {\n            animateDice(dice2El, v2, startTime, duration, rand(), rand(), randZ());\n        }\n\n        setTimeout(() => {\n            result.textContent = twoMode\n                ? `Resultaat: ${v1} + ${v2} = ${v1 + v2}`\n                : `Resultaat: ${v1}`;\n            rollBtn.disabled = false;\n        }, duration);\n    }\n\n    function updateLayout() {\n        if (twoMode) {\n            diceContainer.style.width = '240px';\n            dice2Wrapper.classList.remove('hidden');\n            toggleImg.src = 'https://a.storyblok.com/f/299645/326x127/e83cf4860e/btn-2-stenen.png';\n            toggleImg.alt = '2 stenen';\n        } else {\n            diceContainer.style.width = '80px';\n            dice2Wrapper.classList.add('hidden'); /* FIX 7 */\n            toggleImg.src = 'https://a.storyblok.com/f/299645/326x127/ca6142b968/btn-1-steen.png';\n            toggleImg.alt = '1 steen';\n        }\n    }\n\n    toggleBtn.addEventListener('click', () => {\n        twoMode = !twoMode;\n        updateLayout();\n        result.textContent = '';\n    });\n\n    rollBtn.addEventListener('click', rollDice);\n    dice1El.addEventListener('click', rollDice);\n    dice2El.addEventListener('click', rollDice);\n\n    updateLayout();\n\u003C/script>",{"spacing":48,"background":49,"overlapTop":46,"contentWidth":51,"sectionWidth":52},"content-embed","4:3",{"_uid":61,"text":62,"title":16,"section":16,"titleTag":33,"component":34,"textAlign":35},"446aecbf-f929-49fa-8988-81d2b79b1371",{"type":23,"content":63},[64],{"type":26,"attrs":65},{"textAlign":15},"page-content",[],{"id":15,"alt":15,"name":16,"focus":15,"title":15,"source":15,"filename":16,"copyright":15,"fieldtype":17,"meta_data":69},{},"dobbelsteen","kids/dobbelsteen",-500,[],562305021,"1e10b26f-6108-4d18-a1b3-184340b50cf5","2026-03-27T10:00:11.044Z","default",[],[80,82,84],{"path":71,"name":15,"lang":81,"published":15},"en",{"path":71,"name":15,"lang":83,"published":15},"de",{"path":71,"name":15,"lang":85,"published":15},"fr",[],1775548701612]