Skip to content

Commit e76cfd7

Browse files
josegomez-devjosegomez-dev
committed
feat: Add floating back button, Coming Soon badge, and improve Infinite Runner background
- Add floating back button to mini-games detail page (top-left corner) - Add 'Coming Soon' badge to Nexus Starter Kits section - Implement parallax scrolling background in Infinite Runner for better sense of movement - Reset background offset on level changes for smooth transitions
1 parent 706709d commit e76cfd7

File tree

7 files changed

+40
-52
lines changed

7 files changed

+40
-52
lines changed

‎app/mini-games/[gameId]/page.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ export default function GamePage() {
245245
onClick={() => router.push('/mini-games')}
246246
className='px-6 py-3 bg-white/20 hover:bg-white/30 text-white font-semibold rounded-xl transition-all duration-300'
247247
>
248-
← Back to Arcade
248+
← Back to Gaming Station
249249
</button>
250250
</div>
251251
</div>
@@ -265,6 +265,24 @@ export default function GamePage() {
265265
<div className='min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden'>
266266
<Header />
267267

268+
{/* Floating Back Button */}
269+
<button
270+
onClick={() => router.push('/mini-games')}
271+
className='fixed top-24 left-4 z-50 group bg-gradient-to-br from-slate-800/90 to-slate-900/90 backdrop-blur-xl border-2 border-cyan-400/30 hover:border-cyan-400 text-white px-3 py-2 md:px-4 md:py-3 rounded-2xl shadow-2xl transition-all duration-300 transform hover:scale-105 hover:shadow-cyan-500/50 flex items-center gap-2'
272+
aria-label='Back to Arcade'
273+
>
274+
<svg
275+
className='w-5 h-5 md:w-5 md:h-5 transform group-hover:-translate-x-1 transition-transform duration-300'
276+
fill='none'
277+
stroke='currentColor'
278+
viewBox='0 0 24 24'
279+
>
280+
<path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M15 19l-7-7 7-7' />
281+
</svg>
282+
<span className='font-bold text-xs md:text-sm hidden sm:inline'>Back to Arcade</span>
283+
<span className='font-bold text-xs sm:hidden'>Back</span>
284+
</button>
285+
268286
{/* Main Content */}
269287
<main className='relative z-10 pt-20 pb-32'>
270288
<div className='container mx-auto px-4'>

‎components/games/InfiniteRunner.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1708,15 +1708,14 @@ const InfiniteRunner: React.FC<InfiniteRunnerProps> = ({ gameId, gameTitle, embe
17081708

17091709
{/* Game Canvas */}
17101710
<div className='relative w-full h-full flex items-center justify-center bg-black overflow-hidden'>
1711-
{/* Parallax Background Image */}
1711+
{/* Parallax Background Image - Scrolling */}
17121712
<div
1713-
className='absolute inset-0 w-[200%] h-full'
1713+
className='absolute inset-0 w-full h-full'
17141714
style={{
1715-
transform: `translateX(-${bgImageOffset}px)`,
1716-
backgroundImage: `url('${getBackgroundImage()}'), url('${getBackgroundImage()}')`,
1717-
backgroundSize: '100% 100%',
1718-
backgroundPosition: `0 0, 100% 0`,
1719-
backgroundRepeat: 'no-repeat',
1715+
backgroundImage: `url('${getBackgroundImage()}')`,
1716+
backgroundSize: 'cover',
1717+
backgroundPosition: `${-bgImageOffset * 0.3}px center`,
1718+
backgroundRepeat: 'repeat-x',
17201719
opacity: 0.6,
17211720
filter: 'brightness(0.7)',
17221721
}}
@@ -2283,6 +2282,10 @@ const InfiniteRunner: React.FC<InfiniteRunnerProps> = ({ gameId, gameTitle, embe
22832282
else if (newLevel === 3) setTheme('night');
22842283
else if (newLevel >= 4) setTheme('cyber');
22852284

2285+
// Reset background offsets for smooth transition
2286+
setBgOffset(0);
2287+
setBgImageOffset(0);
2288+
22862289
// Give 4 seconds of invulnerability after level up
22872290
setInvulnerableUntil(Date.now() + 4000);
22882291

‎components/games/MiniGameStore.tsx‎

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -376,33 +376,6 @@ export default function MiniGameStore() {
376376

377377
return (
378378
<div className='min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden'>
379-
{/* Epic Background Effects */}
380-
<div className='absolute inset-0'>
381-
{/* Floating Particles */}
382-
<div className='absolute top-20 left-10 w-2 h-2 bg-cyan-400 rounded-full animate-ping opacity-60'></div>
383-
<div
384-
className='absolute top-40 right-20 w-1.5 h-1.5 bg-purple-400 rounded-full animate-ping opacity-80'
385-
style={{ animationDelay: '1s' }}
386-
></div>
387-
<div
388-
className='absolute bottom-40 left-1/4 w-1 h-1 bg-pink-400 rounded-full animate-ping opacity-70'
389-
style={{ animationDelay: '2s' }}
390-
></div>
391-
<div
392-
className='absolute bottom-20 right-1/3 w-2.5 h-2.5 bg-blue-400 rounded-full animate-ping opacity-90'
393-
style={{ animationDelay: '0.5s' }}
394-
></div>
395-
396-
{/* Energy Grid Lines */}
397-
<div className='absolute inset-0 opacity-20'>
398-
<div className='absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent'></div>
399-
<div className='absolute top-1/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-purple-400 to-transparent'></div>
400-
<div className='absolute top-1/2 left-0 w-full h-px bg-gradient-to-r from-transparent via-pink-400 to-transparent'></div>
401-
<div className='absolute top-3/4 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-400 to-transparent'></div>
402-
<div className='absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent'></div>
403-
</div>
404-
</div>
405-
406379
{/* Header */}
407380
<div className='animate-fadeIn'>
408381
<Header />
@@ -459,7 +432,7 @@ export default function MiniGameStore() {
459432
className='text-5xl md:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 drop-shadow-2xl mb-6 animate-pulse'
460433
style={{ marginTop: '-200px' }}
461434
>
462-
GAMING STORE
435+
GAMING STATION
463436
</h1>
464437

465438
<h2 className='text-3xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400 drop-shadow-xl mb-8'>

‎components/layout/NexusPrime.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const NexusPrime: React.FC<NexusPrimeProps> = ({
8888
},
8989
'mini-games': {
9090
welcome:
91-
'Welcome to the Gaming Store, adventurer! 🎮 Epic Web3 learning games await you!',
91+
'Welcome to the Gaming Station, adventurer! 🎮 Epic Web3 learning games await you!',
9292
loading:
9393
'Preparing your gaming arsenal... Get ready to level up your blockchain skills! 🚀',
9494
games: {
@@ -579,7 +579,7 @@ export const NexusPrime: React.FC<NexusPrimeProps> = ({
579579
<div className='text-center'>
580580
<p className='text-cyan-200 text-sm font-bold animate-pulse'>
581581
{currentPage === 'mini-games'
582-
? '🎮 Loading Gaming Store'
582+
? '🎮 Loading Gaming Station'
583583
: currentPage === 'home'
584584
? '🌟 Loading Stellar Nexus Experience'
585585
: '⚡ Initializing Web3 Learning Platform'

‎components/ui/LeaderboardSidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export const LeaderboardSidebar: React.FC<LeaderboardSidebarProps> = ({ isOpen,
132132
</div>
133133

134134
{/* Additional stats row */}
135-
<div className='mt-3 pt-3 border-t border-white/10'>
135+
{/* <div className='mt-3 pt-3 border-t border-white/10'>
136136
<div className='grid grid-cols-3 gap-4 text-center'>
137137
<div>
138138
<div className='text-sm font-semibold text-blue-400'>Lv.{entry.level}</div>
@@ -147,7 +147,7 @@ export const LeaderboardSidebar: React.FC<LeaderboardSidebarProps> = ({ isOpen,
147147
<div className='text-xs text-gray-400'>Badges</div>
148148
</div>
149149
</div>
150-
</div>
150+
</div> */}
151151
</div>
152152
);
153153
};

‎components/ui/modals/InteractiveTutorialModal.tsx‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -384,17 +384,6 @@ export const InteractiveTutorialModal: React.FC<InteractiveTutorialModalProps> =
384384
{currentStepData.description}
385385
</p>
386386
</div>
387-
388-
{/* Action Items */}
389-
<div className="bg-white/5 rounded-lg p-4 sm:p-6 border border-white/10">
390-
<h4 className="text-white font-semibold mb-2 sm:mb-3 text-base sm:text-lg">💡 What to do next:</h4>
391-
<ul className="text-white/80 space-y-1 sm:space-y-2 text-xs sm:text-base">
392-
<li>• Follow the step instructions carefully</li>
393-
<li>• Use the navigation buttons <span className="hidden sm:inline">or keyboard arrows</span></li>
394-
<li>• Take your time to understand each concept</li>
395-
<li>• Complete each step before moving to the next</li>
396-
</ul>
397-
</div>
398387
</div>
399388
</div>
400389
)}

‎components/ui/quest/QuestAndReferralSection.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,12 @@ export const QuestAndReferralSection: React.FC<QuestAndReferralSectionProps> = (
162162

163163
<div className="grid md:grid-cols-3 gap-4">
164164
{/* Box 1: Starter Kits */}
165-
<div className="bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-xl p-6 border border-green-400/30 hover:border-green-400/50 transition-all duration-300 flex flex-col">
165+
<div className="bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-xl p-6 border border-green-400/30 hover:border-green-400/50 transition-all duration-300 flex flex-col relative">
166+
{/* Coming Soon Badge */}
167+
<div className="absolute top-3 right-3 bg-gradient-to-r from-yellow-500 to-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse">
168+
Coming Soon
169+
</div>
170+
166171
<div className="text-center mb-3">
167172
<div className="text-4xl mb-2 flex justify-center items-center">
168173
<Image

0 commit comments

Comments
 (0)