Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
002c2888ac | ||
|
5d85e898d6 | ||
|
|
eed890dc81 | ||
|
|
57fabffe60 | ||
|
|
89fb670f93 | ||
|
|
8e51390018 | ||
|
|
e7e54619ae | ||
|
|
9c51cc94ee | ||
|
|
df674426c5 | ||
|
|
24d120004d | ||
|
|
88f57ce6df | ||
|
|
3a5dc0f1c8 | ||
|
|
3fff9ef140 | ||
|
|
ca1c6d8602 | ||
|
|
e6bcf20807 | ||
|
|
1ee25b3dd2 |
55
CHANGELOG.md
55
CHANGELOG.md
@@ -1,3 +1,58 @@
|
||||
## [4.20.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.5...v4.20.6) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **homepage:** use inline styles for journey level colors ([5d85e89](https://github.com/antialias/soroban-abacus-flashcards/commit/5d85e898d65d44d8d09bee952fad44b5a9c0cd20)), closes [#4ade80](https://github.com/antialias/soroban-abacus-flashcards/issues/4ade80) [#60a5](https://github.com/antialias/soroban-abacus-flashcards/issues/60a5) [#a78](https://github.com/antialias/soroban-abacus-flashcards/issues/a78) [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24)
|
||||
|
||||
## [4.20.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.4...v4.20.5) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **docker:** include Panda CSS styled-system in production image ([57fabff](https://github.com/antialias/soroban-abacus-flashcards/commit/57fabffe605d953b4a4d7e05032401cbf1ab2d14))
|
||||
|
||||
## [4.20.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.3...v4.20.4) (2025-10-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **homepage:** use inline styles for Your Journey text contrast ([8e51390](https://github.com/antialias/soroban-abacus-flashcards/commit/8e5139001818d7013e1b2654ac707f7429316d58)), closes [#e5e7](https://github.com/antialias/soroban-abacus-flashcards/issues/e5e7) [#e5e7](https://github.com/antialias/soroban-abacus-flashcards/issues/e5e7) [#9ca3](https://github.com/antialias/soroban-abacus-flashcards/issues/9ca3) [#d1d5](https://github.com/antialias/soroban-abacus-flashcards/issues/d1d5)
|
||||
|
||||
## [4.20.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.2...v4.20.3) (2025-10-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **homepage:** use explicit RGBA colors for Your Journey text ([9c51cc9](https://github.com/antialias/soroban-abacus-flashcards/commit/9c51cc94eec4efcab9c0b9d1190f5b79c0c7d365))
|
||||
|
||||
## [4.20.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.1...v4.20.2) (2025-10-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **homepage:** improve text contrast in Your Journey section ([24d1200](https://github.com/antialias/soroban-abacus-flashcards/commit/24d120004dccecc1ce2f08c1b73eec902868fb23))
|
||||
* **tutorial:** resolve TypeScript errors in TutorialPlayer ([88f57ce](https://github.com/antialias/soroban-abacus-flashcards/commit/88f57ce6df125142d6ea7feec60c475926bd4929))
|
||||
|
||||
## [4.20.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.20.0...v4.20.1) (2025-10-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **homepage:** correct positioning of progression arrows in Your Journey section ([3fff9ef](https://github.com/antialias/soroban-abacus-flashcards/commit/3fff9ef140bf1f462042f8319ed6c5e2a376e4ba))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **homepage:** move What You'll Learn above tutorial ([ca1c6d8](https://github.com/antialias/soroban-abacus-flashcards/commit/ca1c6d86029c891e019a96ba161e49b08b5be1bf))
|
||||
|
||||
## [4.20.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.19.0...v4.20.0) (2025-10-19)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **tutorial:** add hideTooltip prop and improve dark mode coaching bar ([1ee25b3](https://github.com/antialias/soroban-abacus-flashcards/commit/1ee25b3dd2f0ee9dd7ed571ba818b7ca5a247f85))
|
||||
|
||||
## [4.19.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.18.1...v4.19.0) (2025-10-19)
|
||||
|
||||
|
||||
|
||||
@@ -59,6 +59,9 @@ RUN adduser --system --uid 1001 nextjs
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next ./apps/web/.next
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
|
||||
|
||||
# Copy Panda CSS generated styles
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/apps/web/styled-system ./apps/web/styled-system
|
||||
|
||||
# Copy server files (compiled from TypeScript)
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/apps/web/server.js ./apps/web/
|
||||
COPY --from=builder --chown=nextjs:nodejs /app/apps/web/dist ./apps/web/dist
|
||||
|
||||
@@ -219,21 +219,12 @@ export default function HomePage() {
|
||||
mx: 'auto',
|
||||
})}
|
||||
>
|
||||
<TutorialPlayer
|
||||
tutorial={friendsOf5Tutorial}
|
||||
isDebugMode={false}
|
||||
showDebugPanel={false}
|
||||
hideNavigation={true}
|
||||
abacusColumns={2}
|
||||
theme="dark"
|
||||
/>
|
||||
|
||||
{/* What you'll learn - below tutorial */}
|
||||
{/* What you'll learn - above tutorial */}
|
||||
<div
|
||||
className={css({
|
||||
mt: '8',
|
||||
pt: '6',
|
||||
borderTop: '1px solid',
|
||||
mb: '8',
|
||||
pb: '6',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'gray.700',
|
||||
})}
|
||||
>
|
||||
@@ -262,6 +253,16 @@ export default function HomePage() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TutorialPlayer
|
||||
tutorial={friendsOf5Tutorial}
|
||||
isDebugMode={false}
|
||||
showDebugPanel={false}
|
||||
hideNavigation={true}
|
||||
hideTooltip={true}
|
||||
abacusColumns={2}
|
||||
theme="dark"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -378,9 +379,7 @@ export default function HomePage() {
|
||||
>
|
||||
Your Journey
|
||||
</h2>
|
||||
<p className={css({ color: 'gray.400', fontSize: 'md' })}>
|
||||
Progress from beginner to master
|
||||
</p>
|
||||
<p style={{ color: '#e5e7eb', fontSize: '16px' }}>Progress from beginner to master</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -402,30 +401,34 @@ export default function HomePage() {
|
||||
})}
|
||||
>
|
||||
{[
|
||||
{ level: '10 Kyu', label: 'Beginner', color: 'green.400' },
|
||||
{ level: '5 Kyu', label: 'Intermediate', color: 'blue.400' },
|
||||
{ level: '1 Kyu', label: 'Advanced', color: 'purple.400' },
|
||||
{ level: 'Dan', label: 'Master', color: 'yellow.400' },
|
||||
{ level: '10 Kyu', label: 'Beginner', color: '#4ade80' },
|
||||
{ level: '5 Kyu', label: 'Intermediate', color: '#60a5fa' },
|
||||
{ level: '1 Kyu', label: 'Advanced', color: '#a78bfa' },
|
||||
{ level: 'Dan', label: 'Master', color: '#fbbf24' },
|
||||
].map((stage, i) => (
|
||||
<div key={i} className={stack({ gap: '2', textAlign: 'center', flex: '1' })}>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: 'xl',
|
||||
fontWeight: 'bold',
|
||||
color: stage.color,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
key={i}
|
||||
className={stack({
|
||||
gap: '2',
|
||||
textAlign: 'center',
|
||||
flex: '1',
|
||||
position: 'relative',
|
||||
})}
|
||||
>
|
||||
<div style={{ fontSize: '20px', fontWeight: 'bold', color: stage.color }}>
|
||||
{stage.level}
|
||||
</div>
|
||||
<div className={css({ fontSize: 'sm', color: 'gray.400' })}>{stage.label}</div>
|
||||
<div style={{ fontSize: '14px', color: '#e5e7eb' }}>{stage.label}</div>
|
||||
{i < 3 && (
|
||||
<div
|
||||
className={css({
|
||||
display: { base: 'none', md: 'block' },
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '-50%',
|
||||
fontSize: 'xl',
|
||||
color: 'gray.600',
|
||||
fontSize: '20px',
|
||||
color: '#9ca3af',
|
||||
}}
|
||||
className={css({
|
||||
display: { base: 'none', md: 'block' },
|
||||
})}
|
||||
>
|
||||
→
|
||||
@@ -435,12 +438,14 @@ export default function HomePage() {
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
fontSize: '14px',
|
||||
color: '#d1d5db',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
className={css({
|
||||
mt: '6',
|
||||
textAlign: 'center',
|
||||
fontSize: 'sm',
|
||||
color: 'gray.500',
|
||||
fontStyle: 'italic',
|
||||
})}
|
||||
>
|
||||
You'll progress through all these levels eventually ↑
|
||||
|
||||
@@ -216,6 +216,7 @@ interface TutorialPlayerProps {
|
||||
isDebugMode?: boolean
|
||||
showDebugPanel?: boolean
|
||||
hideNavigation?: boolean
|
||||
hideTooltip?: boolean
|
||||
abacusColumns?: number
|
||||
theme?: 'light' | 'dark'
|
||||
onStepChange?: (stepIndex: number, step: TutorialStep) => void
|
||||
@@ -231,6 +232,7 @@ function TutorialPlayerContent({
|
||||
isDebugMode = false,
|
||||
showDebugPanel = false,
|
||||
hideNavigation = false,
|
||||
hideTooltip = false,
|
||||
abacusColumns = 5,
|
||||
theme = 'light',
|
||||
onStepChange,
|
||||
@@ -437,8 +439,7 @@ function TutorialPlayerContent({
|
||||
const filteredHighlightBeads = useMemo(() => {
|
||||
if (!currentStep.highlightBeads) return undefined
|
||||
return currentStep.highlightBeads.filter((highlight) => {
|
||||
const placeValue = highlight.placeValue ?? 4 - (highlight.columnIndex ?? 0)
|
||||
return placeValue < abacusColumns
|
||||
return highlight.placeValue < abacusColumns
|
||||
})
|
||||
}, [currentStep.highlightBeads, abacusColumns])
|
||||
|
||||
@@ -896,8 +897,8 @@ function TutorialPlayerContent({
|
||||
// Check if this is the correct action
|
||||
if (currentStep.highlightBeads && Array.isArray(currentStep.highlightBeads)) {
|
||||
const isCorrectBead = currentStep.highlightBeads.some((highlight) => {
|
||||
// Get place value from highlight (convert columnIndex to placeValue if needed)
|
||||
const highlightPlaceValue = highlight.placeValue ?? 4 - highlight.columnIndex
|
||||
// Get place value from highlight
|
||||
const highlightPlaceValue = highlight.placeValue
|
||||
// Get place value from bead click event
|
||||
const beadPlaceValue = beadInfo.bead ? beadInfo.bead.placeValue : 4 - beadInfo.columnIndex
|
||||
|
||||
@@ -909,9 +910,10 @@ function TutorialPlayerContent({
|
||||
})
|
||||
|
||||
if (!isCorrectBead) {
|
||||
const errorMessage = "That's not the highlighted bead. Try clicking the highlighted bead."
|
||||
dispatch({
|
||||
type: 'SET_ERROR',
|
||||
error: currentStep.errorMessages.wrongBead,
|
||||
error: errorMessage,
|
||||
})
|
||||
|
||||
dispatch({
|
||||
@@ -919,7 +921,7 @@ function TutorialPlayerContent({
|
||||
event: {
|
||||
type: 'ERROR_OCCURRED',
|
||||
stepId: currentStep.id,
|
||||
error: currentStep.errorMessages.wrongBead,
|
||||
error: errorMessage,
|
||||
timestamp: new Date(),
|
||||
},
|
||||
})
|
||||
@@ -1044,8 +1046,7 @@ function TutorialPlayerContent({
|
||||
if (currentStep.highlightBeads && Array.isArray(currentStep.highlightBeads)) {
|
||||
currentStep.highlightBeads.forEach((highlight) => {
|
||||
// Convert placeValue to columnIndex for AbacusReact compatibility
|
||||
const columnIndex =
|
||||
highlight.placeValue !== undefined ? 4 - highlight.placeValue : highlight.columnIndex
|
||||
const columnIndex = abacusColumns - 1 - highlight.placeValue
|
||||
|
||||
// Skip highlights for columns that don't exist
|
||||
if (columnIndex < minValidColumn) {
|
||||
@@ -1139,9 +1140,9 @@ function TutorialPlayerContent({
|
||||
<div
|
||||
className={css({
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'gray.200',
|
||||
borderColor: theme === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'gray.200',
|
||||
p: 4,
|
||||
bg: 'white',
|
||||
bg: theme === 'dark' ? 'rgba(30, 30, 40, 0.6)' : 'white',
|
||||
})}
|
||||
>
|
||||
<div
|
||||
@@ -1410,7 +1411,8 @@ function TutorialPlayerContent({
|
||||
</div>
|
||||
|
||||
{/* Multi-step instructions panel */}
|
||||
{currentStep.multiStepInstructions &&
|
||||
{!hideTooltip &&
|
||||
currentStep.multiStepInstructions &&
|
||||
currentStep.multiStepInstructions.length > 0 && (
|
||||
<div
|
||||
className={css({
|
||||
@@ -1546,7 +1548,10 @@ function TutorialPlayerContent({
|
||||
className={css({
|
||||
mb: 1,
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? 'yellow.300' : 'yellow.900',
|
||||
color: theme === 'dark' ? 'yellow.200' : 'yellow.900',
|
||||
textShadow:
|
||||
theme === 'dark' ? '0 0 12px rgba(251, 191, 36, 0.4)' : 'none',
|
||||
fontSize: theme === 'dark' ? 'lg' : 'base',
|
||||
})}
|
||||
>
|
||||
{currentInstruction}
|
||||
@@ -1664,7 +1669,7 @@ function TutorialPlayerContent({
|
||||
</div>
|
||||
|
||||
{/* Tooltip */}
|
||||
{currentStep.tooltip && (
|
||||
{!hideTooltip && currentStep.tooltip && (
|
||||
<div
|
||||
className={css({
|
||||
maxW: '500px',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "soroban-monorepo",
|
||||
"version": "4.19.0",
|
||||
"version": "4.20.6",
|
||||
"private": true,
|
||||
"description": "Beautiful Soroban Flashcard Generator - Monorepo",
|
||||
"workspaces": [
|
||||
|
||||
Reference in New Issue
Block a user