From 06e3185ee5765133e2e3461c691f1ba101bb21c6 Mon Sep 17 00:00:00 2001
From: "Amy J. Ko" <ajko@uw.edu>
Date: Wed, 18 Oct 2023 19:47:24 -0700
Subject: [PATCH] Fallback to English tutorial.

---
 src/components/app/Header.svelte             |  1 +
 src/components/app/TutorialView.svelte       |  7 ++++++-
 src/components/settings/LocaleChooser.svelte |  2 +-
 src/concepts/NodeConcept.ts                  | 18 ++++++++++++------
 src/db/LocalesDatabase.ts                    | 12 +++++++-----
 src/locale/Locales.ts                        |  9 ++++++++-
 src/routes/learn/+page.svelte                |  6 ++++++
 7 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/components/app/Header.svelte b/src/components/app/Header.svelte
index 13ce15dc2..b61806f3c 100644
--- a/src/components/app/Header.svelte
+++ b/src/components/app/Header.svelte
@@ -14,6 +14,7 @@
         font-weight: bold;
         text-align: start;
         transform: rotate(-1deg);
+        white-space: nowrap;
     }
 
     .block {
diff --git a/src/components/app/TutorialView.svelte b/src/components/app/TutorialView.svelte
index 1235912a7..8229e6135 100644
--- a/src/components/app/TutorialView.svelte
+++ b/src/components/app/TutorialView.svelte
@@ -37,6 +37,7 @@
 
     export let progress: Progress;
     export let navigate: (progress: Progress) => void;
+    export let fallback: boolean;
 
     // Get the concept index and path from the project view and put it in
     // a store, and the store in a context so that ContextViewUI can access the index.
@@ -222,7 +223,11 @@
     on:pointerdown|stopPropagation|preventDefault={() => nextButton?.focus()}
 >
     <div class="header">
-        <Header block={false}>Learn</Header>
+        <Header block={false}
+            >{#if fallback}🚧{/if}{$locales.get(
+                (l) => l.ui.page.learn.header
+            )}</Header
+        >
         <nav>
             <Button
                 tip={$locales.get((l) => l.ui.page.learn.button.previous)}
diff --git a/src/components/settings/LocaleChooser.svelte b/src/components/settings/LocaleChooser.svelte
index 6ec71dfd7..130ff40e0 100644
--- a/src/components/settings/LocaleChooser.svelte
+++ b/src/components/settings/LocaleChooser.svelte
@@ -20,7 +20,7 @@
     let show: boolean;
 
     $: selectedLocales = $locales
-        .getLocales()
+        .getPreferredLocales()
         .map((locale) => toLocaleString(locale)) as SupportedLocale[];
 
     function select(locale: SupportedLocale) {
diff --git a/src/concepts/NodeConcept.ts b/src/concepts/NodeConcept.ts
index 7d4b0dfb3..5bb914259 100644
--- a/src/concepts/NodeConcept.ts
+++ b/src/concepts/NodeConcept.ts
@@ -37,9 +37,14 @@ export default class NodeConcept extends Concept {
      */
     hasName(name: string, locales: Locales): boolean {
         const nodeLocale = this.template.getNodeLocale(locales);
-        const match = Object.entries(locales.getLocales()[0].node).find(
-            ([, value]) => value === nodeLocale
-        );
+        const match = locales
+            .getLocales()
+            .map((locale) =>
+                Object.entries(locale.node).find(
+                    ([, value]) => value === nodeLocale
+                )
+            )
+            .find((node) => node !== undefined);
         return match ? match[0] === name || match[1].name === name : false;
     }
 
@@ -74,9 +79,10 @@ export default class NodeConcept extends Concept {
 
     getCharacter(locales: Locales): Character | undefined {
         const text = this.template.getNodeLocale(locales);
-        const match = Object.entries(locales.getLocales()[0].node).find(
-            ([, t]) => t === text
-        );
+        const match = locales
+            .getLocales()
+            .map((l) => Object.entries(l.node).find(([, t]) => t === text))
+            .find((n) => n !== undefined);
         return match ? (match[0] as Character) : undefined;
     }
 
diff --git a/src/db/LocalesDatabase.ts b/src/db/LocalesDatabase.ts
index 95cdfc83b..423ee835b 100644
--- a/src/db/LocalesDatabase.ts
+++ b/src/db/LocalesDatabase.ts
@@ -187,6 +187,10 @@ export default class LocalesDatabase {
         return locales;
     }
 
+    getTutorialURL(locale: string) {
+        return `/locales/${locale}/${locale}-tutorial.json`;
+    }
+
     async getTutorial(
         language: LanguageCode,
         region: RegionCode
@@ -199,13 +203,11 @@ export default class LocalesDatabase {
         let tutorial: Tutorial | undefined;
         try {
             // Load the locale's tutorial, if it exists.
-            const response = await fetch(
-                `/locales/${localeString}/${localeString}-tutorial.json`
-            );
+            const response = await fetch(this.getTutorialURL(localeString));
             tutorial = await response.json();
         } catch (err) {
-            // Couldn't load it? Show an error.
-            tutorial = undefined;
+            // Couldn't load it? Fallback to english.
+            tutorial = await (await fetch(this.getTutorialURL('en-US'))).json();
         }
 
         this.tutorialsLoaded[localeString] = tutorial;
diff --git a/src/locale/Locales.ts b/src/locale/Locales.ts
index 0ed92ac50..77c37dfdb 100644
--- a/src/locale/Locales.ts
+++ b/src/locale/Locales.ts
@@ -22,7 +22,14 @@ export default class Locales {
 
     /** Get all preferred locales */
     getLocales() {
-        return this.locales;
+        return [
+            ...this.locales.filter((l) => l !== this.fallback),
+            this.fallback,
+        ];
+    }
+
+    getPreferredLocales() {
+        return [...this.locales];
     }
 
     /** Get the language codes for the preferred locales */
diff --git a/src/routes/learn/+page.svelte b/src/routes/learn/+page.svelte
index 2058da502..2fdb8d910 100644
--- a/src/routes/learn/+page.svelte
+++ b/src/routes/learn/+page.svelte
@@ -20,12 +20,17 @@
     import type Tutorial from '../../tutorial/Tutorial';
 
     let tutorial: Tutorial | undefined | null = undefined;
+    let fallback = false;
 
     onMount(async () => {
         tutorial = await Locales.getTutorial(
             $locales.get((l) => l.language),
             $locales.get((l) => l.region)
         );
+        fallback =
+            $locales
+                .getLanguages()
+                .some((lang) => tutorial?.language === lang) === false;
     });
 
     // If hot module reloading, and there's a locale update, refresh the tutorial.
@@ -77,6 +82,7 @@
                 $tutorialProgress.line
             )}
             {navigate}
+            {fallback}
         />
     </Page>
 {/if}