Fix issue with i18n with database_natures, add NatureChangingStatsEdi…

…tor and NatureFlavorsEditor ; Pokédex and Pokémon reversed in navigation

src/@types/react-i18n.d.ts

@@ -25,6 +25,7 @@ import database_zones from '../../assets/i18n/en/database_zones.json';
 import database_dex from '../../assets/i18n/en/database_dex.json';
 import database_maplinks from '../../assets/i18n/en/database_maplinks.json';
 import database_maps from '../../assets/i18n/en/database_maps.json';
+import database_natures from '../../assets/i18n/en/database_natures.json';
 import homepage from '../../assets/i18n/en/homepage.json';
 import main_menu from '../../assets/i18n/en/main_menu.json';
 import select from '../../assets/i18n/en/select.json';

src/models/entities/nature.ts

@@ -40,8 +40,8 @@ export const NATURE_STATS_VALIDATOR = z.object({
 });
 export type StudioNatureStats = z.infer<typeof NATURE_STATS_VALIDATOR>;
 
-export const StudioNatureStatsList = ['atk', 'dfe', 'ats', 'dfs', 'spd'] as const;
-export type StudioNatureStatsListType = (typeof StudioNatureStatsList)[number];
+export const STUDIO_NATURE_STATS_LIST = ['atk', 'dfe', 'ats', 'dfs', 'spd'] as const;
+export type StudioNatureStatsListType = (typeof STUDIO_NATURE_STATS_LIST)[number];
 
 export const FLAVOR_VALIDATOR = z.union([
  z.literal('spicy'),
@@ -52,6 +52,7 @@ export const FLAVOR_VALIDATOR = z.union([
  z.literal('none'),
 ]);
 export type StudioFlavor = z.infer<typeof FLAVOR_VALIDATOR>;
+export const FLAVOR_LIST = ['none', 'spicy', 'dry', 'sweet', 'bitter', 'sour'] as const;
 
 export const NATURE_FLAVORS_VALIDATOR = z.object({
  favourite: FLAVOR_VALIDATOR,

src/views/components/database/nature/NatureChangingStats.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { DataBlockWithTitle, DataGrid, DataFieldgroup, DataFieldgroupField } from '../dataBlocks';
-import { StudioNature, StudioNatureStatsList } from '@modelEntities/nature';
+import { StudioNature, STUDIO_NATURE_STATS_LIST } from '@modelEntities/nature';
 import { NatureDialogsRef } from './editors/NatureEditorOverlay';
 
 const showStat = (stat: number) => {
@@ -24,7 +24,7 @@ export const NatureChangingStats = ({ nature, dialogsRef }: NatureDataProps) =>
  <DataBlockWithTitle size="half" title={t('changing_stats')} onClick={() => dialogsRef?.current?.openDialog('stats')}>
  <DataGrid columns="1fr 1fr">
  <DataFieldgroup title="">
- {StudioNatureStatsList.map((stat) => (
+ {STUDIO_NATURE_STATS_LIST.map((stat) => (
  <DataFieldgroupField label={t(`changing_stat_${stat}`)} data={showStat(nature.stats[stat])} width="197px" key={`changing_stat_${stat}`} />
  ))}
  </DataFieldgroup>

src/views/components/database/nature/editors/NatureChangingStatsEditor.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react';
+import { Editor } from '@components/editor';
+import { useTranslation } from 'react-i18next';
+import { useNaturePage } from '@hooks/usePage';
+import { useUpdateNature } from './useUpdateNature';
+import { EditorHandlingClose, useEditorHandlingClose } from '@components/editor/useHandleCloseEditor';
+import { useZodForm } from '@hooks/useZodForm';
+import { useInputAttrsWithLabel } from '@hooks/useInputAttrs';
+import { InputContainer, InputFormContainer } from '@components/inputs/InputContainer';
+import { z } from 'zod';
+import { NATURE_VALIDATOR, STUDIO_NATURE_STATS_LIST, StudioNature, StudioNatureStats } from '@modelEntities/nature';
+import { cloneEntity } from '@utils/cloneEntity';
+
+const CHANGING_STATS_EDITOR_SCHEMA = NATURE_VALIDATOR.extend({
+ stats: z.object({
+ atk: z.number().min(-99).max(899),
+ dfe: z.number().min(-99).max(899),
+ ats: z.number().min(-99).max(899),
+ dfs: z.number().min(-99).max(899),
+ spd: z.number().min(-99).max(899),
+ }),
+}).pick({ stats: true });
+
+const updateStatsForEditor = (nature: StudioNature) => {
+ const clonedNature = cloneEntity(nature);
+ STUDIO_NATURE_STATS_LIST.forEach((stat) => (clonedNature.stats[stat] -= 100));
+ return clonedNature;
+};
+
+const updateStatsForNatureEntity = (stats: StudioNatureStats) => {
+ const clonedStats = cloneEntity(stats);
+ STUDIO_NATURE_STATS_LIST.forEach((stat) => (clonedStats[stat] += 100));
+ return clonedStats;
+};
+
+export const NatureChangingStatsEditor = forwardRef<EditorHandlingClose>((_, ref) => {
+ const { t } = useTranslation('database_natures');
+ const { nature } = useNaturePage();
+ const updateNature = useUpdateNature(nature);
+ const { canClose, getFormData, onInputTouched, defaults, formRef } = useZodForm(CHANGING_STATS_EDITOR_SCHEMA, updateStatsForEditor(nature));
+ const { EmbeddedUnitInput } = useInputAttrsWithLabel(CHANGING_STATS_EDITOR_SCHEMA, defaults);
+
+ const onClose = () => {
+ const result = canClose() && getFormData();
+ if (result && result.success) {
+ updateNature({ stats: updateStatsForNatureEntity(result.data.stats) });
+ }
+ };
+
+ useEditorHandlingClose(ref, onClose, canClose);
+
+ return (
+ <Editor type="edit" title={t('changing_stats')}>
+ <InputFormContainer ref={formRef} size="xs">
+ {STUDIO_NATURE_STATS_LIST.map((stat) => (
+ <EmbeddedUnitInput
+ name={`stats.${stat}`}
+ label={t(`changing_stat_${stat}`)}
+ labelLeft
+ onInput={onInputTouched}
+ key={`changing_stat_${stat}`}
+ />
+ ))}
+ </InputFormContainer>
+ </Editor>
+ );
+});
+NatureChangingStatsEditor.displayName = 'NatureChangingStatsEditor';

src/views/components/database/nature/editors/NatureEditorOverlay.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { defineEditorOverlay } from '@components/editor/EditorOverlayV2';
 import { assertUnreachable } from '@utils/assertUnreachable';
 import { DialogRefData } from '@hooks/useDialogsRef';
-import { /*NatureChangingStatsEditor,*/ NatureDeletion /*, NatureFlavorsEditor*/, NatureFrameEditor, NatureNewEditor } from '.';
+import { NatureChangingStatsEditor, NatureDeletion, NatureFlavorsEditor, NatureFrameEditor, NatureNewEditor } from '.';
 
 export type NatureEditorAndDeletionKeys = 'new' | 'frame' | 'stats' | 'flavors' | 'deletion';
 export type NatureDialogsRef = React.RefObject<DialogRefData<NatureEditorAndDeletionKeys>>;
@@ -20,7 +20,9 @@ export const NatureEditorOverlay = defineEditorOverlay<NatureEditorAndDeletionKe
  case 'frame':
  return <NatureFrameEditor ref={handleCloseRef} />;
  case 'stats':
+ return <NatureChangingStatsEditor ref={handleCloseRef} />;
  case 'flavors':
+ return <NatureFlavorsEditor ref={handleCloseRef} />;
  case 'deletion':
  return <NatureDeletion closeDialog={closeDialog} ref={handleCloseRef} />;
  default:

src/views/components/database/nature/editors/NatureFlavorsEditor.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef, useMemo } from 'react';
+import { Editor } from '@components/editor';
+import { TFunction, useTranslation } from 'react-i18next';
+import { NATURE_VALIDATOR, FLAVOR_LIST } from '@modelEntities/nature';
+import { useNaturePage } from '@hooks/usePage';
+import { useUpdateNature } from './useUpdateNature';
+import { EditorHandlingClose, useEditorHandlingClose } from '@components/editor/useHandleCloseEditor';
+import { useZodForm } from '@hooks/useZodForm';
+import { useInputAttrsWithLabel } from '@hooks/useInputAttrs';
+import { InputFormContainer } from '@components/inputs/InputContainer';
+
+const flavorEntries = (t: TFunction<'database_natures'>) => FLAVOR_LIST.map((flavor) => ({ value: flavor, label: t(flavor) }));
+
+const FLAVORS_EDITOR_SCHEMA = NATURE_VALIDATOR.pick({
+ flavors: true,
+});
+
+export const NatureFlavorsEditor = forwardRef<EditorHandlingClose>((_, ref) => {
+ const { t } = useTranslation('database_natures');
+ const { nature } = useNaturePage();
+ const updateNature = useUpdateNature(nature);
+ const { canClose, getFormData, defaults, formRef } = useZodForm(FLAVORS_EDITOR_SCHEMA, nature);
+ const { Select } = useInputAttrsWithLabel(FLAVORS_EDITOR_SCHEMA, defaults);
+ const flavorOptions = useMemo(() => flavorEntries(t), [t]);
+
+ const onClose = () => {
+ const result = canClose() && getFormData();
+ if (result && result.success) updateNature(result.data);
+ };
+
+ useEditorHandlingClose(ref, onClose, canClose);
+
+ return (
+ <Editor type="edit" title={t('flavors')}>
+ <InputFormContainer ref={formRef}>
+ <Select name="flavors.favourite" label={t('favourite_flavor')} options={flavorOptions} data-input-type="string" />
+ <Select name="flavors.detested" label={t('detested_flavor')} options={flavorOptions} data-input-type="string" />
+ </InputFormContainer>
+ </Editor>
+ );
+});
+NatureFlavorsEditor.displayName = 'NatureFlavorsEditor';

src/views/components/database/nature/editors/index.tsx

@@ -1,3 +1,5 @@
+export { NatureChangingStatsEditor } from './NatureChangingStatsEditor';
+export { NatureFlavorsEditor } from './NatureFlavorsEditor';
 export { NatureFrameEditor } from './NatureFrameEditor';
 export { NatureNewEditor } from './NatureNewEditor';
 export { NatureDeletion } from './NatureDeletion';

src/views/components/database/navigation/NavigationDatabase/NavigationDatabase.tsx

@@ -9,8 +9,8 @@ export const NavigationDatabase = () => {
  return (
  <NavigationDatabaseStyle>
  <NavigationDatabaseGroup title={t('data')}>
- <NavigationDatabaseItem path="/database/dex" label={t('dex')} />
  <NavigationDatabaseItem path="/database/pokemon" label={t('pokemon')} />
+ <NavigationDatabaseItem path="/database/dex" label={t('dex')} />
  <NavigationDatabaseItem path="/database/moves" label={t('moves')} />
  <NavigationDatabaseItem path="/database/abilities" label={t('abilities')} />
  <NavigationDatabaseItem path="/database/types" label={t('types')} />

src/views/components/selects/SelectNature.tsx

@@ -6,19 +6,19 @@ import { SelectDataProps } from './SelectDataProps';
 import { getEntityNameText } from '@utils/ReadingProjectText';
 import { Select } from '@ds/Select';
 import { SelectCustom } from '@components/SelectCustom';
-import { StudioNatureStatsList, StudioNature, StudioNatureStats, StudioNatureStatsListType } from '@modelEntities/nature';
+import { STUDIO_NATURE_STATS_LIST, StudioNature, StudioNatureStats, StudioNatureStatsListType } from '@modelEntities/nature';
 import { DbSymbol } from '@modelEntities/dbSymbol';
 
 const findUpStats = (stats: StudioNatureStats): StudioNatureStatsListType[] => {
- return StudioNatureStatsList.reduce<StudioNatureStatsListType[]>((prev, stat) => {
+ return STUDIO_NATURE_STATS_LIST.reduce<StudioNatureStatsListType[]>((prev, stat) => {
  if (stats[stat] > 100) return [...prev, stat];
 
  return prev;
  }, []);
 };
 
 const findDownStats = (stats: StudioNatureStats): StudioNatureStatsListType[] => {
- return StudioNatureStatsList.reduce<StudioNatureStatsListType[]>((prev, stat) => {
+ return STUDIO_NATURE_STATS_LIST.reduce<StudioNatureStatsListType[]>((prev, stat) => {
  if (stats[stat] < 100) return [...prev, stat];
 
  return prev;