Merge branch 'main' into patch-2

wordplaydev · Dec 17, 2024 · a0c201b · a0c201b
2 parents 9ca6610 + 5fbc10a
commit a0c201b
Show file tree

Hide file tree

Showing 23 changed files with 335 additions and 133 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,12 @@
 We'll note all notable changes in this file, including bug fixes, enhancements, and all closed issues.
 Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http://semver.org/) format.
 
+## 0.13.3 2024-12-14
+
+### Added
+
+- Added ability to change user interface font to one of the supported fonts.
+
 ## 0.13.2 2024-12-09
 
 ### Added

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "wordplay",
-    "version": "0.13.1",
+    "version": "0.13.3",
     "scripts": {
         "postinstall": "run-script-os",
         "postinstall:default": "svelte-kit sync && cp .env.template .env",

diff --git a/src/app.html b/src/app.html
@@ -275,10 +275,6 @@
                 background-color: var(--wordplay-background);
                 padding: 0;
                 margin: 0;
-                font-family: var(--wordplay-app-font);
-                font-weight: var(--wordplay-font-weight);
-                font-size: var(--wordplay-font-size);
-                color: var(--wordplay-foreground);
             }
 
             html {
@@ -369,6 +365,14 @@
                 width: 50%;
                 text-align: center;
             }
+
+            hr {
+                width: 100%;
+                height: var(--wordplay-border-width);
+                border: none;
+                border-bottom: var(--wordplay-border-width) solid
+                    var(--wordplay-border-color);
+            }
         </style>
 
         %sveltekit.head%

diff --git a/src/basis/Fonts.ts b/src/basis/Fonts.ts
@@ -599,6 +599,7 @@ export class FontManager {
 const Fonts = new FontManager();
 export default Fonts;
 
+/** The Wordplay text union type representing all valid font face names. */
 export const SupportedFontsFamiliesType = SupportedFaces.map(
     (font) => `"${font}"`,
 ).join(OR_SYMBOL);
diff --git a/src/components/settings/Settings.svelte b/src/components/settings/Settings.svelte
@@ -22,6 +22,8 @@
     import CreatorView from '../app/CreatorView.svelte';
     import { Creator } from '../../db/CreatorDatabase';
     import { AnimationFactorIcons } from '@db/AnimationFactorSetting';
+    import { SupportedFaces } from '@basis/Fonts';
+    import { FaceSetting } from '@db/FaceSetting';
 
     let user = getUser();
 
@@ -71,109 +73,144 @@
         }}
         description={$locales.get((l) => l.ui.dialog.settings)}
     >
-        <Mode
-            descriptions={$locales.get((l) => l.ui.dialog.settings.mode.layout)}
-            choice={$arrangement === Arrangement.Responsive
-                ? 0
-                : $arrangement === Arrangement.Horizontal
-                  ? 1
-                  : $arrangement === Arrangement.Vertical
-                    ? 2
-                    : 3}
-            select={(choice) =>
-                Settings.setArrangement(
-                    choice == 0
-                        ? Arrangement.Responsive
-                        : choice === 1
-                          ? Arrangement.Horizontal
-                          : choice === 2
-                            ? Arrangement.Vertical
-                            : Arrangement.Free,
-                )}
-            modes={['📐', '↔️', '↕', '⏹️']}
-        />
-        <Mode
-            descriptions={$locales.get(
-                (l) => l.ui.dialog.settings.mode.animate,
-            )}
-            choice={$animationFactor}
-            select={(choice) => Settings.setAnimationFactor(choice)}
-            modes={AnimationFactorIcons}
-        />
-        {#if devicesRetrieved}
-            <label for="camera-setting">
-                🎥
+        <hr />
+        <div class="controls">
+            <label for="ui-face">
+                {$locales.get((l) => l.ui.dialog.settings.options.face)}
                 <Options
-                    value={cameraDevice?.label}
+                    value={FaceSetting.get() ?? 'Noto Sans'}
                     label={$locales.get(
-                        (l) => l.ui.dialog.settings.options.camera,
+                        (l) => l.ui.dialog.settings.options.face,
                     )}
-                    id="camera-setting"
+                    id="ui-face"
                     options={[
                         { value: undefined, label: '—' },
-                        ...cameras.map((device) => {
+                        ...SupportedFaces.map((face) => {
                             return {
-                                value: device.label,
-                                label: device.label,
+                                value: face,
+                                label: face,
                             };
                         }),
                     ]}
                     change={(choice) =>
-                        Settings.setCamera(
-                            cameras.find((camera) => camera.label === choice)
-                                ?.deviceId ?? null,
-                        )}
-                    width="4em"
-                />
+                        Settings.setFace(choice === undefined ? null : choice)}
+                ></Options>
             </label>
-            <label for="mic-setting">
-                🎤
-                <Options
-                    value={micDevice?.label}
-                    label={$locales.get(
-                        (l) => l.ui.dialog.settings.options.mic,
+            <Mode
+                descriptions={$locales.get(
+                    (l) => l.ui.dialog.settings.mode.layout,
+                )}
+                choice={$arrangement === Arrangement.Responsive
+                    ? 0
+                    : $arrangement === Arrangement.Horizontal
+                      ? 1
+                      : $arrangement === Arrangement.Vertical
+                        ? 2
+                        : 3}
+                select={(choice) =>
+                    Settings.setArrangement(
+                        choice == 0
+                            ? Arrangement.Responsive
+                            : choice === 1
+                              ? Arrangement.Horizontal
+                              : choice === 2
+                                ? Arrangement.Vertical
+                                : Arrangement.Free,
                     )}
-                    id="mic-setting"
-                    options={[
-                        { value: undefined, label: '—' },
-                        ...mics.map((device) => {
-                            return {
-                                value: device.label,
-                                label: device.label,
-                            };
-                        }),
-                    ]}
-                    change={(choice) =>
-                        Settings.setMic(
-                            mics.find((mic) => mic.label === choice)
-                                ?.deviceId ?? null,
+                modes={['📐', '↔️', '↕', '⏹️']}
+            />
+            <Mode
+                descriptions={$locales.get(
+                    (l) => l.ui.dialog.settings.mode.animate,
+                )}
+                choice={$animationFactor}
+                select={(choice) => Settings.setAnimationFactor(choice)}
+                modes={AnimationFactorIcons}
+            />
+            {#if devicesRetrieved}
+                <label for="camera-setting">
+                    🎥
+                    <Options
+                        value={cameraDevice?.label}
+                        label={$locales.get(
+                            (l) => l.ui.dialog.settings.options.camera,
                         )}
-                    width="4em"
-                />
-            </label>
-        {/if}
-        <Mode
-            descriptions={$locales.get((l) => l.ui.dialog.settings.mode.dark)}
-            choice={$dark === false ? 0 : $dark === true ? 1 : 2}
-            select={(choice) =>
-                Settings.setDark(
-                    choice === 0 ? false : choice === 1 ? true : null,
+                        id="camera-setting"
+                        options={[
+                            { value: undefined, label: '—' },
+                            ...cameras.map((device) => {
+                                return {
+                                    value: device.label,
+                                    label: device.label,
+                                };
+                            }),
+                        ]}
+                        change={(choice) =>
+                            Settings.setCamera(
+                                cameras.find(
+                                    (camera) => camera.label === choice,
+                                )?.deviceId ?? null,
+                            )}
+                        width="4em"
+                    />
+                </label>
+                <label for="mic-setting">
+                    🎤
+                    <Options
+                        value={micDevice?.label}
+                        label={$locales.get(
+                            (l) => l.ui.dialog.settings.options.mic,
+                        )}
+                        id="mic-setting"
+                        options={[
+                            { value: undefined, label: '—' },
+                            ...mics.map((device) => {
+                                return {
+                                    value: device.label,
+                                    label: device.label,
+                                };
+                            }),
+                        ]}
+                        change={(choice) =>
+                            Settings.setMic(
+                                mics.find((mic) => mic.label === choice)
+                                    ?.deviceId ?? null,
+                            )}
+                        width="4em"
+                    />
+                </label>
+            {/if}
+            <Mode
+                descriptions={$locales.get(
+                    (l) => l.ui.dialog.settings.mode.dark,
                 )}
-            modes={['☼', '☽', '☼/☽']}
-        />
+                choice={$dark === false ? 0 : $dark === true ? 1 : 2}
+                select={(choice) =>
+                    Settings.setDark(
+                        choice === 0 ? false : choice === 1 ? true : null,
+                    )}
+                modes={['☼', '☽', '☼/☽']}
+            />
 
-        <Mode
-            descriptions={$locales.get((l) => l.ui.dialog.settings.mode.space)}
-            choice={$spaceIndicator ? 1 : 0}
-            select={(choice) => Settings.setSpace(choice === 1 ? true : false)}
-            modes={['✗', '✓']}
-        />
-        <Mode
-            descriptions={$locales.get((l) => l.ui.dialog.settings.mode.lines)}
-            choice={$showLines ? 1 : 0}
-            select={(choice) => Settings.setLines(choice === 1 ? true : false)}
-            modes={['✗', '✓']}
-        />
+            <Mode
+                descriptions={$locales.get(
+                    (l) => l.ui.dialog.settings.mode.space,
+                )}
+                choice={$spaceIndicator ? 1 : 0}
+                select={(choice) =>
+                    Settings.setSpace(choice === 1 ? true : false)}
+                modes={['✗', '✓']}
+            />
+            <Mode
+                descriptions={$locales.get(
+                    (l) => l.ui.dialog.settings.mode.lines,
+                )}
+                choice={$showLines ? 1 : 0}
+                select={(choice) =>
+                    Settings.setLines(choice === 1 ? true : false)}
+                modes={['✗', '✓']}
+            />
+        </div>
     </Dialog>
 </div>
 
@@ -186,7 +223,15 @@
         margin-inline-start: auto;
     }
 
+    .controls {
+        display: flex;
+        flex-direction: column;
+        gap: calc(2 * var(--wordplay-spacing));
+        align-items: baseline;
+    }
+
     label {
         white-space: nowrap;
+        font-style: italic;
     }
 </style>
diff --git a/src/conflicts/UnknownName.ts b/src/conflicts/UnknownName.ts
@@ -18,6 +18,46 @@ export class UnknownName extends Conflict {
         this.type = type;
     }
 
+    levenshtein(a: string, b: string): number {
+        // convert both input strings to lowercase to perform check case-insensitively
+        a = a.toLowerCase()
+        b = b.toLowerCase()
+
+        const an = a ? a.length : 0;
+        const bn = b ? b.length : 0;
+        if (an === 0) {
+            return bn;
+        }
+        if (bn === 0) {
+            return an;
+        }
+
+        const matrix = new Array<number[]>(bn + 1);
+        for (let i = 0; i <= bn; ++i) {
+            let row = matrix[i] = new Array<number>(an + 1);
+            row[0] = i;
+        }
+        const firstRow = matrix[0];
+        for (let j = 1; j <= an; ++j) {
+            firstRow[j] = j;
+        }
+        for (let i = 1; i <= bn; ++i) {
+            for (let j = 1; j <= an; ++j) {
+                if (b.charAt(i - 1) === a.charAt(j - 1)) {
+                    matrix[i][j] = matrix[i - 1][j - 1];
+                }
+                else {
+                    matrix[i][j] = Math.min(
+                        matrix[i - 1][j - 1], // substitution
+                        matrix[i][j - 1], // insertion
+                        matrix[i - 1][j] // deletion
+                    ) + 1;
+                }
+            }
+        }
+        return matrix[bn][an];
+    };
+
     getConflictingNodes(context: Context) {
         let names: Refer[] = [];
         if (this.name instanceof Reference) {
@@ -27,6 +67,18 @@ export class UnknownName extends Conflict {
                 false,
                 context,
             );
+
+            const userInput: string = this.name.name.text.text // unknown name input by user
+            const maxNames: number = 50; // the maximum number of names we want to check edit distance for (cap for performance)
+            names.splice(maxNames) // truncate the names array after the desired amount
+
+            for (let i = names.length-1; i >= 0; i--) {
+                const currName: string = names[i].definition.names.names[0].name.text.text // get name in string form from Refer object
+
+                if (this.levenshtein(userInput, currName) > 1) { // check if levenshtein distance is greater than 1
+                    names.splice(i, 1) // remove dissimilar names
+                }
+            };
         }
 
         return {