113 lines
3.5 KiB
TypeScript
113 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { driver } from 'driver.js';
|
|
import 'driver.js/dist/driver.css';
|
|
|
|
export default function OnboardingTour() {
|
|
const t = useTranslations('OnboardingTour');
|
|
|
|
useEffect(() => {
|
|
const hasCompletedOnboarding = localStorage.getItem('hoerdle_onboarding_completed');
|
|
|
|
if (hasCompletedOnboarding) {
|
|
return;
|
|
}
|
|
|
|
const driverObj = driver({
|
|
showProgress: true,
|
|
animate: true,
|
|
allowClose: true,
|
|
doneBtnText: t('done'),
|
|
nextBtnText: t('next'),
|
|
prevBtnText: t('previous'),
|
|
onDestroyed: () => {
|
|
localStorage.setItem('hoerdle_onboarding_completed', 'true');
|
|
},
|
|
steps: [
|
|
{
|
|
element: '#tour-genres',
|
|
popover: {
|
|
title: t('genresSpecials'),
|
|
description: t('genresSpecialsDescription'),
|
|
side: 'bottom',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-news',
|
|
popover: {
|
|
title: t('news'),
|
|
description: t('newsDescription'),
|
|
side: 'top',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-title',
|
|
popover: {
|
|
title: t('hoerdle'),
|
|
description: t('hoerdleDescription'),
|
|
side: 'bottom',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-status',
|
|
popover: {
|
|
title: t('attempts'),
|
|
description: t('attemptsDescription'),
|
|
side: 'bottom',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-score',
|
|
popover: {
|
|
title: t('score'),
|
|
description: t('scoreDescription'),
|
|
side: 'bottom',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-player',
|
|
popover: {
|
|
title: t('player'),
|
|
description: t('playerDescription'),
|
|
side: 'top',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-input',
|
|
popover: {
|
|
title: t('input'),
|
|
description: t('inputDescription'),
|
|
side: 'top',
|
|
align: 'start'
|
|
}
|
|
},
|
|
{
|
|
element: '#tour-controls',
|
|
popover: {
|
|
title: t('controls'),
|
|
description: t('controlsDescription'),
|
|
side: 'top',
|
|
align: 'start'
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// Small delay to ensure DOM is ready
|
|
setTimeout(() => {
|
|
driverObj.drive();
|
|
}, 1000);
|
|
|
|
}, [t]);
|
|
|
|
return null;
|
|
}
|