import { animation, derivedAnimation } from './stores'

const max = 5

const pos = animation(0, {duration: 5000})

const scale = animation(1, {duration: 2000})

const derived = derivedAnimation([pos, scale], ([$pos, $scale]) => ({pos: $pos, scale: $scale}))

function changeSpeed(value) {

pos.accelerate(value)

pos = pos

}

</script>

{JSON.stringify($derived)}

<h1>Derived animation store</h1>

<p>Pause, continue, reset, replay, reverse or adjust speed of <b>multiple animations</b>.</p>

<img style="transform: translate({$derived.pos*10}px) scale({$derived.scale})" src="https://i.pinimg.com/originals/1f/2c/55/1f2c559db6ea07b23dbcf9761cc39b3e.png" alt="mushroom"/>

<section id="controls">

<button on:click={() => { pos.set(max); scale.set(5) }}>Play</button>

<button on:click={() => derived.pause()}>Pause</button>

<button on:click={() => derived.continue()}>Continue</button>

<button on:click={() => derived.reset()}>Reset</button>

<button on:click={() => derived.replay()}>Replay</button>

<button on:click={() => derived.reverse()}>Reverse</button>

</section>

<nav>

<button class:selected={pos.lastSpeed == 0.25} on:click={() => changeSpeed(0.25)}>0.25x</button>

<button class:selected={pos.lastSpeed == 0.5} on:click={() => changeSpeed(0.5)}>0.5x</button>

<button class:selected={pos.lastSpeed == 1} on:click={() => changeSpeed(1)}>1x</button>

<button class:selected={pos.lastSpeed == 2} on:click={() => changeSpeed(2)}>2x</button>

<button class:selected={pos.lastSpeed == 4} on:click={() => changeSpeed(4)}>4x</button>