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} - - {/each} + {#if highlights.length > 1} + {#each highlights as highlight, index} + + {/each} + {:else} + {#each highlights as highlight} + + {/each} + {/if} {/key}