Fixed #535

wordplaydev · Nov 4, 2024 · 36f895c · 36f895c
1 parent f2507a2
commit 36f895c
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 9 deletions.
diff --git 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 @@
 </script>
 
 <span
-    class="highlight"
+    class="highlight" 
     class:hovering={id !== undefined}
     style:left={bounds ? `${bounds.left}px` : undefined}
     style:top={bounds ? `${bounds.top}px` : undefined}
-/>
+>
+    {#if highlightIndex}
+        <p class="number">{highlightIndex}</p>
+    {/if}
+</span>
 
 <style>
     .highlight {
@@ -42,6 +47,7 @@
         animation-name: glow;
         animation-duration: 1s;
         animation-iteration-count: infinite;
+        align-items: center;
     }
 
     .hovering {
@@ -53,13 +59,24 @@
         pointer-events: none;
     }
 
+    .number {
+        color: #000;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        font-size: 0.6em;
+        line-height: 1.2em;
+        font-weight: bold;
+    }
+
     @keyframes glow {
         from {
             transform: scale(1);
         }
         to {
             transform: scale(2);
-            opacity: 0.5;
         }
     }
 </style>
diff --git 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 @@
     </div>
 </section>
 {#key highlights}
-    {#each highlights as highlight}
-        <TutorialHighlight id={highlight} />
-    {/each}
+    {#if highlights.length > 1}
+        {#each highlights as highlight, index}
+            <TutorialHighlight id={highlight} highlightIndex={index + 1}/>
+        {/each}
+    {:else}
+        {#each highlights as highlight}
+            <TutorialHighlight id={highlight}/>
+        {/each}
+    {/if}
 {/key}
 
 <style>

diff --git a/src/components/concepts/ConceptLinkUI.svelte b/src/components/concepts/ConceptLinkUI.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { getConceptIndex, getConceptPath } from '../project/Contexts';
+    import { getConceptIndex, getConceptPath, HighlightCountSymbol, highlightIndex } from '../project/Contexts';
     import ConceptLink from '@nodes/ConceptLink';
     import Concept from '@concepts/Concept';
     import { locales } from '../../db/Database';
@@ -8,6 +8,8 @@
     import Button from '../widgets/Button.svelte';
     import { withVariationSelector } from '../../unicode/emoji';
     import { goto } from '$app/navigation';
+    import { getContext } from 'svelte';
+    import type { Readable } from 'svelte/store';
 
     export let link: ConceptRef | ConceptLink | Concept;
     export let label: string | undefined = undefined;
@@ -20,6 +22,21 @@
     let concept: Concept | undefined;
     let container: Concept | undefined;
     let ui: string | undefined;
+
+    // Highlight ounts
+    let highlightCount = 0;
+    const countContext = getContext(HighlightCountSymbol) as Readable<number>;
+    highlightCount = $countContext;
+
+    // Global index for highlight
+    let hlIndex = $highlightIndex;
+
+    $: {
+        if (ui) {
+            highlightIndex.update(n => n + 1);
+        }
+    }
+
     $: {
         if (link instanceof Concept) {
             concept = link;
@@ -106,7 +123,8 @@
                         >{withVariationSelector(symbolicName)}</sub
                     >{/if}{/if}</span
         ></Button
-    >{:else if ui}<TutorialHighlight
+    >{:else if ui}
+        <TutorialHighlight highlightIndex={highlightCount > 1 ? hlIndex : undefined}
     />{:else if link instanceof ConceptLink}<span
         >{#if container}{container.getName(
                 $locales,

diff --git a/src/components/project/Contexts.ts b/src/components/project/Contexts.ts
@@ -1,5 +1,5 @@
 import { getContext } from 'svelte';
-import type { Readable, Writable } from 'svelte/store';
+import { writable, type Readable, type Writable } from 'svelte/store';
 import type Concept from '@concepts/Concept';
 import type ConceptIndex from '@concepts/ConceptIndex';
 import type { InsertionPoint } from '../../edit/Drag';
@@ -176,6 +176,15 @@ export function getHighlights() {
     return getContext<HighlightContext>(HighlightSymbol);
 }
 
+// Highlight Counts
+export const HighlightCountSymbol = Symbol('highlight-count');
+export type HighlightCountContext = Writable<number>;
+export function getHighlightCount(): HighlightCountContext {
+    return getContext<HighlightCountContext>(HighlightCountSymbol);
+}
+
+export const highlightIndex = writable(0);
+
 export const SpaceSymbol = Symbol('space');
 export type SpaceContext = Writable<Spaces>;
 export function getSpace() {