import { discreteTween } from './discreteTween'

const numbers = [1, 2, 99, 4]

const number = discreteTween(0, numbers.map(value => ({value, duration: 500})))

const strings = ["Hi!", "how", "are", "you", "doing?"]

const string = discreteTween(null, strings.map(value => ({value, duration: 200})))

const stackedValues = ['scale(1.4)', 'rotate(30deg)', 'rotate(10deg)', 'scale(1.8)']

const stacked = discreteTween([], stackedValues.map(value => ({value, duration: 500})), {stacked: true})

const uniqueValues = ['scale(1.4)', 'rotate(30deg)', 'rotate(10deg)', 'scale(1.8)']

const unique = discreteTween([], stackedValues.map(value => ({value, key: value.split('(')[0], duration: 500})), {stacked: true})

</script>

<h1>Discrete Tween</h1>

<p>A Svelte store that animates a series of values without interpolation.</p>

<section>

<h2>Array of numbers</h2>

<p>Values don't have to be continous. It's just an array&trade;</p>

<div class="code">

[

{#each numbers as n, i}

<span class:selected={$number == n}>{n}</span>{#if i < numbers.length-1},&nbsp;{/if}

{/each}

]

</div>

<button on:click={() => number.start()}>Play</button>

<p>

Current value is: {$number}

</p>