fix size and add sparkle effect
This commit is contained in:
arthur
parent
199317d0c6
commit
ae453d9c94
14
src/App.jsx
14
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}
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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`,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user