Fallback to English tutorial.

src/components/app/Header.svelte

@@ -14,6 +14,7 @@
         font-weight: bold;
         text-align: start;
         transform: rotate(-1deg);
+        white-space: nowrap;
     }
 
     .block {

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)}

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) {

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;
     }
 

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;

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 */

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}