Merge pull request #87 from KT-vicddory/week6

Week6
KT-vicddory · Jul 31, 2024 · 0d935f7 · 0d935f7
2 parents dea615c + 2692b1e
commit 0d935f7
Show file tree

Hide file tree

Showing 13 changed files with 752 additions and 82 deletions.
diff --git a/src/app/(main)/player/batter/catcher/page.tsx b/src/app/(main)/player/batter/catcher/page.tsx
@@ -15,14 +15,16 @@ export default function Catcher() {
   return (
     <>
       <div className="bg-white pt-8 flex justify-center items-center h-min flex-wrap ">
-        <div className="flex flex-wrap flex-row gap-6 p-6 justify-start items-center object-center w-3/4">
+        <div className="flex flex-wrap flex-row justify-center md:justify-start p-6 w-3/4 mx-auto">
           {catcherData.map((catcher, index) => (
-            <CardFront
-              key={index}
-              player={catcher}
-              size="medium"
-              onClick={() => handleCardClick(catcher.backNum)}
-            />
+            <div key={index} className="flex-1 max-md:w-1/4 max-sm:w-auto p-2">
+              <CardFront
+                key={index}
+                player={catcher}
+                size="medium"
+                onClick={() => handleCardClick(catcher.backNum)}
+              />
+            </div>
           ))}
         </div>
       </div>

diff --git a/src/app/(main)/player/batter/infielder/page.tsx b/src/app/(main)/player/batter/infielder/page.tsx
@@ -15,14 +15,16 @@ export default function Infielder() {
   return (
     <>
       <div className="bg-white pt-8 flex justify-center items-center h-min flex-wrap ">
-        <div className="flex flex-wrap flex-row gap-6 p-6 justify-start items-center object-center w-3/4">
+        <div className="flex flex-wrap flex-row justify-center md:justify-start p-6 w-3/4 mx-auto">
           {infielderData.map((infielder, index) => (
-            <CardFront
-              key={index}
-              player={infielder}
-              size="medium"
-              onClick={() => handleCardClick(infielder.backNum)}
-            />
+            <div key={index} className="flex-1 max-md:w-1/4 max-sm:w-auto p-2">
+              <CardFront
+                key={index}
+                player={infielder}
+                size="medium"
+                onClick={() => handleCardClick(infielder.backNum)}
+              />
+            </div>
           ))}
         </div>
       </div>

diff --git a/src/app/(main)/player/batter/outfielder/page.tsx b/src/app/(main)/player/batter/outfielder/page.tsx
@@ -15,14 +15,16 @@ export default function Outfielder() {
   return (
     <>
       <div className="bg-white pt-8 flex justify-center items-center h-min flex-wrap ">
-        <div className="flex flex-wrap flex-row gap-6 p-6 justify-start items-center object-center w-3/4">
+        <div className="flex flex-wrap flex-row justify-center md:justify-start p-6 w-3/4 mx-auto">
           {outfielderData.map((outfielder, index) => (
-            <CardFront
-              key={index}
-              player={outfielder}
-              size="medium"
-              onClick={() => handleCardClick(outfielder.backNum)}
-            />
+            <div key={index} className="flex-1 max-md:w-1/4 max-sm:w-auto p-2">
+              <CardFront
+                key={index}
+                player={outfielder}
+                size="medium"
+                onClick={() => handleCardClick(outfielder.backNum)}
+              />
+            </div>
           ))}
         </div>
       </div>

diff --git a/src/app/(main)/player/pitcher/page.tsx b/src/app/(main)/player/pitcher/page.tsx
@@ -15,14 +15,16 @@ export default function PitcherMain() {
   return (
     <>
       <div className="bg-white flex justify-center items-center h-min flex-wrap ">
-        <div className="flex flex-wrap flex-row gap-6 p-6 justify-start items-center object-center w-3/4">
+        <div className="flex flex-wrap flex-row justify-center md:justify-start p-6 w-3/4 mx-auto">
           {pitcherData.map((pitcher, index) => (
-            <CardFront
-              key={index}
-              player={pitcher}
-              size="medium"
-              onClick={() => handleCardClick(pitcher.backNum)}
-            />
+            <div key={index} className="flex-1 max-md:w-1/4 max-sm:w-auto p-2">
+              <CardFront
+                key={index}
+                player={pitcher}
+                size="medium"
+                onClick={() => handleCardClick(pitcher.backNum)}
+              />
+            </div>
           ))}
         </div>
       </div>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -117,3 +117,30 @@
     @apply h-8 w-8 shadow-[inset_0_0_18px_#fff,inset_6px_0_18px_violet,inset_-6px_0_18px_#0ff,inset_6px_0_30px_violet,inset_-6px_0_30px_#0ff,0_0_18px_#fff,-4px_0_18px_violet,4px_0_18px_#0ff] rounded-[100px] left-[50vw] top-[50vh];
   }
 }
+.hologram-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* width: 100%;
+  height: 100%;
+  pointer-events: none;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.3) 0%,
+    rgba(158, 127, 200, 0.1) 40%,
+    rgba(236, 162, 162, 0.2) 70%,
+    rgba(183, 194, 111, 0.3) 100%
+  ); */
+  opacity: 0.7;
+  mix-blend-mode: overlay;
+  animation: shimmer 2s infinite linear;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -100% -100%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
diff --git a/src/components/player/PlayerChart.tsx b/src/components/player/PlayerChart.tsx
@@ -223,7 +223,7 @@ export default function PlayerChart({
         <div className="pt-4">
           <HighchartsReact highcharts={Highcharts} options={options} />
         </div>
-        <div className="bg-black max-md:min-h-screen">
+        <div className="bg-black ">
           <button
             className={`h-8 w-fit mx-4 mb-4 ml-6 flex flex-row `}
             onClick={onDescriptionHandler}
@@ -240,7 +240,7 @@ export default function PlayerChart({
             </div>{' '}
           </button>
           {descriptionButton && (
-            <div className="absolute bottom-auto w-1/3 max-md:w-2/3 max-md:transform max-md:-translate-x-16 max-md:text-wrap max-md:left-1/4 left-1/2 transform -translate-x-2 -translate-y-2 p-4 bg-white/90 z-10 rounded-lg">
+            <div className="absolute bottom-auto w-1/3 max-md:w-2/3 max-md:transform max-md:-translate-x-4 max-md:-translate-y-60 max-md:text-wrap max-md:left-1/4 left-1/2 transform translate-x-28 -translate-y-12 p-4 bg-white/90 z-10 rounded-lg">
               {positionCategory[position].categories.map((category, index) => (
                 <div
                   key={index}