From ae453d9c9407ab939bf041c56aaacda71c9c65f2 Mon Sep 17 00:00:00 2001
From: arthur <viet.block0910@gmail.com>
Date: Fri, 12 Dec 2025 20:00:46 +0700
Subject: [PATCH] fix size and add sparkle effect

---
 src/App.jsx                      | 14 +++++++-------
 src/components/HistoryPanel.jsx  | 18 +++++++++---------
 src/components/SlotMachine.jsx   | 16 ++++++++--------
 src/components/SparkleEffect.jsx | 12 ++++++------
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 6d97cc2..7ae727e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -76,11 +76,11 @@ function App() {
         <div className="flex-1 flex flex-col items-center justify-center p-4 md:p-6 lg:p-8 py-8">
 
           {/* Company Logo */}
-          <div className="mb-8 md:mb-12">
+          <div className="mb-4 md:mb-6">
             <img
               src="/asset/img/logo-white-color.svg"
               alt="Company Logo"
-              className="h-8 md:h-10 lg:h-12 w-auto"
+              className="h-6 md:h-8 lg:h-9 w-auto"
               style={{
                 filter: 'drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3))'
               }}
@@ -90,7 +90,7 @@ function App() {
           {/* Golden Ticket + Slot Machine - Layered */}
           <div className="relative flex flex-col items-center">
             {/* Golden Ticket Title - Background Layer */}
-            <div className="absolute top-0 left-1/2 -translate-x-1/2 z-0 w-[200%] max-w-none">
+            <div className="absolute top-0 left-1/2 -translate-x-1/2 z-0 w-[140%] max-w-none">
               <img
                 src="/asset/img/Font.png"
                 alt="Golden Ticket"
@@ -102,7 +102,7 @@ function App() {
             </div>
 
             {/* Slot Machine - Foreground Layer */}
-            <div className="relative z-10 mt-64 sm:mt-72 md:mt-80 lg:mt-96 xl:mt-[28rem]">
+            <div className="relative z-10 mt-32 sm:mt-40 md:mt-48 lg:mt-56 xl:mt-64">
               <SlotMachine
                 winner={currentWinner}
                 isSpinning={isSpinning}
@@ -112,12 +112,12 @@ function App() {
               />
 
               {/* Left Sparkles - Absolute positioned next to slot machine */}
-              <div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-[calc(100%+20px)] w-[350px] h-[600px] pointer-events-none overflow-visible">
+              <div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-[calc(100%+15px)] w-[250px] h-[400px] pointer-events-none overflow-visible">
                 <SparkleEffect />
               </div>
 
               {/* Right Sparkles - Absolute positioned next to slot machine */}
-              <div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-[calc(100%+20px)] w-[350px] h-[600px] pointer-events-none overflow-visible">
+              <div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-[calc(100%+15px)] w-[250px] h-[400px] pointer-events-none overflow-visible">
                 <SparkleEffect />
               </div>
             </div>
@@ -133,7 +133,7 @@ function App() {
           )}
 
           {/* Winners Panel - Below Draw Button */}
-          <div className="w-full max-w-6xl px-4 mt-12 md:mt-16">
+          <div className="w-full max-w-6xl px-4 mt-8 md:mt-10">
             <HistoryPanel
               history={history}
               maxNumber={maxNumber}
diff --git a/src/components/HistoryPanel.jsx b/src/components/HistoryPanel.jsx
index 99de7ad..86c3e67 100644
--- a/src/components/HistoryPanel.jsx
+++ b/src/components/HistoryPanel.jsx
@@ -10,7 +10,7 @@ export function HistoryPanel({ history, onReset, maxNumber, onMaxNumberChange })
 
     return (
         <div
-            className="w-full backdrop-blur-xl rounded-3xl p-6 md:p-8 lg:p-10 shadow-2xl relative overflow-hidden"
+            className="w-full backdrop-blur-xl rounded-2xl p-4 md:p-6 lg:p-7 shadow-2xl relative overflow-hidden"
             style={{
                 background: 'linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(20, 20, 20, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%)',
                 border: '3px solid transparent',
@@ -27,9 +27,9 @@ export function HistoryPanel({ history, onReset, maxNumber, onMaxNumberChange })
                 maskComposite: 'exclude',
             }}></div>
             {/* Header with Title and Controls */}
-            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8 relative z-10">
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-6 relative z-10">
                 <h3
-                    className="text-3xl md:text-4xl font-black tracking-wide flex items-center gap-3"
+                    className="text-2xl md:text-3xl font-black tracking-wide flex items-center gap-2"
                     style={{
                         background: 'linear-gradient(to bottom, #bf953f 0%, #fcf6ba 40%, #b38728 55%, #fbf5b7 100%)',
                         WebkitBackgroundClip: 'text',
@@ -80,18 +80,18 @@ export function HistoryPanel({ history, onReset, maxNumber, onMaxNumberChange })
 
             {/* Winners Table - Vertical Rows */}
             {history.length === 0 ? (
-                <div className="text-yellow-200/60 text-center italic py-16 text-xl relative z-10">
+                <div className="text-yellow-200/60 text-center italic py-12 text-lg relative z-10">
                     No winners yet - click the lottery machine to start!
                 </div>
             ) : (
-                <div className="space-y-4 relative z-10">
+                <div className="space-y-3 relative z-10">
                     {reversedHistory.map((num, idx) => {
                         const rank = idx + 1;
                         const isTop3 = rank <= 3;
                         return (
                             <div
                                 key={idx}
-                                className="flex items-center gap-6 p-5 md:p-6 rounded-2xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden group"
+                                className="flex items-center gap-4 p-4 md:p-5 rounded-xl transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden group"
                                 style={{
                                     background: isTop3
                                         ? 'linear-gradient(90deg, rgba(191, 149, 63, 0.15) 0%, rgba(179, 135, 40, 0.1) 50%, rgba(170, 119, 28, 0.05) 100%)'
@@ -114,7 +114,7 @@ export function HistoryPanel({ history, onReset, maxNumber, onMaxNumberChange })
                                 )}
 
                                 {/* Rank badge - left */}
-                                <div className="text-2xl md:text-3xl font-black w-20 text-center flex-shrink-0" style={{
+                                <div className="text-xl md:text-2xl font-black w-16 text-center flex-shrink-0" style={{
                                     background: isTop3
                                         ? 'linear-gradient(to bottom, #bf953f 0%, #fcf6ba 40%, #b38728 55%, #fbf5b7 100%)'
                                         : 'linear-gradient(to bottom, #9CA3AF 0%, #D1D5DB 50%, #9CA3AF 100%)',
@@ -129,11 +129,11 @@ export function HistoryPanel({ history, onReset, maxNumber, onMaxNumberChange })
                                 </div>
 
                                 {/* Decorative separator */}
-                                <div className="w-px h-16 bg-gradient-to-b from-transparent via-gold-400/30 to-transparent flex-shrink-0"></div>
+                                <div className="w-px h-12 bg-gradient-to-b from-transparent via-gold-400/30 to-transparent flex-shrink-0"></div>
 
                                 {/* Number - center, LARGE with metallic effect */}
                                 <div
-                                    className="text-5xl md:text-6xl lg:text-7xl font-black flex-1 tabular-nums"
+                                    className="text-4xl md:text-5xl lg:text-6xl font-black flex-1 tabular-nums"
                                     style={{
                                         background: 'linear-gradient(to bottom, #bf953f 0%, #fcf6ba 40%, #b38728 55%, #fbf5b7 100%)',
                                         WebkitBackgroundClip: 'text',
diff --git a/src/components/SlotMachine.jsx b/src/components/SlotMachine.jsx
index e809f3c..f61c482 100644
--- a/src/components/SlotMachine.jsx
+++ b/src/components/SlotMachine.jsx
@@ -15,14 +15,14 @@ const shuffleArray = (array) => {
 
 // Responsive slot heights based on screen size
 const getSlotHeight = () => {
-    if (typeof window === 'undefined') return 320;
+    if (typeof window === 'undefined') return 240;
     const width = window.innerWidth;
-    if (width < 640) return 96;   // mobile (h-24)
-    if (width < 768) return 128;  // sm (h-32)
-    if (width < 1024) return 176; // md (h-44)
-    if (width < 1280) return 224; // lg (h-56)
-    if (width < 1536) return 288; // xl (h-72)
-    return 320; // 2xl (h-80)
+    if (width < 640) return 80;   // mobile (h-20)
+    if (width < 768) return 112;  // sm (h-28)
+    if (width < 1024) return 144; // md (h-36)
+    if (width < 1280) return 176; // lg (h-44)
+    if (width < 1536) return 208; // xl (h-52)
+    return 240; // 2xl (h-60)
 };
 
 export function SlotMachine({ winner, isSpinning, onAnimationComplete, onDraw, poolLength }) {
@@ -178,7 +178,7 @@ export function SlotMachine({ winner, isSpinning, onAnimationComplete, onDraw, p
 
 const SlotBox = ({ children }) => (
     <div
-        className="relative w-32 h-40 sm:w-40 sm:h-48 md:w-48 md:h-60 lg:w-60 lg:h-[18rem] xl:w-72 xl:h-[22rem] 2xl:w-80 2xl:h-96 flex items-start justify-center overflow-hidden"
+        className="relative w-24 h-32 sm:w-28 sm:h-36 md:w-36 md:h-44 lg:w-44 lg:h-56 xl:w-52 xl:h-64 2xl:w-60 2xl:h-72 flex items-start justify-center overflow-hidden"
         style={{
             borderRadius: '1.5rem',
             background: '#FFFFFF',
diff --git a/src/components/SparkleEffect.jsx b/src/components/SparkleEffect.jsx
index bdf1b4b..2093b6f 100644
--- a/src/components/SparkleEffect.jsx
+++ b/src/components/SparkleEffect.jsx
@@ -61,15 +61,15 @@ export function SparkleEffect() {
 
   useEffect(() => {
     // Generate Stars (The big cross flares) - spread across entire area
-    const starCount = 40; // Increased from 25
+    const starCount = 30; // Reduced for smaller screens
     const newStars = Array.from({ length: starCount }).map((_, i) => {
       return {
         id: i,
         style: {
           left: `${random(0, 100)}%`,
           top: `${random(0, 100)}%`,
-          width: `${random(50, 150)}px`,
-          height: `${random(50, 150)}px`,
+          width: `${random(40, 120)}px`,
+          height: `${random(40, 120)}px`,
           animationDuration: `${random(1.5, 4)}s`,
           animationDelay: `${random(0, 4)}s`,
           opacity: random(0.6, 1),
@@ -78,15 +78,15 @@ export function SparkleEffect() {
     });
 
     // Generate Particles (The small bokeh dots) - spread across entire area
-    const particleCount = 100; // Increased from 60
+    const particleCount = 70; // Reduced for smaller screens
     const newParticles = Array.from({ length: particleCount }).map((_, i) => {
       return {
         id: i,
         style: {
           left: `${random(0, 100)}%`,
           top: `${random(0, 100)}%`,
-          width: `${random(2, 5)}px`,
-          height: `${random(2, 5)}px`,
+          width: `${random(2, 4)}px`,
+          height: `${random(2, 4)}px`,
           opacity: random(0.3, 0.8),
           boxShadow: `0 0 ${random(3, 6)}px rgba(255, 255, 220, 0.8)`,
           animationDuration: `${random(1, 3)}s`,