feat: add loot

Mississippi-Labs · Oct 21, 2023 · e1cc900 · e1cc900
1 parent f69bed4
commit e1cc900
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 3 deletions.
diff --git a/packages/client/src/assets/img/loot1.png b/packages/client/src/assets/img/loot1.png
diff --git a/packages/client/src/assets/img/loot2.png b/packages/client/src/assets/img/loot2.png
diff --git a/packages/client/src/components/UserInfo/index.tsx b/packages/client/src/components/UserInfo/index.tsx
@@ -8,11 +8,19 @@ interface IProps {
   head: string;
   clothes: string;
   handheld: string;
+  minting: boolean;
 }
 
 const UserInfo = (props: IProps) => {
 
-  const { handheld, head, clothes } = props;
+  const { handheld, head, clothes, minting } = props;
+
+
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     setLoading(false)
+  //   }, 2000)
+  // }, [])
 
   return (
     <div className={'mi-userinfo-wrapper'}>
@@ -24,7 +32,7 @@ const UserInfo = (props: IProps) => {
               <Appearance clothes={clothes} handheld={handheld} head={head}/>
             </div>
           </div>
-          <div className="loot-wrapper">
+          <div className={`loot-wrapper ${minting ? '' : 'loaded'}`}>
             <div className="loot-detail">
 
             </div>

diff --git a/packages/client/src/components/UserInfo/styles.scss b/packages/client/src/components/UserInfo/styles.scss
@@ -39,6 +39,16 @@
         justify-content: space-between;
         flex-direction: column;
         height: 100%;
+
+        &.loaded {
+            .loot-detail:nth-child(1) {
+                background: url("../../assets/img/loot1.png") no-repeat center / 100%;
+            }
+
+            .loot-detail:nth-child(2) {
+                background: url("../../assets/img/loot2.png") no-repeat center / 100%;
+            }
+        }
     }
 
     .loot-detail {

diff --git a/packages/client/src/pages/home/index.tsx b/packages/client/src/pages/home/index.tsx
@@ -20,6 +20,8 @@ const Home = () => {
     title: '',
   });
 
+  const [minting, setMinting] = useState(true);
+
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -82,6 +84,8 @@ const Home = () => {
     setHandheld(handheld);
     setHead(head);
 
+    setMinting(false);
+
     setTimeout(() => {
       navigate('/game', {
         state: {
@@ -132,7 +136,7 @@ const Home = () => {
           <div className="mi-section mint-section">
             <div className="mint-box">
               <h2 className="mint-title">HOME</h2>
-              <UserInfo clothes={clothes} handheld={handheld} head={head}/>
+              <UserInfo clothes={clothes} handheld={handheld} head={head} minting={minting}/>
               <button className="mi-btn" onClick={mintAndGo}>MINT AND GO</button>
             </div>
           </div>