Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
a7778c648d | ||
|
7e2f580877 | ||
|
|
f18a89974a | ||
|
|
bf1ced43f8 | ||
|
|
6435027147 | ||
|
|
4d906ec20e | ||
|
|
ff7b711fe0 | ||
|
|
d42f9b2d9a | ||
|
|
faaefbacff | ||
|
|
8d650c5c52 | ||
|
|
79ea52af80 | ||
|
|
6b017b0fe9 | ||
|
|
8f8b1e80db | ||
|
|
c883d9e4c1 | ||
|
|
19b03bc77c |
57
CHANGELOG.md
57
CHANGELOG.md
@@ -1,3 +1,60 @@
|
||||
## [4.18.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.17.2...v4.18.0) (2025-10-19)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **tutorial:** add dark mode styling for coaching bar and abacus frame ([7e2f580](https://github.com/antialias/soroban-abacus-flashcards/commit/7e2f580877af9d21409f427778fa3569c950fcf5))
|
||||
|
||||
## [4.17.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.17.1...v4.17.2) (2025-10-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **tutorial:** correct column index calculation for variable column counts ([bf1ced4](https://github.com/antialias/soroban-abacus-flashcards/commit/bf1ced43f801938b05f01548eea5fe771de1b58f))
|
||||
|
||||
## [4.17.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.17.0...v4.17.1) (2025-10-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **tutorial:** filter bead highlights when using fewer columns ([4d906ec](https://github.com/antialias/soroban-abacus-flashcards/commit/4d906ec20e90a9b0b3838f9b8428e0c68992f381))
|
||||
|
||||
## [4.17.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.16.0...v4.17.0) (2025-10-19)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **tutorial:** add dark theme and column control props ([d42f9b2](https://github.com/antialias/soroban-abacus-flashcards/commit/d42f9b2d9ad630826c55b753dc581c469e8f9083))
|
||||
|
||||
|
||||
### Styles
|
||||
|
||||
* **homepage:** soften tutorial styling for dark theme cohesion ([faaefba](https://github.com/antialias/soroban-abacus-flashcards/commit/faaefbacff419b337aa0fac4a101d5106a18c77c)), closes [#f9](https://github.com/antialias/soroban-abacus-flashcards/issues/f9)
|
||||
|
||||
## [4.16.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.15.1...v4.16.0) (2025-10-19)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **tutorial:** add hideNavigation prop to TutorialPlayer ([79ea52a](https://github.com/antialias/soroban-abacus-flashcards/commit/79ea52af80c8cbb482bbdd87f77caf32ada737ee))
|
||||
|
||||
|
||||
### Styles
|
||||
|
||||
* **homepage:** update tutorial container to match dark theme ([6b017b0](https://github.com/antialias/soroban-abacus-flashcards/commit/6b017b0fe92d4277843d9fe2645c22366f219d76))
|
||||
|
||||
## [4.15.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.15.0...v4.15.1) (2025-10-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **tutorial:** resolve React hydration error in TutorialPlayer ([c883d9e](https://github.com/antialias/soroban-abacus-flashcards/commit/c883d9e4c1b3a2f52c9d41e3ddce7418399f2649))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* replace demo component with real TutorialPlayer system ([19b03bc](https://github.com/antialias/soroban-abacus-flashcards/commit/19b03bc77c649cf51d7b9a3617417c6ec8229ac7))
|
||||
|
||||
## [4.15.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.14.6...v4.15.0) (2025-10-19)
|
||||
|
||||
|
||||
|
||||
222
apps/web/.claude/TUTORIAL_SYSTEM.md
Normal file
222
apps/web/.claude/TUTORIAL_SYSTEM.md
Normal file
@@ -0,0 +1,222 @@
|
||||
# Tutorial System Documentation
|
||||
|
||||
## Overview
|
||||
|
||||
The tutorial system is a sophisticated interactive learning platform for teaching soroban abacus concepts. It features step-by-step guidance, bead highlighting, pedagogical decomposition, and progress tracking.
|
||||
|
||||
## Key Components
|
||||
|
||||
### 1. TutorialPlayer (`/src/components/tutorial/TutorialPlayer.tsx`)
|
||||
The main tutorial playback component that:
|
||||
- Displays tutorial steps progressively
|
||||
- Highlights specific beads users should interact with
|
||||
- Provides real-time feedback and tooltips
|
||||
- Shows step-by-step instructions for multi-step operations
|
||||
- Tracks user progress through the tutorial
|
||||
- Auto-advances to next step on correct completion
|
||||
|
||||
**Key Features:**
|
||||
- **Bead Highlighting**: Visual indicators showing which beads to manipulate
|
||||
- **Step Progress**: Shows current step out of total steps
|
||||
- **Error Feedback**: Provides hints when user makes mistakes
|
||||
- **Multi-Step Support**: Breaks complex operations into sequential sub-steps
|
||||
- **Pedagogical Decomposition**: Explains the "why" behind each operation
|
||||
|
||||
### 2. TutorialEditor (`/src/components/tutorial/TutorialEditor.tsx`)
|
||||
A full-featured editor for creating and editing tutorials:
|
||||
- Visual step editor
|
||||
- Bead highlight configuration
|
||||
- Multi-step instruction editor
|
||||
- Live preview
|
||||
- Import/export functionality
|
||||
- Access control
|
||||
|
||||
**Editor URL:** `/tutorial-editor`
|
||||
|
||||
### 3. Tutorial Data Structure (`/src/types/tutorial.ts`)
|
||||
|
||||
```typescript
|
||||
interface Tutorial {
|
||||
id: string
|
||||
title: string
|
||||
description: string
|
||||
category: string
|
||||
difficulty: 'beginner' | 'intermediate' | 'advanced'
|
||||
estimatedDuration: number // minutes
|
||||
steps: TutorialStep[]
|
||||
tags: string[]
|
||||
author: string
|
||||
version: string
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
isPublished: boolean
|
||||
}
|
||||
|
||||
interface TutorialStep {
|
||||
id: string
|
||||
title: string
|
||||
problem: string // e.g. "2 + 3"
|
||||
description: string // User-facing explanation
|
||||
startValue: number // Initial abacus value
|
||||
targetValue: number // Goal value
|
||||
expectedAction: 'add' | 'remove' | 'multi-step'
|
||||
actionDescription: string
|
||||
|
||||
// Bead highlighting
|
||||
highlightBeads?: Array<{
|
||||
placeValue: number // 0=ones, 1=tens, etc.
|
||||
beadType: 'heaven' | 'earth'
|
||||
position?: number // For earth beads: 0-3
|
||||
}>
|
||||
|
||||
// Progressive step highlighting
|
||||
stepBeadHighlights?: Array<{
|
||||
placeValue: number
|
||||
beadType: 'heaven' | 'earth'
|
||||
position?: number
|
||||
stepIndex: number // Which instruction step
|
||||
direction: 'up' | 'down' | 'activate' | 'deactivate'
|
||||
order?: number // Order within step
|
||||
}>
|
||||
|
||||
totalSteps?: number // For multi-step operations
|
||||
multiStepInstructions?: string[] // Sequential instructions
|
||||
|
||||
// Tooltips and guidance
|
||||
tooltip: {
|
||||
content: string // Short title
|
||||
explanation: string // Detailed explanation
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Tutorial Converter (`/src/utils/tutorialConverter.ts`)
|
||||
|
||||
Utility that converts the original `GuidedAdditionTutorial` data into the new tutorial format:
|
||||
- `guidedAdditionSteps`: Array of tutorial steps from basic addition to complements
|
||||
- `convertGuidedAdditionTutorial()`: Converts to Tutorial object
|
||||
- `getTutorialForEditor()`: Main export used in the app
|
||||
|
||||
**Current Tutorial Steps:**
|
||||
1. Basic Addition (0+1, 1+1, 2+1, 3+1)
|
||||
2. Heaven Bead Introduction (0+5, 5+1)
|
||||
3. Five Complements (3+4, 2+3 using 5-complement method)
|
||||
4. Complex Operations (6+2, 7+4 with carrying)
|
||||
|
||||
### 5. Supporting Utilities
|
||||
|
||||
**`/src/utils/abacusInstructionGenerator.ts`**
|
||||
- Automatically generates step-by-step instructions from start/target values
|
||||
- Creates bead highlight data
|
||||
- Determines movement directions
|
||||
|
||||
**`/src/utils/beadDiff.ts`**
|
||||
- Calculates differences between abacus states
|
||||
- Generates visual feedback tooltips
|
||||
- Explains what changed and why
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Usage in a Page
|
||||
|
||||
```typescript
|
||||
import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
|
||||
import { getTutorialForEditor } from '@/utils/tutorialConverter'
|
||||
|
||||
export function MyPage() {
|
||||
return (
|
||||
<TutorialPlayer
|
||||
tutorial={getTutorialForEditor()}
|
||||
isDebugMode={false}
|
||||
showDebugPanel={false}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Using a Subset of Steps
|
||||
|
||||
```typescript
|
||||
import { getTutorialForEditor } from '@/utils/tutorialConverter'
|
||||
|
||||
const fullTutorial = getTutorialForEditor()
|
||||
|
||||
// Extract specific steps (e.g., just "Friends of 5")
|
||||
const friendsOf5Tutorial = {
|
||||
...fullTutorial,
|
||||
id: 'friends-of-5-demo',
|
||||
title: 'Friends of 5',
|
||||
steps: fullTutorial.steps.filter(step =>
|
||||
step.id === 'complement-2' // The 2+3=5 step
|
||||
)
|
||||
}
|
||||
|
||||
return <TutorialPlayer tutorial={friendsOf5Tutorial} />
|
||||
```
|
||||
|
||||
### Creating a Custom Tutorial
|
||||
|
||||
```typescript
|
||||
const customTutorial: Tutorial = {
|
||||
id: 'my-tutorial',
|
||||
title: 'My Custom Tutorial',
|
||||
description: 'Learning something new',
|
||||
category: 'Custom',
|
||||
difficulty: 'beginner',
|
||||
estimatedDuration: 5,
|
||||
steps: [
|
||||
{
|
||||
id: 'step-1',
|
||||
title: 'Add 2',
|
||||
problem: '0 + 2',
|
||||
description: 'Move two earth beads up',
|
||||
startValue: 0,
|
||||
targetValue: 2,
|
||||
expectedAction: 'add',
|
||||
actionDescription: 'Add two earth beads',
|
||||
highlightBeads: [
|
||||
{ placeValue: 0, beadType: 'earth', position: 0 },
|
||||
{ placeValue: 0, beadType: 'earth', position: 1 }
|
||||
],
|
||||
tooltip: {
|
||||
content: 'Adding 2',
|
||||
explanation: 'Push two earth beads up to represent 2'
|
||||
}
|
||||
}
|
||||
],
|
||||
tags: ['custom'],
|
||||
author: 'Me',
|
||||
version: '1.0.0',
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
isPublished: true
|
||||
}
|
||||
```
|
||||
|
||||
## Current Implementation Locations
|
||||
|
||||
**Live Tutorials:**
|
||||
- `/guide` - Second tab "Arithmetic Operations" contains the full guided addition tutorial
|
||||
|
||||
**Editor:**
|
||||
- `/tutorial-editor` - Full tutorial editing interface
|
||||
|
||||
**Storybook:**
|
||||
- Multiple tutorial stories in `/src/components/tutorial/*.stories.tsx`
|
||||
|
||||
## Key Design Principles
|
||||
|
||||
1. **Progressive Disclosure**: Users see one step at a time
|
||||
2. **Immediate Feedback**: Real-time validation and hints
|
||||
3. **Visual Guidance**: Bead highlighting shows exactly what to do
|
||||
4. **Pedagogical Decomposition**: Multi-step operations broken into atomic actions
|
||||
5. **Auto-Advancement**: Successful completion automatically moves to next step
|
||||
6. **Error Recovery**: Helpful hints when user makes mistakes
|
||||
|
||||
## Notes
|
||||
|
||||
- The tutorial system uses the existing `AbacusReact` component
|
||||
- Tutorials can be created/edited through the TutorialEditor
|
||||
- Tutorial data can be exported/imported as JSON
|
||||
- The system supports both single-step and multi-step operations
|
||||
- Bead highlighting uses place value indexing (0=ones, 1=tens, etc.)
|
||||
@@ -102,7 +102,8 @@
|
||||
"Bash(do gh run list --limit 1 --workflow=\"Build and Deploy\" --json conclusion,status,databaseId --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\") - Run ID: \\(.databaseId)\"\"')",
|
||||
"Bash(node -e:*)",
|
||||
"Bash(do gh run list --limit 1 --workflow=\"Build and Deploy\" --json conclusion,status,databaseId --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\") - Run \\(.databaseId)\"\"')",
|
||||
"Bash(do ssh nas.home.network '/usr/local/bin/docker inspect soroban-abacus-flashcards --format=\"\"{{index .Config.Labels \\\"\"org.opencontainers.image.revision\\\"\"}}\"\"')"
|
||||
"Bash(do ssh nas.home.network '/usr/local/bin/docker inspect soroban-abacus-flashcards --format=\"\"{{index .Config.Labels \\\"\"org.opencontainers.image.revision\\\"\"}}\"\"')",
|
||||
"Bash(git rev-parse HEAD)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
|
||||
@@ -290,10 +290,12 @@ export default function RoomPage() {
|
||||
key={gameDef.manifest.name}
|
||||
onClick={() => handleGameSelect(gameDef.manifest.name)}
|
||||
disabled={isDisabled}
|
||||
className={css({
|
||||
style={{
|
||||
background: gameDef.manifest.gradient,
|
||||
border: '2px solid',
|
||||
borderColor: gameDef.manifest.borderColor,
|
||||
}}
|
||||
className={css({
|
||||
border: '2px solid',
|
||||
borderRadius: '2xl',
|
||||
padding: '6',
|
||||
cursor: isDisabled ? 'not-allowed' : 'pointer',
|
||||
|
||||
@@ -2,11 +2,21 @@
|
||||
|
||||
import Link from 'next/link'
|
||||
import { PageWithNav } from '@/components/PageWithNav'
|
||||
import { FriendsOfFiveDemo } from '@/components/FriendsOfFiveDemo'
|
||||
import { TutorialPlayer } from '@/components/tutorial/TutorialPlayer'
|
||||
import { getTutorialForEditor } from '@/utils/tutorialConverter'
|
||||
import { css } from '../../styled-system/css'
|
||||
import { container, grid, hstack, stack } from '../../styled-system/patterns'
|
||||
|
||||
export default function HomePage() {
|
||||
// Extract just the "Friends of 5" step (2+3=5) for homepage demo
|
||||
const fullTutorial = getTutorialForEditor()
|
||||
const friendsOf5Tutorial = {
|
||||
...fullTutorial,
|
||||
id: 'friends-of-5-demo',
|
||||
title: 'Friends of 5',
|
||||
description: 'Learn the "Friends of 5" technique: adding 3 to make 5',
|
||||
steps: fullTutorial.steps.filter((step) => step.id === 'complement-2'),
|
||||
}
|
||||
|
||||
return (
|
||||
<PageWithNav navTitle="Soroban Learning Platform" navEmoji="🧮">
|
||||
@@ -196,26 +206,49 @@ export default function HomePage() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={grid({ columns: { base: 1, lg: 2 }, gap: '8' })}>
|
||||
{/* Live demo */}
|
||||
<FriendsOfFiveDemo />
|
||||
{/* Live demo and learning objectives */}
|
||||
<div
|
||||
className={css({
|
||||
bg: 'rgba(0, 0, 0, 0.4)',
|
||||
rounded: 'xl',
|
||||
p: '8',
|
||||
border: '1px solid',
|
||||
borderColor: 'gray.700',
|
||||
shadow: 'lg',
|
||||
maxW: '900px',
|
||||
mx: 'auto',
|
||||
})}
|
||||
>
|
||||
<TutorialPlayer
|
||||
tutorial={friendsOf5Tutorial}
|
||||
isDebugMode={false}
|
||||
showDebugPanel={false}
|
||||
hideNavigation={true}
|
||||
abacusColumns={2}
|
||||
theme="dark"
|
||||
/>
|
||||
|
||||
{/* What you'll learn */}
|
||||
{/* What you'll learn - below tutorial */}
|
||||
<div
|
||||
className={stack({
|
||||
gap: '4',
|
||||
bg: 'rgba(0, 0, 0, 0.4)',
|
||||
p: '6',
|
||||
borderRadius: 'xl',
|
||||
border: '1px solid',
|
||||
className={css({
|
||||
mt: '8',
|
||||
pt: '6',
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'gray.700',
|
||||
justifyContent: 'center',
|
||||
})}
|
||||
>
|
||||
<h3 className={css({ fontSize: 'xl', fontWeight: 'bold', color: 'white' })}>
|
||||
<h3
|
||||
className={css({
|
||||
fontSize: 'xl',
|
||||
fontWeight: 'bold',
|
||||
color: 'white',
|
||||
mb: '4',
|
||||
textAlign: 'center',
|
||||
})}
|
||||
>
|
||||
What You'll Learn
|
||||
</h3>
|
||||
<div className={stack({ gap: '3' })}>
|
||||
<div className={grid({ columns: { base: 1, sm: 2 }, gap: '3' })}>
|
||||
{[
|
||||
'Read and set numbers on an abacus',
|
||||
'Add and subtract with "friends" techniques',
|
||||
@@ -224,7 +257,7 @@ export default function HomePage() {
|
||||
].map((skill, i) => (
|
||||
<div key={i} className={hstack({ gap: '3' })}>
|
||||
<span className={css({ color: 'yellow.400', fontSize: 'lg' })}>✓</span>
|
||||
<span className={css({ color: 'gray.300', fontSize: 'md' })}>{skill}</span>
|
||||
<span className={css({ color: 'gray.300', fontSize: 'sm' })}>{skill}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -12,8 +12,6 @@ import { CardSortingProvider } from './Provider'
|
||||
import type { CardSortingConfig, CardSortingMove, CardSortingState } from './types'
|
||||
import { cardSortingValidator } from './Validator'
|
||||
|
||||
const theme = getGameTheme('teal')
|
||||
|
||||
const manifest: GameManifest = {
|
||||
name: 'card-sorting',
|
||||
displayName: 'Card Sorting Challenge',
|
||||
@@ -26,9 +24,7 @@ const manifest: GameManifest = {
|
||||
maxPlayers: 1, // Single player only
|
||||
difficulty: 'Intermediate',
|
||||
chips: ['🧠 Pattern Recognition', '🎯 Solo Challenge', '📊 Smart Scoring'],
|
||||
color: theme.color,
|
||||
gradient: theme.gradient,
|
||||
borderColor: theme.borderColor,
|
||||
...getGameTheme('teal'),
|
||||
available: true,
|
||||
}
|
||||
|
||||
|
||||
@@ -1,127 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { css } from '../../styled-system/css'
|
||||
import { stack } from '../../styled-system/patterns'
|
||||
|
||||
/**
|
||||
* Compact "Friends of 5" demo for the homepage
|
||||
* Shows an interactive example of learning soroban concepts
|
||||
*/
|
||||
export function FriendsOfFiveDemo() {
|
||||
const [currentValue, setCurrentValue] = useState(2)
|
||||
const [targetValue] = useState(5)
|
||||
const [feedback, setFeedback] = useState<string>('Try adding 3 more beads to make 5!')
|
||||
const [isCorrect, setIsCorrect] = useState(false)
|
||||
const appConfig = useAbacusConfig()
|
||||
|
||||
const handleValueChange = useCallback(
|
||||
(newValue: number) => {
|
||||
setCurrentValue(newValue)
|
||||
|
||||
if (newValue === targetValue) {
|
||||
setIsCorrect(true)
|
||||
setFeedback('Perfect! You made 5! This is the "Friends of 5" concept.')
|
||||
} else if (newValue > targetValue) {
|
||||
setFeedback('Oops! Too many beads. Try to make exactly 5.')
|
||||
} else {
|
||||
setFeedback(`Add ${targetValue - newValue} more to make 5!`)
|
||||
}
|
||||
},
|
||||
[targetValue]
|
||||
)
|
||||
|
||||
// Reset after 3 seconds when correct
|
||||
useEffect(() => {
|
||||
if (isCorrect) {
|
||||
const timeout = setTimeout(() => {
|
||||
setCurrentValue(2)
|
||||
setIsCorrect(false)
|
||||
setFeedback('Try adding 3 more beads to make 5!')
|
||||
}, 3000)
|
||||
return () => clearTimeout(timeout)
|
||||
}
|
||||
}, [isCorrect])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={stack({
|
||||
gap: '4',
|
||||
bg: 'rgba(255, 255, 255, 0.05)',
|
||||
p: '6',
|
||||
borderRadius: 'xl',
|
||||
border: '1px solid rgba(139, 92, 246, 0.2)',
|
||||
})}
|
||||
>
|
||||
{/* Title */}
|
||||
<div className={css({ textAlign: 'center' })}>
|
||||
<h4
|
||||
className={css({
|
||||
fontSize: 'lg',
|
||||
fontWeight: 'bold',
|
||||
color: 'white',
|
||||
mb: '2',
|
||||
})}
|
||||
>
|
||||
Try It Now: Friends of 5
|
||||
</h4>
|
||||
<p className={css({ fontSize: 'sm', color: 'gray.300' })}>Problem: 2 + 3 = ?</p>
|
||||
</div>
|
||||
|
||||
{/* Interactive Abacus */}
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
bg: 'white',
|
||||
p: '4',
|
||||
borderRadius: 'lg',
|
||||
minHeight: '200px',
|
||||
alignItems: 'center',
|
||||
})}
|
||||
>
|
||||
<AbacusReact
|
||||
value={currentValue}
|
||||
columns={1}
|
||||
beadShape={appConfig.beadShape}
|
||||
colorScheme={appConfig.colorScheme}
|
||||
hideInactiveBeads={appConfig.hideInactiveBeads}
|
||||
interactive={true}
|
||||
animated={true}
|
||||
soundEnabled={true}
|
||||
soundVolume={0.3}
|
||||
scaleFactor={1.8}
|
||||
showNumbers={true}
|
||||
onValueChange={handleValueChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Feedback */}
|
||||
<div
|
||||
className={css({
|
||||
p: '3',
|
||||
bg: isCorrect ? 'rgba(34, 197, 94, 0.1)' : 'rgba(59, 130, 246, 0.1)',
|
||||
border: '1px solid',
|
||||
borderColor: isCorrect ? 'rgba(34, 197, 94, 0.3)' : 'rgba(59, 130, 246, 0.3)',
|
||||
borderRadius: 'md',
|
||||
textAlign: 'center',
|
||||
})}
|
||||
>
|
||||
<p
|
||||
className={css({
|
||||
fontSize: 'sm',
|
||||
color: isCorrect ? 'green.300' : 'blue.300',
|
||||
fontWeight: 'medium',
|
||||
})}
|
||||
>
|
||||
{feedback}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={css({ textAlign: 'center', fontSize: 'xs', color: 'gray.400' })}>
|
||||
Click the beads to move them up or down
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -215,6 +215,9 @@ interface TutorialPlayerProps {
|
||||
initialStepIndex?: number
|
||||
isDebugMode?: boolean
|
||||
showDebugPanel?: boolean
|
||||
hideNavigation?: boolean
|
||||
abacusColumns?: number
|
||||
theme?: 'light' | 'dark'
|
||||
onStepChange?: (stepIndex: number, step: TutorialStep) => void
|
||||
onStepComplete?: (stepIndex: number, step: TutorialStep, success: boolean) => void
|
||||
onTutorialComplete?: (score: number, timeSpent: number) => void
|
||||
@@ -227,6 +230,9 @@ function TutorialPlayerContent({
|
||||
initialStepIndex = 0,
|
||||
isDebugMode = false,
|
||||
showDebugPanel = false,
|
||||
hideNavigation = false,
|
||||
abacusColumns = 5,
|
||||
theme = 'light',
|
||||
onStepChange,
|
||||
onStepComplete,
|
||||
onTutorialComplete,
|
||||
@@ -379,16 +385,20 @@ function TutorialPlayerContent({
|
||||
}
|
||||
|
||||
// Convert bead diff results to StepBeadHighlight format expected by AbacusReact
|
||||
const stepBeadHighlights: StepBeadHighlight[] = beadDiff.changes.map((change, _index) => ({
|
||||
placeValue: change.placeValue,
|
||||
beadType: change.beadType,
|
||||
position: change.position,
|
||||
direction: change.direction,
|
||||
stepIndex: currentMultiStep, // Use current multi-step index to match AbacusReact filtering
|
||||
order: change.order,
|
||||
}))
|
||||
// Filter to only include beads from columns that exist
|
||||
const minValidPlaceValue = Math.max(0, 5 - abacusColumns)
|
||||
const stepBeadHighlights: StepBeadHighlight[] = beadDiff.changes
|
||||
.filter((change) => change.placeValue < abacusColumns)
|
||||
.map((change, _index) => ({
|
||||
placeValue: change.placeValue,
|
||||
beadType: change.beadType,
|
||||
position: change.position,
|
||||
direction: change.direction,
|
||||
stepIndex: currentMultiStep, // Use current multi-step index to match AbacusReact filtering
|
||||
order: change.order,
|
||||
}))
|
||||
|
||||
return stepBeadHighlights
|
||||
return stepBeadHighlights.length > 0 ? stepBeadHighlights : undefined
|
||||
} catch (error) {
|
||||
console.error('Error generating step beads with bead diff:', error)
|
||||
return undefined
|
||||
@@ -399,6 +409,7 @@ function TutorialPlayerContent({
|
||||
expectedSteps,
|
||||
currentMultiStep,
|
||||
currentStep.stepBeadHighlights,
|
||||
abacusColumns,
|
||||
])
|
||||
|
||||
// Get the current step's bead diff summary for real-time user feedback
|
||||
@@ -422,6 +433,15 @@ function TutorialPlayerContent({
|
||||
// Get current step summary for real-time user feedback
|
||||
const currentStepSummary = getCurrentStepSummary()
|
||||
|
||||
// Filter highlightBeads to only include valid columns
|
||||
const filteredHighlightBeads = useMemo(() => {
|
||||
if (!currentStep.highlightBeads) return undefined
|
||||
return currentStep.highlightBeads.filter((highlight) => {
|
||||
const placeValue = highlight.placeValue ?? 4 - (highlight.columnIndex ?? 0)
|
||||
return placeValue < abacusColumns
|
||||
})
|
||||
}, [currentStep.highlightBeads, abacusColumns])
|
||||
|
||||
// Helper function to highlight the current mathematical term in the full decomposition
|
||||
const renderHighlightedDecomposition = useCallback(() => {
|
||||
if (!fullDecomposition || expectedSteps.length === 0) return null
|
||||
@@ -519,16 +539,27 @@ function TutorialPlayerContent({
|
||||
return null
|
||||
}
|
||||
|
||||
// Validate that the bead is from a column that exists
|
||||
if (topmostBead.placeValue >= abacusColumns) {
|
||||
// Bead is from an invalid column, skip tooltip
|
||||
return null
|
||||
}
|
||||
|
||||
// Smart positioning logic: avoid covering active beads
|
||||
const targetColumnIndex = 4 - topmostBead.placeValue // Convert placeValue to columnIndex (5 columns: 0-4)
|
||||
// Convert placeValue to columnIndex based on actual number of columns
|
||||
const targetColumnIndex = abacusColumns - 1 - topmostBead.placeValue
|
||||
|
||||
// Check if there are any active beads (against reckoning bar OR with arrows) in columns to the left
|
||||
const hasActiveBeadsToLeft = (() => {
|
||||
// Get current abacus state - we need to check which beads are against the reckoning bar
|
||||
const abacusDigits = currentValue.toString().padStart(5, '0').split('').map(Number)
|
||||
const abacusDigits = currentValue
|
||||
.toString()
|
||||
.padStart(abacusColumns, '0')
|
||||
.split('')
|
||||
.map(Number)
|
||||
|
||||
for (let col = 0; col < targetColumnIndex; col++) {
|
||||
const _placeValue = 4 - col // Convert columnIndex back to placeValue
|
||||
const placeValue = abacusColumns - 1 - col // Convert columnIndex back to placeValue
|
||||
const digitValue = abacusDigits[col]
|
||||
|
||||
// Check if any beads are active (against reckoning bar) in this column
|
||||
@@ -544,7 +575,7 @@ function TutorialPlayerContent({
|
||||
// Also check if this column has beads with direction arrows (from current step)
|
||||
const hasArrowsInColumn =
|
||||
currentStepBeads?.some((bead) => {
|
||||
const beadColumnIndex = 4 - bead.placeValue
|
||||
const beadColumnIndex = abacusColumns - 1 - bead.placeValue
|
||||
return beadColumnIndex === col && bead.direction && bead.direction !== 'none'
|
||||
}) ?? false
|
||||
if (hasArrowsInColumn) {
|
||||
@@ -670,6 +701,7 @@ function TutorialPlayerContent({
|
||||
currentValue,
|
||||
currentStep,
|
||||
isMeaningfulDecomposition,
|
||||
abacusColumns,
|
||||
])
|
||||
|
||||
// Timer for smart help detection
|
||||
@@ -1003,6 +1035,9 @@ function TutorialPlayerContent({
|
||||
|
||||
// Memoize custom styles calculation to avoid expensive recalculation on every render
|
||||
const customStyles = useMemo(() => {
|
||||
// Calculate valid column range based on abacusColumns
|
||||
const minValidColumn = 5 - abacusColumns
|
||||
|
||||
// Start with static highlights from step configuration
|
||||
const staticHighlights: Record<number, any> = {}
|
||||
|
||||
@@ -1012,6 +1047,11 @@ function TutorialPlayerContent({
|
||||
const columnIndex =
|
||||
highlight.placeValue !== undefined ? 4 - highlight.placeValue : highlight.columnIndex
|
||||
|
||||
// Skip highlights for columns that don't exist
|
||||
if (columnIndex < minValidColumn) {
|
||||
return
|
||||
}
|
||||
|
||||
// Initialize column if it doesn't exist
|
||||
if (!staticHighlights[columnIndex]) {
|
||||
staticHighlights[columnIndex] = {}
|
||||
@@ -1041,6 +1081,12 @@ function TutorialPlayerContent({
|
||||
const mergedHighlights = { ...staticHighlights }
|
||||
Object.keys(dynamicColumnHighlights).forEach((columnIndexStr) => {
|
||||
const columnIndex = parseInt(columnIndexStr, 10)
|
||||
|
||||
// Skip highlights for columns that don't exist
|
||||
if (columnIndex < minValidColumn) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!mergedHighlights[columnIndex]) {
|
||||
mergedHighlights[columnIndex] = {}
|
||||
}
|
||||
@@ -1048,8 +1094,37 @@ function TutorialPlayerContent({
|
||||
Object.assign(mergedHighlights[columnIndex], dynamicColumnHighlights[columnIndex])
|
||||
})
|
||||
|
||||
return Object.keys(mergedHighlights).length > 0 ? { columns: mergedHighlights } : undefined
|
||||
}, [currentStep.highlightBeads, dynamicColumnHighlights])
|
||||
// Build the custom styles object
|
||||
const styles: any = {}
|
||||
|
||||
// Add column highlights if any
|
||||
if (Object.keys(mergedHighlights).length > 0) {
|
||||
styles.columns = mergedHighlights
|
||||
}
|
||||
|
||||
// Add frame styling for dark mode
|
||||
if (theme === 'dark') {
|
||||
styles.frame = {
|
||||
// Column dividers
|
||||
column: {
|
||||
stroke: 'rgba(255, 255, 255, 0.15)',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
// Reckoning bar (horizontal middle bar)
|
||||
reckoningBar: {
|
||||
stroke: 'rgba(255, 255, 255, 0.2)',
|
||||
strokeWidth: 3,
|
||||
},
|
||||
// Outer frame
|
||||
border: {
|
||||
stroke: 'rgba(255, 255, 255, 0.15)',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
return Object.keys(styles).length > 0 ? styles : undefined
|
||||
}, [currentStep.highlightBeads, dynamicColumnHighlights, abacusColumns, theme])
|
||||
|
||||
if (!currentStep) {
|
||||
return <div>No steps available</div>
|
||||
@@ -1061,183 +1136,187 @@ function TutorialPlayerContent({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
minHeight: '600px',
|
||||
minHeight: hideNavigation ? 'auto' : '600px',
|
||||
})} ${className || ''}`}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
className={css({
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'gray.200',
|
||||
p: 4,
|
||||
bg: 'white',
|
||||
})}
|
||||
>
|
||||
{!hideNavigation && (
|
||||
<div
|
||||
className={hstack({
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
className={css({
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'gray.200',
|
||||
p: 4,
|
||||
bg: 'white',
|
||||
})}
|
||||
>
|
||||
<div>
|
||||
<h1 className={css({ fontSize: 'xl', fontWeight: 'bold' })}>{tutorial.title}</h1>
|
||||
<p className={css({ fontSize: 'sm', color: 'gray.600' })}>
|
||||
Step {currentStepIndex + 1} of {tutorial.steps.length}: {currentStep.title}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={hstack({ gap: 2 })}>
|
||||
{isDebugMode && (
|
||||
<>
|
||||
<button
|
||||
onClick={toggleDebugPanel}
|
||||
className={css({
|
||||
px: 3,
|
||||
py: 1,
|
||||
fontSize: 'sm',
|
||||
border: '1px solid',
|
||||
borderColor: 'blue.300',
|
||||
borderRadius: 'md',
|
||||
bg: uiState.showDebugPanel ? 'blue.100' : 'white',
|
||||
color: 'blue.700',
|
||||
cursor: 'pointer',
|
||||
_hover: { bg: 'blue.50' },
|
||||
})}
|
||||
>
|
||||
Debug
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleStepList}
|
||||
className={css({
|
||||
px: 3,
|
||||
py: 1,
|
||||
fontSize: 'sm',
|
||||
border: '1px solid',
|
||||
borderColor: 'gray.300',
|
||||
borderRadius: 'md',
|
||||
bg: uiState.showStepList ? 'gray.100' : 'white',
|
||||
cursor: 'pointer',
|
||||
_hover: { bg: 'gray.50' },
|
||||
})}
|
||||
>
|
||||
Steps
|
||||
</button>
|
||||
|
||||
{/* Multi-step navigation controls */}
|
||||
{currentStep.multiStepInstructions &&
|
||||
currentStep.multiStepInstructions.length > 1 && (
|
||||
<>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: 'xs',
|
||||
color: 'gray.600',
|
||||
px: 2,
|
||||
borderLeft: '1px solid',
|
||||
borderColor: 'gray.300',
|
||||
ml: 2,
|
||||
pl: 3,
|
||||
})}
|
||||
>
|
||||
Multi-Step: {currentMultiStep + 1} /{' '}
|
||||
{currentStep.multiStepInstructions.length}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => dispatch({ type: 'RESET_MULTI_STEP' })}
|
||||
disabled={currentMultiStep === 0}
|
||||
className={css({
|
||||
px: 2,
|
||||
py: 1,
|
||||
fontSize: 'xs',
|
||||
border: '1px solid',
|
||||
borderColor: currentMultiStep === 0 ? 'gray.200' : 'orange.300',
|
||||
borderRadius: 'md',
|
||||
bg: currentMultiStep === 0 ? 'gray.100' : 'white',
|
||||
color: currentMultiStep === 0 ? 'gray.400' : 'orange.700',
|
||||
cursor: currentMultiStep === 0 ? 'not-allowed' : 'pointer',
|
||||
_hover: currentMultiStep === 0 ? {} : { bg: 'orange.50' },
|
||||
})}
|
||||
>
|
||||
⏮ First
|
||||
</button>
|
||||
<button
|
||||
onClick={() => previousMultiStep()}
|
||||
disabled={currentMultiStep === 0}
|
||||
className={css({
|
||||
px: 2,
|
||||
py: 1,
|
||||
fontSize: 'xs',
|
||||
border: '1px solid',
|
||||
borderColor: currentMultiStep === 0 ? 'gray.200' : 'orange.300',
|
||||
borderRadius: 'md',
|
||||
bg: currentMultiStep === 0 ? 'gray.100' : 'white',
|
||||
color: currentMultiStep === 0 ? 'gray.400' : 'orange.700',
|
||||
cursor: currentMultiStep === 0 ? 'not-allowed' : 'pointer',
|
||||
_hover: currentMultiStep === 0 ? {} : { bg: 'orange.50' },
|
||||
})}
|
||||
>
|
||||
⏪ Prev
|
||||
</button>
|
||||
<button
|
||||
onClick={() => advanceMultiStep()}
|
||||
disabled={currentMultiStep >= currentStep.multiStepInstructions.length - 1}
|
||||
className={css({
|
||||
px: 2,
|
||||
py: 1,
|
||||
fontSize: 'xs',
|
||||
border: '1px solid',
|
||||
borderColor:
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
? 'gray.200'
|
||||
: 'green.300',
|
||||
borderRadius: 'md',
|
||||
bg:
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
? 'gray.100'
|
||||
: 'white',
|
||||
color:
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
? 'gray.400'
|
||||
: 'green.700',
|
||||
cursor:
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
? 'not-allowed'
|
||||
: 'pointer',
|
||||
_hover:
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
? {}
|
||||
: { bg: 'green.50' },
|
||||
})}
|
||||
>
|
||||
Next ⏩
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<label className={hstack({ gap: 2, fontSize: 'sm' })}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={uiState.autoAdvance}
|
||||
onChange={toggleAutoAdvance}
|
||||
/>
|
||||
Auto-advance
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className={css({ mt: 2, bg: 'gray.200', borderRadius: 'full', h: 2 })}>
|
||||
<div
|
||||
className={css({
|
||||
bg: 'blue.500',
|
||||
h: 'full',
|
||||
borderRadius: 'full',
|
||||
transition: 'width 0.3s ease',
|
||||
className={hstack({
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
})}
|
||||
style={{ width: `${navigationState.completionPercentage}%` }}
|
||||
/>
|
||||
>
|
||||
<div>
|
||||
<h1 className={css({ fontSize: 'xl', fontWeight: 'bold' })}>{tutorial.title}</h1>
|
||||
<p className={css({ fontSize: 'sm', color: 'gray.600' })}>
|
||||
Step {currentStepIndex + 1} of {tutorial.steps.length}: {currentStep.title}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={hstack({ gap: 2 })}>
|
||||
{isDebugMode && (
|
||||
<>
|
||||
<button
|
||||
onClick={toggleDebugPanel}
|
||||
className={css({
|
||||
px: 3,
|
||||
py: 1,
|
||||
fontSize: 'sm',
|
||||
border: '1px solid',
|
||||
borderColor: 'blue.300',
|
||||
borderRadius: 'md',
|
||||
bg: uiState.showDebugPanel ? 'blue.100' : 'white',
|
||||
color: 'blue.700',
|
||||
cursor: 'pointer',
|
||||
_hover: { bg: 'blue.50' },
|
||||
})}
|
||||
>
|
||||
Debug
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleStepList}
|
||||
className={css({
|
||||
px: 3,
|
||||
py: 1,
|
||||
fontSize: 'sm',
|
||||
border: '1px solid',
|
||||
borderColor: 'gray.300',
|
||||
borderRadius: 'md',
|
||||
bg: uiState.showStepList ? 'gray.100' : 'white',
|
||||
cursor: 'pointer',
|
||||
_hover: { bg: 'gray.50' },
|
||||
})}
|
||||
>
|
||||
Steps
|
||||
</button>
|
||||
|
||||
{/* Multi-step navigation controls */}
|
||||
{currentStep.multiStepInstructions &&
|
||||
currentStep.multiStepInstructions.length > 1 && (
|
||||
<>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: 'xs',
|
||||
color: 'gray.600',
|
||||
px: 2,
|
||||
borderLeft: '1px solid',
|
||||
borderColor: 'gray.300',
|
||||
ml: 2,
|
||||
pl: 3,
|
||||
})}
|
||||
>
|
||||
Multi-Step: {currentMultiStep + 1} /{' '}
|
||||
{currentStep.multiStepInstructions.length}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => dispatch({ type: 'RESET_MULTI_STEP' })}
|
||||
disabled={currentMultiStep === 0}
|
||||
className={css({
|
||||
px: 2,
|
||||
py: 1,
|
||||
fontSize: 'xs',
|
||||
border: '1px solid',
|
||||
borderColor: currentMultiStep === 0 ? 'gray.200' : 'orange.300',
|
||||
borderRadius: 'md',
|
||||
bg: currentMultiStep === 0 ? 'gray.100' : 'white',
|
||||
color: currentMultiStep === 0 ? 'gray.400' : 'orange.700',
|
||||
cursor: currentMultiStep === 0 ? 'not-allowed' : 'pointer',
|
||||
_hover: currentMultiStep === 0 ? {} : { bg: 'orange.50' },
|
||||
})}
|
||||
>
|
||||
⏮ First
|
||||
</button>
|
||||
<button
|
||||
onClick={() => previousMultiStep()}
|
||||
disabled={currentMultiStep === 0}
|
||||
className={css({
|
||||
px: 2,
|
||||
py: 1,
|
||||
fontSize: 'xs',
|
||||
border: '1px solid',
|
||||
borderColor: currentMultiStep === 0 ? 'gray.200' : 'orange.300',
|
||||
borderRadius: 'md',
|
||||
bg: currentMultiStep === 0 ? 'gray.100' : 'white',
|
||||
color: currentMultiStep === 0 ? 'gray.400' : 'orange.700',
|
||||
cursor: currentMultiStep === 0 ? 'not-allowed' : 'pointer',
|
||||
_hover: currentMultiStep === 0 ? {} : { bg: 'orange.50' },
|
||||
})}
|
||||
>
|
||||
⏪ Prev
|
||||
</button>
|
||||
<button
|
||||
onClick={() => advanceMultiStep()}
|
||||
disabled={
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
}
|
||||
className={css({
|
||||
px: 2,
|
||||
py: 1,
|
||||
fontSize: 'xs',
|
||||
border: '1px solid',
|
||||
borderColor:
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
? 'gray.200'
|
||||
: 'green.300',
|
||||
borderRadius: 'md',
|
||||
bg:
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
? 'gray.100'
|
||||
: 'white',
|
||||
color:
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
? 'gray.400'
|
||||
: 'green.700',
|
||||
cursor:
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
? 'not-allowed'
|
||||
: 'pointer',
|
||||
_hover:
|
||||
currentMultiStep >= currentStep.multiStepInstructions.length - 1
|
||||
? {}
|
||||
: { bg: 'green.50' },
|
||||
})}
|
||||
>
|
||||
Next ⏩
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<label className={hstack({ gap: 2, fontSize: 'sm' })}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={uiState.autoAdvance}
|
||||
onChange={toggleAutoAdvance}
|
||||
/>
|
||||
Auto-advance
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className={css({ mt: 2, bg: 'gray.200', borderRadius: 'full', h: 2 })}>
|
||||
<div
|
||||
className={css({
|
||||
bg: 'blue.500',
|
||||
h: 'full',
|
||||
borderRadius: 'full',
|
||||
transition: 'width 0.3s ease',
|
||||
})}
|
||||
style={{ width: `${navigationState.completionPercentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={hstack({ flex: 1, gap: 0 })}>
|
||||
{/* Step list sidebar */}
|
||||
@@ -1313,11 +1392,18 @@ function TutorialPlayerContent({
|
||||
fontSize: '2xl',
|
||||
fontWeight: 'bold',
|
||||
mb: 2,
|
||||
color: theme === 'dark' ? 'gray.200' : 'gray.900',
|
||||
})}
|
||||
>
|
||||
{currentStep.problem}
|
||||
</h2>
|
||||
<p className={css({ fontSize: 'lg', color: 'gray.700', mb: 4 })}>
|
||||
<p
|
||||
className={css({
|
||||
fontSize: 'lg',
|
||||
color: theme === 'dark' ? 'gray.400' : 'gray.700',
|
||||
mb: 4,
|
||||
})}
|
||||
>
|
||||
{currentStep.description}
|
||||
</p>
|
||||
{/* Hide action description for multi-step problems since it duplicates pedagogical decomposition */}
|
||||
@@ -1335,12 +1421,19 @@ function TutorialPlayerContent({
|
||||
className={css({
|
||||
p: 5,
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(255,248,225,0.95) 0%, rgba(254,252,232,0.95) 50%, rgba(255,245,157,0.15) 100%)',
|
||||
theme === 'dark'
|
||||
? 'linear-gradient(135deg, rgba(40,40,50,0.6) 0%, rgba(50,50,60,0.6) 50%, rgba(60,50,70,0.3) 100%)'
|
||||
: 'linear-gradient(135deg, rgba(255,248,225,0.95) 0%, rgba(254,252,232,0.95) 50%, rgba(255,245,157,0.15) 100%)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
border: '1px solid rgba(251,191,36,0.3)',
|
||||
border:
|
||||
theme === 'dark'
|
||||
? '1px solid rgba(255,255,255,0.1)'
|
||||
: '1px solid rgba(251,191,36,0.3)',
|
||||
borderRadius: 'xl',
|
||||
boxShadow:
|
||||
'0 8px 32px rgba(251,191,36,0.1), 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6)',
|
||||
theme === 'dark'
|
||||
? '0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05)'
|
||||
: '0 8px 32px rgba(251,191,36,0.1), 0 2px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6)',
|
||||
position: 'relative',
|
||||
maxW: '600px',
|
||||
w: 'full',
|
||||
@@ -1350,7 +1443,9 @@ function TutorialPlayerContent({
|
||||
inset: '0',
|
||||
borderRadius: 'xl',
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(168,85,247,0.05) 100%)',
|
||||
theme === 'dark'
|
||||
? 'linear-gradient(135deg, rgba(100,100,120,0.1) 0%, rgba(80,60,100,0.05) 100%)'
|
||||
: 'linear-gradient(135deg, rgba(251,191,36,0.1) 0%, rgba(168,85,247,0.05) 100%)',
|
||||
zIndex: -1,
|
||||
},
|
||||
})}
|
||||
@@ -1359,10 +1454,10 @@ function TutorialPlayerContent({
|
||||
className={css({
|
||||
fontSize: 'base',
|
||||
fontWeight: '600',
|
||||
color: 'amber.900',
|
||||
color: theme === 'dark' ? 'gray.300' : 'amber.900',
|
||||
mb: 4,
|
||||
letterSpacing: 'wide',
|
||||
textShadow: '0 1px 2px rgba(0,0,0,0.1)',
|
||||
textShadow: theme === 'dark' ? 'none' : '0 1px 2px rgba(0,0,0,0.1)',
|
||||
})}
|
||||
>
|
||||
Guidance
|
||||
@@ -1375,18 +1470,25 @@ function TutorialPlayerContent({
|
||||
mb: 4,
|
||||
p: 3,
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.9) 100%)',
|
||||
border: '1px solid rgba(203,213,225,0.4)',
|
||||
theme === 'dark'
|
||||
? 'linear-gradient(135deg, rgba(50,50,60,0.4) 0%, rgba(40,40,50,0.5) 100%)'
|
||||
: 'linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.9) 100%)',
|
||||
border:
|
||||
theme === 'dark'
|
||||
? '1px solid rgba(255,255,255,0.1)'
|
||||
: '1px solid rgba(203,213,225,0.4)',
|
||||
borderRadius: 'lg',
|
||||
boxShadow:
|
||||
'0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7)',
|
||||
theme === 'dark'
|
||||
? '0 1px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05)'
|
||||
: '0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7)',
|
||||
backdropFilter: 'blur(4px)',
|
||||
})}
|
||||
>
|
||||
<p
|
||||
<div
|
||||
className={css({
|
||||
fontSize: 'base',
|
||||
color: 'slate.800',
|
||||
color: theme === 'dark' ? 'gray.300' : 'slate.800',
|
||||
fontFamily: 'mono',
|
||||
fontWeight: '500',
|
||||
letterSpacing: 'tight',
|
||||
@@ -1398,14 +1500,14 @@ function TutorialPlayerContent({
|
||||
termPositions={termPositions}
|
||||
segments={pedagogicalSegments}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={css({
|
||||
fontSize: 'sm',
|
||||
color: 'amber.800',
|
||||
color: theme === 'dark' ? 'gray.400' : 'amber.800',
|
||||
fontWeight: '500',
|
||||
lineHeight: '1.6',
|
||||
})}
|
||||
@@ -1449,7 +1551,7 @@ function TutorialPlayerContent({
|
||||
className={css({
|
||||
mb: 1,
|
||||
fontWeight: 'bold',
|
||||
color: 'yellow.900',
|
||||
color: theme === 'dark' ? 'yellow.300' : 'yellow.900',
|
||||
})}
|
||||
>
|
||||
{currentInstruction}
|
||||
@@ -1483,17 +1585,17 @@ function TutorialPlayerContent({
|
||||
{/* Abacus */}
|
||||
<div
|
||||
className={css({
|
||||
bg: 'white',
|
||||
bg: theme === 'dark' ? 'rgba(30, 30, 40, 0.4)' : 'white',
|
||||
border: '2px solid',
|
||||
borderColor: 'gray.200',
|
||||
borderColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'gray.200',
|
||||
borderRadius: 'lg',
|
||||
p: 6,
|
||||
shadow: 'lg',
|
||||
shadow: theme === 'dark' ? '0 4px 6px rgba(0, 0, 0, 0.3)' : 'lg',
|
||||
})}
|
||||
>
|
||||
<AbacusReact
|
||||
value={currentValue}
|
||||
columns={5}
|
||||
columns={abacusColumns}
|
||||
interactive={true}
|
||||
animated={true}
|
||||
scaleFactor={2.5}
|
||||
@@ -1502,7 +1604,7 @@ function TutorialPlayerContent({
|
||||
hideInactiveBeads={abacusConfig.hideInactiveBeads}
|
||||
soundEnabled={abacusConfig.soundEnabled}
|
||||
soundVolume={abacusConfig.soundVolume}
|
||||
highlightBeads={currentStep.highlightBeads}
|
||||
highlightBeads={filteredHighlightBeads}
|
||||
stepBeadHighlights={currentStepBeads}
|
||||
currentStep={currentMultiStep}
|
||||
showDirectionIndicators={true}
|
||||
@@ -1596,57 +1698,60 @@ function TutorialPlayerContent({
|
||||
</div>
|
||||
|
||||
{/* Navigation controls */}
|
||||
<div
|
||||
className={css({
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'gray.200',
|
||||
p: 4,
|
||||
bg: 'gray.50',
|
||||
})}
|
||||
>
|
||||
<div className={hstack({ justifyContent: 'space-between' })}>
|
||||
<button
|
||||
onClick={goToPreviousStep}
|
||||
disabled={!navigationState.canGoPrevious}
|
||||
className={css({
|
||||
px: 4,
|
||||
py: 2,
|
||||
border: '1px solid',
|
||||
borderColor: 'gray.300',
|
||||
borderRadius: 'md',
|
||||
bg: 'white',
|
||||
cursor: navigationState.canGoPrevious ? 'pointer' : 'not-allowed',
|
||||
opacity: navigationState.canGoPrevious ? 1 : 0.5,
|
||||
_hover: navigationState.canGoPrevious ? { bg: 'gray.50' } : {},
|
||||
})}
|
||||
>
|
||||
← Previous
|
||||
</button>
|
||||
{!hideNavigation && (
|
||||
<div
|
||||
className={css({
|
||||
borderTop: '1px solid',
|
||||
borderColor: 'gray.200',
|
||||
p: 4,
|
||||
bg: 'gray.50',
|
||||
})}
|
||||
>
|
||||
<div className={hstack({ justifyContent: 'space-between' })}>
|
||||
<button
|
||||
onClick={goToPreviousStep}
|
||||
disabled={!navigationState.canGoPrevious}
|
||||
className={css({
|
||||
px: 4,
|
||||
py: 2,
|
||||
border: '1px solid',
|
||||
borderColor: 'gray.300',
|
||||
borderRadius: 'md',
|
||||
bg: 'white',
|
||||
cursor: navigationState.canGoPrevious ? 'pointer' : 'not-allowed',
|
||||
opacity: navigationState.canGoPrevious ? 1 : 0.5,
|
||||
_hover: navigationState.canGoPrevious ? { bg: 'gray.50' } : {},
|
||||
})}
|
||||
>
|
||||
← Previous
|
||||
</button>
|
||||
|
||||
<div className={css({ fontSize: 'sm', color: 'gray.600' })}>
|
||||
Step {currentStepIndex + 1} of {navigationState.totalSteps}
|
||||
<div className={css({ fontSize: 'sm', color: 'gray.600' })}>
|
||||
Step {currentStepIndex + 1} of {navigationState.totalSteps}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={goToNextStep}
|
||||
disabled={!navigationState.canGoNext && !isStepCompleted}
|
||||
className={css({
|
||||
px: 4,
|
||||
py: 2,
|
||||
border: '1px solid',
|
||||
borderColor:
|
||||
navigationState.canGoNext || isStepCompleted ? 'blue.300' : 'gray.300',
|
||||
borderRadius: 'md',
|
||||
bg: navigationState.canGoNext || isStepCompleted ? 'blue.500' : 'gray.200',
|
||||
color: navigationState.canGoNext || isStepCompleted ? 'white' : 'gray.500',
|
||||
cursor:
|
||||
navigationState.canGoNext || isStepCompleted ? 'pointer' : 'not-allowed',
|
||||
_hover: navigationState.canGoNext || isStepCompleted ? { bg: 'blue.600' } : {},
|
||||
})}
|
||||
>
|
||||
{navigationState.canGoNext ? 'Next →' : 'Complete Tutorial'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={goToNextStep}
|
||||
disabled={!navigationState.canGoNext && !isStepCompleted}
|
||||
className={css({
|
||||
px: 4,
|
||||
py: 2,
|
||||
border: '1px solid',
|
||||
borderColor:
|
||||
navigationState.canGoNext || isStepCompleted ? 'blue.300' : 'gray.300',
|
||||
borderRadius: 'md',
|
||||
bg: navigationState.canGoNext || isStepCompleted ? 'blue.500' : 'gray.200',
|
||||
color: navigationState.canGoNext || isStepCompleted ? 'white' : 'gray.500',
|
||||
cursor: navigationState.canGoNext || isStepCompleted ? 'pointer' : 'not-allowed',
|
||||
_hover: navigationState.canGoNext || isStepCompleted ? { bg: 'blue.600' } : {},
|
||||
})}
|
||||
>
|
||||
{navigationState.canGoNext ? 'Next →' : 'Complete Tutorial'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Debug panel */}
|
||||
|
||||
@@ -21,52 +21,52 @@ export const GAME_THEMES = {
|
||||
blue: {
|
||||
color: 'blue',
|
||||
gradient: 'linear-gradient(135deg, #dbeafe, #bfdbfe)', // blue.100 to blue.200
|
||||
borderColor: 'blue.200',
|
||||
borderColor: '#bfdbfe', // blue.200
|
||||
},
|
||||
purple: {
|
||||
color: 'purple',
|
||||
gradient: 'linear-gradient(135deg, #e9d5ff, #ddd6fe)', // purple.100 to purple.200
|
||||
borderColor: 'purple.200',
|
||||
borderColor: '#ddd6fe', // purple.200
|
||||
},
|
||||
green: {
|
||||
color: 'green',
|
||||
gradient: 'linear-gradient(135deg, #d1fae5, #a7f3d0)', // green.100 to green.200
|
||||
borderColor: 'green.200',
|
||||
borderColor: '#a7f3d0', // green.200
|
||||
},
|
||||
teal: {
|
||||
color: 'teal',
|
||||
gradient: 'linear-gradient(135deg, #ccfbf1, #99f6e4)', // teal.100 to teal.200
|
||||
borderColor: 'teal.200',
|
||||
borderColor: '#99f6e4', // teal.200
|
||||
},
|
||||
indigo: {
|
||||
color: 'indigo',
|
||||
gradient: 'linear-gradient(135deg, #e0e7ff, #c7d2fe)', // indigo.100 to indigo.200
|
||||
borderColor: 'indigo.200',
|
||||
borderColor: '#c7d2fe', // indigo.200
|
||||
},
|
||||
pink: {
|
||||
color: 'pink',
|
||||
gradient: 'linear-gradient(135deg, #fce7f3, #fbcfe8)', // pink.100 to pink.200
|
||||
borderColor: 'pink.200',
|
||||
borderColor: '#fbcfe8', // pink.200
|
||||
},
|
||||
orange: {
|
||||
color: 'orange',
|
||||
gradient: 'linear-gradient(135deg, #ffedd5, #fed7aa)', // orange.100 to orange.200
|
||||
borderColor: 'orange.200',
|
||||
borderColor: '#fed7aa', // orange.200
|
||||
},
|
||||
yellow: {
|
||||
color: 'yellow',
|
||||
gradient: 'linear-gradient(135deg, #fef3c7, #fde68a)', // yellow.100 to yellow.200
|
||||
borderColor: 'yellow.200',
|
||||
borderColor: '#fde68a', // yellow.200
|
||||
},
|
||||
red: {
|
||||
color: 'red',
|
||||
gradient: 'linear-gradient(135deg, #fee2e2, #fecaca)', // red.100 to red.200
|
||||
borderColor: 'red.200',
|
||||
borderColor: '#fecaca', // red.200
|
||||
},
|
||||
gray: {
|
||||
color: 'gray',
|
||||
gradient: 'linear-gradient(135deg, #f3f4f6, #e5e7eb)', // gray.100 to gray.200
|
||||
borderColor: 'gray.200',
|
||||
borderColor: '#e5e7eb', // gray.200
|
||||
},
|
||||
} as const satisfies Record<string, GameTheme>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "soroban-monorepo",
|
||||
"version": "4.15.0",
|
||||
"version": "4.18.0",
|
||||
"private": true,
|
||||
"description": "Beautiful Soroban Flashcard Generator - Monorepo",
|
||||
"workspaces": [
|
||||
|
||||
Reference in New Issue
Block a user