89 lines
1.7 KiB
Svelte
89 lines
1.7 KiB
Svelte
<!-- src/lib/components/Recipies/oRecipe.svelte -->
|
|
<script>
|
|
import { interpret } from 'xstate';
|
|
import Composite from '$lib/core/Composite.svelte';
|
|
|
|
// export let machine;
|
|
|
|
let composite = {
|
|
id: 'testingstuff',
|
|
layout: {
|
|
columns: '1fr 1fr',
|
|
areas: `
|
|
"left right"
|
|
`
|
|
},
|
|
children: [
|
|
{
|
|
id: 'child',
|
|
component: 'LearnReady',
|
|
slot: 'left',
|
|
store: {
|
|
xstate: 'NOTREADY'
|
|
},
|
|
machine: {
|
|
id: 'compositemachine',
|
|
initial: 'NOTREADY',
|
|
states: {
|
|
NOTREADY: {
|
|
on: { TOGGLE: 'READY' }
|
|
},
|
|
READY: {
|
|
on: { TOGGLE: 'NOTREADY' }
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 'parent',
|
|
component: 'LearnColor',
|
|
slot: 'right'
|
|
}
|
|
]
|
|
};
|
|
|
|
// let current = machine.initialState.value;
|
|
|
|
// const service = interpret(machine)
|
|
// .onTransition((state) => {
|
|
// current = state.value;
|
|
// })
|
|
// .start();
|
|
|
|
// Derive possible actions from the current state
|
|
// $: possibleActions = machine.states[current]?.meta.buttons || [];
|
|
</script>
|
|
|
|
<div class="h-1/4">
|
|
<Composite {composite} />
|
|
</div>
|
|
|
|
<!--
|
|
<main class="grid w-full h-full grid-rows-layout">
|
|
<div class="w-full h-full p-4 overflow-scroll">
|
|
|
|
<p>Current state: {current}</p>
|
|
<h1>{machine.states[current].meta.title}</h1>
|
|
{#if machine.states[current].meta.composite}
|
|
<Composite composite={machine.states[current].meta.composite} />
|
|
{/if}
|
|
</div>
|
|
<div class="p-4">
|
|
{#each possibleActions as { type, label, disabled } (type)}
|
|
<button
|
|
class="px-4 py-2 text-white bg-blue-500 rounded"
|
|
on:click={() => service.send(type)}
|
|
{disabled}
|
|
>
|
|
{label}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
.grid-rows-layout {
|
|
grid-template-rows: 1fr auto;
|
|
}
|
|
</style> -->
|