From d0dca6b853c0cbf25679aea25122b727a4399df2 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Wed, 6 Dec 2023 22:04:50 +0100
Subject: [PATCH] add structured randomized titles + make hero title wider +
 add final randomized titles in lang files

Co-authored-by: William Oldham <github@binaryoverload.co.uk>
---
 src/assets/locales/en.json        | 15 ++++++++++++---
 src/hooks/useRandomTranslation.ts | 17 ++++++++++++-----
 src/pages/parts/home/HeroPart.tsx |  2 +-
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 8d9b0b72..6e755356 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -218,9 +218,18 @@
       "stopEditing": "Stop editing"
     },
     "titles": {
-      "morning": ["Morning title"],
-      "day": ["Day title"],
-      "night": ["Night title"]
+      "morning": {
+        "default": "What would you like to watch this morning?",
+        "extra": ["I hear Before Sunrise is good"]
+      },
+      "day": {
+        "default": "What would you like to watch this afternoon?",
+        "extra": []
+      },
+      "night": {
+        "default": "What would you like to watch tonight?",
+        "extra": ["Tired? I hear The Excorcist is good."]
+      }
     },
     "search": {
       "loading": "Loading...",
diff --git a/src/hooks/useRandomTranslation.ts b/src/hooks/useRandomTranslation.ts
index 90c4cdc9..5602ddf8 100644
--- a/src/hooks/useRandomTranslation.ts
+++ b/src/hooks/useRandomTranslation.ts
@@ -1,19 +1,26 @@
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
+// 10% chance of getting a joke title
+const shouldGiveJokeTitle = () => Math.floor(Math.random() * 10) === 0;
+
 export function useRandomTranslation() {
   const { t } = useTranslation();
   const seed = useMemo(() => Math.random(), []);
 
   const getRandomTranslation = useCallback(
-    (key: string) => {
-      const res = t(key, { returnObjects: true });
+    (key: string): string => {
+      const shouldRandom = shouldGiveJokeTitle();
+      const defaultTitle = t(`${key}.default`) ?? "";
+      if (!shouldRandom) return defaultTitle;
 
-      if (Array.isArray(res)) {
-        return res[Math.floor(seed * res.length)];
+      const keys = t(`${key}.extra`, { returnObjects: true });
+      if (Array.isArray(keys)) {
+        if (keys.length === 0) return defaultTitle;
+        return keys[Math.floor(seed * keys.length)];
       }
 
-      return res;
+      return typeof keys === "string" ? keys : defaultTitle;
     },
     [t, seed]
   );
diff --git a/src/pages/parts/home/HeroPart.tsx b/src/pages/parts/home/HeroPart.tsx
index ea6e1112..871a2095 100644
--- a/src/pages/parts/home/HeroPart.tsx
+++ b/src/pages/parts/home/HeroPart.tsx
@@ -41,7 +41,7 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
     <ThinContainer>
       <div className="mt-44 space-y-16 text-center">
         <div className="relative z-10 mb-16">
-          <HeroTitle className="mx-auto max-w-xs">{title}</HeroTitle>
+          <HeroTitle className="mx-auto max-w-md">{title}</HeroTitle>
         </div>
         <div className="relative h-20 z-30">
           <Sticky