Skip to content

Reorder Initial Setup and Tutorial Flow #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OsakaLOOP wants to merge 1 commit into
base: before-refractor
Choose a base branch
from
Open

Reorder Initial Setup and Tutorial Flow #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 26 additions & 28 deletions src/components/Tutorial.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ import { useTranslation } from 'react-i18next';

const getSteps = (t) => [
{
id: 'welcome',
id: 'start-tutorial',
target: '#header-title', // Center modal
title: t('tutorial.welcome.title', '欢迎来到 RailLOOP'),
content: t('tutorial.welcome.content', 'RailLOOP 是一个个人向旅铁手账, 旨在帮助你追踪和管理你的铁路旅程, 直观可感地展示旅行足迹.'),
title: t('tutorial.start.title', '是否查看教程?'),
content: t('tutorial.start.content', '这里是一个简短的指南，带你了解基本功能。'),
position: 'center',
action: 'next'
},
Expand Down Expand Up @@ -72,8 +72,9 @@ const getSteps = (t) => [
title: t('tutorial.tabMap.title', '地图模式'),
content: t('tutorial.tabMap.content', '切换并查看铁路网络. 灰色的是未乘区段, 而已乘线路将以对应的颜色高亮显示. 底图包含来自 OpenRailwayMap 的配线详情. 新版本不再渲染已乘区间的svg图形, 而丰富了站点交互. 你可以长按站点并拖动连接, 以自动规划。'),
position: 'top',
action: 'switch-tab',
tab: 'map'
action: 'wait-click-tab',
tab: 'map',
check: ({ activeTab }) => activeTab === 'map'
},
{
id: 'map-pins',
Expand Down Expand Up @@ -178,13 +179,8 @@ const Tutorial = ({
setIsLoginOpen(true);
setTimeout(() => setStep(s => s + 1), 200);
} else if (step >= STEPS.length - 1) {
// End -> Show City Selector if not done
const setupDone = localStorage.getItem('rail_setup_done');
if (setupDone === 'true' || devMode) {
setStep(-2);
} else {
setStep(-3);
}
// End
setStep(-2);
setIsVisible(false);
} else {
setStep(s => s + 1);
Expand All @@ -195,13 +191,8 @@ const Tutorial = ({
if (dontShowAgain) {
localStorage.setItem('rail_tutorial_skipped', 'true');
}
// Skip -> Show City Selector if not done
const setupDone = localStorage.getItem('rail_setup_done');
if (setupDone === 'true' || devMode) {
setStep(-2);
} else {
setStep(-3);
}
// Skip tutorial
setStep(-2);
setIsVisible(false);
}, [setStep, setIsVisible, devMode]);

Expand Down Expand Up @@ -229,16 +220,16 @@ const Tutorial = ({
const skipped = localStorage.getItem('rail_tutorial_skipped');
const setupDone = localStorage.getItem('rail_setup_done');

// Priority 1: Tutorial
if (!devMode && skipped !== 'true' && !user) {
setStep(0);
setIsVisible(true);
// Priority 1: Initial Setup
if (!devMode && setupDone !== 'true') {
setStep(-3);
return;
}

// Priority 2: Initial Setup
if (!devMode && setupDone !== 'true') {
setStep(-3);
// Priority 2: Tutorial
if (!devMode && skipped !== 'true' && !user) {
setStep(0);
setIsVisible(true);
return;
}

Expand All @@ -248,8 +239,15 @@ const Tutorial = ({

const handleCitySelectorComplete = useCallback(() => {
localStorage.setItem('rail_setup_done', 'true');
setStep(-2); // Finish onboarding flow
}, [setStep]);

const skipped = localStorage.getItem('rail_tutorial_skipped');
if (!devMode && skipped !== 'true' && !user) {
setStep(0);
setIsVisible(true);
} else {
setStep(-2); // Finish onboarding flow
}
}, [setStep, devMode, user]);

// Step Transition Logic & Rect Calculation
useEffect(() => {
Expand Down
15 changes: 13 additions & 2 deletions src/components/modals/InitialSetupModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -554,8 +554,19 @@ export const InitialSetupModal: React.FC<InitialSetupModalProps> = ({ isOpen, on

<div className={`absolute inset-0 flex flex-col transition-transform duration-500 ease-in-out ${step === 2 ? 'translate-x-0' : 'translate-x-full'} ${step === 2 ? 'opacity-100 relative' : 'opacity-0 absolute pointer-events-none'}`}>
<div className="p-8 pb-4 text-center">
<h2 className="text-3xl font-bold text-gray-800 mb-2">{t('setup.startTitle', '你的探索起点')}</h2>
<p className="text-gray-500">{t('setup.startDesc', '每次打开地图时，你希望从哪里开始你的旅程？')}</p>
{!mode ? (
<>
<h2 className="text-3xl font-bold text-gray-800 mb-2">{t('tutorial.welcome.title', '欢迎来到 RailLOOP')}</h2>
<p className="text-gray-500 max-w-lg mx-auto mb-4">{t('tutorial.welcome.content', 'RailLOOP 是一个个人向旅铁手账, 旨在帮助你追踪和管理你的铁路旅程, 直观可感地展示旅行足迹.')}</p>
<h3 className="text-xl font-bold text-gray-700">{t('setup.startTitle', '你的探索起点')}</h3>
<p className="text-gray-500 text-sm mt-1">{t('setup.startDesc', '每次打开地图时，你希望从哪里开始你的旅程？')}</p>
</>
) : (
<>
<h2 className="text-3xl font-bold text-gray-800 mb-2">{t('setup.startTitle', '你的探索起点')}</h2>
<p className="text-gray-500">{t('setup.startDesc', '每次打开地图时，你希望从哪里开始你的旅程？')}</p>
</>
)}
</div>

<div className="flex-1 overflow-y-auto p-8 pt-4">
Expand Down