add extra functionality for lock buttons

dannybunschoten · Aug 27, 2024 · f18be68 · f18be68
1 parent e71b97b
commit f18be68
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/app/components/LockButton.tsx b/app/components/LockButton.tsx
@@ -5,11 +5,21 @@ type Props = {
   setLockedState: (state: lockButtonState) => void;
 };
 
-export type lockButtonState = "pressed" | "disabled" | "clickable";
+export type lockButtonState =
+  | "pressed"
+  | "disabledClicked"
+  | "disabledNotClicked"
+  | "clickable";
 
 export default function LockButton({ pressed, setLockedState }: Props) {
-  const startingColor = pressed === "clickable" ? "#FF7B69" : "#FFBDB4";
-  const endingColor = pressed === "clickable" ? "#760E17" : "#CF2634";
+  const startingColor =
+    pressed === "clickable" || pressed === "disabledNotClicked"
+      ? "#FF7B69"
+      : "#FFBDB4";
+  const endingColor =
+    pressed === "clickable" || pressed === "disabledNotClicked"
+      ? "#760E17"
+      : "#CF2634";
   const pressHandler = () => {
     if (pressed === "clickable") {
       setLockedState("pressed");
@@ -25,7 +35,9 @@ export default function LockButton({ pressed, setLockedState }: Props) {
         background: `radial-gradient(50% 50% at 50% 50%, ${startingColor} 0%, ${endingColor} 100%)`,
       }}
       className="rounded-lg border-2 border-black text-[36px] tracking-wider text-white transition-colors disabled:border-[#A9A9A9] disabled:bg-[#D3D3D3] disabled:text-[#D3D3D3] disabled:opacity-60"
-      disabled={pressed === "disabled"}
+      disabled={
+        pressed === "disabledClicked" || pressed === "disabledNotClicked"
+      }
       onClick={pressHandler}
     >
       Lock

diff --git a/app/page.tsx b/app/page.tsx
@@ -102,9 +102,9 @@ const initializeBoth = () => {
 export default function Home() {
   const [rollWheels, setRollWheels] = useState(initializeBoth());
   const [points, setPoints] = useState(10);
-  const [lockedWheels, setLockedWheels] = useState<
-    ("pressed" | "disabled" | "clickable")[]
-  >(Array(NUMBER_OF_WHEELS).fill("clickable"));
+  const [lockedWheels, setLockedWheels] = useState<lockButtonState[]>(
+    Array(NUMBER_OF_WHEELS).fill("clickable"),
+  );
   const isRolling = rollWheels.rollWheelOffsets.some((offset) => offset !== 0);
   const linesWithScores = WINNINGLINES.map((line) => ({
     line,
@@ -155,7 +155,7 @@ export default function Home() {
     });
 
     const newLockedWheels = lockedWheels.map((value) =>
-      value === "pressed" ? "disabled" : "clickable",
+      value === "pressed" ? "disabledClicked" : "clickable",
     );
 
     setRollWheels({ ...rollWheels, rollWheelOffsets: randomOffsets });
@@ -191,6 +191,14 @@ export default function Home() {
         rollWheelOffsets: allZeroOffsets,
       });
       setPoints((p) => p + additionalPoints);
+      setLockedWheels((locks) =>
+        locks.map((value) => {
+          if (additionalPoints > 0) {
+            return "disabledNotClicked";
+          }
+          return value === "disabledClicked" ? "disabledNotClicked" : value;
+        }),
+      );
     }, 4000);
   };
 
@@ -247,10 +255,11 @@ export default function Home() {
           <button
             onClick={handleClick}
             disabled={isRolling}
-            className="w-full rounded-lg border-2 border-black bg-red text-[36px] font-bold tracking-wider text-white transition-colors disabled:border-[#A9A9A9] disabled:bg-[#D3D3D3] disabled:text-[#D3D3D3] disabled:opacity-60"
+            className="w-full rounded-lg border-2 border-black text-[36px] font-bold tracking-wider text-white transition-colors disabled:border-[#A9A9A9] disabled:bg-[#D3D3D3] disabled:text-[#D3D3D3] disabled:opacity-60"
             style={{
               WebkitTextStroke: "4px black",
               paintOrder: "stroke fill",
+              background: `radial-gradient(50% 50% at 50% 50%, #FF7B69 0%, #760E17 100%)`,
             }}
           >
             {points === 0 && !isRolling ? "Restart" : "Roll"}