Merge pull request #133 from P4-Games/feature/inventory-album

Feature/inventory album
P4-Games · Nov 17, 2023 · 7b7c1a5 · 7b7c1a5
2 parents 7d3313f + 632eab2
commit 7b7c1a5
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 84 deletions.
diff --git a/src/sections/Gamma/GammaAlbum.jsx b/src/sections/Gamma/GammaAlbum.jsx
@@ -17,29 +17,25 @@ const GammaAlbum = React.forwardRef((props, book) => {
       : {} 
   }
 
-  const PageContent = ({ page, pageNumber}) => {
-    let divWrapperClassName = 'grid-wrapper'
+  const PageContentInventory = ({ page, pageNumber}) => {
+    let divWrapperClassName = 'grid-wrapper-left'
     if (pageNumber % 2 === 0) { // par
-      divWrapperClassName = 'grid-wrapperright'
+      divWrapperClassName = 'grid-wrapper-right'
     }
 
     return (
       <div className={divWrapperClassName}>
         {page && page.map((item, index) => (
           <div 
-            onClick={showInventory ? () => { setCardInfo(true), setImageNumber(item) } : null}
+            onClick={() => { setCardInfo(true), setImageNumber(item) }}
             style={getStyle(item)} 
             key={index}
             className='grid-item'
           >
-            { !showInventory && (paginationObj.user[item]?.stamped
-                ? <CustomImage src={`${storageUrlGamma}/T1/${item}.png`} alt='img' />
-                : <CustomImage src='/images/gamma/Nofy.png' alt='img' /> )}
+            <CustomImage src={`${storageUrlGamma}/T1/${item}.png`} alt='img' /> 
+            { paginationObj.user[item]?.stamped && <FcCheckmark /> }
 
-            { showInventory && <CustomImage src={`${storageUrlGamma}/T1/${item}.png`} alt='img' /> }
-            { showInventory && paginationObj.user[item]?.stamped && <FcCheckmark /> }
-
-            { showInventory && paginationObj.user[item]?.quantity > 1 && 
+            { paginationObj.user[item]?.quantity > 1 && 
               <div className='quantity'>X:{paginationObj.user[item]?.quantity}</div>
             }
 
@@ -50,6 +46,36 @@ const GammaAlbum = React.forwardRef((props, book) => {
     )
   }
 
+  const PageContentAlbum = ({ page, pageNumber}) => {
+    let divWrapperClassName = 'grid-wrapper-left-album'
+    if (pageNumber % 2 === 0) { // par
+      divWrapperClassName = 'grid-wrapper-right-album'
+    }
+
+    return (
+      <div className={divWrapperClassName}>
+        {page && page.map((item, index) => (
+          <div 
+            style={{ background: 'none' }}
+            key={index}
+            className='grid-item'
+          >
+            { paginationObj.user[item]?.stamped
+              ? <CustomImage src={`${storageUrlGamma}/T1/${item}.png`} alt='img' />
+              : <CustomImage src='/images/gamma/Nofy.png' alt='img' /> 
+            }
+          </div>))
+        }
+      </div>
+    )
+  }
+
+  const PageContent  = ({ page, pageNumber}) => {
+    return showInventory 
+      ? <PageContentInventory page={page} pageNumber={pageNumber}/> 
+      : <PageContentAlbum page={page} pageNumber={pageNumber}/>
+  }
+
   return paginationObj
     ? (
       <HTMLFlipBook

diff --git a/src/styles/gamma.scss b/src/styles/gamma.scss
@@ -234,26 +234,18 @@
   // background: red;
 }
 
-.grid-wrapper {
+.grid-wrapper-common {
   display: grid;
-  // grid-template-columns: repeat(3, 0.3fr);
   grid-template-columns: repeat(3, minmax(50px, 110px));
   grid-template-rows: repeat(4, 1fr);
   grid-column-gap: 2px;
   grid-row-gap: 2px;
   max-width: 90%;
-  // margin: 0 auto;
   place-items: center;
   place-content: center;
   top: 10%;
   position: absolute;
-  left: 17%;
-  @media (max-width: 600px) {
-    top: 10%;
-    position: absolute;
-    left: 5%;
-    max-width: 80%;
-  }
+
   @media (max-width: 1400px) {
     grid-template-columns: repeat(3, minmax(50px, 75px));
   }
@@ -263,7 +255,6 @@
 
   .grid-item {
     position: relative;
-    // box-shadow: 0px 0px 0px black;
     .number {
       position: absolute;
       right: 7%;
@@ -306,87 +297,46 @@
     }
   }
   .grid-item:hover {
+    cursor: pointer;
     box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.837);
     transition: 0.8s;
   }
 }
-.grid-wrapperright {
-  display: grid;
-  // grid-template-columns: repeat(3, 0.3fr);
-  grid-template-columns: repeat(3, minmax(50px, 110px));
-  grid-template-rows: repeat(4, 1fr);
-  grid-column-gap: 2px;
-  grid-row-gap: 2px;
-  max-width: 90%;
-  // margin: 0 auto;
-  place-items: center;
-  place-content: center;
-  top: 10%;
-  position: absolute;
-  right: 17%;
 
-  @media (max-width: 1400px) {
-    grid-template-columns: repeat(3, minmax(50px, 75px));
-  }
+.grid-wrapper-left {
+  @extend .grid-wrapper-common;
+  left: 17%;
   @media (max-width: 600px) {
-    grid-template-columns: repeat(3, minmax(50px, 90px));
+    top: 10%;
+    position: absolute;
+    left: 5%;
+    max-width: 80%;
   }
+}
 
+.grid-wrapper-right {
+  @extend .grid-wrapper-common;
+  right: 17%;
   @media (max-width: 600px) {
     top: 15%;
     position: absolute;
     left: 5%;
     max-width: 80%;
     right: 0%;
   }
+}
 
-  .grid-item {
-    position: relative;
-    // box-shadow: 0px 0px 0px black;
-    .number {
-      position: absolute;
-      right: 7%;
-      bottom: 10%;
-      font-size: 0.5rem;
-    }
-    .numbershirt {
-      font-size: 0.4rem;
-      position: absolute;
-      bottom: 34%;
-      color: white;
-    }
-    .quantity {
-      position: absolute;
-      left: 10%;
-      top: 10%;
-      font-size: 0.5rem;
-      color: darkblue;
-    }
-    transition: 0.8s;
-    background: url('/images/gamma/BordeGamma.png');
-    background-size: cover !important;
-    background-repeat: no-repeat;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    svg {
-      position: absolute;
-      font-size: 3rem;
-      display: block;
-      color: pink;
-      filter: drop-shadow(2px 2px 2px black);
-    }
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 4px;
-    }
+.grid-wrapper-left-album {
+  @extend .grid-wrapper-left;
+  .grid-item:hover {
+    cursor: default;
   }
+}
 
+.grid-wrapper-right-album {
+  @extend .grid-wrapper-right;
   .grid-item:hover {
-    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.837);
-    transition: 0.8s;
+    cursor: default;
   }
 }