Updated secrets view and favicon

Author: syntax-tm

public/ico/mudkipz.ico

@@ -6,9 +6,7 @@ import { useRouter } from "next/navigation";
 import { SnackbarVariant, StatDefinition } from "types";
 import { useSnackbar } from "@context";
 import stats from "@config/settings";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { useSettingStores } from "@stores";
-import { useActiveElement } from "@hooks/useActiveElement";
 
 const CANCEL_AUDIO_SRC = '/audio/cancel.mp3';
 const TROPHY_AUDIO_SRC = '/audio/trophy.mp3';

src/app/(modal)/secrets/input/secret-input.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import { Modal, ModalMenuButton } from "@components/modal/modal";
 import SecretsView from "./secrets-view";
-import { faHandPointer } from "@fortawesome/free-solid-svg-icons";
+import { faPenToSquare } from "@fortawesome/free-solid-svg-icons";
 import "./secrets.scss";
 
 export default function SecretsPage() {
@@ -14,7 +14,7 @@ export default function SecretsPage() {
     description: '',
     url: '/secrets/input',
     controllerIcon: 'b',
-    mobileIcon: faHandPointer,
+    mobileIcon: faPenToSquare,
   };
 
   return (

src/app/(modal)/secrets/page.tsx

@@ -1,22 +1,18 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
-import { StoreApi, ExtractState } from "zustand";
 import { StorageValue } from "zustand/middleware";
 import SecretView from "./secret-view";
-import { AchievementId, achievements, secretGroups, secrets, Setting, StatGroupDefinition } from "types";
+import { AchievementId, achievements, secretGroups, secrets, StatGroupDefinition } from "types";
 import "./secrets.scss";
 import { SettingState } from "@stores";
 
 const SECRET_TAP_MIN = 5;
 
-
-
 export default function SecretsView() {
 
   const tableRef = useRef<HTMLTableElement | null>(null);
   const [activeCell, setActiveCell] = useState<[number, number]>([0, 0]);
-  //const [allUnlocked, setAllUnlocked] = useState(false);
   const allUnlocked = false;
 
   const totalRows = secrets.length;
@@ -40,10 +36,14 @@ export default function SecretsView() {
     const items = secrets.filter(s => s.type === group.type);
     if (!items) return false;
     if (!group.isHidden) return true;
-    items.forEach(i => {
-      if (isUnlocked(i.id)) return true;
+    const result = items.find(i => {
+      const id = i.id;
+      const unlocked = isUnlocked(id);
+      if (unlocked) {
+        return true;
+      }
     });
-    return false;
+    return !!result;
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTableElement>) => {

src/app/(modal)/secrets/secrets-view.tsx

@@ -11,7 +11,6 @@ import useKeyboard from "@hooks/useKeyboard";
 import ControllerIcon, { ControllerButton } from "@components/icons/controller-icon";
 import { KeyPressAction } from "types";
 import "./modal.css";
-import { useActiveElement } from "@hooks/useActiveElement";
 
 const AUDIO_SRC = '/audio/nav.mp3';
 
@@ -86,7 +85,7 @@ export function ModalClose({ menuButton }: { menuButton?: ModalMenuButton }) {
                       <Link href={menuButton.url ?? ''} onClick={onMenuItemClick}
                         className=""
                         ref={menuButtonRef}>
-                        <div className="items-center justify-items-center align-items-center inline-flex select-none my-auto">
+                        <div className="text-xl items-center justify-items-center align-items-center inline-flex select-none my-auto">
                           <div className="relative max-w-10">
                             <ControllerIcon icon={menuButton.controllerIcon} className="m-2" />
                           </div>
@@ -119,7 +118,7 @@ export function ModalClose({ menuButton }: { menuButton?: ModalMenuButton }) {
                       <Link href={menuButton.url ?? ''} onClick={menuButton.action}
                         className=""
                         ref={menuButtonRef}>
-                        <div className="items-center justify-items-center align-items-center inline-flex select-none my-auto">
+                        <div className="text-xl items-center justify-items-center align-items-center inline-flex select-none my-auto">
                           <FontAwesomeIcon icon={menuButton.mobileIcon} className="w-7 h-7 aspect-square inline-flex my-auto max-w-10" />
                           <span className="mx-2 my-auto">{menuButton.title}</span>
                         </div>
@@ -148,7 +147,7 @@ export function ModalClose({ menuButton }: { menuButton?: ModalMenuButton }) {
                       <Link href={menuButton.url ?? ''} onClick={menuButton.action}
                         className=""
                         ref={menuButtonRef}>
-                        <div className="items-center justify-items-center align-items-center inline-flex select-none my-auto">
+                        <div className="text-lg items-center justify-items-center align-items-center inline-flex select-none my-auto">
                           <kbd className="h-9 w-13 px-2 py-1.5 text-gray-800 bg-gray-100 mx-0.75 border border-gray-200 rounded-lg dark:bg-gray-400/25 dark:text-white dark:border-gray-500/25">
                             {menuButton.key.toUpperCase()}
                           </kbd>
@@ -161,8 +160,10 @@ export function ModalClose({ menuButton }: { menuButton?: ModalMenuButton }) {
                 <div className="modal-action grid text-white text-center object-center my-auto">
                   {/* need to set the href so that the user can close modal by clicking on the buttton */}
                   <Link href="/" >
-                    <div className="justify-between align-items-center text-lg hover:animate-pulse select-none my-auto">
-                      <kbd className="h-9 w-13 px-2 py-1.5 text-gray-800 bg-gray-100 mx-0.75 border border-gray-200 rounded-lg dark:bg-gray-400/25 dark:text-white dark:border-gray-500/25">Esc</kbd>
+                    <div className="text-lg items-center justify-items-center align-items-center inline-flex select-none my-auto">
+                      <kbd className="h-9 w-13 px-2 py-1.5 text-gray-800 bg-gray-100 mx-0.75 border border-gray-200 rounded-lg dark:bg-gray-400/25 dark:text-white dark:border-gray-500/25 flex">
+                        <span className="my-auto inline-block align-middle">Esc</span>
+                      </kbd>
                       <span className="mx-2 my-auto">close</span>
                     </div>
                   </Link>