🔀 Random locale button

index.html

@@ -262,13 +262,27 @@
               </svg>
             </div>
             <select id="locale-select">
-              <option value="en-US" data-text="en_US">English (US)</option>
-              <option value="es-ES" data-text="es_ES">Español (ES)</option>
-              <option value="pt-BR" data-text="pt_BR">Portuguese (BR)</option>
+              <option value="en-US" data-text="en_US">English</option>
+              <option value="es-ES" data-text="es_ES">Spanish</option>
+              <option value="pt-BR" data-text="pt_BR">Portuguese</option>
               <option value="fr-FR" data-text="fr_FR">French</option>
               <option value="it-IT" data-text="it_IT">Italian</option>
-              <option value="random" data-text="random">Random</option>
             </select>
+            <button id="random-locale" data-title="random">
+              <svg
+                width="15"
+                height="15"
+                fill="currentColor"
+                viewBox="0 0 6.35 6.35"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M 5.1626823 0.873125 A 0.28048656 0.28048656 0 0 0 4.8716406 1.1542448 L 4.8716406 1.4138672 L 4.0506055 1.4138672 C 3.371654 1.4138672 2.5885825 1.9564615 2.2853385 3.0881836 C 2.0374717 4.0132356 1.2583778 4.4359049 0.91446615 4.4359049 L 0.35966797 4.4359049 A 0.28045851 0.28045851 0 0 0 0.077721354 4.7145443 A 0.28045851 0.28045851 0 0 0 0.35966797 4.9964909 L 0.91446615 4.9964909 C 1.6245319 4.9964909 2.5175318 4.3860518 2.8260807 3.2345312 C 3.0792527 2.289681 3.6755793 1.9744531 4.0506055 1.9744531 L 4.8716406 1.9744531 L 4.8716406 2.1935612 A 0.28048656 0.28048656 0 0 0 5.0122005 2.4358203 A 0.28048656 0.28048656 0 0 0 5.2916667 2.4358203 L 6.1920768 1.9157487 A 0.28048656 0.28048656 0 0 0 6.1920768 1.4320573 L 5.2916667 0.91033203 A 0.28048656 0.28048656 0 0 0 5.1626823 0.873125 z M 0.35966797 1.3849284 A 0.28045851 0.28045851 0 0 0 0.077721354 1.6643945 A 0.28045851 0.28045851 0 0 0 0.35966797 1.9455143 L 0.91446615 1.9455143 C 1.1756823 1.9455143 1.6875023 2.1884015 2.0273698 2.7103255 C 2.1049387 2.496488 2.20017 2.3017184 2.3093164 2.1274154 C 1.9051585 1.6389503 1.3720578 1.3849284 0.91446615 1.3849284 L 0.35966797 1.3849284 z M 3.0493229 3.7033398 C 2.9677967 3.9095841 2.8694151 4.0982006 2.7574544 4.2680599 C 3.1260797 4.7376807 3.6102765 4.9667253 4.0506055 4.9667253 L 4.8716406 4.9667253 L 4.8716406 5.2255208 A 0.28048656 0.28048656 0 0 0 5.2916667 5.4702604 L 6.1920768 4.9485352 A 0.28048656 0.28048656 0 0 0 6.1920768 4.4640169 L 5.2916667 3.9447721 A 0.28048656 0.28048656 0 0 0 5.0122005 3.9447721 A 0.28048656 0.28048656 0 0 0 4.8716406 4.1870312 L 4.8716406 4.4044857 L 4.0506055 4.4044857 C 3.7621026 4.4044857 3.3427802 4.2189018 3.0493229 3.7033398 z "
+                />
+              </svg>
+              <span class="sr-only" data-text="random">Random</span>
+            </button>
           </span>
           <span>
             <span class="input-group">

src/modules/locales.test.ts

@@ -8,11 +8,6 @@ describe('resolveLocale', () => {
     language = vitest.spyOn(window.navigator, 'language', 'get');
   });
 
-  test('should return random', () => {
-    const locale = resolveLocale('random');
-    expect(locale).toEqual('random');
-  });
-
   test('should return dominant locale en-GB when unsupported locale en-GB is passed', () => {
     const locale = resolveLocale('en-GB');
     expect(locale).toEqual('en-US');

src/modules/locales.ts

@@ -13,23 +13,18 @@ export const DOMINANT_LOCALES: Record<string, Locale> = {
   pt: 'pt-BR',
 } as const;
 
-export function getRandomLocale(): Locale {
-  let locales = Object.keys(TRANSLATIONS) as Locale[];
+export function getRandomLocale() {
+  const locales = Object.keys(TRANSLATIONS) as Locale[];
+  const localeQuote = store.get('resolved-quote')?.locale;
 
-  const blockquote = document.getElementById('quote');
-
-  if (blockquote && blockquote.dataset.locale) {
-    locales = locales.filter((locale) => locale !== blockquote.dataset.locale);
+  if (localeQuote) {
+    locales.splice(locales.indexOf(localeQuote), 1);
   }
 
   return locales[Math.floor(Math.random() * locales.length)];
 }
 
-export function resolveLocale(locale = navigator.language): Locale | 'random' {
-  if (locale === 'random') {
-    return locale;
-  }
-
+export function resolveLocale(locale = navigator.language): Locale {
   if (locale.length === 2) {
     locale = DOMINANT_LOCALES[locale];
   }
@@ -46,45 +41,45 @@ export function resolveLocale(locale = navigator.language): Locale | 'random' {
 }
 
 export function initLocale() {
-  const locale = store.get('locale') as Locale | 'random';
+  const locale = store.get('locale');
   const localeSelect = document.querySelector<HTMLSelectElement>('#locale-select');
 
-  if (locale !== 'random') {
-    store.set('last-locale', locale);
-  }
-
-  translateStrings(locale);
   if (localeSelect) {
     localeSelect.value = locale;
   }
 
+  translateStrings(locale);
+
   localeSelect?.addEventListener('change', (e) => {
-    const languageSelectValue = (e.target as HTMLInputElement).value as Locale | 'random';
-    const isRandomLocale = languageSelectValue === 'random';
-    const locale: Locale = isRandomLocale ? store.get('last-locale') : (languageSelectValue as Locale);
+    const locale = (e.target as HTMLInputElement).value as Locale;
     translateStrings(locale);
-    store.set('locale', languageSelectValue);
+    store.set('locale', locale);
 
-    if (!isRandomLocale) {
-      store.set('last-locale', languageSelectValue);
+    if (!store.get('random-locale')) {
       updateQuote({ useIndex: true });
     }
   });
+  document.querySelector('#random-locale')?.addEventListener('click', () => {
+    const isRandomLocale = store.toggle('random-locale');
+    if (!isRandomLocale && store.get('locale') !== store.get('resolved-quote')?.locale) {
+      updateQuote({
+        useIndex: true,
+      });
+    }
+  });
 }
 
-export function getStrings(locale: Locale | 'random'): Translations {
+export function getStrings(locale: Locale): Translations {
   const resolvedLocale = resolveLocale(locale);
-  const lastLocale = store.get('last-locale') as keyof typeof TRANSLATIONS;
 
-  return TRANSLATIONS[resolvedLocale === 'random' ? lastLocale : resolvedLocale];
+  return TRANSLATIONS[resolvedLocale];
 }
 
-function translateStrings(locale: Locale | 'random') {
+function translateStrings(locale: Locale) {
   const time = getTime();
-  const lastLocale = store.get('last-locale') as keyof typeof TRANSLATIONS;
   const strings = getStrings(locale);
 
-  document.documentElement.lang = locale === 'random' ? lastLocale?.substring(0, 2) || 'en' : locale.substring(0, 2);
+  document.documentElement.lang = locale.substring(0, 2);
   document.title = `${time} - ${strings.document_title}`;
 
   document

src/modules/quotes.ts

@@ -53,13 +53,10 @@ async function getQuote(time: string, locale: Locale, useIndex: boolean = false)
   let quoteIndex = Math.floor(Math.random() * quotes.length);
 
   if (useIndex) {
-    const index = document.getElementById('quote')?.dataset.index;
+    const index = store.get('resolved-quote')?.index;
 
-    if (index) {
-      const blockquoteIndex = parseInt(index);
-      if (!isNaN(blockquoteIndex) && quotes[blockquoteIndex]) {
-        quoteIndex = blockquoteIndex;
-      }
+    if (index && quotes[index]) {
+      quoteIndex = index;
     }
   }
 
@@ -98,7 +95,7 @@ export async function updateQuote({ time = getTime(), useIndex = false } = {}) {
     return;
   }
 
-  if (store.get('locale') === 'random') {
+  if (store.get('random-locale')) {
     locale = getRandomLocale();
   }
 

src/modules/themes.ts

@@ -4,11 +4,11 @@ import { setDayParameters } from './dynamic';
 import { store } from '../store';
 
 function getRandomThemeColor() {
-  let colors = Array.from(document.querySelectorAll<HTMLOptionElement>('#colors option')).map((op) => op.value);
-  const [themePrefix] = (document.documentElement.dataset.theme || '').split('-');
+  const colors = Array.from(document.querySelectorAll<HTMLOptionElement>('#colors option')).map((op) => op.value);
+  const [theme] = store.get('theme').split('-');
 
   colors.pop();
-  colors = colors.filter((color) => color !== themePrefix);
+  colors.splice(colors.indexOf(theme), 1);
 
   return colors[Math.floor(Math.random() * colors.length)];
 }

src/store/index.ts

@@ -2,7 +2,7 @@ import { resolveLocale, DOMINANT_LOCALES } from '../modules/locales';
 import { Locale, ResolvedQuote } from '../types';
 
 interface Stateful {
-  locale: Locale | 'random';
+  locale: Locale;
   zen: boolean;
   work: boolean;
   screensaver: boolean;
@@ -11,7 +11,7 @@ interface Stateful {
   font: string;
   theme: string;
   progressbar: boolean;
-  'last-locale': Locale;
+  'random-locale': boolean;
 }
 
 export interface Stateless {
@@ -29,7 +29,7 @@ type State = Stateful & Stateless;
 
 type Listener = (newState: State, oldState: State) => void;
 
-const IGNORE_FROM_URL: (keyof State)[] = ['custom-font', 'last-locale', 'resolved-quote'];
+const IGNORE_FROM_URL: (keyof State)[] = ['custom-font', 'resolved-quote'];
 const REMOVE_VALUES_FROM_URL: Partial<State> = {
   font: 'default',
   theme: 'base-system',
@@ -77,7 +77,10 @@ export class Store {
     // Merge: URL > localStorage > defaultState
     this.state = { ...defaultState, ...stateFromLocalStorage, ...stateFromUrl };
 
-    if (!Object.keys(DOMINANT_LOCALES).includes(this.state.locale.substring(2)) || !this.state.locale.includes('-')) {
+    if (
+      !Object.keys(DOMINANT_LOCALES).includes(this.state.locale.substring(0, 2)) ||
+      !this.state.locale.includes('-')
+    ) {
       this.state.locale = resolveLocale(navigator.language);
       this.syncToUrl('locale', this.state.locale);
     }
@@ -181,10 +184,8 @@ export let store: Store;
 
 // Create the store and pass default state to constructor
 export function createStore() {
-  const locale = resolveLocale(navigator.language);
-
   store = new Store({
-    locale,
+    locale: resolveLocale(navigator.language),
     screensaver: false,
     work: false,
     zen: false,
@@ -193,6 +194,6 @@ export function createStore() {
     font: 'default',
     theme: 'base-system',
     progressbar: true,
-    'last-locale': locale === 'random' ? 'en-US' : locale,
+    'random-locale': false,
   });
 }