fix: indicate RuntimeError

src/components/Canvas.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-	import { onMount, tick } from 'svelte'
+	import { onMount } from 'svelte'
 
 	import { settings } from 'src/stores/draw'
 	import { wasm } from 'src/stores/load'
@@ -30,12 +30,22 @@
 
 	export async function draw() {
 		// not works (status not shown)
-		wasm.set('calc')
-		await tick()
+		// wasm.set('calc')
+		// await tick()
 
 		field = gl.getImageData(0, 0, width, height)
 
-		field = await drawMandelbrot(field, $settings.lx, $settings.rx)
+		try {
+			field = await drawMandelbrot(field, $settings.lx, $settings.rx)
+		} catch (e) {
+			if (e.name === 'RuntimeError') {
+				wasm.set('fail')
+				console.error(e)
+				return
+			}
+
+			throw e
+		}
 
 		gl.putImageData(field, 0, 0)
 		wasm.set('none')

src/components/Settings.svelte

@@ -3,14 +3,25 @@
 	import InputNumber from 'src/components/atoms/InputNumber.svelte'
 
 	import { settings } from 'src/stores/draw'
-	import { load } from 'src/stores/load'
+	import { wasm } from 'src/stores/load'
+
+	function getLoadText(state) {
+		/* eslint-disable indent */
+		switch (state) {
+			case 'load':
+			case 'calc':
+				return 'Loading'
+			case 'fail':
+				return 'Fail'
+			default:
+				return 'Refresh'
+		}
+	}
 </script>
 
 <script>
 	export let draw
 
-	$: loadText = $load ? 'Loading' : 'Refresh'
-
 	// show
 
 	let show = true
@@ -24,7 +35,11 @@
 	{#if show}
 		<div class="flex justify-between mb-3">
 			<Button on:click={toggleShow} class="mr-2">Hide</Button>
-			<Button on:click={() => window.location.reload()}>{loadText}</Button>
+			<Button
+				on:click={() => window.location.reload()}
+				danger={$wasm === 'fail'}>
+				{getLoadText($wasm)}
+			</Button>
 		</div>
 
 		<div class="flex">

src/components/atoms/Button.svelte

@@ -1,3 +1,10 @@
-<button class="rounded px-3 py-2 bg-gray-300 {$$props.class}" on:click>
+<script>
+	export let danger = false
+</script>
+
+<button
+	class="rounded px-3 py-2 bg-gray-300 {$$props.class}"
+	on:click
+	class:text-red-500={danger}>
 	<slot />
 </button>

src/stores/load.js

@@ -1,6 +1,6 @@
 import { derived, writable } from 'svelte/store'
 
-// none, load, calc
+// none, load, calc, fail
 export const wasm = writable('load')
 
 export const load = derived(wasm, ($wasm, set) => {