import { c as create_ssr_component, e as escape, a as add_attribute } from "../../../chunks/ssr.js";
import "../../../chunks/scoreStore.js";
const css = {
  code: ".container.svelte-31d80g,.player.svelte-31d80g{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.disabled.svelte-31d80g{display:none}.player.svelte-31d80g{gap:2vh}.name.svelte-31d80g{width:17vw;height:6vh;border:2px solid #A1674A;border-radius:10px;box-shadow:0 0 10px #343232}.circular-loader.svelte-31d80g{stroke-dasharray:100, 125;stroke-dashoffset:-5;animation:svelte-31d80g-rotate 2s ease-in-out infinite;stroke-linecap:round}.loader-path.svelte-31d80g{width:25vw;height:25vh}button.svelte-31d80g{color:black;width:18vw;height:15vh;border-radius:10px;background-color:#f1ecec;border:2px solid #A1674A;background-size:1800% 1800%;box-shadow:0 0 10px #343232}.name.svelte-31d80g:hover,button.svelte-31d80g:hover{transform:scale(1.1)}@keyframes svelte-31d80g-rotate{to{transform:rotate(360deg)}}",
  map: '{"version":3,"file":"+page.svelte","sources":["+page.svelte"],"sourcesContent":["<script>\\r\\n\\r\\n    import {onMount} from \\"svelte\\";\\r\\n    import {scoreStore} from \\"$lib/stores/scoreStore.ts\\";\\r\\n\\r\\n    let playerName = undefined;\\r\\n    let range = 100;\\r\\n    let result = 0;\\r\\n\\r\\n    onMount(async () => {\\r\\n        const jQuery = await import(\'jquery\');\\r\\n        const $ = jQuery.default;\\r\\n\\r\\n        window.$ = $;\\r\\n        window.jQuery = $;\\r\\n    });\\r\\n\\r\\n    async function roll() {\\r\\n\\r\\n        toggleLoading();\\r\\n\\r\\n        result = Math.floor(Math.random() * (range + 1));\\r\\n\\r\\n        await new Promise(r => setTimeout(r, 3000));\\r\\n\\r\\n        toggleLoading();\\r\\n        window.$(\\".result\\").text(`Result : ${result}/${range}`)\\r\\n\\r\\n        scoreStore.add(playerName, result)\\r\\n    }\\r\\n\\r\\n    function toggleLoading(){\\r\\n        window.$(\\".loader\\").toggleClass(\\"disabled\\");\\r\\n        window.$(\\".player\\").toggleClass(\\"disabled\\");\\r\\n    }\\r\\n\\r\\n<\/script>\\r\\n\\r\\n<div class=\\"container\\">\\r\\n    <div class=\\"loader disabled\\">\\r\\n        <svg class=\\"circular-loader\\" viewBox=\\"0 0 30 30\\">\\r\\n            <circle class=\\"loader-path\\" cx=\\"15\\" cy=\\"15\\" r=\\"5\\" fill=\\"none\\" stroke=\\"#f1ecec\\" stroke-width=\\"0.7\\" />\\r\\n        </svg>\\r\\n        <div class=\\"info\\">Rolling a random numbers within range 0-{range}...</div>\\r\\n    </div>\\r\\n\\r\\n    <div class=\\"player\\">\\r\\n        <input class=\\"name\\" placeholder=\\"Your name\\" bind:value={playerName}/>\\r\\n        <button on:click={roll}>Let\'s roll !</button>\\r\\n        <div class=\\"result\\"></div>\\r\\n    </div>\\r\\n</div>\\r\\n\\r\\n<style>\\r\\n\\r\\n    .container, .player\\r\\n    {\\r\\n        display: flex;\\r\\n        flex-direction: column;\\r\\n        justify-content: center;\\r\\n        align-items: center;\\r\\n        text-align: center;\\r\\n    }\\r\\n\\r\\n    .disabled\\r\\n    {\\r\\n        display: none;\\r\\n    }\\r\\n\\r\\n    .player\\r\\n    {\\r\\n        gap: 2vh;\\r\\n    }\\r\\n\\r\\n    .name\\r\\n    {\\r\\n        width: 17vw;\\r\\n        height: 6vh;\\r\\n        border: 2px solid #A1674A;\\r\\n        border-radius: 10px;\\r\\n        box-shadow: 0 0 10px #343232;\\r\\n    }\\r\\n\\r\\n    .circular-loader\\r\\n    {\\r\\n        stroke-dasharray: 100, 125;\\r\\n        stroke-dashoffset: -5;\\r\\n        animation: rotate 2s ease-in-out infinite;\\r\\n        stroke-linecap: round;\\r\\n    }\\r\\n\\r\\n    .loader-path {\\r\\n        width: 25vw;\\r\\n        height: 25vh;\\r\\n    }\\r\\n\\r\\n    button\\r\\n    {\\r\\n        color: black;\\r\\n        width: 18vw;\\r\\n        height: 15vh;\\r\\n        border-radius: 10px;\\r\\n        background-color: #f1ecec;\\r\\n        border: 2px solid #A1674A;\\r\\n        background-size: 1800% 1800%;\\r\\n        box-shadow: 0 0 10px #343232;\\r\\n    }\\r\\n\\r\\n    .name:hover, button:hover{\\r\\n        transform: scale(1.1);\\r\\n    }\\r\\n\\r\\n    @keyframes rotate {\\r\\n        to{transform: rotate(360deg)}\\r\\n    }\\r\\n\\r\\n</style>"],"names":[],"mappings":"AAuDI,wBAAU,CAAE,qBACZ,CACI,OAAO,CAAE,IAAI,CACb,cAAc,CAAE,MAAM,CACtB,eAAe,CAAE,MAAM,CACvB,WAAW,CAAE,MAAM,CACnB,UAAU,CAAE,MAChB,CAEA,uBACA,CACI,OAAO,CAAE,IACb,CAEA,qBACA,CACI,GAAG,CAAE,GACT,CAEA,mBACA,CACI,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,GAAG,CACX,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CACzB,aAAa,CAAE,IAAI,CACnB,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OACzB,CAEA,8BACA,CACI,gBAAgB,CAAE,GAAG,CAAC,CAAC,GAAG,CAC1B,iBAAiB,CAAE,EAAE,CACrB,SAAS,CAAE,oBAAM,CAAC,EAAE,CAAC,WAAW,CAAC,QAAQ,CACzC,cAAc,CAAE,KACpB,CAEA,0BAAa,CACT,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IACZ,CAEA,oBACA,CACI,KAAK,CAAE,KAAK,CACZ,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,IAAI,CACZ,aAAa,CAAE,IAAI,CACnB,gBAAgB,CAAE,OAAO,CACzB,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,OAAO,CACzB,eAAe,CAAE,KAAK,CAAC,KAAK,CAC5B,UAAU,CAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OACzB,CAEA,mBAAK,MAAM,CAAE,oBAAM,MAAM,CACrB,SAAS,CAAE,MAAM,GAAG,CACxB,CAEA,WAAW,oBAAO,CACd,EAAE,CAAC,SAAS,CAAE,OAAO,MAAM,CAAC,CAChC"}'
};
let range = 100;
const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let playerName = void 0;
  $$result.css.add(css);
  return `<div class="container svelte-31d80g"><div class="loader disabled svelte-31d80g"><svg class="circular-loader svelte-31d80g" viewBox="0 0 30 30"><circle class="loader-path svelte-31d80g" cx="15" cy="15" r="5" fill="none" stroke="#f1ecec" stroke-width="0.7"></circle></svg> <div class="info">Rolling a random numbers within range 0-${escape(range)}...</div></div> <div class="player svelte-31d80g"><input class="name svelte-31d80g" placeholder="Your name"${add_attribute("value", playerName, 0)}> <button class="svelte-31d80g" data-svelte-h="svelte-bef7me">Let&#39;s roll !</button> <div class="result"></div></div> </div>`;
});
export {
  Page as default
};