Spaces:
Build error
Build error
File size: 2,351 Bytes
838b286 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<script lang="ts">
import { COLOR_LIST } from '../data';
import type { Brush, RGB } from '../types';
import { selectedBrush } from '$lib/store';
const STARTCOLORID = 6;
const { color, label } = COLOR_LIST[STARTCOLORID];
let brushColor: RGB = `rgb(${color.join(',')})` as RGB;
let brushSize: number = 40;
$selectedBrush = {
color: brushColor,
size: brushSize,
label
};
const submit = async (e: Event) => {
const target = e.target as HTMLInputElement;
if (target.name === 'color') {
const selectedId = parseInt(target.value);
const { color, label } = COLOR_LIST[selectedId];
brushColor = `rgb(${color.join(',')})` as RGB;
$selectedBrush = {
color: brushColor,
size: brushSize,
label
};
} else if (target.name === 'brush') {
brushSize = parseInt(target.value);
$selectedBrush = {
color: brushColor,
size: brushSize,
label
};
}
};
</script>
<form on:input={submit}>
<h4 class="font-bold mt-6 mb-2 leading-6 my-3">Set the Brush Type</h4>
<div class="colors" name="colors">
{#each COLOR_LIST as color, id}
<div class="snap-always snap-start">
<input name="color" checked={id == STARTCOLORID} type="radio" id="color-{id}" value={id} />
<label for="color-{id}">
<svg width="20" height="20" viewBox="0 0 20 20">
<rect x="0" y="0" width="20" height="20" fill="rgb({color.color.join(',')})" /></svg
>
<span>{color.label}</span>
</label>
</div>
{/each}
</div>
<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Set the Brush Size</h4>
<div class="brush">
<input value="10" min="1" max="50" step="1" name="brush" type="range" />
<label class="pl-2" for="brush">{$selectedBrush.size}</label>
</div>
</form>
<style lang="postcss" scoped>
.colors {
@apply grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-[9rem] sm:max-h-[none] overflow-scroll snap-y snap-mandatory;
}
.colors span {
@apply ml-2;
}
.colors svg {
@apply block;
}
input[type='radio'] {
@apply opacity-0 w-0 h-0 absolute hidden;
}
input[type='radio']:active ~ label {
}
input[type='radio']:checked ~ label {
@apply outline outline-2 outline-yellow-500;
}
label {
@apply cursor-pointer flex transition-all duration-200 ease-in-out whitespace-nowrap
hover:outline outline-offset-[-2px] outline-2 outline-yellow-500;
}
.brush {
@apply flex;
}
</style>
|