Merge pull request #123 from P4-Games/feature/120-estadisticas

Feature/120 estadisticas
P4-Games · Nov 16, 2023 · b9ac4b1 · b9ac4b1
2 parents 6360b37 + 5ee70ac
commit b9ac4b1
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 37 deletions.
diff --git a/public/locales/br/common.json b/public/locales/br/common.json
@@ -59,8 +59,10 @@
   "usuario_no_en_temporada": "Este usuário não está jogando nesta temporada.",
 
   "no_paquetes_para_abrir": "Você não tem pacotes para abrir!",
-  "album": "Álbum",
-  "completar": "Completar",
+  "album": "Álbum", 
+  "completo": "Completo", 
+  "incompleto": "Incompleto", 
+  "reclamar_premio": "Reivindicar prêmio",
 
   "carta_minteada": "Carta Minted! Você pode vê-la",
   "aqui": "aqui",

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -59,8 +59,10 @@
     "usuario_no_en_temporada": "This user is not playing this season.",
 
     "no_paquetes_para_abrir": "You have no packs to open!",
-    "album": "Album",
-    "completar": "Complete",
+    "album": "Album", 
+    "completo": "Complete", 
+    "incompleto": "Incomplete", 
+    "reclamar_premio": "Claim Prize",
 
     "carta_minteada": "Minted Card! You can view it",
     "aqui": "here",

diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -60,7 +60,9 @@
 
     "no_paquetes_para_abrir": "No tienes paquetes para abrir!",
     "album": "Album",
-    "completar": "Completar",
+    "completo": "Compleo",
+    "incompleto": "Incompleto",
+    "reclamar_premio": "Reclamar Premio",
 
     "carta_minteada": "Carta Minteada! Puedes verla",
     "aqui": "aquí",

diff --git a/src/sections/Gamma/GammaAlbumInventory.jsx b/src/sections/Gamma/GammaAlbumInventory.jsx
@@ -5,6 +5,7 @@ import { FcCheckmark } from 'react-icons/fc'
 import gammaCardsPages from './gammaCardsPages'
 import { storageUrlGamma } from '../../config'
 import { useLayoutContext } from '../../hooks'
+import CustomImage from '../../components/customImage'
 
 const GammaAlbumInventory = React.forwardRef((props, book) => {
   const { paginationObj, setImageNumber, setCardInfo } = props
@@ -36,7 +37,7 @@ const GammaAlbumInventory = React.forwardRef((props, book) => {
             key={index}
             className='grid-item'
           >
-            <img src={`${storageUrlGamma}/T1/${item}.png`} alt='img' />
+            <CustomImage src={`${storageUrlGamma}/T1/${item}.png`} alt='img' />
             {paginationObj.user[item]?.stamped && <FcCheckmark />}
             <div className='number'>{paginationObj.user[item]?.name}</div>
             {
@@ -49,7 +50,7 @@ const GammaAlbumInventory = React.forwardRef((props, book) => {
     )
   }
 
-  return paginationObj && paginationObj.page1
+  return paginationObj
     ? (
       <HTMLFlipBook
         id='Book'

diff --git a/src/sections/Gamma/GammaAlbumEmpty.jsx → src/sections/Gamma/GammaAlbumStatistics.jsx b/src/sections/Gamma/GammaAlbumEmpty.jsx → src/sections/Gamma/GammaAlbumStatistics.jsx
@@ -3,15 +3,16 @@ import HTMLFlipBook from 'react-pageflip'
 import gammaCardsPages from './gammaCardsPages'
 import { storageUrlGamma } from '../../config'
 import { useLayoutContext } from '../../hooks'
+import CustomImage from '../../components/customImage'
 
-const GammaAlbumEmpty = React.forwardRef((_, book) => {
+const GammaAlbumStatistics = React.forwardRef((_, book) => {
   const { size } = useLayoutContext()
-
+  
   const PageContext = (index, item, ) => (
       <div style={{ background: 'none' }} key={index} className='grid-item'>
         {gammaCardsPages.user[item]?.stamped
-          ? <img src={`${storageUrlGamma}/T1/${item}.png`} alt='img' />
-          : <img src='/images/gamma/Nofy.png' alt='img' />}
+          ? <CustomImage src={`${storageUrlGamma}/T1/${item}.png`} alt='img' />
+          : <CustomImage src='/images/gamma/Nofy.png' alt='img' />}
         {!gammaCardsPages.user[item]?.stamped && <div className='numbershirt'>{gammaCardsPages.user[item]?.name}</div>}
       </div>
     )
@@ -60,4 +61,4 @@ const GammaAlbumEmpty = React.forwardRef((_, book) => {
   )
 })
 
-export default GammaAlbumEmpty
+export default GammaAlbumStatistics
diff --git a/src/sections/Gamma/GammaPack.jsx b/src/sections/Gamma/GammaPack.jsx
@@ -61,11 +61,12 @@ const GammaPack = ({ setPackIsOpen, openPackage, setOpenPackage, cardsNumbers, l
             animate={openPackage ? { opacity: 0, zIndex: 111111 } : ''}
             transition={{ duration: 1, delay: 3 }} id='bottom' src='/images/gamma/SobreBottom.png' alt=''
           />
+          {cardsNumbers && 
           <motion.img
             animate={openPackage ? { y: -100 } : ''}
             transition={{ duration: 3, delay: 1 }}
             id='imagetest' src={`${storageUrlGamma}/T1/${cardsNumbers && cardsNumbers[0]}.png`} alt='img'
-          />
+          />}
         </motion.div>
         {!loaderPack && 
           <AiOutlineCloseCircle

diff --git a/src/sections/Gamma/index.jsx b/src/sections/Gamma/index.jsx
@@ -1,15 +1,13 @@
 import React, { useState, useEffect } from 'react'
-import Head from 'next/head'
 import { ethers } from 'ethers'
 import GammaInfoCard from './GammaInfoCard'
 import Swal from 'sweetalert2'
 import {useTranslation} from 'next-i18next'
 
-import CustomImage from '../../components/customImage'
 import Navbar from '../../components/Navbar'
 import Footer from '../../components/Footer'
 import GammaAlbumInventory from './GammaAlbumInventory'
-import GammaAlbumEmpty from './GammaAlbumEmpty'
+import GammaAlbumStatistics from './GammaAlbumStatistics'
 import GammaPack from './GammaPack'
 import { checkApproved } from '../../services/dai'
 import { fetchPackData } from '../../services/gamma'
@@ -40,6 +38,21 @@ const index = React.forwardRef(() => {
   const { mobile, startLoading, stopLoading } = useLayoutContext()
   const [paginationObj, setPaginationObj] = useState({})
   const [paginationObjKey, setPaginationObjKey] = useState(0);
+  const [ cardsQtty, setCardsQtty ] = useState(0)
+
+  const getCardsQtyy = (paginationObj) => {
+    let total = 0
+
+    if(!paginationObj) return
+    for (let key in paginationObj.user) {
+      console.log(key)
+      if (paginationObj.user[key].quantity > 0) {
+        total += 1;
+      }
+    }
+
+    return total;
+  }
 
   const checkNumberOfPacks = async () => {
     try {
@@ -70,12 +83,16 @@ const index = React.forwardRef(() => {
       console.error(error)
     }
   }
+
+  useEffect(() => {
+    if (!paginationObj) return
+    setCardsQtty(getCardsQtyy(paginationObj))
+  }, [paginationObj]) 
 
   useEffect(() => {
     console.log('gamma acc', walletAddress, wallets)
   }, [walletAddress, wallets]) 
 
-
   useEffect(() => {
     fetchInventory()
   }, [walletAddress, gammaCardsContract, gammaCardsPages]) 
@@ -94,6 +111,10 @@ const index = React.forwardRef(() => {
     })
   }
 
+  const handleCompleteAlbum = async () => {  
+      console.log('handleCompleteAlbum')
+  }
+
   const handleTransferPack = async () => {  
     try {
       const result = await Swal.fire({
@@ -179,6 +200,7 @@ const index = React.forwardRef(() => {
           setLoaderPack(false)
           await checkNumberOfPacks()
           await fetchInventory()
+          setCardsQtty(getCardsQtyy(paginationObj))
           return openedPack
         }
       }
@@ -345,14 +367,19 @@ const index = React.forwardRef(() => {
               : { backgroundImage: 'url(\'/images/gamma/GammaFondo.png\')' }}
             className='hero__top__album'
           >
+            {!inventory && 
+              <GammaAlbumStatistics
+                key={paginationObjKey}
+                paginationObj={paginationObj}
+              />
+            }
             {gammaCardsContract && inventory && !cardInfo &&
             <GammaAlbumInventory
               key={paginationObjKey}
               paginationObj={paginationObj}
               setImageNumber={setImageNumber}
               setCardInfo={setCardInfo}/>
             }
-            {!inventory && <GammaAlbumEmpty />}
             {gammaCardsContract && inventory && cardInfo &&
               <GammaInfoCard 
                 imageNumber={imageNumber} 
@@ -383,11 +410,24 @@ const index = React.forwardRef(() => {
             </div>
           }
 
-          {!mobile && !inventory &&
+          {!mobile && !inventory && cardsQtty >= 0 &&
             <div className='gammaComplete'>
-              <h3>{t('album')}</h3>
-              <h3>24/120</h3>
-              <h3>{t('completar')}</h3>
+              <div className={cardsQtty===120 ? 'title_complete' : 'title_incomplete'}>
+                <h3>
+                    {cardsQtty === 120 
+                      ? `${t('album')} ${t('completo')}`
+                      : `${t('album')} ${t('incompleto')}`
+                    } 
+                </h3>
+              </div>
+              <div className={cardsQtty===120 ? 'qtty_complete' : 'qtty_incomplete'}>
+                <h3>{`${cardsQtty}/120`}</h3>
+              </div>
+              {cardsQtty===120 && <div
+                onClick={() => { handleCompleteAlbum() }}
+                className={cardsQtty===120 ? 'completeAlbum' : 'completeAlbum_disabled'}>
+                <h3>{t('reclamar_premio')}</h3>
+              </div>}
             </div>}
         </div>
       </div>}

diff --git a/src/styles/gamma.scss b/src/styles/gamma.scss
@@ -142,36 +142,56 @@
     cursor: not-allowed;
   }
 }
+
 .gammaComplete {
   position: absolute;
   bottom: 39%;
   right: 7%;
   width: 18%;
   height: 40%;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
-  h2 {
-    font-size: 0.8rem;
+  .title_complete {
+    color: green;
+    font-size: 1rem;
+    margin: 0;
   }
-  h3 {
-    padding: 10px;
-    transition: all 0.2s ease-in;
-    background: #006885;
-    color: #000;
-    border: 0px;
-    position: relative;
-    box-shadow:
-      inset -4px 4px 1px 1px grey,
-      inset -4px -4px 1px 1px lightgray,
-      inset 4px 0px 1px 1px lightgray;
+  .title_incomplete {
+    @extend .title_complete;
+    color: grey;
+  }
+  .qtty_complete {
+    color: green;
+    font-size: 1rem;
+    margin: 0;
+  }
+  .qtty_incomplete {
+    @extend .title_complete;
+    color: grey;
+  }
+  .button_complete_common {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    bottom: 10%;
+  }
+  .completeAlbum {
+    @extend .button_complete_common;
+    color: black;
+    transition: all 0.1s ease;
+    cursor: pointer;
     &:hover {
       transform: scale(1.1);
     }
   }
+  .completeAlbum_disabled {
+    @extend .button_complete_common;
+    color: #8f8f8f;
+  }
 }
 
 .gammaAlbumsCommon {