Compare commits
6 Commits
abacus-rea
...
abacus-rea
| Author | SHA1 | Date | |
|---|---|---|---|
|
9d322301ef | ||
|
0641eb719e | ||
|
|
3588d5acde | ||
|
|
74f2d97434 | ||
|
|
4f9dc4666d | ||
|
|
3b8e864cfa |
64
apps/web/src/app/test-static-abacus/page.tsx
Normal file
64
apps/web/src/app/test-static-abacus/page.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
/**
|
||||
* Test page for AbacusStatic - Server Component
|
||||
* This demonstrates that AbacusStatic works without "use client"
|
||||
*/
|
||||
|
||||
import { AbacusStatic } from '@soroban/abacus-react'
|
||||
|
||||
export default function TestStaticAbacusPage() {
|
||||
const numbers = [1, 2, 3, 4, 5, 10, 25, 50, 100, 123, 456, 789]
|
||||
|
||||
return (
|
||||
<div style={{ padding: '40px', maxWidth: '1200px', margin: '0 auto' }}>
|
||||
<h1 style={{ marginBottom: '10px' }}>AbacusStatic Test (Server Component)</h1>
|
||||
<p style={{ color: '#64748b', marginBottom: '30px' }}>
|
||||
This page is a React Server Component - no "use client" directive!
|
||||
All abacus displays below are rendered on the server with zero client-side JavaScript.
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
|
||||
gap: '20px',
|
||||
}}
|
||||
>
|
||||
{numbers.map((num) => (
|
||||
<div
|
||||
key={num}
|
||||
style={{
|
||||
padding: '20px',
|
||||
background: 'white',
|
||||
border: '2px solid #e2e8f0',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
}}
|
||||
>
|
||||
<AbacusStatic
|
||||
value={num}
|
||||
columns="auto"
|
||||
hideInactiveBeads
|
||||
compact
|
||||
scaleFactor={0.9}
|
||||
/>
|
||||
<span style={{ fontSize: '20px', fontWeight: 'bold', color: '#475569' }}>
|
||||
{num}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: '40px', padding: '20px', background: '#f0fdf4', borderRadius: '8px' }}>
|
||||
<h2 style={{ marginTop: 0, color: '#166534' }}>✅ Success!</h2>
|
||||
<p style={{ color: '#15803d' }}>
|
||||
If you can see the abacus displays above, then AbacusStatic is working correctly
|
||||
in React Server Components. Check the page source - you'll see pure HTML/SVG with
|
||||
no client-side hydration markers!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +1,16 @@
|
||||
# [2.6.0](https://github.com/antialias/soroban-abacus-flashcards/compare/abacus-react-v2.5.0...abacus-react-v2.6.0) (2025-11-04)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **abacus-react:** correct column highlighting offset in AbacusStatic ([0641eb7](https://github.com/antialias/soroban-abacus-flashcards/commit/0641eb719ef56c67de965296006df666f83e5b08))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **abacus-react:** add AbacusStatic for React Server Components ([3b8e864](https://github.com/antialias/soroban-abacus-flashcards/commit/3b8e864cfa3af50b1912ce7ff55003d7f6b9c229))
|
||||
* **web:** add test page for AbacusStatic Server Component ([3588d5a](https://github.com/antialias/soroban-abacus-flashcards/commit/3588d5acde25588ce4db3ee32adb04ace0e394d4))
|
||||
|
||||
# [2.5.0](https://github.com/antialias/soroban-abacus-flashcards/compare/abacus-react-v2.4.0...abacus-react-v2.5.0) (2025-11-03)
|
||||
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@ A comprehensive React component for rendering interactive Soroban (Japanese abac
|
||||
- 🎓 **Tutorial system** - Built-in overlay and guidance capabilities
|
||||
- 🧩 **Framework-free SVG** - Complete control over rendering
|
||||
- ✨ **3D Enhancement** - Three levels of progressive 3D effects for immersive visuals
|
||||
- 🚀 **Server Component support** - AbacusStatic works in React Server Components (Next.js App Router)
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -121,6 +122,59 @@ import { AbacusReact, ABACUS_THEMES } from '@soroban/abacus-react';
|
||||
- `solid` - Black frame (best for high contrast/educational contexts)
|
||||
- `traditional` - Brown wooden appearance (best for traditional soroban aesthetic)
|
||||
|
||||
### Static Display (Server Components)
|
||||
|
||||
For static, non-interactive displays that work in React Server Components:
|
||||
|
||||
```tsx
|
||||
import { AbacusStatic } from '@soroban/abacus-react';
|
||||
|
||||
// ✅ Works in React Server Components - no "use client" needed!
|
||||
// ✅ No JavaScript sent to client
|
||||
// ✅ Perfect for SSG, SSR, and static previews
|
||||
|
||||
<AbacusStatic
|
||||
value={123}
|
||||
columns="auto"
|
||||
hideInactiveBeads
|
||||
compact
|
||||
/>
|
||||
```
|
||||
|
||||
**When to use `AbacusStatic` vs `AbacusReact`:**
|
||||
|
||||
| Feature | AbacusStatic | AbacusReact |
|
||||
|---------|--------------|-------------|
|
||||
| React Server Components | ✅ Yes | ❌ No (requires "use client") |
|
||||
| Client-side JavaScript | ❌ None | ✅ Yes |
|
||||
| User interaction | ❌ No | ✅ Click/drag beads |
|
||||
| Animations | ❌ No | ✅ Smooth transitions |
|
||||
| Sound effects | ❌ No | ✅ Optional sounds |
|
||||
| 3D effects | ❌ No | ✅ Yes |
|
||||
| Bundle size | 📦 Minimal | 📦 Full-featured |
|
||||
| Use cases | Preview cards, thumbnails, static pages | Interactive tutorials, games, tools |
|
||||
|
||||
```tsx
|
||||
// Example: Server Component with static abacus cards
|
||||
// app/flashcards/page.tsx
|
||||
import { AbacusStatic } from '@soroban/abacus-react'
|
||||
|
||||
export default function FlashcardsPage() {
|
||||
const numbers = [1, 5, 10, 25, 50, 100]
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{numbers.map(num => (
|
||||
<div key={num} className="card">
|
||||
<AbacusStatic value={num} columns="auto" compact />
|
||||
<p>{num}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Compact/Inline Display
|
||||
|
||||
Create mini abacus displays for inline use:
|
||||
|
||||
264
packages/abacus-react/src/AbacusStatic.stories.tsx
Normal file
264
packages/abacus-react/src/AbacusStatic.stories.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
import { AbacusStatic } from './AbacusStatic'
|
||||
import { ABACUS_THEMES } from './AbacusThemes'
|
||||
|
||||
/**
|
||||
* AbacusStatic - Server Component compatible static abacus
|
||||
*
|
||||
* ## Key Features:
|
||||
* - ✅ Works in React Server Components (no "use client")
|
||||
* - ✅ Shares core utilities with AbacusReact (numberToAbacusState, color logic)
|
||||
* - ✅ No animations, hooks, or client-side JavaScript
|
||||
* - ✅ Lightweight rendering for static displays
|
||||
*
|
||||
* ## Shared Code (No Duplication!):
|
||||
* - Uses `numberToAbacusState()` from AbacusUtils
|
||||
* - Uses same color scheme logic as AbacusReact
|
||||
* - Uses same bead positioning concepts
|
||||
* - Accepts same `customStyles` prop structure
|
||||
*
|
||||
* ## When to Use:
|
||||
* - React Server Components (Next.js App Router)
|
||||
* - Static site generation
|
||||
* - Non-interactive previews
|
||||
* - Server-side rendering without hydration
|
||||
*/
|
||||
const meta = {
|
||||
title: 'AbacusStatic/Server Component Ready',
|
||||
component: AbacusStatic,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
tags: ['autodocs'],
|
||||
} satisfies Meta<typeof AbacusStatic>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
value: 123,
|
||||
columns: 'auto',
|
||||
},
|
||||
}
|
||||
|
||||
export const DifferentValues: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap' }}>
|
||||
{[1, 5, 10, 25, 50, 100, 456, 789].map((value) => (
|
||||
<div key={value} style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={value} columns="auto" />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>{value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const ColorSchemes: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', gap: '40px', flexWrap: 'wrap' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={456} colorScheme="place-value" />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Place Value</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={456} colorScheme="monochrome" />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Monochrome</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={456} colorScheme="heaven-earth" />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Heaven-Earth</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={456} colorScheme="alternating" />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Alternating</p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const BeadShapes: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', gap: '40px' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={42} beadShape="circle" />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Circle</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={42} beadShape="diamond" />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Diamond</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={42} beadShape="square" />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Square</p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const CompactMode: Story = {
|
||||
render: () => (
|
||||
<div style={{ fontSize: '24px', display: 'flex', alignItems: 'center', gap: '15px' }}>
|
||||
<span>The equation:</span>
|
||||
<AbacusStatic value={5} columns={1} compact hideInactiveBeads scaleFactor={0.7} />
|
||||
<span>+</span>
|
||||
<AbacusStatic value={3} columns={1} compact hideInactiveBeads scaleFactor={0.7} />
|
||||
<span>=</span>
|
||||
<AbacusStatic value={8} columns={1} compact hideInactiveBeads scaleFactor={0.7} />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const HideInactiveBeads: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', gap: '40px' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={25} hideInactiveBeads={false} />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Show All</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={25} hideInactiveBeads />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Hide Inactive</p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithThemes: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', gap: '40px', flexWrap: 'wrap' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={123} customStyles={ABACUS_THEMES.light} />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Light</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center', padding: '20px', background: '#1e293b', borderRadius: '8px' }}>
|
||||
<AbacusStatic value={123} customStyles={ABACUS_THEMES.dark} />
|
||||
<p style={{ marginTop: '10px', color: '#cbd5e1' }}>Dark</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={123} customStyles={ABACUS_THEMES.trophy} />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Trophy</p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const ColumnHighlightingAndLabels: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic
|
||||
value={456}
|
||||
highlightColumns={[1]}
|
||||
columnLabels={['ones', 'tens', 'hundreds']}
|
||||
/>
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Highlighting tens place</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic
|
||||
value={789}
|
||||
highlightColumns={[0, 2]}
|
||||
columnLabels={['ones', 'tens', 'hundreds']}
|
||||
/>
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>Multiple highlights</p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const Scaling: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: 'flex', gap: '40px', alignItems: 'flex-end' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={9} scaleFactor={0.5} />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>0.5x</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={9} scaleFactor={1} />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>1x</p>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<AbacusStatic value={9} scaleFactor={1.5} />
|
||||
<p style={{ marginTop: '10px', color: '#64748b' }}>1.5x</p>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const ServerComponentExample: Story = {
|
||||
render: () => (
|
||||
<div style={{ maxWidth: '700px', padding: '20px', background: '#f8fafc', borderRadius: '8px' }}>
|
||||
<h3 style={{ marginTop: 0 }}>React Server Component Usage</h3>
|
||||
<pre
|
||||
style={{
|
||||
background: '#1e293b',
|
||||
color: '#e2e8f0',
|
||||
padding: '15px',
|
||||
borderRadius: '6px',
|
||||
overflow: 'auto',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
>
|
||||
{`// app/flashcards/page.tsx (Server Component)
|
||||
import { AbacusStatic } from '@soroban/abacus-react'
|
||||
|
||||
export default function FlashcardsPage() {
|
||||
const numbers = [1, 5, 10, 25, 50, 100]
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{numbers.map(num => (
|
||||
<div key={num} className="card">
|
||||
<AbacusStatic
|
||||
value={num}
|
||||
columns="auto"
|
||||
hideInactiveBeads
|
||||
compact
|
||||
/>
|
||||
<p>{num}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ✅ No "use client" needed!
|
||||
// ✅ Rendered on server
|
||||
// ✅ Zero client JavaScript`}
|
||||
</pre>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const PreviewCards: Story = {
|
||||
render: () => (
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
|
||||
gap: '20px',
|
||||
maxWidth: '900px',
|
||||
}}
|
||||
>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 25, 50].map((value) => (
|
||||
<div
|
||||
key={value}
|
||||
style={{
|
||||
padding: '15px',
|
||||
background: 'white',
|
||||
border: '2px solid #e2e8f0',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
}}
|
||||
>
|
||||
<AbacusStatic value={value} columns="auto" scaleFactor={0.8} hideInactiveBeads />
|
||||
<span style={{ fontSize: '18px', fontWeight: 'bold', color: '#475569' }}>{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
}
|
||||
366
packages/abacus-react/src/AbacusStatic.tsx
Normal file
366
packages/abacus-react/src/AbacusStatic.tsx
Normal file
@@ -0,0 +1,366 @@
|
||||
/**
|
||||
* AbacusStatic - Server Component compatible static abacus
|
||||
*
|
||||
* Shares core logic with AbacusReact but uses static rendering without hooks/animations.
|
||||
* Reuses: numberToAbacusState, getBeadColor logic, positioning calculations
|
||||
* Different: No hooks, no animations, no interactions, simplified rendering
|
||||
*/
|
||||
|
||||
import { numberToAbacusState } from './AbacusUtils'
|
||||
import { AbacusStaticBead } from './AbacusStaticBead'
|
||||
import type {
|
||||
AbacusCustomStyles,
|
||||
BeadConfig,
|
||||
ValidPlaceValues
|
||||
} from './AbacusReact'
|
||||
|
||||
export interface AbacusStaticConfig {
|
||||
value: number | bigint
|
||||
columns?: number | 'auto'
|
||||
beadShape?: 'circle' | 'diamond' | 'square'
|
||||
colorScheme?: 'monochrome' | 'place-value' | 'alternating' | 'heaven-earth'
|
||||
colorPalette?: 'default' | 'pastel' | 'vibrant' | 'earth-tones'
|
||||
showNumbers?: boolean | 'always' | 'never'
|
||||
hideInactiveBeads?: boolean
|
||||
scaleFactor?: number
|
||||
frameVisible?: boolean
|
||||
compact?: boolean
|
||||
customStyles?: AbacusCustomStyles
|
||||
highlightColumns?: number[]
|
||||
columnLabels?: string[]
|
||||
}
|
||||
|
||||
// Shared color logic from AbacusReact (simplified for static use)
|
||||
function getBeadColor(
|
||||
bead: BeadConfig,
|
||||
totalColumns: number,
|
||||
colorScheme: string,
|
||||
colorPalette: string
|
||||
): string {
|
||||
const placeValue = bead.placeValue
|
||||
|
||||
// Place-value coloring
|
||||
if (colorScheme === 'place-value') {
|
||||
const colors: Record<string, string[]> = {
|
||||
default: [
|
||||
'#ef4444', // red - ones
|
||||
'#f59e0b', // amber - tens
|
||||
'#10b981', // emerald - hundreds
|
||||
'#3b82f6', // blue - thousands
|
||||
'#8b5cf6', // purple - ten thousands
|
||||
'#ec4899', // pink - hundred thousands
|
||||
'#14b8a6', // teal - millions
|
||||
'#f97316', // orange - ten millions
|
||||
'#6366f1', // indigo - hundred millions
|
||||
'#84cc16', // lime - billions
|
||||
],
|
||||
pastel: [
|
||||
'#fca5a5', '#fcd34d', '#6ee7b7', '#93c5fd', '#c4b5fd',
|
||||
'#f9a8d4', '#5eead4', '#fdba74', '#a5b4fc', '#bef264',
|
||||
],
|
||||
vibrant: [
|
||||
'#dc2626', '#d97706', '#059669', '#2563eb', '#7c3aed',
|
||||
'#db2777', '#0d9488', '#ea580c', '#4f46e5', '#65a30d',
|
||||
],
|
||||
'earth-tones': [
|
||||
'#92400e', '#78350f', '#365314', '#1e3a8a', '#4c1d95',
|
||||
'#831843', '#134e4a', '#7c2d12', '#312e81', '#3f6212',
|
||||
],
|
||||
}
|
||||
|
||||
const palette = colors[colorPalette] || colors.default
|
||||
return palette[placeValue % palette.length]
|
||||
}
|
||||
|
||||
// Heaven-earth coloring
|
||||
if (colorScheme === 'heaven-earth') {
|
||||
return bead.type === 'heaven' ? '#3b82f6' : '#10b981'
|
||||
}
|
||||
|
||||
// Alternating coloring
|
||||
if (colorScheme === 'alternating') {
|
||||
const columnIndex = totalColumns - 1 - placeValue
|
||||
return columnIndex % 2 === 0 ? '#3b82f6' : '#10b981'
|
||||
}
|
||||
|
||||
// Monochrome (default)
|
||||
return '#3b82f6'
|
||||
}
|
||||
|
||||
// Calculate bead positions (simplified from AbacusReact)
|
||||
function calculateBeadPosition(
|
||||
bead: BeadConfig,
|
||||
dimensions: { beadSize: number; rodSpacing: number; heavenY: number; earthY: number; barY: number; totalColumns: number }
|
||||
): { x: number; y: number } {
|
||||
const { beadSize, rodSpacing, heavenY, earthY, barY, totalColumns } = dimensions
|
||||
|
||||
// X position based on place value (rightmost = ones place)
|
||||
const columnIndex = totalColumns - 1 - bead.placeValue
|
||||
const x = columnIndex * rodSpacing + rodSpacing / 2
|
||||
|
||||
// Y position based on bead type and active state
|
||||
if (bead.type === 'heaven') {
|
||||
// Heaven bead: if active, near bar; if inactive, at top
|
||||
const y = bead.active ? barY - beadSize - 5 : heavenY
|
||||
return { x, y }
|
||||
} else {
|
||||
// Earth bead: if active, stack up from bar; if inactive, at bottom
|
||||
const earthSpacing = beadSize + 4
|
||||
if (bead.active) {
|
||||
// Active earth beads stack upward from the bar
|
||||
const y = barY + beadSize / 2 + 10 + bead.position * earthSpacing
|
||||
return { x, y }
|
||||
} else {
|
||||
// Inactive earth beads rest at the bottom
|
||||
const y = earthY + (bead.position - 2) * earthSpacing
|
||||
return { x, y }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* AbacusStatic - Pure static abacus component (Server Component compatible)
|
||||
*/
|
||||
export function AbacusStatic({
|
||||
value,
|
||||
columns = 'auto',
|
||||
beadShape = 'circle',
|
||||
colorScheme = 'place-value',
|
||||
colorPalette = 'default',
|
||||
showNumbers = true,
|
||||
hideInactiveBeads = false,
|
||||
scaleFactor = 1,
|
||||
frameVisible = true,
|
||||
compact = false,
|
||||
customStyles,
|
||||
highlightColumns = [],
|
||||
columnLabels = [],
|
||||
}: AbacusStaticConfig) {
|
||||
// Calculate columns
|
||||
const valueStr = value.toString().replace('-', '')
|
||||
const minColumns = Math.max(1, valueStr.length)
|
||||
const effectiveColumns = columns === 'auto' ? minColumns : Math.max(columns, minColumns)
|
||||
|
||||
// Use shared utility to convert value to bead states
|
||||
const state = numberToAbacusState(value, effectiveColumns)
|
||||
|
||||
// Generate bead configs (matching AbacusReact's structure)
|
||||
const beadConfigs: BeadConfig[][] = []
|
||||
for (let colIndex = 0; colIndex < effectiveColumns; colIndex++) {
|
||||
const placeValue = (effectiveColumns - 1 - colIndex) as ValidPlaceValues
|
||||
const columnState = state[placeValue] || { heavenActive: false, earthActive: 0 }
|
||||
|
||||
const beads: BeadConfig[] = []
|
||||
|
||||
// Heaven bead
|
||||
beads.push({
|
||||
type: 'heaven',
|
||||
value: 5,
|
||||
active: columnState.heavenActive,
|
||||
position: 0,
|
||||
placeValue,
|
||||
})
|
||||
|
||||
// Earth beads
|
||||
for (let i = 0; i < 4; i++) {
|
||||
beads.push({
|
||||
type: 'earth',
|
||||
value: 1,
|
||||
active: i < columnState.earthActive,
|
||||
position: i,
|
||||
placeValue,
|
||||
})
|
||||
}
|
||||
|
||||
beadConfigs.push(beads)
|
||||
}
|
||||
|
||||
// Calculate dimensions (matching AbacusReact)
|
||||
const beadSize = 20
|
||||
const rodSpacing = 40
|
||||
const heavenHeight = 60
|
||||
const earthHeight = 120
|
||||
const barHeight = 10
|
||||
const padding = 20
|
||||
const numberHeightCalc = showNumbers ? 30 : 0
|
||||
const labelHeight = columnLabels.length > 0 ? 30 : 0
|
||||
|
||||
const width = effectiveColumns * rodSpacing + padding * 2
|
||||
const height = heavenHeight + earthHeight + barHeight + padding * 2 + numberHeightCalc + labelHeight
|
||||
|
||||
const dimensions = {
|
||||
width,
|
||||
height,
|
||||
beadSize,
|
||||
rodSpacing,
|
||||
heavenY: padding + labelHeight + heavenHeight / 3,
|
||||
earthY: padding + labelHeight + heavenHeight + barHeight + earthHeight * 0.7,
|
||||
barY: padding + labelHeight + heavenHeight,
|
||||
padding,
|
||||
totalColumns: effectiveColumns,
|
||||
}
|
||||
|
||||
// Compact mode hides frame
|
||||
const effectiveFrameVisible = compact ? false : frameVisible
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width * scaleFactor}
|
||||
height={height * scaleFactor}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className={`abacus-svg ${hideInactiveBeads ? 'hide-inactive-mode' : ''}`}
|
||||
style={{ overflow: 'visible', display: 'block' }}
|
||||
>
|
||||
<defs>
|
||||
<style>{`
|
||||
.abacus-bead {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
.hide-inactive-mode .abacus-bead.hidden-inactive {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
`}</style>
|
||||
</defs>
|
||||
|
||||
{/* Column highlights */}
|
||||
{highlightColumns.map((colIndex) => {
|
||||
if (colIndex < 0 || colIndex >= effectiveColumns) return null
|
||||
|
||||
const x = colIndex * rodSpacing + rodSpacing / 2 + padding
|
||||
const highlightWidth = rodSpacing * 0.9
|
||||
const highlightHeight = height - padding * 2 - numberHeightCalc - labelHeight
|
||||
|
||||
return (
|
||||
<rect
|
||||
key={`column-highlight-${colIndex}`}
|
||||
x={x - highlightWidth / 2}
|
||||
y={padding + labelHeight}
|
||||
width={highlightWidth}
|
||||
height={highlightHeight}
|
||||
fill="rgba(59, 130, 246, 0.15)"
|
||||
stroke="rgba(59, 130, 246, 0.4)"
|
||||
strokeWidth={2}
|
||||
rx={6}
|
||||
style={{ pointerEvents: 'none' }}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Column labels */}
|
||||
{columnLabels.map((label, colIndex) => {
|
||||
if (!label || colIndex >= effectiveColumns) return null
|
||||
|
||||
const x = colIndex * rodSpacing + rodSpacing / 2 + padding
|
||||
|
||||
return (
|
||||
<text
|
||||
key={`column-label-${colIndex}`}
|
||||
x={x}
|
||||
y={padding + 15}
|
||||
textAnchor="middle"
|
||||
fontSize="14"
|
||||
fontWeight="600"
|
||||
fill="rgba(0, 0, 0, 0.7)"
|
||||
style={{ pointerEvents: 'none', userSelect: 'none' }}
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Rods (column posts) */}
|
||||
{effectiveFrameVisible && beadConfigs.map((_, colIndex) => {
|
||||
const x = colIndex * rodSpacing + rodSpacing / 2 + padding
|
||||
|
||||
return (
|
||||
<rect
|
||||
key={`rod-${colIndex}`}
|
||||
x={x - 3}
|
||||
y={padding + labelHeight}
|
||||
width={6}
|
||||
height={heavenHeight + earthHeight + barHeight}
|
||||
fill={customStyles?.columnPosts?.fill || 'rgb(0, 0, 0, 0.1)'}
|
||||
stroke={customStyles?.columnPosts?.stroke || 'rgba(0, 0, 0, 0.2)'}
|
||||
strokeWidth={customStyles?.columnPosts?.strokeWidth || 1}
|
||||
opacity={customStyles?.columnPosts?.opacity ?? 1}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Reckoning bar */}
|
||||
{effectiveFrameVisible && (
|
||||
<rect
|
||||
x={padding}
|
||||
y={dimensions.barY}
|
||||
width={effectiveColumns * rodSpacing}
|
||||
height={barHeight}
|
||||
fill={customStyles?.reckoningBar?.fill || 'rgb(0, 0, 0, 0.15)'}
|
||||
stroke={customStyles?.reckoningBar?.stroke || 'rgba(0, 0, 0, 0.3)'}
|
||||
strokeWidth={customStyles?.reckoningBar?.strokeWidth || 2}
|
||||
opacity={customStyles?.reckoningBar?.opacity ?? 1}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Beads */}
|
||||
{beadConfigs.map((columnBeads, colIndex) => {
|
||||
const placeValue = effectiveColumns - 1 - colIndex
|
||||
|
||||
return (
|
||||
<g key={`column-${colIndex}`}>
|
||||
{columnBeads.map((bead, beadIndex) => {
|
||||
const position = calculateBeadPosition(bead, dimensions)
|
||||
|
||||
// Adjust X for padding
|
||||
position.x += padding
|
||||
|
||||
const color = getBeadColor(bead, effectiveColumns, colorScheme, colorPalette)
|
||||
|
||||
return (
|
||||
<AbacusStaticBead
|
||||
key={`bead-${colIndex}-${beadIndex}`}
|
||||
bead={bead}
|
||||
x={position.x}
|
||||
y={position.y}
|
||||
size={beadSize}
|
||||
shape={beadShape}
|
||||
color={color}
|
||||
hideInactiveBeads={hideInactiveBeads}
|
||||
customStyle={
|
||||
bead.type === 'heaven'
|
||||
? customStyles?.heavenBeads
|
||||
: customStyles?.earthBeads
|
||||
}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Column numbers */}
|
||||
{showNumbers && beadConfigs.map((_, colIndex) => {
|
||||
const placeValue = effectiveColumns - 1 - colIndex
|
||||
const columnState = state[placeValue] || { heavenActive: false, earthActive: 0 }
|
||||
const digit = (columnState.heavenActive ? 5 : 0) + columnState.earthActive
|
||||
const x = colIndex * rodSpacing + rodSpacing / 2 + padding
|
||||
|
||||
return (
|
||||
<text
|
||||
key={`number-${colIndex}`}
|
||||
x={x}
|
||||
y={height - padding + 5}
|
||||
textAnchor="middle"
|
||||
fontSize={customStyles?.numerals?.fontSize || 16}
|
||||
fontWeight={customStyles?.numerals?.fontWeight || '600'}
|
||||
fill={customStyles?.numerals?.color || 'rgba(0, 0, 0, 0.8)'}
|
||||
style={{ pointerEvents: 'none', userSelect: 'none' }}
|
||||
>
|
||||
{digit}
|
||||
</text>
|
||||
)
|
||||
})}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default AbacusStatic
|
||||
100
packages/abacus-react/src/AbacusStaticBead.tsx
Normal file
100
packages/abacus-react/src/AbacusStaticBead.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* StaticBead - Pure SVG bead with no animations or interactions
|
||||
* Used by AbacusStatic for server-side rendering
|
||||
*/
|
||||
|
||||
import type { BeadConfig, BeadStyle } from './AbacusReact'
|
||||
|
||||
export interface StaticBeadProps {
|
||||
bead: BeadConfig
|
||||
x: number
|
||||
y: number
|
||||
size: number
|
||||
shape: 'diamond' | 'square' | 'circle'
|
||||
color: string
|
||||
customStyle?: BeadStyle
|
||||
hideInactiveBeads?: boolean
|
||||
}
|
||||
|
||||
export function AbacusStaticBead({
|
||||
bead,
|
||||
x,
|
||||
y,
|
||||
size,
|
||||
shape,
|
||||
color,
|
||||
customStyle,
|
||||
hideInactiveBeads = false,
|
||||
}: StaticBeadProps) {
|
||||
// Don't render inactive beads if hideInactiveBeads is true
|
||||
if (!bead.active && hideInactiveBeads) {
|
||||
return null
|
||||
}
|
||||
|
||||
const halfSize = size / 2
|
||||
const opacity = bead.active ? (customStyle?.opacity ?? 1) : 0.3
|
||||
const fill = customStyle?.fill || color
|
||||
const stroke = customStyle?.stroke || '#000'
|
||||
const strokeWidth = customStyle?.strokeWidth || 0.5
|
||||
|
||||
// Calculate offset based on shape (matching AbacusReact positioning)
|
||||
const getXOffset = () => {
|
||||
return shape === 'diamond' ? size * 0.7 : halfSize
|
||||
}
|
||||
|
||||
const getYOffset = () => {
|
||||
return halfSize
|
||||
}
|
||||
|
||||
const transform = `translate(${x - getXOffset()}, ${y - getYOffset()})`
|
||||
|
||||
const renderShape = () => {
|
||||
switch (shape) {
|
||||
case 'diamond':
|
||||
return (
|
||||
<polygon
|
||||
points={`${size * 0.7},0 ${size * 1.4},${halfSize} ${size * 0.7},${size} 0,${halfSize}`}
|
||||
fill={fill}
|
||||
stroke={stroke}
|
||||
strokeWidth={strokeWidth}
|
||||
opacity={opacity}
|
||||
/>
|
||||
)
|
||||
case 'square':
|
||||
return (
|
||||
<rect
|
||||
width={size}
|
||||
height={size}
|
||||
fill={fill}
|
||||
stroke={stroke}
|
||||
strokeWidth={strokeWidth}
|
||||
rx="1"
|
||||
opacity={opacity}
|
||||
/>
|
||||
)
|
||||
case 'circle':
|
||||
default:
|
||||
return (
|
||||
<circle
|
||||
cx={halfSize}
|
||||
cy={halfSize}
|
||||
r={halfSize}
|
||||
fill={fill}
|
||||
stroke={stroke}
|
||||
strokeWidth={strokeWidth}
|
||||
opacity={opacity}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<g
|
||||
className={`abacus-bead ${bead.active ? 'active' : 'inactive'} ${hideInactiveBeads && !bead.active ? 'hidden-inactive' : ''}`}
|
||||
transform={transform}
|
||||
style={{ transition: 'opacity 0.2s ease-in-out' }}
|
||||
>
|
||||
{renderShape()}
|
||||
</g>
|
||||
)
|
||||
}
|
||||
@@ -33,6 +33,9 @@ export type {
|
||||
export { StandaloneBead } from "./StandaloneBead";
|
||||
export type { StandaloneBeadProps } from "./StandaloneBead";
|
||||
|
||||
export { AbacusStatic } from "./AbacusStatic";
|
||||
export type { AbacusStaticConfig } from "./AbacusStatic";
|
||||
|
||||
export { ABACUS_THEMES } from "./AbacusThemes";
|
||||
export type { AbacusThemeName } from "./AbacusThemes";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user