feature: added perspective deck and graveyard;

- lifepoints change input bug fix
LucasLimaAZ · Jun 21, 2024 · 0c4a0dc · 0c4a0dc
1 parent eeffbfd
commit 0c4a0dc
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 74 deletions.
diff --git a/src/components/Deck/index.jsx b/src/components/Deck/index.jsx
@@ -1,57 +1,33 @@
 import React from "react";
 import CardIMG from "../../assets/img/yugioh-back.jpg";
 import useDeck from "../../shared/hooks/deck";
-import { Box, Paper, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
+import useField from "../../shared/hooks/field";
 
 const Deck = () => {
   const { drawCard, deck } = useDeck();
+  const { rotateBoard } = useField();
 
   return (
-    <Paper
+    <Box
       sx={{
-        paddingX: "2%",
-        margin: "30px 0 2% 0",
-        backgroundColor: "rgba(255, 255, 255, 0.2);",
+        cursor: "pointer",
       }}
+      onClick={drawCard}
     >
       <Box
         sx={{
-          cursor: "pointer",
-          img: {
-            width: "70%",
-          },
+          width: "100%",
+          transform: rotateBoard && "rotate(180deg)",
         }}
-        onClick={drawCard}
-      >
-        <Box
-          sx={{ marginTop: "15%" }}
-          component="img"
-          src={CardIMG}
-          alt="deckcard"
-        />
-        <Box
-          sx={{ marginTop: "-300px", marginLeft: "5px" }}
-          component="img"
-          src={CardIMG}
-          alt="deckcard"
-        />
-        <Box
-          sx={{ marginTop: "-298px", marginLeft: "7px" }}
-          component="img"
-          src={CardIMG}
-          alt="deckcard"
-        />
-        <Box
-          sx={{ marginTop: "-296px", marginLeft: "9px" }}
-          component="img"
-          src={CardIMG}
-          alt="deckcard"
-        />
-        <Box>
-          <Typography>{deck}</Typography>
-        </Box>
+        component="img"
+        src={CardIMG}
+        alt="deckcard"
+      />
+      <Box>
+        <Typography textAlign="center">{deck}</Typography>
       </Box>
-    </Paper>
+    </Box>
   );
 };
 

diff --git a/src/components/Graveyard/index.jsx b/src/components/Graveyard/index.jsx
@@ -1,34 +1,25 @@
 import React from "react";
 import useGraveyard from "../../shared/hooks/graveyard";
-import { Box, Typography, Paper } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 
 const Graveyard = () => {
   const { graveyard } = useGraveyard();
 
   return (
-    <Paper
+    <Box
       sx={{
-        paddingX: "2%",
-        margin: "30px 0 2% 0",
-        backgroundColor: "rgba(255, 255, 255, 0.2);",
+        maxHeight: "300px",
+        overflow: "auto",
+        padding: "2%",
       }}
     >
-      <Box
-        sx={{
-          marginTop: "30px",
-          maxHeight: "300px",
-          overflow: "auto",
-          padding: "2%",
-        }}
-      >
-        <Typography variant="body1">Graveyard({graveyard.length}): </Typography>
-        {graveyard?.map((card, index) => (
-          <Box key={index}>
-            <Typography variant="caption">{card.name}</Typography>
-          </Box>
-        ))}
-      </Box>
-    </Paper>
+      <Typography variant="body1">Graveyard({graveyard.length}): </Typography>
+      {graveyard?.map((card, index) => (
+        <Box key={index}>
+          <Typography variant="caption">{card.name}</Typography>
+        </Box>
+      ))}
+    </Box>
   );
 };
 

diff --git a/src/components/attackCard/index.jsx b/src/components/attackCard/index.jsx
@@ -144,7 +144,11 @@ const AttackModal = (props) => {
                 variant="h4"
                 sx={{ color: "red", textShadow: "2px 2px rgba(0,0,0,0.3)" }}
               >
-                - {Math.abs(attack - props.card?.atk) || 0}
+                -{" "}
+                {Math.abs(
+                  attack -
+                    (props.card.def_mode ? props.card?.def : props.card?.atk)
+                ) || 0}
               </Typography>
             )}
           </Box>

diff --git a/src/components/container/index.jsx b/src/components/container/index.jsx
@@ -1,7 +1,5 @@
 import { Grid, Box } from "@mui/material";
 import ScoreBoard from "../scoreboard";
-import Deck from "../deck";
-import Graveyard from "../graveyard";
 import ToolBar from "../toolBar";
 import Field from "../field";
 
@@ -19,11 +17,7 @@ const Container = () => {
         <Grid item xs={12}>
           <ScoreBoard />
         </Grid>
-        <Grid item xs={2}>
-          <Deck />
-          <Graveyard />
-        </Grid>
-        <Grid item xs={10}>
+        <Grid item xs={12}>
           <Field />
         </Grid>
         <Grid item xs={12}>

diff --git a/src/components/field/index.jsx b/src/components/field/index.jsx
@@ -1,6 +1,8 @@
 import Card from "../card";
 import useField from "../../shared/hooks/field";
 import { Box, Paper } from "@mui/material";
+import Deck from "../deck";
+import Graveyard from "../graveyard";
 
 const Field = () => {
   const { generateMonster, generateMagicTrap, field, rotateBoard } = useField();
@@ -21,7 +23,7 @@ const Field = () => {
         rotateBoard && {
           perspective: "1200px",
           maxWidth: "90%",
-          marginLeft: "5%",
+          margin: "auto",
         }
       }
     >
@@ -34,6 +36,9 @@ const Field = () => {
         }}
       >
         <Box display="flex" gap="64px" justifyContent="space-between">
+          <Box sx={{ width: "100%" }} key={"deck"}>
+            <Deck />
+          </Box>
           {[...Array(5)].map((_, i) => (
             <Box
               sx={{ width: "100%" }}
@@ -50,6 +55,9 @@ const Field = () => {
           gap="64px"
           justifyContent="space-between"
         >
+          <Box sx={{ width: "100%" }} key={"grave"}>
+            <Graveyard />
+          </Box>
           {[...Array(5)].map((_, i) => (
             <Box
               sx={{ width: "100%" }}

diff --git a/src/components/scoreboard/index.jsx b/src/components/scoreboard/index.jsx
@@ -58,16 +58,20 @@ const ScoreBoard = () => {
     setLpInput(e.target.value);
   };
 
-  const handleLpOptionChange = (_, newInputValue) => {
-    setLpInput(newInputValue);
+  const handleLpOptionChange = ({ _reactName }, newInputValue) => {
+    if (_reactName !== "onBlur") {
+      setLpInput(newInputValue);
+    }
   };
 
   const handleOpponentInputChange = (e) => {
     setOpponentLpInput(e.target.value);
   };
 
-  const handleOpponentOptionChange = (_, newInputValue) => {
-    setOpponentLpInput(newInputValue);
+  const handleOpponentOptionChange = ({ _reactName }, newInputValue) => {
+    if (_reactName !== "onBlur") {
+      setOpponentLpInput(newInputValue);
+    }
   };
 
   const handleResetDuel = () => {

diff --git a/src/shared/cardLists/damageSpellCards.json b/src/shared/cardLists/damageSpellCards.json
@@ -17,5 +17,10 @@
   "5318639",
   "88279736",
   "82003859",
-  "4031928"
+  "4031928",
+  "66788016",
+  "87910978",
+  "45986603",
+  "42703248",
+  "19159413"
 ]