Spaces:
Runtime error
Runtime error
File size: 2,272 Bytes
ec3efd7 |
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 87 88 89 90 |
<script lang="ts">
import { PRESETS } from '../data';
import { selectedParams, generateMap } from '$lib/store';
import type { FormElements } from '../types';
import { randomSeed } from '$lib/utils';
function submit() {
const elements: FormElements = form.elements as FormElements;
$selectedParams = {
prompt: elements.prompt.value,
seed: BigInt(elements.seed.value),
steps: parseInt(elements.steps.value)
};
}
let form: HTMLFormElement;
let seed: bigint = $selectedParams.seed;
let sampleSteps: number = $selectedParams.steps;
let prompt: string = $selectedParams.prompt;
</script>
<form bind:this={form} on:input={submit}>
<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Prompt</h4>
<input
bind:value={prompt}
name="prompt"
placeholder="Aerial view of ..., France."
disabled={$generateMap === true}
style="width: 500px;"
/>
<select
name="presets"
disabled={$generateMap === true}
on:change={(event) => {
prompt = event.currentTarget.value;
}}>
<option disabled selected>preset</option>
{#each PRESETS as preset}
<option value={preset[0]}>{preset[1]}</option>`
{/each}
</select>
<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={$generateMap === true}
/>
<button
on:click|preventDefault={() => {
seed = randomSeed();
submit();
}}
disabled={$generateMap === 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="30"
step="1"
disabled={$generateMap === 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>
|