Fixed #397 Redesigned home page for clarity and navigability.

wordplaydev · Jul 6, 2024 · 4e11764 · 4e11764
1 parent dc60510
commit 4e11764
Show file tree

Hide file tree

Showing 21 changed files with 431 additions and 195 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http:
 -   [#509](https://github.com/wordplaydev/wordplay/issues/509) Fixed parsing regression from infinite loop fixes.
 -   [#507](https://github.com/wordplaydev/wordplay/issues/507) Fixed Webpage stream replay bug.
 -   [#216](https://github.com/wordplaydev/wordplay/issues/216) Improved design of view code and copy buttons.
+-   [#397](https://github.com/wordplaydev/wordplay/issues/397) Redesigned home page for clarity and navigability.
 -   Added fade out sequence.
 -   Fixed select all button.
 

diff --git a/src/basis/Fonts.ts b/src/basis/Fonts.ts
@@ -421,7 +421,7 @@ export class FontManager {
         const face = Faces[name];
 
         // If preloaded, don't load it.
-        if (face.preloaded === true) return;
+        if (face !== undefined && face.preloaded === true) return;
 
         if (this.facesLoaded.get(name) === 'loaded') return;
 
@@ -435,8 +435,8 @@ export class FontManager {
                 face.ranges === undefined
                     ? undefined
                     : Array.isArray(face.ranges)
-                    ? face.ranges
-                    : [face.ranges];
+                      ? face.ranges
+                      : [face.ranges];
 
             // If the face has specific weights, load all of the individual ways, split by the ranges specified.
             if (Array.isArray(face.weights)) {
@@ -447,7 +447,7 @@ export class FontManager {
                         face.weights,
                         false,
                         ranges,
-                        face.format
+                        face.format,
                     ),
                 ];
                 if (face.italic)
@@ -458,7 +458,7 @@ export class FontManager {
                             face.weights,
                             true,
                             ranges,
-                            face.format
+                            face.format,
                         ),
                     ];
             }
@@ -472,7 +472,7 @@ export class FontManager {
                             italic: face.italic,
                             format: face.format,
                             range: undefined,
-                        })
+                        }),
                     );
                 else {
                     for (const range of ranges)
@@ -483,7 +483,7 @@ export class FontManager {
                                 italic: face.italic,
                                 format: face.format,
                                 range: range,
-                            })
+                            }),
                         );
                 }
             }
@@ -496,7 +496,7 @@ export class FontManager {
 
         this.facesLoaded.set(
             name,
-            loads.every((loaded) => loaded) ? 'loaded' : 'failed'
+            loads.every((loaded) => loaded) ? 'loaded' : 'failed',
         );
     }
 
@@ -505,7 +505,7 @@ export class FontManager {
         weights: FontWeight[],
         ital: boolean,
         ranges: string[] | undefined,
-        format: FontFormat
+        format: FontFormat,
     ): Promise<boolean>[] {
         const promises: Promise<boolean>[] = [];
         for (const weight of weights) {
@@ -517,7 +517,7 @@ export class FontManager {
                         italic: ital,
                         format: format,
                         range: undefined,
-                    })
+                    }),
                 );
             else {
                 for (const range of ranges) {
@@ -528,7 +528,7 @@ export class FontManager {
                             italic: ital,
                             format: format,
                             range: range,
-                        })
+                        }),
                     );
                 }
             }
@@ -575,7 +575,7 @@ export class FontManager {
                     ? font.weight.toString()
                     : `${supportedFace.weights.min} ${supportedFace.weights.max}`,
                 unicodeRange: font.range,
-            }
+            },
         );
         document.fonts.add(fontFace);
 
@@ -590,5 +590,5 @@ const Fonts = new FontManager();
 export default Fonts;
 
 export const SupportedFontsFamiliesType = SupportedFaces.map(
-    (font) => `"${font}"`
+    (font) => `"${font}"`,
 ).join(OR_SYMBOL);
diff --git a/src/components/app/Action.svelte b/src/components/app/Action.svelte
@@ -0,0 +1,15 @@
+<div class="action">
+    <slot />
+</div>
+
+<style>
+    .action {
+        min-width: 15em;
+        width: calc(50% - var(--wordplay-spacing));
+        padding: var(--wordplay-spacing);
+        border: var(--wordplay-border-color) solid var(--wordplay-border-width);
+        border-radius: var(--wordplay-border-radius);
+        background: var(--wordplay-background);
+        flex: 1 0 auto;
+    }
+</style>
diff --git a/src/components/app/Background.svelte b/src/components/app/Background.svelte
@@ -26,7 +26,7 @@
 
     const bounds = 0.2;
     const glyphs = new UnicodeString(
-        '😀മAあ韓नेئبअขማঅবাংབོދިεفગુע中رšՀꆈᓄქ'
+        '😀മAあ韓नेئبअขማঅবাংབོދިεفગુע中رšՀꆈᓄქ',
     ).getGraphemes();
 
     let mounted = false;
@@ -53,7 +53,7 @@
                     glyph.y = windowHeight * (1 + bounds);
 
                 const element = document.querySelector(
-                    `[data-id="${glyph.index}"]`
+                    `[data-id="${glyph.index}"]`,
                 );
                 if (element instanceof HTMLElement) {
                     element.style.left = `${glyph.x}px`;
@@ -73,7 +73,7 @@
         // Compute a number of glyphs roughly proportional to the window size.
         const count = Math.min(
             20,
-            Math.round(windowWidth * windowHeight) / 100000
+            Math.round(windowWidth * windowHeight) / 100000,
         );
         for (let i = 0; i < count; i++)
             random.push(glyphs[Math.floor(Math.random() * glyphs.length)]);

diff --git a/src/components/app/BigLink.svelte b/src/components/app/BigLink.svelte
@@ -7,20 +7,22 @@
     export let smaller = false;
 </script>
 
-<p class="link" class:smaller
-    ><Link nowrap {to} {external}><slot /></Link>{#if subtitle}<span
-            class="subtitle"><br />{subtitle}</span
-        >{/if}</p
+<div class="biglink" class:smaller>
+    <div class="link"><Link nowrap {to} {external}><slot /></Link></div>
+    {#if subtitle}<div class="subtitle">{subtitle}</div>{/if}</div
 >
 
 <style>
+    .biglink {
+        display: flex;
+        flex-direction: column;
+        gap: var(--wordplay-spacing);
+    }
     .link {
         font-size: min(6vw, 32pt);
-        margin-block-end: 1em;
-        line-height: 0.85;
     }
 
-    .link.smaller {
+    .biglink.smaller .link {
         font-size: min(3vw, 24pt);
     }
 

diff --git a/src/components/app/Page.svelte b/src/components/app/Page.svelte
@@ -9,6 +9,8 @@
     import Color from '../../output/Color';
     import Emoji from './Emoji.svelte';
 
+    export let home = false;
+
     // Set a fullscreen flag to indicate whether footer should hide or not.
     // It's the responsibility of children componets to set this based on their state.
     // It's primarily ProjectView that does this.
@@ -49,25 +51,29 @@
         <slot />
     </main>
     <footer class:fullscreen={$fullscreen.on}>
-        <Link nowrap tip={$locales.get((l) => l.ui.widget.home)} to="/"
-            ><Emoji>💬</Emoji></Link
-        >
-        <Link nowrap to="/learn"
-            >{$locales.get((l) => l.ui.page.learn.header)}</Link
-        >
-        <Link nowrap to="/guide"
-            >{$locales.get((l) => l.ui.page.guide.header)}</Link
-        >
-        <Link nowrap to="/projects"
-            >{$locales.get((l) => l.ui.page.projects.header)}</Link
-        >
-        <Link nowrap to="/galleries"
-            >{$locales.get((l) => l.ui.page.galleries.header)}</Link
-        >
-        <Link nowrap to="/donate"
-            >{$locales.get((l) => l.ui.page.donate.header)}</Link
-        >
-        <Settings />
+        <nav>
+            {#if !home}
+                <Link nowrap tip={$locales.get((l) => l.ui.widget.home)} to="/"
+                    ><Emoji>💬</Emoji></Link
+                >
+                <Link nowrap to="/projects"
+                    >{$locales.get((l) => l.ui.page.projects.header)}</Link
+                >
+                <Link nowrap to="/learn"
+                    >{$locales.get((l) => l.ui.page.learn.header)}</Link
+                >
+                <Link nowrap to="/galleries"
+                    >{$locales.get((l) => l.ui.page.galleries.header)}</Link
+                >
+                <Link nowrap to="/guide"
+                    >{$locales.get((l) => l.ui.page.guide.header)}</Link
+                >
+                <Link nowrap external to="https://discord.gg/Jh2Qq9husy"
+                    >{$locales.get((l) => l.term.help)}</Link
+                >
+            {/if}
+            <Settings />
+        </nav>
     </footer>
 </div>
 
@@ -97,20 +103,23 @@
     }
 
     footer {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
         width: 100%;
         max-width: 100%;
         overflow: auto;
-        padding: var(--wordplay-spacing);
         border-radius: var(--wordplay-border-radius);
         border-top: var(--wordplay-border-color) solid
             var(--wordplay-border-width);
         z-index: 1;
-        gap: var(--wordplay-spacing);
         color: var(--wordplay-foreground);
         background: var(--wordplay-background);
         white-space: nowrap;
     }
+
+    nav {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: var(--wordplay-spacing);
+        gap: var(--wordplay-spacing);
+    }
 </style>
diff --git a/src/components/app/Writing.svelte b/src/components/app/Writing.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
     import Page from './Page.svelte';
+
+    export let home = false;
 </script>
 
-<Page>
+<Page {home}>
     <div class="writing">
         <slot />
     </div>
+    <div class="footer">
+        <slot name="footer" />
+    </div>
 </Page>
 
 <style>
@@ -22,4 +27,13 @@
     :global(p:not(:last-of-type)) {
         margin-block-end: 1em;
     }
+
+    .footer {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-items: center;
+        width: 100vw;
+        background: var(--wordplay-alternating-color);
+    }
 </style>
diff --git a/src/components/settings/LocaleChooser.svelte b/src/components/settings/LocaleChooser.svelte
@@ -8,7 +8,6 @@
         SupportedLocales,
         getLocaleLanguage,
         type SupportedLocale,
-        getLocaleLanguageName,
         EventuallySupportedLocales,
     } from '../../locale/Locale';
     import Link from '../app/Link.svelte';
@@ -25,7 +24,7 @@
 
     function select(
         locale: SupportedLocale,
-        action: 'remove' | 'replace' | 'add'
+        action: 'remove' | 'replace' | 'add',
     ) {
         selectedLocales =
             // If removing, only remove if there's more than one.
@@ -34,17 +33,17 @@
                     ? selectedLocales.filter((l) => l !== locale)
                     : selectedLocales
                 : // If replacing, just choose the single locale
-                action === 'replace'
-                ? [locale]
-                : // Put the selected locale at the end, removing it from the beginning if included
-                  [...selectedLocales.filter((l) => l !== locale), locale];
+                  action === 'replace'
+                  ? [locale]
+                  : // Put the selected locale at the end, removing it from the beginning if included
+                    [...selectedLocales.filter((l) => l !== locale), locale];
 
         // Set the layout and direction based on the preferred language.
         if (selectedLocales.length > 0) {
             Settings.setWritingLayout(
                 getLanguageLayout(
-                    getLocaleLanguage(selectedLocales[0]) as LanguageCode
-                )
+                    getLocaleLanguage(selectedLocales[0]) as LanguageCode,
+                ),
             );
             // Save setLocales
             DB.Locales.setLocales(selectedLocales as SupportedLocale[]);
@@ -56,13 +55,13 @@
     description={$locales.get((l) => l.ui.dialog.locale)}
     button={{
         tip: $locales.get((l) => l.ui.dialog.locale.button.show),
-        label: selectedLocales.map((l) => getLocaleLanguageName(l)).join(' + '),
+        label: selectedLocales.join(' + '),
     }}
 >
     <h2
         >{concretize(
             $locales,
-            $locales.get((l) => l.ui.dialog.locale.subheader.selected)
+            $locales.get((l) => l.ui.dialog.locale.subheader.selected),
         ).toText()}</h2
     >
     <div class="languages">
@@ -80,7 +79,7 @@
     <h2
         >{concretize(
             $locales,
-            $locales.get((l) => l.ui.dialog.locale.subheader.supported)
+            $locales.get((l) => l.ui.dialog.locale.subheader.supported),
         ).toText()}</h2
     >
     <div class="supported">
@@ -103,7 +102,7 @@
     <h2
         >{concretize(
             $locales,
-            $locales.get((l) => l.ui.dialog.locale.subheader.coming)
+            $locales.get((l) => l.ui.dialog.locale.subheader.coming),
         ).toText()}</h2
     >
 
@@ -121,7 +120,7 @@
             to="https://github.com/wordplaydev/wordplay/wiki/localize"
             >{concretize(
                 $locales,
-                $locales.get((l) => l.ui.dialog.locale.subheader.help)
+                $locales.get((l) => l.ui.dialog.locale.subheader.help),
             ).toText()}</Link
         ></h2
     >