<script>
	import { createEventDispatcher } from 'svelte';
    export let id;
    export let value;

    const dispatch = createEventDispatcher();

    let dice="";
    let nbroll=0
    let intervalId;

    function rolling() {
        value=Math.floor(Math.random() * 6) + 1;
        nbroll=nbroll+1;
        if(nbroll==10) {
            dispatch('diceresult', {"id":id,"value":value});            
            clearInterval(intervalId);
            nbroll=0;
        }
    }

    export function roll() {
        intervalId = setInterval(rolling, 50);
    }
</script>

<span id={id} class="dice cursor-pointer text-3xl flex justify-center items-center bg-red-600 text-white rounded-lg m-1 w-14 h-14">
    {value}
</span>

