bryanlundberg · bryanlundberg · Jan 9, 2024 · Jan 9, 2024 · Jan 9, 2024
diff --git a/src/components/timer/ScrambleZone.tsx b/src/components/timer/ScrambleZone.tsx
@@ -4,6 +4,8 @@ import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { useTimerStore } from "@/store/timerStore";
 import translation from "@/translations/global.json";
 import Loading from "../Loading";
+import Pencil from "@/icons/Pencil";
+import { AnimatePresence, motion } from "framer-motion";
 
 export function ScrambleZone() {
   const {
@@ -14,6 +16,7 @@ export function ScrambleZone() {
     setHints,
     initializing,
     isSolving,
+    setCustomScramble,
   } = useTimerStore();
   const { lang, settings } = useSettingsModalStore();
 
@@ -39,24 +42,49 @@ export function ScrambleZone() {
             </div>
           )}
         </div>
+        <AnimatePresence>
+          {selectedCube?.category && !isSolving && !displayHint && (
+            <motion.div
+              initial={{ opacity: 0.1 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0.1 }}
+              className="absolute bottom-0 right-0 cursor-pointer duration-300 transition translate-y-10 flex gap-3"
+            >
+              <div
+                onClick={() => {
+                  const newScramble = window.prompt(
+                    `${translation.solves["enter-custom-scramble"][lang]}`
+                  );
+                  if (newScramble?.trim()) {
+                    setCustomScramble(newScramble);
+                  }
+                }}
+                className="hover:scale-105 light:hover:text-neutral-500 dark:hover:text-neutral-200 duration-200 transition"
+              >
+                <Pencil />
+              </div>
 
-        {selectedCube &&
-        (selectedCube.category === "3x3" ||
-          selectedCube.category === "3x3 OH") &&
-        !displayHint &&
-        !isSolving ? (
-          <div
-            onClick={() => {
-              setDisplayHint(true);
-              genSolution(selectedCube.category, scramble, "yellow").then(
-                (res: CrossSolutions) => setHints(res)
-              );
-            }}
-            className="absolute bottom-0 right-0 cursor-pointer hover:text-yellow-400 duration-300 transition translate-y-10 hover:scale-105"
-          >
-            <LightBulb />
-          </div>
-        ) : null}
+              {selectedCube?.category &&
+                ["3x3", "3x3 OH"].includes(selectedCube.category) &&
+                !displayHint &&
+                !isSolving && (
+                  <div
+                    onClick={() => {
+                      setDisplayHint(true);
+                      genSolution(
+                        selectedCube.category,
+                        scramble,
+                        "yellow"
+                      ).then((res: CrossSolutions) => setHints(res));
+                    }}
+                    className="hover:scale-105 hover:text-yellow-600 duration-200 transition"
+                  >
+                    <LightBulb />
+                  </div>
+                )}
+            </motion.div>
+          )}
+        </AnimatePresence>
       </div>
     </>
   );

diff --git a/src/icons/LightBulb.tsx b/src/icons/LightBulb.tsx
@@ -2,16 +2,15 @@ export default function LightBulb() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      fill="none"
       viewBox="0 0 24 24"
-      strokeWidth={1.5}
-      stroke="currentColor"
+      fill="currentColor"
       className="w-6 h-6"
     >
+      <path d="M12 .75a8.25 8.25 0 0 0-4.135 15.39c.686.398 1.115 1.008 1.134 1.623a.75.75 0 0 0 .577.706c.352.083.71.148 1.074.195.323.041.6-.218.6-.544v-4.661a6.714 6.714 0 0 1-.937-.171.75.75 0 1 1 .374-1.453 5.261 5.261 0 0 0 2.626 0 .75.75 0 1 1 .374 1.452 6.712 6.712 0 0 1-.937.172v4.66c0 .327.277.586.6.545.364-.047.722-.112 1.074-.195a.75.75 0 0 0 .577-.706c.02-.615.448-1.225 1.134-1.623A8.25 8.25 0 0 0 12 .75Z" />
       <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
+        fillRule="evenodd"
+        d="M9.013 19.9a.75.75 0 0 1 .877-.597 11.319 11.319 0 0 0 4.22 0 .75.75 0 1 1 .28 1.473 12.819 12.819 0 0 1-4.78 0 .75.75 0 0 1-.597-.876ZM9.754 22.344a.75.75 0 0 1 .824-.668 13.682 13.682 0 0 0 2.844 0 .75.75 0 1 1 .156 1.492 15.156 15.156 0 0 1-3.156 0 .75.75 0 0 1-.668-.824Z"
+        clipRule="evenodd"
       />
     </svg>
   );

diff --git a/src/icons/Pencil.tsx b/src/icons/Pencil.tsx
@@ -0,0 +1,12 @@
+export default function Pencil() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className="w-6 h-6"
+    >
+      <path d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z" />
+    </svg>
+  );
+}
diff --git a/src/store/timerStore.ts b/src/store/timerStore.ts
@@ -30,6 +30,7 @@ type TimerStore = {
   setZoomInScramble: (status: boolean) => void;
   setHints: (solutions: CrossSolutions) => void;
   setInitializing: (status: boolean) => void;
+  setCustomScramble: (scramble: string) => void;
 };
 
 export const useTimerStore = create<TimerStore>((set) => ({
@@ -48,6 +49,9 @@ export const useTimerStore = create<TimerStore>((set) => ({
   setNewScramble: (cube: Cube | null) => {
     set({ scramble: cube ? genScramble(cube.category) : null });
   },
+  setCustomScramble: (scramble: string) => {
+    set({ scramble: scramble });
+  },
   setCubes: (cubes: Cube[]) => {
     set({ cubes });
   },

diff --git a/src/translations/global.json b/src/translations/global.json
@@ -1572,6 +1572,39 @@
       "fil": "Alisin",
       "et": "Eemalda"
     },
+    "enter-custom-scramble": {
+      "en": "Enter a custom scramble",
+      "es": "Ingrese una mezcla personalizada",
+      "fr": "Entrez une séquence personnalisée",
+      "de": "Geben Sie eine benutzerdefinierte Anordnung ein",
+      "ja": "カスタムスクランブルを入力",
+      "zh": "输入自定义混淆",
+      "ru": "Введите пользовательское перемешивание",
+      "hi": "कस्टम स्क्रैम्बल दर्ज करें",
+      "pt": "Inserir uma mistura personalizada",
+      "it": "Inserisci una disposizione personalizzata",
+      "ko": "사용자 정의 섞기 입력",
+      "nl": "Voer een aangepaste volgorde in",
+      "sv": "Ange en anpassad blandning",
+      "tr": "Özel bir karışım girin",
+      "pl": "Wprowadź niestandardowe ułożenie",
+      "vi": "Nhập một sự xáo trộn tùy chỉnh",
+      "th": "ป้อนการสลับที่กำหนดเอง",
+      "el": "Εισαγάγετε ένα προσαρμοσμένο ανακάτεμα",
+      "fi": "Kirjoita mukautettu sekoitus",
+      "uk": "Введіть власний сплутування",
+      "cs": "Zadejte vlastní promíchání",
+      "ro": "Introduceți o amestecare personalizată",
+      "no": "Skriv inn en tilpasset miks",
+      "da": "Indtast en brugerdefineret forvirring",
+      "ms": "Masukkan percampuran kustom",
+      "hu": "Írjon be egyéni összekeverést",
+      "id": "Masukkan acakan kustom",
+      "bn": "একটি কাস্টম ছড়িয়ে দিন",
+      "sk": "Zadajte vlastný zmätok",
+      "fil": "Maglagay ng kakaibang kalituhan",
+      "et": "Sisestage kohandatud segadus"
+    },
     "enter-a-comment": {
       "en": "Enter a comment",
       "es": "Ingresar un comentario",