HSL Guessing Game in Svelte

Question

The objective of the game is to guess the hue, saturation, and lightness values of a given color swatch across ten rounds.

• https://github.com/shreyasminocha/guess-the-hsl
• https://guess-the-hsl.now.sh

This being my first svelte project, I'd like some insight into best practices, especially svelte-specific ones.

Versions

• svelte: ^3.0.0

Specific questions

1. Are my choices of abstraction adequate? Are there things that should or shouldn't be components of their own?
2. In src/components/swatch.svelte, is it okay to style just div (as opposed to adding a class .swatch to the div and styling that), given that svelte scopes styles to the file?
3. In src/components/results.svelte, I'm a bit concerned about how complicated the score calculation line looks. Is there a way to clean that up a little bit? To my best knowledge I can't assign variables in svelte's template syntax.
4. Is it standard/acceptable to use an array of length 3 to represent an HSL colour or should I switch to an object with three keys, say h, s, and l?
5. I was considering using a @svelte/store to store the solution and input history, but eventually decided against it because I thought it was overkill for this. When would one use @svelte/store?

I'm using prettier for linting, so please avoid feedback on code formatting.

Any other feedback is also welcome.

File structure

.
├── package-lock.json
├── package.json
├── public
│   ├── build
│   │   └── …
│   ├── favicon.png
│   ├── global.css
│   └── index.html
├── readme.md
├── rollup.config.js
└── src
    ├── app.svelte
    ├── components
    │   ├── results.svelte
    │   ├── slider.svelte
    │   └── swatch.svelte
    └── main.js

Code

I have replaced the contents of <style> tags with … for brevity.

src/main.js

import App from "./app.svelte";

const app = new App({
    target: document.body,
    props: {}
});

export default app;

src/app.svelte

<script>
    import Swatch from "./components/swatch.svelte";
    import Slider from "./components/slider.svelte";
    import Results from "./components/results.svelte";
    import random from "random-int";

    import "../node_modules/milligram/dist/milligram.min.css";

    let solution = randomColor();
    let input = [0, 0, 0];
    let history = [];

    const totalRounds = 10;
    let round = 1;

    function save() {
        const solutionCopy = [...solution];
        const inputCopy = [...input];

        history.push({
            solution: solutionCopy,
            input: inputCopy
        });

        round++;

        solution = randomColor();
    }

    function randomColor() {
        return [random(0, 255), random(0, 100), random(0, 100)];
    }
</script>

<style>
    …
</style>

<h1>Guess the HSL</h1>

{#if round <= totalRounds}
    <label for="progress">Round {round} / {totalRounds}</label>
    <progress id="progress" value={round} max={totalRounds} />

    <div class="main">
        <Swatch color={solution} inline={false} />

        <Slider name="Hue" bind:value={input[0]} range={[0, 360]} step={1} />
        <Slider
            name="Saturation"
            bind:value={input[1]}
            range={[0, 100]}
            step={1} />
        <Slider
            name="Lightness"
            bind:value={input[2]}
            range={[0, 100]}
            step={1} />
    </div>

    <input type="submit" on:click={save} value="Submit" />
{:else}
    <Results {history} />
{/if}

src/components/swatch.svelte

<script>
    export let width = 50;
    export let color = [0, 0, 0];
    export let inline = true;
</script>

<style>
    …
</style>

<div
    style=" width: {width}px; height: {width}px; background: hsl({color[0]}, {color[1]}%,
    {color[2]}%);"
    class={inline ? '' : 'display'} />

src/components/slider.svelte

<script>
    export let name;
    export let value;
    export let range = [0, 100];
    export let step = 1;
</script>

<style>
    …
</style>

<fieldset>
    <legend>{name}</legend>

    <input
        type="range"
        {name}
        bind:value
        min={range[0]}
        max={range[1]}
        {step} />
    <input
        type="number"
        name="hue"
        bind:value
        min={range[0]}
        max={range[1]}
        {step} />
</fieldset>

src/components/results.svelte

<script>
    import Swatch from "./swatch.svelte";
    import round from "round-to";
    import convert from "color-convert";
    import { differenceCiede2000 as ciede2000 } from "d3-color-difference";

    export let history = [];
</script>

<style>
    …
</style>

<table>
    <thead>
        <th>Solution</th>
        <th>Input</th>
        <th>Score</th>
    </thead>

    {#each history as { solution, input }}
        <tr>
            <td>
                <Swatch color={solution} width="25" />
                <code>hsl({solution[0]}, {solution[1]}%, {solution[2]}%)</code>
            </td>

            <td>
                <Swatch color={input} width="25" />
                <code>hsl({input[0]}, {input[1]}%, {input[2]}%)</code>
            </td>

            <td>
                {round(100 - ciede2000(`#${convert.hsl.hex(solution)}`, `#${convert.hsl.hex(input)}`), 2)}
            </td>
        </tr>
    {/each}
</table>
```