🔀 Merge pull request #27 from AssistantApps/develop

🔖 2.0.17
AssistantApps · Oct 8, 2024 · 0939c9a · 0939c9a
2 parents 2151145 + 1825693
commit 0939c9a
Show file tree

Hide file tree

Showing 12 changed files with 549 additions and 345 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cassette-beasts-extract",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "description": "Website generated from data & images extracted from the Cassette Beasts",
   "scripts": {
     "dev": "astro dev",

diff --git a/src/assets/json/language.json b/src/assets/json/language.json
@@ -10247,6 +10247,7 @@
       "about": "About",
       "donation": "Donation",
       "patreon": "Patreon",
+      "noItems": "No Items",
       "privacyPolicy": "Privacy Policy",
       "termsAndConditions": "Terms and Conditions",
       "legalNotice": "This app is not affiliated with, authorised by {0}, its subsidiaries, or its parent companies, whose names, logos and products are displayed in this app. The names {1}, {0} as well as related names and images are registered trademarks of their respective owners. This app is made by fan(s) for fans. Please do not reach out to {0} about bugs within this app",
@@ -10270,7 +10271,7 @@
       "overworld": "Overworld",
       "percentTitle": "Percent",
       "backup": "Backup",
-      "hashCode": "DD60E6122DAFA520C0A44C8495C03D1B"
+      "hashCode": "F74C7E45020BF36589D797C7FC10877B"
     }
   },
   "fr_FR": {
@@ -20521,6 +20522,7 @@
       "about": "À propos",
       "donation": "Dons",
       "patreon": "Devenez un Patreon",
+      "noItems": "Pas d'objet",
       "privacyPolicy": "Politique privée",
       "termsAndConditions": "Conditions d'utilisations",
       "legalNotice": "This app is not affiliated with, authorised by {0}, its subsidiaries, or its parent companies, whose names, logos and products are displayed in this app. The names {1}, {0} as well as related names and images are registered trademarks of their respective owners. This app is made by fan(s) for fans. Please do not reach out to {0} about bugs within this app",
@@ -20544,7 +20546,7 @@
       "overworld": "Overworld",
       "percentTitle": "Pourcentage",
       "backup": "Sauvegarde",
-      "hashCode": "4BE58511701A2930419507B38BC52D14"
+      "hashCode": "7B02C3DF5408850FEF737CE7DEA0476B"
     }
   },
   "it_IT": {
@@ -30795,6 +30797,7 @@
       "about": "Info",
       "donation": "Donazione",
       "patreon": "Patreon",
+      "noItems": "Nessun Oggetto",
       "privacyPolicy": "Politica sulla Riservatezza",
       "termsAndConditions": "Termini e Condizioni",
       "legalNotice": "Questa app non è affiliata, autorizzata da {0}, le sue filiali, o le sue società madri, i cui nomi, loghi e prodotti vengono visualizzati in questa app. I nomi {1}, {0} così come i nomi e le immagini correlati sono marchi registrati dei rispettivi proprietari. Questa app è creata dai fan per i fan. Non contattare {0} in merito ai bug presenti in questa app",
@@ -30818,7 +30821,7 @@
       "overworld": "Overworld",
       "percentTitle": "Percentuale",
       "backup": "Backup",
-      "hashCode": "31D4BD83C31D6F96D8CEA3C839924C5B"
+      "hashCode": "E4CED00E42135754764EC99E37F50960"
     }
   },
   "de_DE": {
@@ -41069,6 +41072,7 @@
       "about": "Über",
       "donation": "Spenden",
       "patreon": "Patreon",
+      "noItems": "Keine Items",
       "privacyPolicy": "Datenschutz-Bestimmungen",
       "termsAndConditions": "Allgemeine Geschäftsbedingungen",
       "legalNotice": "Diese App ist nicht mit {0}, dessen Tochtergesellschaften oder Muttergesellschaften, deren Namen, Logos und Produkten, die in dieser App angezeigt werden, verbunden oder von ihnen autorisiert. Die Namen {1}, {0} sowie verwandte Namen und Bilder sind eingetragene Warenzeichen ihrer jeweiligen Eigentümer. Diese App wird von Fans für Fans gemacht. Bitte wende dich nicht an {0} wegen Fehlern in dieser App.",
@@ -41092,7 +41096,7 @@
       "overworld": "Oberwelt",
       "percentTitle": "Prozent",
       "backup": "Sicherung",
-      "hashCode": "0C95B36340605DB36834D3255B2EF237"
+      "hashCode": "3039354B9361594EA9623AD4A9A9786D"
     }
   },
   "es_ES": {
@@ -51343,6 +51347,7 @@
       "about": "Acerca de",
       "donation": "Donación",
       "patreon": "Patreon",
+      "noItems": "No hay artículos",
       "privacyPolicy": "Política de privacidad",
       "termsAndConditions": "Términos y Condiciones",
       "legalNotice": "Esta aplicación no está afiliada ni autorizada por {0}, sus subsidiarias ni sus empresas matrices, cuyos nombres, logotipos y productos se muestran en esta aplicación. Los nombres {1}, {0} así como los nombres e imágenes relacionados son marcas comerciales registradas de sus respectivos propietarios. Esta aplicación está hecha por fans para fans. No contactes a {0} sobre errores dentro de esta aplicación.",
@@ -51366,7 +51371,7 @@
       "overworld": "Supramundo",
       "percentTitle": "Porcentaje",
       "backup": "Copia de seguridad",
-      "hashCode": "5C6996CD9FCEB11E3E7D06F2389357F7"
+      "hashCode": "6E7B941B70CA16B5791B246347EC7678"
     }
   },
   "zh_CN": {
@@ -61617,6 +61622,7 @@
       "about": "关于",
       "donation": "资助作者",
       "patreon": "Patreon",
+      "noItems": "无物品",
       "privacyPolicy": "隐私政策",
       "termsAndConditions": "条款和条件",
       "legalNotice": "This app is not affiliated with, authorised by {0}, its subsidiaries, or its parent companies, whose names, logos and products are displayed in this app. The names {1}, {0} as well as related names and images are registered trademarks of their respective owners. This app is made by fan(s) for fans. Please do not reach out to {0} about bugs within this app",
@@ -61640,7 +61646,7 @@
       "overworld": "世界大事",
       "percentTitle": "百分比",
       "backup": "备份",
-      "hashCode": "5EA56B7AAAC697C0B082711C71E273F4"
+      "hashCode": "3AD69293BBD62B9E3C07F0FA78BB4CFF"
     }
   },
   "ja_JP": {
@@ -71891,6 +71897,7 @@
       "about": "Appについて",
       "donation": "寄付",
       "patreon": "Patreon",
+      "noItems": "No Items",
       "privacyPolicy": "プライバシーポリシー",
       "termsAndConditions": "利用規約",
       "legalNotice": "This app is not affiliated with, authorised by {0}, its subsidiaries, or its parent companies, whose names, logos and products are displayed in this app. The names {1}, {0} as well as related names and images are registered trademarks of their respective owners. This app is made by fan(s) for fans. Please do not reach out to {0} about bugs within this app",
@@ -71914,7 +71921,7 @@
       "overworld": "オーバーワールド",
       "percentTitle": "パーセント",
       "backup": "バックアップ",
-      "hashCode": "4F6CD74946B3D26F34171A7829C43F9C"
+      "hashCode": "CC5BBDDD7333AAD83389052E635DE59C"
     }
   },
   "ko_KR": {
@@ -82165,6 +82172,7 @@
       "about": "개발자 정보",
       "donation": "기부하기",
       "patreon": "Patreon",
+      "noItems": "아이템 없음",
       "privacyPolicy": "개인 정보 정책",
       "termsAndConditions": "이용약관",
       "legalNotice": "This app is not affiliated with, authorised by {0}, its subsidiaries, or its parent companies, whose names, logos and products are displayed in this app. The names {1}, {0} as well as related names and images are registered trademarks of their respective owners. This app is made by fan(s) for fans. Please do not reach out to {0} about bugs within this app",
@@ -82188,7 +82196,7 @@
       "overworld": "오버월드",
       "percentTitle": "퍼센트",
       "backup": "백업",
-      "hashCode": "B63C5F819931B972025865D8E4FA8CE5"
+      "hashCode": "6B4A6F963F995A74E3B7B1CF40716677"
     }
   },
   "es_MX": {
@@ -92439,6 +92447,7 @@
       "about": "Acerca de",
       "donation": "Donación",
       "patreon": "Patreon",
+      "noItems": "No hay artículos",
       "privacyPolicy": "Política de privacidad",
       "termsAndConditions": "Términos y Condiciones",
       "legalNotice": "Esta aplicación no está afiliada ni autorizada por {0}, sus subsidiarias ni sus empresas matrices, cuyos nombres, logotipos y productos se muestran en esta aplicación. Los nombres {1}, {0} así como los nombres e imágenes relacionados son marcas comerciales registradas de sus respectivos propietarios. Esta aplicación está hecha por fans para fans. No contactes a {0} sobre errores dentro de esta aplicación.",
@@ -92462,7 +92471,7 @@
       "overworld": "Supramundo",
       "percentTitle": "Porcentaje",
       "backup": "Copia de seguridad",
-      "hashCode": "5C6996CD9FCEB11E3E7D06F2389357F7"
+      "hashCode": "6E7B941B70CA16B5791B246347EC7678"
     }
   },
   "pt_BR": {
@@ -102713,6 +102722,7 @@
       "about": "Sobre",
       "donation": "Doação",
       "patreon": "Patreon",
+      "noItems": "Sem Itens",
       "privacyPolicy": "Política de Privacidade",
       "termsAndConditions": "Termos e Condições",
       "legalNotice": "This app is not affiliated with, authorised by {0}, its subsidiaries, or its parent companies, whose names, logos and products are displayed in this app. The names {1}, {0} as well as related names and images are registered trademarks of their respective owners. This app is made by fan(s) for fans. Please do not reach out to {0} about bugs within this app",
@@ -102736,7 +102746,7 @@
       "overworld": "Overworld",
       "percentTitle": "Porcentagem",
       "backup": "Backup",
-      "hashCode": "EA38365536FC349E3779D72957104430"
+      "hashCode": "07516851C0F03902B7FE62E6C6BED36D"
     }
   }
 }
diff --git a/src/assets/json/version.json b/src/assets/json/version.json
@@ -1,5 +1,5 @@
 {
   "commit_tag": "1.6.2",
   "commit_sha": "103d1183",
-  "app_version": "2.0.14"
+  "app_version": "2.0.17"
 }
diff --git a/src/components/monster/MonsterDropdown.tsx b/src/components/monster/MonsterDropdown.tsx
@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import React, { createRef, useEffect, useState } from 'react';
 
 import { UIKeys } from 'constants/localisation';
 import type { IMonsterFormDropdown } from 'contracts/monsterForm';
@@ -12,42 +12,85 @@ interface IProps {
 }
 
 export const MonsterDropdown: React.FC<IProps> = (props: IProps) => {
-  let detailRef = createRef<HTMLDetailsElement>();
+  let inputRef = createRef<HTMLInputElement>();
+  const [search, setSearch] = useState<string>('');
+  const [isFocused, setFocused] = useState<boolean>(false);
+  const [filteredMonsters, setFilteredMonsters] = useState<Array<IMonsterFormDropdown>>([]);
+
+  useEffect(() => {
+    setFilteredMonsters(props.monsters);
+  }, [])
+
+  const openDropDown = () => {
+    if (isFocused) return;
+
+    setFocused(true);
+    const inputCurrent = inputRef.current;
+    setTimeout(() => {
+      inputCurrent!.focus();
+    }, 250)
+  }
+
   const renderMonster = (monster: IMonsterFormDropdown): JSX.Element => (
     <>
       <img src={imgUrl(monster.icon)} alt={monster.name} loading="lazy" />
       <p>{monster.name}</p>
     </>
   );
 
-  const onMonsterClick = (monster: IMonsterFormDropdown) => {
-    if (detailRef != null && detailRef.current != null) {
-      detailRef.current.removeAttribute('open');
-    }
+  const onSearchText = (inputText: any) => {
+    const text = (inputText.target?.value ?? '');
+    const monsters = props.monsters.filter(mon => mon.name.toLocaleLowerCase().includes(text.toLocaleLowerCase()));
+    setFilteredMonsters(monsters);
+    setSearch(text);
+  };
 
+  const onMonsterClick = (monster: IMonsterFormDropdown) => {
     props.selectMonster(monster);
+    setFocused(false);
+    setSearch('');
+    setFilteredMonsters(props.monsters);
   };
 
   return (
-    <details ref={detailRef} className="monster dropdown">
-      <summary>
-        {props.selectedMonster != null ? (
-          <div className="monster-option selected">{renderMonster(props.selectedMonster)}</div>
-        ) : (
-          props.translate[UIKeys.viewMonsters]
-        )}
-      </summary>
-      <ul>
-        {props.monsters.map((monster) => (
-          <li
-            key={monster.id}
-            className="monster-option noselect"
-            onClick={() => onMonsterClick(monster)}
-          >
-            {renderMonster(monster)}
-          </li>
-        ))}
+    <div className={"monster dropdown" + (isFocused ? ' open' : '')}>
+      <div className="dropdown-backdrop noselect" onClick={() => setFocused(false)}></div>
+      {(props.selectedMonster != null && isFocused == false) && (
+        <div className="fake-input noselect">
+          <div className="monster-option selected" onClick={openDropDown}>
+            {renderMonster(props.selectedMonster)}
+          </div>
+        </div>
+      )}
+      <input
+        type="text"
+        ref={inputRef}
+        className={"dropdown-input " + ((props.selectedMonster != null && isFocused == false) ? 'hidden' : '')}
+        placeholder={props.translate[UIKeys.viewMonsters]}
+        value={search}
+        onFocus={openDropDown}
+        onInput={onSearchText}
+      ></input>
+      <ul className="noselect">
+        {
+          (filteredMonsters.length > 0) ? (
+            <>
+              {filteredMonsters.map((monster) => (
+                <li
+                  key={monster.id}
+                  className="monster-option noselect"
+                  onClick={() => onMonsterClick(monster)}
+                >
+                  {renderMonster(monster)}
+                </li>
+              ))}
+            </>
+          ) : (
+            <li className="monster-option disabled noselect">
+              {props.translate['noItems']}...
+            </li>)
+        }
       </ul>
-    </details>
+    </div>
   );
 };