<script>
import { onMount } from 'svelte';
let url = 'https://cdn.vox-cdn.com/thumbor/N7E4hPnlQT-gkairuvCVi4CNmOs=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/19658558/the_child_star_wars_gallery_5e3204be4f668.jpg';
let can_render = false;
let brick_size = 20;
let loop_count = 0;
const image_width = 800;
const image_height = 800;
const set_brick_size = () => {
document.documentElement.style.setProperty('--brick-size', `${brick_size}px`);
loop_count = Math.ceil((image_width / brick_size) * (image_height / brick_size));
};
onMount(() => {
set_brick_size();
})
</script>
<form on:submit|preventDefault>
<fieldset>
<legend>Settings</legend>
<label for="url">
Image URL
<input id="url" bind:value={url} type="url"/>
</label>
<label for="checkbox">
<input on:change={() => can_render = !can_render} type="checkbox" id="checkbox" checked={can_render} />
Enable brick effect
</label>
</fieldset>
</form>