diff --git a/src/components/app/TutorialHighlight.svelte b/src/components/app/TutorialHighlight.svelte index 9cd4ed23d..904f24164 100644 --- a/src/components/app/TutorialHighlight.svelte +++ b/src/components/app/TutorialHighlight.svelte @@ -3,6 +3,7 @@ // A class name to highlight. export let id: string | undefined = undefined; + export let highlightIndex: number | undefined = undefined; let bounds: DOMRect | undefined = undefined; @@ -23,11 +24,15 @@ +> + {#if highlightIndex} +
{highlightIndex}
+ {/if} + diff --git a/src/components/app/TutorialView.svelte b/src/components/app/TutorialView.svelte index fbab84a8a..9da5b0b75 100644 --- a/src/components/app/TutorialView.svelte +++ b/src/components/app/TutorialView.svelte @@ -14,6 +14,8 @@ ProjectSymbol, DraggedSymbol, type DraggedContext, + HighlightCountSymbol, + highlightIndex, } from '../../components/project/Contexts'; import PlayView from './PlayView.svelte'; import Button from '../widgets/Button.svelte'; @@ -50,6 +52,10 @@ $: conceptsStore.set($concepts); setContext(ConceptIndexSymbol, conceptsStore); + // Highlights count + const highlightCount = writable(0); + setContext(HighlightCountSymbol, highlightCount); + // Create a concept path for children setContext(ConceptPathSymbol, writable([])); @@ -105,6 +111,11 @@ .filter((concept) => concept.concept.getText().startsWith('@UI/')) .map((concept) => concept.concept.getText().substring('@UI/'.length)); + $: { + highlightCount.set(highlights.length); + highlightIndex.set(1); + } + const conceptPath = getConceptPath(); /* @@ -420,9 +431,15 @@ {#key highlights} - {#each highlights as highlight} -