Spaces:
Build error
Build error
File size: 2,184 Bytes
838b286 111de30 838b286 111de30 838b286 111de30 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 |
<script lang="ts">
import { SECTIONS, TEXTURES } from '../data';
import { selectedParams, generateHuman } from '$lib/store';
import type { FormElements } from '../types';
import { randomSeed } from '$lib/utils';
function submit() {
const elements: FormElements = form.elements as FormElements;
$selectedParams = {
texture: `${elements.texture0.value},${elements.texture1.value},${elements.texture2.value}`,
seed: BigInt(elements.seed.value),
steps: parseInt(elements.steps.value)
};
}
let form: HTMLFormElement;
let seed: bigint = $selectedParams.seed;
let sampleSteps: number = $selectedParams.steps;
</script>
<form bind:this={form} on:input={submit}>
<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Texture Description</h4>
<div class="sections">
{#each SECTIONS as section, i}
<select name="texture{i}" disabled={$generateHuman === true}>
<option disabled selected>{section}</option>
{#each TEXTURES as texture}
<option value={texture}>{texture}</option>`
{/each}
</select>
{/each}
</div>
<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Random Seed</h4>
<input
bind:value={seed}
type="Number"
name="seed"
placeholder="Integer Seed"
disabled={$generateHuman === true}
/>
<button
on:click|preventDefault={() => {
seed = randomSeed();
submit();
}}
disabled={$generateHuman === true}
>
Random
</button>
<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Sample Steps</h4>
<div class="flex">
<input
bind:value={sampleSteps}
type="range"
name="steps"
min="10"
max="300"
step="1"
disabled={$generateHuman === true}
/>
<label class="pl-2" for="steps">{sampleSteps}</label>
</div>
</form>
<style lang="postcss" scoped>
.sections {
@apply flex sm:flex-row flex-col gap-1 sm:gap-3;
}
select,
button,
input {
@apply p-1 disabled:opacity-50 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
}
input:disabled + label {
@apply opacity-50;
}
input {
@apply pl-3;
}
</style>
|