IV: Change info icon to warning when current level or field is set

src/i18n/en.json

@@ -193,6 +193,7 @@
         "strength2": "Strength",
         "rating": "Rating",
 
+        "go to strength tab to show the current condition values": "Please go to the [$t(strength2)] tab to display the strength, ingredients and skill count corresponding to the current conditions.",
         "strength, ingredients, skill count": "Strength, ingredients and skill count",
         "the amount under the following condition": "We are showing the amount under the following conditions.",
         "use strength tab if you want to change these condition": "If you want to change these conditions, please use the [$t(strength2)] tab.",        "helps per 5 hours": "Helps per 5 hours",

src/i18n/ja.json

@@ -184,6 +184,7 @@
         "strength2": "エナジー",
         "rating": "個体評価",
 
+        "go to strength tab to show the current condition values": "現在の条件でのエナジー、食材数、スキル回数を表示するには、[$t(strength2)] タブに移動してください。",
         "strength, ingredients, skill count": "エナジー、食材数、スキル回数",
         "the amount under the following condition": "次の条件のときの量を表示しています。",
         "use strength tab if you want to change these condition": "これらの条件を変えたい場合は、[$t(strength2)] タブを利用してください。",

src/i18n/ko.json

@@ -179,6 +179,7 @@
         "strength2": "에너지",
         "rating": "개체값 평가",
 
+        "go to strength tab to show the current condition values": "현재 조건에 해당하는 에너지, 재료 수, 스킬 횟수를 표시하려면 [$t(strength2)] 탭으로 이동하세요.",
         "strength, ingredients, skill count": "에너지, 재료 수, 스킬 횟수",
         "the amount under the following condition": "다음 조건에서의 양을 표시하고 있습니다.",
         "use strength tab if you want to change these condition": "이 조건을 변경하려면 [$t(strength2)] 탭을 사용하세요.",

src/i18n/zh-CN.json

@@ -184,6 +184,7 @@
         "strength2": "能量",
         "rating": "个体评价",
 
+        "go to strength tab to show the current condition values": "要显示与当前条件对应的能量、食材数、技能次数，请前往[$t(strength2)] 标签。",
         "strength, ingredients, skill count": "能量、食材数、技能次数",
         "the amount under the following condition": "显示在以下条件下的数量。",
         "use strength tab if you want to change these condition": "如果您想更改这些条件，请使用[$t(strength2)] 标签。",

src/i18n/zh-TW.json

@@ -184,6 +184,7 @@
         "strength2": "能量",
         "rating": "個体評價",
 
+        "go to strength tab to show the current condition values": "要顯示與當前條件對應的能量、食材數、技能次數，請前往[$t(strength2)] 標籤。",
         "strength, ingredients, skill count": "能量、食材數、技能次數",
         "the amount under the following condition": "顯示在以下條件下的數量。",
         "use strength tab if you want to change these condition": "如果您想更改這些條件，請使用[$t(strength2)] 標籤。",

src/ui/IvCalc/InfoButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconButton } from '@mui/material';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { styled } from '@mui/system';
 
 const StyledIconButton = styled(IconButton)({
@@ -11,14 +12,26 @@ const StyledIconButton = styled(IconButton)({
             width: '20px',
             height: '20px',
             color: '#bbb',
+            '&.error': {
+                color: '#ed6c02',
+                animation: 'redglow 0.5s ease-out infinite normal',
+            },
         },
     },
+    '@keyframes redglow': {
+        '0%': {transform: 'scale(1)'},
+        '100%': {transform: 'scale(1.1)'},
+    },
 });
 
-const InfoButton = React.memo(({onClick}: {onClick: () => void}) => {
+const InfoButton = React.memo(({isError, onClick}: {
+    isError?: boolean,
+    onClick: () => void,
+}) => {
     return (
         <StyledIconButton onClick={onClick}>
-            <InfoOutlinedIcon/>
+            {!isError && <InfoOutlinedIcon/>}
+            {isError && <WarningRoundedIcon className="error"/>}
         </StyledIconButton>
     );
 });

src/ui/IvCalc/IvCalcApp.tsx

@@ -84,7 +84,7 @@ const ResearchCalcApp = React.memo(() => {
                 <StyledTab label={t('strength2')}/>
                 <StyledTab label={t('rating')}/>
             </StyledTabs>
-            {state.tabIndex === 0 && <RpView pokemonIv={state.pokemonIv} width={width}/>}
+            {state.tabIndex === 0 && <RpView state={state} width={width}/>}
             {state.tabIndex === 1 && <StrengthView state={state} dispatch={dispatch}/>}
             {state.tabIndex === 2 && <RatingView pokemonIv={state.pokemonIv} width={width}/>}
             {state.pokemonIv.pokemon.ratioNotFixed && <div style={{

src/ui/IvCalc/RpLabel.tsx

@@ -4,10 +4,11 @@ import InfoButton from './InfoButton';
 import { rpEstimateThreshold } from '../../util/PokemonRp';
 import { useTranslation } from 'react-i18next';
 
-const RpLabel = React.memo(({rp, iv, showIcon, onClick}: {
+const RpLabel = React.memo(({rp, iv, showIcon, isError, onClick}: {
     rp: number,
     iv: PokemonIv,
     showIcon?: boolean,
+    isError?: boolean,
     onClick?: () => void,
 }) => {
     const { t } = useTranslation();
@@ -17,7 +18,7 @@ const RpLabel = React.memo(({rp, iv, showIcon, onClick}: {
         if (onClick !== undefined) {
             onClick();
         }
-    }, []);
+    }, [onClick]);
 
     return (<div style={{
         display: 'flex',
@@ -48,7 +49,7 @@ const RpLabel = React.memo(({rp, iv, showIcon, onClick}: {
             marginLeft: '.5rem',
             padding: '0 0.3rem',
         }}>{t('estimated value')}</span>}
-        {showIcon && <InfoButton onClick={clickHandler}/>}
+        {showIcon && <InfoButton onClick={clickHandler} isError={isError}/>}
     </div>);
 });
 

src/ui/IvCalc/RpView.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
-import PokemonIv from '../../util/PokemonIv';
 import PokemonRp, { RpStrengthResult, rpEstimateThreshold } from '../../util/PokemonRp';
 import { round1, round2, round3, formatWithComma } from '../../util/NumberUtil';
 import PokemonStrength, { StrengthParameter, createStrengthParameter } from '../../util/PokemonStrength';
 import BerryIngSkillView from './BerryIngSkillView';
 import RaderChart from './RaderChart';
 import RpLabel from './RpLabel';
+import IvState from './IvState';
 import { Button, Dialog, DialogActions } from '@mui/material';
 import IngredientIcon from './IngredientIcon';
 import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment';
 import { styled } from '@mui/system';
 import { Trans, useTranslation } from 'react-i18next';
 
-const RpView = React.memo(({pokemonIv, width}: {pokemonIv: PokemonIv, width: number}) => {
+const RpView = React.memo(({state, width}: {state: IvState, width: number}) => {
     const { t } = useTranslation();
     const [rpInfoOpen, setRpInfoOpen] = React.useState(false);
     const [rpValueOpen, setRpValueOpen] = React.useState(false);
@@ -40,6 +40,7 @@ const RpView = React.memo(({pokemonIv, width}: {pokemonIv: PokemonIv, width: num
         setRpValueOpen(false);
     }, [setRpValueOpen]);
 
+    const pokemonIv = state.pokemonIv;
     const rp = new PokemonRp(pokemonIv);
     const rpResult: RpStrengthResult = rp.calculate();
 
@@ -50,10 +51,13 @@ const RpView = React.memo(({pokemonIv, width}: {pokemonIv: PokemonIv, width: num
 
     const pokemon = rp.pokemon;
     const raderHeight = 400;
+    const isError = state.lowerTabIndex === 1 && state.selectedItemId >= 0 &&
+        (state.parameter.level > 0 || state.parameter.fieldIndex >= 0);
 
     return (<>
         <div>
-            <RpLabel rp={rpResult.rp} iv={pokemonIv} showIcon onClick={onRpInfoClick}/>
+            <RpLabel rp={rpResult.rp} iv={pokemonIv} showIcon isError={isError}
+                onClick={onRpInfoClick}/>
             <BerryIngSkillView
                 berryValue={round1(rpResult.berryRp)}
                 berryProb={round1(rp.berryRatio * 100)}
@@ -72,7 +76,7 @@ const RpView = React.memo(({pokemonIv, width}: {pokemonIv: PokemonIv, width: num
                 skillProb={round1(rp.skillRatio * 100)}
                 skillSubValue={strength.skillCount.toFixed(2) + t('times unit')}
                 onSkillInfoClick={onSkillInfoClick}/>
-            <RpInfoDialog open={rpInfoOpen} onClose={onRpInfoClose}/>
+            <RpInfoDialog isError={isError} open={rpInfoOpen} onClose={onRpInfoClose}/>
             <RpValueDialog open={rpValueOpen} onClose={onRpValueClose}
                 rp={rp} rpResult={rpResult} rpType={rpType}/>
         </div>
@@ -83,11 +87,26 @@ const RpView = React.memo(({pokemonIv, width}: {pokemonIv: PokemonIv, width: num
     </>);
 });
 
-const RpInfoDialog = React.memo(({open, onClose}: {
+const RpInfoDialog = React.memo(({isError, open, onClose}: {
+    isError: boolean,
     open: boolean,
     onClose: () => void,
 }) => {
     const { t } = useTranslation();
+    if (!open) {
+        return <></>;
+    }
+    if (isError) {
+        return <StyledRpInfoDialog open={open} onClose={onClose}>
+            <article>
+                {t('go to strength tab to show the current condition values')}
+            </article>
+            <DialogActions>
+                <Button onClick={onClose}>{t('close')}</Button>
+            </DialogActions>
+        </StyledRpInfoDialog>;
+    }
+
     return <StyledRpInfoDialog open={open} onClose={onClose}>
         <article>
             <h2>{t('rp')}</h2>
@@ -215,6 +234,10 @@ const RpValueDialog = React.memo(({open, onClose, rp, rpResult, rpType}: {
     rpType: "berry"|"ingredient"|"skill",
 }) => {
     const { t } = useTranslation();
+    if (!open) {
+        return <></>;
+    }
+
     let color = "", rpVal = "", title = t(rpType);
     const param1 = round2(rp.helpCountPer5Hour);
     const desc1 = t('helps per 5 hours');