Add feature to add sweeping results to inventory

rassvet-ii · rassvet-ii · commit 46d5c387b716 · 2024-02-09T02:24:02.000+09:00
diff --git a/components/Home.tsx b/components/Home.tsx
@@ -120,14 +120,15 @@ const Home: NextPage = observer((props) => {
         equipmentsById={equipmentsById}
         equipmentsRequirementStore={store.equipmentsRequirementStore}
         normalMissionItemDropRatio={store.gameInfoStore.normalMissionItemDropRatio}
-        onCloseInEfficacyDialog={handleCloseInEfficacyDialog}/>
+        onCloseInEfficacyDialog={handleCloseInEfficacyDialog}
+        piecesState={piecesState} />
       <IgnoredCampaigns
         solution={solution}
         allCampaigns={campaigns}
         allRequiredPieceIds={store.equipmentsRequirementStore.getAllRequiredPieceIds()}
         equipmentsById={equipmentsById}
         gameServer={store.gameInfoStore.gameServer}
-      />
+        piecesState={piecesState} />
     </React.Fragment>;
   };
 
diff --git a/components/calculationInput/equipments/inventory/AddToInventoryDialog.module.scss b/components/calculationInput/equipments/inventory/AddToInventoryDialog.module.scss
@@ -0,0 +1,22 @@
+@use 'components/calculationInput/common/common-calculation-input-layout';
+
+.container {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(auto-fill, 350px);
+  grid-gap: 10px;
+}
+
+.xs {
+  grid-template-columns: repeat(auto-fill, 300px);
+}
+
+.equipmentInputContainer {
+  display: flex;
+  margin: 10px;
+  align-items: center;
+}
+
+.equipmentCard {
+  @include common-calculation-input-layout.items-list;
+}
diff --git a/components/calculationInput/equipments/inventory/AddToInventoryDialog.tsx b/components/calculationInput/equipments/inventory/AddToInventoryDialog.tsx
@@ -0,0 +1,104 @@
+import styles from './AddToInventoryDialog.module.scss';
+import {Button, Dialog, DialogActions, DialogContent, DialogTitle, useMediaQuery, useTheme} from '@mui/material';
+import React, {useEffect, useMemo} from 'react';
+import {useTranslation} from 'next-i18next';
+import {useForm} from 'react-hook-form';
+import {DropPieceIdWithProbAndCount, EquipmentsById} from 'components/calculationInput/PiecesCalculationCommonTypes';
+import {InventoryForm} from './InventoryUpdateDialog';
+import ObtainedPieceBox from './ObtainedPieceBox';
+import {EquipmentsByTierAndCategory} from '../EquipmentsInput';
+import {useStore} from 'stores/WizStore';
+import {PieceState} from './PiecesInventory';
+
+const AddToInventoryDialog = ({
+  open,
+  drops,
+  equipById,
+  piecesState,
+  onCancel,
+  onUpdate,
+}: {
+  open: boolean,
+  drops: DropPieceIdWithProbAndCount[],
+  equipById: EquipmentsById,
+  piecesState: Map<string, PieceState>,
+  onCancel: () => void,
+  onUpdate: (formValues: InventoryForm) => void,
+}) => {
+  const store = useStore();
+  const {t} = useTranslation('home');
+  const theme = useTheme();
+
+  const pieceIds = useMemo(() => drops.map((drop) => drop.id), [drops]);
+  const pieces = useMemo(() => {
+    return Array.from(piecesState.values())
+        .filter((state) => pieceIds.includes(state.pieceId) && state.needCount > 0);
+  }, [piecesState, pieceIds]);
+  const defaultValues = useMemo(() => {
+    return pieces.reduce<InventoryForm>((acc, piece) => {
+      acc[piece.pieceId] = '';
+      return acc;
+    }, {});
+  }, [pieces]);
+
+  const {
+    control,
+    formState: {isValid: isCountValid, errors: allErrors},
+    getValues,
+    reset,
+  } = useForm<InventoryForm>({
+    mode: 'onChange',
+    defaultValues,
+  });
+
+  useEffect(() => {
+    open && reset();
+  }, [open, reset]);
+
+  const handleCancelDialog = () => {
+    onCancel();
+  };
+
+  const handleUpdateInventory = () => {
+    onUpdate(getValues());
+    const inventory = Object.entries(getValues()).reduce<InventoryForm>((acc, [id, value]) => {
+      const count = parseInt(value);
+      const stock = piecesState.get(id)?.inStockCount;
+      count && stock && (acc[id] = `${count + stock}`);
+      return acc;
+    }, {});
+    store.equipmentsRequirementStore.updateInventory(inventory);
+  };
+
+  const isFullScreen = useMediaQuery(theme.breakpoints.down('md'));
+  const isXsOrSmallerScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const hasManyPieces = () => pieces.length > 3;
+
+  return <Dialog open={open} keepMounted fullWidth
+    fullScreen={hasManyPieces() && isFullScreen}
+    maxWidth={hasManyPieces() && 'xl'}>
+    <DialogTitle>獲得した設計図</DialogTitle>
+
+    <DialogContent className={styles.dialogContentContainer}>
+      <div className={styles.filler}></div>
+      <div className={`${styles.container} ${isXsOrSmallerScreen && styles.xs}`}>
+        {pieces.map((piece) => {
+          return <ObtainedPieceBox key={piece.pieceId} allErrors={allErrors}
+            control={control}
+            equipmentsById={equipById}
+            piece={piece}/>;
+        })}
+      </div>
+      <div className={styles.filler}></div>
+    </DialogContent>
+
+    <DialogActions>
+      <Button onClick={handleCancelDialog}>{t('cancelButton')}</Button>
+      <Button onClick={handleUpdateInventory} disabled={!isCountValid}>
+        追加
+      </Button>
+    </DialogActions>
+  </Dialog>;
+};
+
+export default AddToInventoryDialog;
diff --git a/components/calculationInput/equipments/inventory/ObtainedPieceBox.module.scss b/components/calculationInput/equipments/inventory/ObtainedPieceBox.module.scss
@@ -0,0 +1,11 @@
+@use 'components/calculationInput/common/common-calculation-input-layout';
+
+.equipmentInputContainer{
+  display: flex;
+  margin: 10px;
+  align-items: center;
+}
+
+.equipmentCard{
+  @include common-calculation-input-layout.items-list;
+}
diff --git a/components/calculationInput/equipments/inventory/ObtainedPieceBox.tsx b/components/calculationInput/equipments/inventory/ObtainedPieceBox.tsx
@@ -0,0 +1,48 @@
+import styles from './PieceUpdateBox.module.scss';
+import {Card, CardActionArea} from '@mui/material';
+import EquipmentCard from 'components/bui/card/EquipmentCard';
+import BuiBanner from 'components/bui/BuiBanner';
+import Box from '@mui/material/Box';
+import PositiveIntegerOnlyInput from 'components/calculationInput/common/PositiveIntegerOnlyInput';
+import React from 'react';
+import {EquipmentsById} from 'components/calculationInput/PiecesCalculationCommonTypes';
+import {PieceState} from 'components/calculationInput/equipments/inventory/PiecesInventory';
+import {Control} from 'react-hook-form/dist/types/form';
+import {InventoryForm} from 'components/calculationInput/equipments/inventory/InventoryUpdateDialog';
+import {useTranslation} from 'next-i18next';
+
+const ObtainedPieceBox = function({
+  equipmentsById,
+  piece,
+  control,
+  allErrors,
+}: {
+  equipmentsById: EquipmentsById,
+  piece: PieceState,
+  control: Control<InventoryForm>,
+  allErrors: any,
+}) {
+  const {t} = useTranslation('home');
+
+  const pieceIcon = equipmentsById.get(piece.pieceId)?.icon;
+  if (!pieceIcon) return null;
+
+  return <div className={styles.equipmentInputContainer}>
+    <Card elevation={1}>
+      <CardActionArea disabled>
+        <div className={styles.equipmentCard}>
+          <EquipmentCard imageName={pieceIcon} bottomRightText={`x${piece.inStockCount}`} />
+          <BuiBanner label={`${piece.needCount}`} width={'120%'} />
+        </div>
+      </CardActionArea>
+    </Card>
+    <Box sx={{mr: 2}}/>
+    <PositiveIntegerOnlyInput name={piece.pieceId}
+      min={0}
+      control={control} showError={!!allErrors[piece.pieceId]}
+      helperText={allErrors[piece.pieceId]?.message ?? ''}
+      inputLabel={t('addPieceDialog.obtainedCount')} />
+  </div>;
+};
+
+export default ObtainedPieceBox;
diff --git a/components/calculationInput/listStagesResult/AllPotentialStages.tsx b/components/calculationInput/listStagesResult/AllPotentialStages.tsx
@@ -36,7 +36,8 @@ const AllPotentialStages = ({
             campaignInfo={campaign} stageExplanationLabel={t('resultPiecesCountOnStage', {count: campaign?.targetRewardIds?.size})}
             allDrops={allDrops} equipmentsById={equipmentsById}
             shouldHighLightPiece={(id) => campaign.targetRewardIds.has(id)}
-            hidePieceDropCount/>
+            hidePieceDropCount
+            piecesState={piecesState} />
         </Box>;
       })
     }
diff --git a/components/calculationResult/CampaignDropItemsList.module.scss b/components/calculationResult/CampaignDropItemsList.module.scss
@@ -14,8 +14,9 @@
   color: #2d4665;
 }
 
-.campaignNameAndTimes{
+.campaignHeader {
   align-items: center;
+  margin-bottom: 1rem;
 }
 
 .noSelection{
diff --git a/components/calculationResult/CampaignDropItemsList.tsx b/components/calculationResult/CampaignDropItemsList.tsx
@@ -1,12 +1,15 @@
 import styles from './CampaignDropItemsList.module.scss';
 import {Card, CardContent, Typography} from '@mui/material';
-import React, {FunctionComponent} from 'react';
+import React, {FunctionComponent, useState} from 'react';
 import {Campaign} from 'model/Campaign';
 import {DropPieceIdWithProbAndCount, EquipmentsById} from 'components/calculationInput/PiecesCalculationCommonTypes';
 import Grid from '@mui/material/Unstable_Grid2';
 import BuiBanner from '../bui/BuiBanner';
 import {useTranslation} from 'next-i18next';
 import EquipmentCard from 'components/bui/card/EquipmentCard';
+import BuiButton from 'components/bui/BuiButton';
+import AddToInventoryDialog from '../calculationInput/equipments/inventory/AddToInventoryDialog';
+import {PieceState} from 'components/calculationInput/equipments/inventory/PiecesInventory';
 
 type CampaignDropItemsListProps = {
     campaignInfo: Campaign,
@@ -16,6 +19,7 @@ type CampaignDropItemsListProps = {
     hidePieceDropCount?: boolean,
     containerCardVariation?: 'elevation' | 'outlined',
     shouldHighLightPiece?: (pieceId: string) => boolean,
+    piecesState: Map<string, PieceState>,
 }
 
 const CampaignDropItemsList :
@@ -27,14 +31,22 @@ const CampaignDropItemsList :
       shouldHighLightPiece,
       hidePieceDropCount= false,
       containerCardVariation = 'elevation',
+      piecesState,
     }
     ) => {
       const {t} = useTranslation('home');
+      const [open, setOpen] = useState(false);
       return <Card variant={containerCardVariation} className={styles.cardWrapper}
         elevation={containerCardVariation == 'elevation' ? 2 : undefined}>
+        <AddToInventoryDialog open={open}
+          onUpdate={() => setOpen(false)}
+          onCancel={() => setOpen(false)}
+          equipById={equipmentsById}
+          piecesState={piecesState}
+          drops={allDrops} />
         <CardContent>
           <Grid container>
-            <Grid xs={12} container className={styles.campaignNameAndTimes}>
+            <Grid xs={12} container className={styles.campaignHeader}>
               <Typography variant={'h4'}>
                 {`${campaignInfo.area}-${campaignInfo.stage}`}
               </Typography>
@@ -43,6 +55,12 @@ const CampaignDropItemsList :
                 sx={{marginLeft: '0.8em'}}
                 backgroundColor={'secondary'}
                 width={'unset'}/>
+
+              <div style={{flexGrow: 1}}/>
+
+              <BuiButton color={'baButtonSecondary'} onClick={() => setOpen(true)}>
+                {'結果を記入'}
+              </BuiButton>
             </Grid>
 
             <Grid xs={12} className={styles.noSelection}>
diff --git a/components/calculationResult/IgnoredCampaigns.tsx b/components/calculationResult/IgnoredCampaigns.tsx
@@ -14,6 +14,7 @@ import Box from '@mui/material/Box';
 import {useTranslation} from 'next-i18next';
 import {getRewardsByRegion} from 'common/gameDataHandlerUtil';
 import {GameServer} from 'model/Equipment';
+import {PieceState} from 'components/calculationInput/equipments/inventory/PiecesInventory';
 
 type CampaignByRequiredPieceCount = {
     [key: number]: Campaign[],
@@ -79,7 +80,11 @@ const IgnoredCampaigns = ({
   allRequiredPieceIds,
   equipmentsById,
   gameServer,
-}: IgnoredCampaignsProps & {equipmentsById: EquipmentsById}) => {
+  piecesState,
+}: IgnoredCampaignsProps & {
+  equipmentsById: EquipmentsById,
+  piecesState: Map<string, PieceState>,
+}) => {
   const {t} = useTranslation('home');
 
   const skippedValidCampaigns = useMemo(
@@ -123,7 +128,8 @@ const IgnoredCampaigns = ({
               campaignInfo={campaign} stageExplanationLabel={t('stageIsSkipped')}
               allDrops={allDrops} equipmentsById={equipmentsById}
               containerCardVariation={'outlined'}
-              hidePieceDropCount/>
+              hidePieceDropCount
+              piecesState={piecesState}/>
           </div>;
         })
       }
diff --git a/components/calculationResult/RecommendedCampaigns.tsx b/components/calculationResult/RecommendedCampaigns.tsx
@@ -19,6 +19,7 @@ import InefficientRequirementWarning, {
   OnCloseInefficacyDialog,
 } from 'components/calculationInput/common/InefficientRequirementWarning';
 import {getRewardsByRegion} from 'common/gameDataHandlerUtil';
+import {PieceState} from 'components/calculationInput/equipments/inventory/PiecesInventory';
 
 
 const RecommendedCampaigns = ({
@@ -28,13 +29,15 @@ const RecommendedCampaigns = ({
   equipmentsRequirementStore,
   normalMissionItemDropRatio,
   onCloseInEfficacyDialog,
+  piecesState,
 }: {
     solution: Solution<string>,
     campaignsById: CampaignsById,
     equipmentsById: EquipmentsById,
     equipmentsRequirementStore: IEquipmentsRequirementStore,
     normalMissionItemDropRatio: number,
     onCloseInEfficacyDialog: OnCloseInefficacyDialog,
+    piecesState: Map<string, PieceState>,
 }) => {
   const {t} = useTranslation('home');
   const store = useStore();
@@ -94,7 +97,7 @@ const RecommendedCampaigns = ({
             return <div key={key} className={styles.selectedPiecesCard}>
               <CampaignDropItemsList
                 campaignInfo={campaignInfo} stageExplanationLabel={t('stageSweepingTimes', {sweepingTimes})}
-                allDrops={allDrops} equipmentsById={equipmentsById} />
+                allDrops={allDrops} equipmentsById={equipmentsById} piecesState={piecesState} />
             </div>;
           })
     }
diff --git a/public/locales/ja/home.json b/public/locales/ja/home.json
@@ -21,7 +21,8 @@
     "minimumIs": "最小値は{{min}}です",
     "maximumIs": "最大値は{{max}}です",
     "quantity": "欲しい数",
-    "inStockCount": "所持数"
+    "inStockCount": "所持数",
+    "obtainedCount": "獲得数"
   },
   "selectInputMode": "入力モード",
   "selectResultMode": "結果表示モード",

Original file line number	Diff line number	Diff line change
`@@ -14,8 +14,9 @@`
`14`	`14`	`color: #2d4665;`
`15`	`15`	`}`
`16`	`16`
`17`		`-.campaignNameAndTimes{`
	`17`	`+.campaignHeader {`
`18`	`18`	`align-items: center;`
	`19`	`+ margin-bottom: 1rem;`
`19`	`20`	`}`
`20`	`21`
`21`	`22`	`.noSelection{`