<script>
import { flip } from 'svelte/animate'
import { crossfade } from 'svelte/transition'
import * as d3 from 'd3-color'
let [send, receive] = crossfade({})
let colors = [
{color: "red"},
{color: "blue"}
]
function prepend() {
const color = colors[0]
colors = [{...color}, ...colors]
}
function append() {
const color = colors[colors.length-1]
colors = [...colors, {...color}]
}
function insert(index) {
const color = mix(colors[index-1].color, colors[index].color)
colors.splice(index, 0, {color});
colors = colors
}
function mix(colorA, colorB) {
colorA = d3.hsl(colorA)
colorB = d3.hsl(colorB)
return d3.hsl(
colorB.h + ((colorA.h - colorB.h)/2),
colorA.s,
colorB.l + ((colorA.l - colorB.l)/2)