110 lines
3.6 KiB
TypeScript
110 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import { driver } from 'driver.js';
|
|
import 'driver.js/dist/driver.css';
|
|
|
|
export default function OnboardingTour() {
|
|
useEffect(() => {
|
|
const hasCompletedOnboarding = localStorage.getItem('hoerdle_onboarding_completed');
|
|
|
|
if (hasCompletedOnboarding) {
|
|
return;
|
|
}
|
|
|
|
const driverObj = driver({
|
|
showProgress: true,
|
|
animate: true,
|
|
allowClose: true,
|
|
doneBtnText: 'Done',
|
|
nextBtnText: 'Next',
|
|
prevBtnText: 'Previous',
|
|
onDestroyed: () => {
|
|
localStorage.setItem('hoerdle_onboarding_completed', 'true');
|
|
},
|
|
steps: [
|
|
{
|
|
element: '#tour-genres',
|
|
popover: {
|
|
title: 'Genres & Specials',
|
|
description: 'Choose a specific genre or a curated special event here.',
|
|
side: 'bottom',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-news',
|
|
popover: {
|
|
title: 'News',
|
|
description: 'Stay updated with the latest news and announcements.',
|
|
side: 'top',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-title',
|
|
popover: {
|
|
title: 'Hördle',
|
|
description: 'This is the daily puzzle. One new song every day per genre.',
|
|
side: 'bottom',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-status',
|
|
popover: {
|
|
title: 'Attempts',
|
|
description: 'You have a limited number of attempts to guess the song.',
|
|
side: 'bottom',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-score',
|
|
popover: {
|
|
title: 'Score',
|
|
description: 'Your current score. Try to keep it high!',
|
|
side: 'bottom',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-player',
|
|
popover: {
|
|
title: 'Player',
|
|
description: 'Listen to the snippet. Each additional play reduces your potential score.',
|
|
side: 'top',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-input',
|
|
popover: {
|
|
title: 'Input',
|
|
description: 'Type your guess here. Search for artist or title.',
|
|
side: 'top',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-controls',
|
|
popover: {
|
|
title: 'Controls',
|
|
description: 'Start the music or skip to the next snippet if you\'re stuck.',
|
|
side: 'top',
|
|
align: 'start'
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// Small delay to ensure DOM is ready
|
|
setTimeout(() => {
|
|
driverObj.drive();
|
|
}, 1000);
|
|
|
|
}, []);
|
|
|
|
return null;
|
|
}
|