Compare commits
53 Commits
v4.24.2
...
abacus-rea
| Author | SHA1 | Date | |
|---|---|---|---|
|
44f8b27fa1 | ||
|
0146ce1e67 | ||
|
|
acfb0dac0a | ||
|
|
0fbde53039 | ||
|
|
90bbe6fbb7 | ||
|
|
a03e73c849 | ||
|
|
f3dce84532 | ||
|
|
3b6284ae18 | ||
|
|
563136fb79 | ||
|
|
ead9ee9589 | ||
|
|
a12ae969be | ||
|
|
abb647ce40 | ||
|
|
d6c28f7ede | ||
|
|
cd5c15aeb2 | ||
|
|
ccaad3abc8 | ||
|
|
22f00f59f5 | ||
|
|
a85815fdf9 | ||
|
|
09004dc2c0 | ||
|
|
22c8a57a16 | ||
|
|
2d8bb4ab88 | ||
|
|
8e345cfb4c | ||
|
|
200b26c2cd | ||
|
|
66e38af457 | ||
|
|
c80477d248 | ||
|
|
9a688c1574 | ||
|
|
fd2b6338a8 | ||
|
|
2cfde18414 | ||
|
|
0ab4cc2880 | ||
|
|
6b7c455315 | ||
|
|
c38767f4d3 | ||
|
|
321d9aea10 | ||
|
|
92e1e62132 | ||
|
|
84d980bb24 | ||
|
|
892b377eb3 | ||
|
|
bc21095fa1 | ||
|
|
eb3b100056 | ||
|
|
276f6f0744 | ||
|
|
6d734f1d51 | ||
|
|
03b9b1228b | ||
|
|
10978e890b | ||
|
|
6d86281c63 | ||
|
|
0b1bff7eab | ||
|
|
f70ded30b9 | ||
|
|
c18012cb50 | ||
|
|
25a3356547 | ||
|
|
6463a3b2f6 | ||
|
|
7f6c486e9c | ||
|
|
3f30810271 | ||
|
|
4968e2c846 | ||
|
|
39b1e7de16 | ||
|
|
2a0e469e83 | ||
|
|
b3541e6b8a | ||
|
|
4b04e8673d |
173
CHANGELOG.md
173
CHANGELOG.md
@@ -1,3 +1,176 @@
|
||||
## [4.35.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.34.0...v4.35.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **levels:** replace slider thumb with diamond-shaped abacus beads ([0fbde53](https://github.com/antialias/soroban-abacus-flashcards/commit/0fbde53039d3ea000c6a3be492b733479e7bf47c))
|
||||
|
||||
## [4.34.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.8...v4.34.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **levels:** redesign slider with abacus-themed beads ([f3dce84](https://github.com/antialias/soroban-abacus-flashcards/commit/f3dce84532fa706e4ec9551facde2055a060ee13))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **levels:** convert to Radix UI Slider with abacus theme ([a03e73c](https://github.com/antialias/soroban-abacus-flashcards/commit/a03e73c849c5da4337f26a74b8f12b617c66068e))
|
||||
|
||||
## [4.33.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.7...v4.33.8) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **levels:** reduce Dan scale and container height to prevent clipping ([563136f](https://github.com/antialias/soroban-abacus-flashcards/commit/563136fb79fa10b2af3a119bf0f861e3b0812b2e))
|
||||
* **levels:** reduce max scale factor to allow more compact container ([ead9ee9](https://github.com/antialias/soroban-abacus-flashcards/commit/ead9ee9589aa4d7376e9385da5da53a6b444858a))
|
||||
|
||||
## [4.33.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.6...v4.33.7) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **levels:** reduce scale factor variation to minimize margin differences ([abb647c](https://github.com/antialias/soroban-abacus-flashcards/commit/abb647ce40b8f9d0c8268ab18c139324ae3195c5))
|
||||
|
||||
## [4.33.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.5...v4.33.6) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **levels:** increase container height to prevent abacus clipping ([cd5c15a](https://github.com/antialias/soroban-abacus-flashcards/commit/cd5c15aeb260c568fe7ad9b6a4f51c4d6498b2b8))
|
||||
|
||||
## [4.33.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.4...v4.33.5) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **levels:** revert delayed column change, keep overflow hidden ([22f00f5](https://github.com/antialias/soroban-abacus-flashcards/commit/22f00f59f5facc36a846408dcd196ec54ea676b1))
|
||||
|
||||
## [4.33.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.3...v4.33.4) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **levels:** stabilize slider position and prevent abacus clipping ([09004dc](https://github.com/antialias/soroban-abacus-flashcards/commit/09004dc2c055031ee2f71c964ceee6f7b1d42ecd))
|
||||
|
||||
## [4.33.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.2...v4.33.3) (2025-10-20)
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **levels:** move slider into level display pane above abacus ([2d8bb4a](https://github.com/antialias/soroban-abacus-flashcards/commit/2d8bb4ab8804f399d1ccc8a18feff9f09eca8029))
|
||||
|
||||
## [4.33.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.1...v4.33.2) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **levels:** add fixed height to entire level display pane ([200b26c](https://github.com/antialias/soroban-abacus-flashcards/commit/200b26c2cd35d1d637ede9dcfc3dbbc7f3f19320))
|
||||
|
||||
## [4.33.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.33.0...v4.33.1) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **levels:** only animate abacus, not container with background/border ([c80477d](https://github.com/antialias/soroban-abacus-flashcards/commit/c80477d24877ddada5f3f4405abbf05e1d753b5d))
|
||||
|
||||
## [4.33.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.32.1...v4.33.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **abacus-react:** add BigInt support for 30-digit Dan level abacuses ([0ab4cc2](https://github.com/antialias/soroban-abacus-flashcards/commit/0ab4cc288066b75a6ea4371f65098db5c0fc8847))
|
||||
* **levels:** add hover interaction and smooth React Spring transitions ([fd2b633](https://github.com/antialias/soroban-abacus-flashcards/commit/fd2b6338a84c3bbc683eff216a8da3b155749f0f))
|
||||
|
||||
## [4.32.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.32.0...v4.32.1) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **levels:** use correct dark mode styling from homepage + docs update ([c38767f](https://github.com/antialias/soroban-abacus-flashcards/commit/c38767f4d399fa2caa5cd4e0185689d0207fbdaf))
|
||||
|
||||
## [4.32.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.31.1...v4.32.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **levels:** add dark mode styling and responsive scaling to abacus ([92e1e62](https://github.com/antialias/soroban-abacus-flashcards/commit/92e1e621321039206f65b3605f5797bbdc6beafc))
|
||||
|
||||
## [4.31.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.31.0...v4.31.1) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **levels:** use correct AbacusReact API with direct props ([892b377](https://github.com/antialias/soroban-abacus-flashcards/commit/892b377eb3bbd555dd2566bf58e946e9faa7b9f6))
|
||||
|
||||
## [4.31.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.30.0...v4.31.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **levels:** implement interactive slider for exploring kyu & dan ranks ([eb3b100](https://github.com/antialias/soroban-abacus-flashcards/commit/eb3b1000563536d4143ba1f4ec04e59e8dd2e608))
|
||||
|
||||
## [4.30.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.29.0...v4.30.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **levels:** create true horizontal slider with abacus visualizations ([6d734f1](https://github.com/antialias/soroban-abacus-flashcards/commit/6d734f1d51f5ba1367f55923e58bd977413d754e))
|
||||
|
||||
## [4.29.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.28.0...v4.29.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **levels:** replace kyu grid with interactive slider and abacus visualizations ([10978e8](https://github.com/antialias/soroban-abacus-flashcards/commit/10978e890beee65dea78ddcce52cfe5315d58063))
|
||||
|
||||
## [4.28.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.27.0...v4.28.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **levels:** add informational footer section ([0b1bff7](https://github.com/antialias/soroban-abacus-flashcards/commit/0b1bff7eab8f5da84ae309dbda336e168c2fe3fd))
|
||||
|
||||
## [4.27.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.26.0...v4.27.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **levels:** add Dan levels ladder visualization ([c18012c](https://github.com/antialias/soroban-abacus-flashcards/commit/c18012cb505a1f2a86ebed7579b379a4d7d97f2c))
|
||||
|
||||
## [4.26.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.25.1...v4.26.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **levels:** add kyu level data and cards ([6463a3b](https://github.com/antialias/soroban-abacus-flashcards/commit/6463a3b2f6371ebebac1048197fb44178997d2ef))
|
||||
|
||||
## [4.25.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.25.0...v4.25.1) (2025-10-20)
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **homepage:** make entire "Your Journey" card clickable ([3f30810](https://github.com/antialias/soroban-abacus-flashcards/commit/3f30810271418f3acf3df17e41d9a897a3312c34))
|
||||
|
||||
## [4.25.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.3...v4.25.0) (2025-10-20)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **levels:** add Kyu & Dan levels page with homepage link ([39b1e7d](https://github.com/antialias/soroban-abacus-flashcards/commit/39b1e7de16f15412c91cf648c714e31e2de7a6bc))
|
||||
|
||||
|
||||
### Styles
|
||||
|
||||
* **homepage:** adjust journey emoji sizing and spacing ([2a0e469](https://github.com/antialias/soroban-abacus-flashcards/commit/2a0e469e83b99c88f091bfecd770e0b4c1cb6310))
|
||||
|
||||
## [4.24.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.2...v4.24.3) (2025-10-20)
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **homepage:** align all skill icon panes horizontally ([4b04e86](https://github.com/antialias/soroban-abacus-flashcards/commit/4b04e8673da228863d4ec1869897ee431fa3d753))
|
||||
|
||||
## [4.24.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.24.1...v4.24.2) (2025-10-20)
|
||||
|
||||
|
||||
|
||||
@@ -121,6 +121,62 @@ className="bg-blue-200 border-gray-300 text-brand-600"
|
||||
|
||||
See `.claude/GAME_THEMES.md` for standardized color theme usage in arcade games.
|
||||
|
||||
## Abacus Visualizations
|
||||
|
||||
**CRITICAL: This project uses @soroban/abacus-react for all abacus visualizations.**
|
||||
|
||||
- All abacus displays MUST use components from `@soroban/abacus-react`
|
||||
- Package location: `packages/abacus-react`
|
||||
- Main components: `AbacusReact`, `useAbacusConfig`, `useAbacusDisplay`
|
||||
- DO NOT create custom abacus visualizations
|
||||
- DO NOT manually draw abacus columns, beads, or bars
|
||||
|
||||
**Common Mistakes to Avoid:**
|
||||
- ❌ Don't create custom abacus components or SVGs
|
||||
- ❌ Don't manually render abacus beads or columns
|
||||
- ✅ Always use `AbacusReact` from `@soroban/abacus-react`
|
||||
- ✅ Use `useAbacusConfig` for abacus configuration
|
||||
- ✅ Use `useAbacusDisplay` for reading abacus state
|
||||
|
||||
**MANDATORY: Read the Docs Before Customizing**
|
||||
|
||||
**ALWAYS read the full README documentation before customizing or styling AbacusReact:**
|
||||
- Location: `packages/abacus-react/README.md`
|
||||
- Check homepage implementation: `src/app/page.tsx` (MiniAbacus component)
|
||||
- Check storybook examples: `src/stories/AbacusReact.*.stories.tsx`
|
||||
|
||||
**Key Documentation Points:**
|
||||
1. **Custom Styles**: Use `fill` (not just `stroke`) for columnPosts and reckoningBar
|
||||
2. **Props**: Use direct props like `value`, `columns`, `scaleFactor` (not config objects)
|
||||
3. **Example from Homepage:**
|
||||
```typescript
|
||||
const darkStyles = {
|
||||
columnPosts: {
|
||||
fill: 'rgba(255, 255, 255, 0.3)',
|
||||
stroke: 'rgba(255, 255, 255, 0.2)',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
reckoningBar: {
|
||||
fill: 'rgba(255, 255, 255, 0.4)',
|
||||
stroke: 'rgba(255, 255, 255, 0.25)',
|
||||
strokeWidth: 3,
|
||||
},
|
||||
}
|
||||
|
||||
<AbacusReact
|
||||
value={123}
|
||||
columns={3}
|
||||
customStyles={darkStyles}
|
||||
/>
|
||||
```
|
||||
|
||||
**Example Usage:**
|
||||
```typescript
|
||||
import { AbacusReact } from '@soroban/abacus-react'
|
||||
|
||||
<AbacusReact value={123} columns={5} scaleFactor={1.5} showNumbers={true} />
|
||||
```
|
||||
|
||||
## Known Issues
|
||||
|
||||
### @soroban/abacus-react TypeScript Module Resolution
|
||||
|
||||
@@ -16,7 +16,11 @@ function GamesPageContent() {
|
||||
const router = useRouter()
|
||||
|
||||
// Get all players sorted by creation time
|
||||
const allPlayers = getAllPlayers().sort((a, b) => a.createdAt - b.createdAt)
|
||||
const allPlayers = getAllPlayers().sort((a, b) => {
|
||||
const aTime = a.createdAt instanceof Date ? a.createdAt.getTime() : a.createdAt
|
||||
const bTime = b.createdAt instanceof Date ? b.createdAt.getTime() : b.createdAt
|
||||
return aTime - bTime
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
|
||||
689
apps/web/src/app/levels/page.tsx
Normal file
689
apps/web/src/app/levels/page.tsx
Normal file
@@ -0,0 +1,689 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useSpring, animated } from "@react-spring/web";
|
||||
import * as Slider from "@radix-ui/react-slider";
|
||||
import {
|
||||
AbacusReact,
|
||||
StandaloneBead,
|
||||
AbacusDisplayProvider,
|
||||
} from "@soroban/abacus-react";
|
||||
import { PageWithNav } from "@/components/PageWithNav";
|
||||
import { css } from "../../../styled-system/css";
|
||||
import { container, stack } from "../../../styled-system/patterns";
|
||||
|
||||
// Combine all levels into one array for the slider
|
||||
const allLevels = [
|
||||
{
|
||||
level: "10th Kyu",
|
||||
emoji: "🧒",
|
||||
color: "green",
|
||||
digits: 2,
|
||||
type: "kyu" as const,
|
||||
},
|
||||
{
|
||||
level: "9th Kyu",
|
||||
emoji: "🧒",
|
||||
color: "green",
|
||||
digits: 2,
|
||||
type: "kyu" as const,
|
||||
},
|
||||
{
|
||||
level: "8th Kyu",
|
||||
emoji: "🧒",
|
||||
color: "green",
|
||||
digits: 3,
|
||||
type: "kyu" as const,
|
||||
},
|
||||
{
|
||||
level: "7th Kyu",
|
||||
emoji: "🧒",
|
||||
color: "green",
|
||||
digits: 4,
|
||||
type: "kyu" as const,
|
||||
},
|
||||
{
|
||||
level: "6th Kyu",
|
||||
emoji: "🧑",
|
||||
color: "blue",
|
||||
digits: 5,
|
||||
type: "kyu" as const,
|
||||
},
|
||||
{
|
||||
level: "5th Kyu",
|
||||
emoji: "🧑",
|
||||
color: "blue",
|
||||
digits: 6,
|
||||
type: "kyu" as const,
|
||||
},
|
||||
{
|
||||
level: "4th Kyu",
|
||||
emoji: "🧑",
|
||||
color: "blue",
|
||||
digits: 7,
|
||||
type: "kyu" as const,
|
||||
},
|
||||
{
|
||||
level: "3rd Kyu",
|
||||
emoji: "🧔",
|
||||
color: "violet",
|
||||
digits: 8,
|
||||
type: "kyu" as const,
|
||||
},
|
||||
{
|
||||
level: "2nd Kyu",
|
||||
emoji: "🧔",
|
||||
color: "violet",
|
||||
digits: 9,
|
||||
type: "kyu" as const,
|
||||
},
|
||||
{
|
||||
level: "1st Kyu",
|
||||
emoji: "🧔",
|
||||
color: "violet",
|
||||
digits: 10,
|
||||
type: "kyu" as const,
|
||||
},
|
||||
{
|
||||
level: "Pre-1st Dan",
|
||||
name: "Jun-Shodan",
|
||||
minScore: 90,
|
||||
emoji: "🧙",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
{
|
||||
level: "1st Dan",
|
||||
name: "Shodan",
|
||||
minScore: 100,
|
||||
emoji: "🧙",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
{
|
||||
level: "2nd Dan",
|
||||
name: "Nidan",
|
||||
minScore: 120,
|
||||
emoji: "🧙♂️",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
{
|
||||
level: "3rd Dan",
|
||||
name: "Sandan",
|
||||
minScore: 140,
|
||||
emoji: "🧙♂️",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
{
|
||||
level: "4th Dan",
|
||||
name: "Yondan",
|
||||
minScore: 160,
|
||||
emoji: "🧙♀️",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
{
|
||||
level: "5th Dan",
|
||||
name: "Godan",
|
||||
minScore: 180,
|
||||
emoji: "🧙♀️",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
{
|
||||
level: "6th Dan",
|
||||
name: "Rokudan",
|
||||
minScore: 200,
|
||||
emoji: "🧝",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
{
|
||||
level: "7th Dan",
|
||||
name: "Nanadan",
|
||||
minScore: 220,
|
||||
emoji: "🧝",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
{
|
||||
level: "8th Dan",
|
||||
name: "Hachidan",
|
||||
minScore: 250,
|
||||
emoji: "🧝♂️",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
{
|
||||
level: "9th Dan",
|
||||
name: "Kudan",
|
||||
minScore: 270,
|
||||
emoji: "🧝♀️",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
{
|
||||
level: "10th Dan",
|
||||
name: "Judan",
|
||||
minScore: 290,
|
||||
emoji: "👑",
|
||||
color: "amber",
|
||||
digits: 30,
|
||||
type: "dan" as const,
|
||||
},
|
||||
] as const;
|
||||
|
||||
export default function LevelsPage() {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const currentLevel = allLevels[currentIndex];
|
||||
|
||||
// Calculate scale factor based on number of columns to fit the page
|
||||
// Use constrained range to prevent huge size differences between levels
|
||||
// Min 1.2 (for 30-column Dan levels) to Max 2.0 (for 2-column Kyu levels)
|
||||
const scaleFactor = Math.max(1.2, Math.min(2.0, 20 / currentLevel.digits));
|
||||
|
||||
// Animate scale factor with React Spring for smooth transitions
|
||||
const animatedProps = useSpring({
|
||||
scaleFactor,
|
||||
config: { tension: 280, friction: 60 },
|
||||
});
|
||||
|
||||
// Generate an interesting non-zero number to display on the abacus
|
||||
// Use a suffix pattern so rightmost digits stay constant as columns increase
|
||||
// This prevents beads from shifting: ones always 9, tens always 8, etc.
|
||||
const digitPattern = "123456789";
|
||||
// Use BigInt for numbers > 15 digits (Dan levels with 30 columns)
|
||||
const repeatedPattern = digitPattern.repeat(
|
||||
Math.ceil(currentLevel.digits / digitPattern.length),
|
||||
);
|
||||
const digitString = repeatedPattern.slice(-currentLevel.digits);
|
||||
|
||||
// Use BigInt for large numbers to get full 30-digit precision
|
||||
const displayValue =
|
||||
currentLevel.digits > 15
|
||||
? BigInt(digitString)
|
||||
: Number.parseInt(digitString, 10);
|
||||
|
||||
// Dark theme styles matching the homepage
|
||||
const darkStyles = {
|
||||
columnPosts: {
|
||||
fill: "rgba(255, 255, 255, 0.3)",
|
||||
stroke: "rgba(255, 255, 255, 0.2)",
|
||||
strokeWidth: 2,
|
||||
},
|
||||
reckoningBar: {
|
||||
fill: "rgba(255, 255, 255, 0.4)",
|
||||
stroke: "rgba(255, 255, 255, 0.25)",
|
||||
strokeWidth: 3,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<PageWithNav navTitle="Kyu & Dan Levels" navEmoji="📊">
|
||||
<div className={css({ bg: "gray.900", minHeight: "100vh", pb: "12" })}>
|
||||
{/* Hero Section */}
|
||||
<div
|
||||
className={css({
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(124, 58, 237, 0.3) 50%, rgba(17, 24, 39, 1) 100%)",
|
||||
color: "white",
|
||||
py: { base: "12", md: "16" },
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
opacity: 0.1,
|
||||
backgroundImage:
|
||||
"radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.15) 1px, transparent 0)",
|
||||
backgroundSize: "40px 40px",
|
||||
})}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={container({
|
||||
maxW: "6xl",
|
||||
px: "4",
|
||||
position: "relative",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({ textAlign: "center", maxW: "5xl", mx: "auto" })}
|
||||
>
|
||||
<h1
|
||||
className={css({
|
||||
fontSize: { base: "3xl", md: "5xl", lg: "6xl" },
|
||||
fontWeight: "bold",
|
||||
mb: "4",
|
||||
lineHeight: "tight",
|
||||
background:
|
||||
"linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)",
|
||||
backgroundClip: "text",
|
||||
color: "transparent",
|
||||
})}
|
||||
>
|
||||
Understanding Kyu & Dan Levels
|
||||
</h1>
|
||||
|
||||
<p
|
||||
className={css({
|
||||
fontSize: { base: "lg", md: "xl" },
|
||||
color: "gray.300",
|
||||
mb: "6",
|
||||
maxW: "3xl",
|
||||
mx: "auto",
|
||||
lineHeight: "1.6",
|
||||
})}
|
||||
>
|
||||
Slide through the complete progression from beginner to master
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className={container({ maxW: "6xl", px: "4", py: "12" })}>
|
||||
<section className={stack({ gap: "8" })}>
|
||||
{/* Current Level Display */}
|
||||
<div
|
||||
className={css({
|
||||
bg: "transparent",
|
||||
border: "2px solid",
|
||||
borderColor:
|
||||
currentLevel.color === "green"
|
||||
? "green.500"
|
||||
: currentLevel.color === "blue"
|
||||
? "blue.500"
|
||||
: currentLevel.color === "violet"
|
||||
? "violet.500"
|
||||
: "amber.500",
|
||||
rounded: "xl",
|
||||
p: { base: "6", md: "8" },
|
||||
height: { base: "auto", md: "700px" },
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
})}
|
||||
>
|
||||
{/* Level Info */}
|
||||
<div
|
||||
className={css({
|
||||
textAlign: "center",
|
||||
mb: "4",
|
||||
height: "160px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
})}
|
||||
>
|
||||
<div className={css({ fontSize: "5xl", mb: "3" })}>
|
||||
{currentLevel.emoji}
|
||||
</div>
|
||||
<h2
|
||||
className={css({
|
||||
fontSize: { base: "2xl", md: "3xl" },
|
||||
fontWeight: "bold",
|
||||
color:
|
||||
currentLevel.color === "green"
|
||||
? "green.400"
|
||||
: currentLevel.color === "blue"
|
||||
? "blue.400"
|
||||
: currentLevel.color === "violet"
|
||||
? "violet.400"
|
||||
: "amber.400",
|
||||
mb: "2",
|
||||
})}
|
||||
>
|
||||
{currentLevel.level}
|
||||
</h2>
|
||||
{"name" in currentLevel && (
|
||||
<div
|
||||
className={css({
|
||||
fontSize: "md",
|
||||
color: "gray.400",
|
||||
mb: "1",
|
||||
})}
|
||||
>
|
||||
{currentLevel.name}
|
||||
</div>
|
||||
)}
|
||||
{"minScore" in currentLevel && (
|
||||
<div className={css({ fontSize: "sm", color: "gray.500" })}>
|
||||
Minimum Score: {currentLevel.minScore} points
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Abacus-themed Radix Slider */}
|
||||
<div className={css({ mb: "6", px: { base: "2", md: "8" } })}>
|
||||
<div className={css({ mb: "3", textAlign: "center" })}>
|
||||
<p className={css({ fontSize: "sm", color: "gray.400" })}>
|
||||
Drag or click the beads to explore all levels
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={css({ position: "relative", py: "6" })}>
|
||||
<Slider.Root
|
||||
value={[currentIndex]}
|
||||
onValueChange={([value]) => setCurrentIndex(value)}
|
||||
min={0}
|
||||
max={allLevels.length - 1}
|
||||
step={1}
|
||||
className={css({
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
userSelect: "none",
|
||||
touchAction: "none",
|
||||
w: "full",
|
||||
h: "12",
|
||||
cursor: "pointer",
|
||||
})}
|
||||
>
|
||||
{/* Decorative diamond beads for all levels */}
|
||||
{allLevels.map((level, index) => {
|
||||
const isActive = index === currentIndex;
|
||||
const isDan =
|
||||
"color" in level && level.color === "violet";
|
||||
const size = isActive ? 14 : 8;
|
||||
const beadColor = isActive
|
||||
? isDan
|
||||
? "#8b5cf6"
|
||||
: "#22c55e"
|
||||
: isDan
|
||||
? "rgba(139, 92, 246, 0.4)"
|
||||
: "rgba(34, 197, 94, 0.4)";
|
||||
|
||||
// Match Radix Slider thumb positioning
|
||||
// Radix positions thumb center at the value position, accounting for thumb width
|
||||
const percentage = (index / (allLevels.length - 1)) * 100;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: `${percentage}%`,
|
||||
transform: "translate(-50%, -50%)",
|
||||
transition: "all 0.2s",
|
||||
pointerEvents: "none",
|
||||
zIndex: 0,
|
||||
filter: isActive
|
||||
? `drop-shadow(0 0 6px ${isDan ? "rgba(139, 92, 246, 0.6)" : "rgba(34, 197, 94, 0.6)"})`
|
||||
: "none",
|
||||
}}
|
||||
>
|
||||
<StandaloneBead
|
||||
size={size}
|
||||
color={beadColor}
|
||||
shape="diamond"
|
||||
animated={false}
|
||||
active={
|
||||
isActive ||
|
||||
(beadColor !== "rgba(139, 92, 246, 0.4)" &&
|
||||
beadColor !== "rgba(34, 197, 94, 0.4)")
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<Slider.Track
|
||||
className={css({
|
||||
bg: "rgba(255, 255, 255, 0.2)",
|
||||
position: "relative",
|
||||
flexGrow: 1,
|
||||
rounded: "full",
|
||||
h: "3px",
|
||||
})}
|
||||
>
|
||||
<Slider.Range className={css({ display: "none" })} />
|
||||
</Slider.Track>
|
||||
|
||||
<Slider.Thumb
|
||||
className={css({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
w: "28px",
|
||||
h: "28px",
|
||||
bg: "transparent",
|
||||
cursor: "grab",
|
||||
transition: "all 0.2s",
|
||||
zIndex: 10,
|
||||
_hover: { transform: "scale(1.15)" },
|
||||
_focus: {
|
||||
outline: "none",
|
||||
transform: "scale(1.15)",
|
||||
},
|
||||
_active: { cursor: "grabbing" },
|
||||
})}
|
||||
>
|
||||
<StandaloneBead
|
||||
size={28}
|
||||
color={
|
||||
currentLevel.color === "violet"
|
||||
? "#8b5cf6"
|
||||
: "#22c55e"
|
||||
}
|
||||
shape="diamond"
|
||||
animated={false}
|
||||
/>
|
||||
</Slider.Thumb>
|
||||
</Slider.Root>
|
||||
</div>
|
||||
|
||||
{/* Level Markers */}
|
||||
<div
|
||||
className={css({
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mt: "1",
|
||||
fontSize: "xs",
|
||||
color: "gray.500",
|
||||
})}
|
||||
>
|
||||
<span>10th Kyu</span>
|
||||
<span>1st Kyu</span>
|
||||
<span>10th Dan</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Abacus Display */}
|
||||
<div
|
||||
className={css({
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
p: "6",
|
||||
bg: "rgba(0, 0, 0, 0.3)",
|
||||
rounded: "lg",
|
||||
border: "1px solid",
|
||||
borderColor: "gray.700",
|
||||
overflow: "hidden",
|
||||
flex: 1,
|
||||
})}
|
||||
>
|
||||
<animated.div
|
||||
style={{
|
||||
transform: animatedProps.scaleFactor.to(
|
||||
(s) => `scale(${s / scaleFactor})`,
|
||||
),
|
||||
}}
|
||||
>
|
||||
<AbacusReact
|
||||
value={displayValue}
|
||||
columns={currentLevel.digits}
|
||||
scaleFactor={scaleFactor}
|
||||
showNumbers={true}
|
||||
customStyles={darkStyles}
|
||||
/>
|
||||
</animated.div>
|
||||
</div>
|
||||
|
||||
{/* Digit Count */}
|
||||
<div
|
||||
className={css({
|
||||
textAlign: "center",
|
||||
color: "gray.400",
|
||||
fontSize: "sm",
|
||||
})}
|
||||
>
|
||||
Requires mastery of <strong>{currentLevel.digits}-digit</strong>{" "}
|
||||
calculations
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div
|
||||
className={css({
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "6",
|
||||
justifyContent: "center",
|
||||
p: "6",
|
||||
bg: "rgba(0, 0, 0, 0.3)",
|
||||
rounded: "lg",
|
||||
border: "1px solid",
|
||||
borderColor: "gray.700",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "2",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
w: "4",
|
||||
h: "4",
|
||||
bg: "green.500",
|
||||
rounded: "sm",
|
||||
})}
|
||||
/>
|
||||
<span className={css({ fontSize: "sm", color: "gray.300" })}>
|
||||
Beginner (10-7 Kyu)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={css({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "2",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
w: "4",
|
||||
h: "4",
|
||||
bg: "blue.500",
|
||||
rounded: "sm",
|
||||
})}
|
||||
/>
|
||||
<span className={css({ fontSize: "sm", color: "gray.300" })}>
|
||||
Intermediate (6-4 Kyu)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={css({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "2",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
w: "4",
|
||||
h: "4",
|
||||
bg: "violet.500",
|
||||
rounded: "sm",
|
||||
})}
|
||||
/>
|
||||
<span className={css({ fontSize: "sm", color: "gray.300" })}>
|
||||
Advanced (3-1 Kyu)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={css({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "2",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
w: "4",
|
||||
h: "4",
|
||||
bg: "amber.500",
|
||||
rounded: "sm",
|
||||
})}
|
||||
/>
|
||||
<span className={css({ fontSize: "sm", color: "gray.300" })}>
|
||||
Master (Dan ranks)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Section */}
|
||||
<div
|
||||
className={css({
|
||||
bg: "rgba(0, 0, 0, 0.4)",
|
||||
border: "1px solid",
|
||||
borderColor: "gray.700",
|
||||
rounded: "xl",
|
||||
p: { base: "6", md: "8" },
|
||||
})}
|
||||
>
|
||||
<h3
|
||||
className={css({
|
||||
fontSize: { base: "xl", md: "2xl" },
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
mb: "4",
|
||||
})}
|
||||
>
|
||||
About This Ranking System
|
||||
</h3>
|
||||
<div className={stack({ gap: "4" })}>
|
||||
<p className={css({ color: "gray.300", lineHeight: "1.6" })}>
|
||||
This ranking system is based on the official examination
|
||||
structure used by the{" "}
|
||||
<strong className={css({ color: "white" })}>
|
||||
Japan Abacus Federation
|
||||
</strong>
|
||||
. It represents a standardized progression from beginner (10th
|
||||
Kyu) to master level (10th Dan), used internationally for
|
||||
soroban proficiency assessment.
|
||||
</p>
|
||||
<p className={css({ color: "gray.300", lineHeight: "1.6" })}>
|
||||
The system is designed to gradually increase in difficulty.
|
||||
Kyu levels progress from 2-digit calculations at 10th Kyu to
|
||||
10-digit calculations at 1st Kyu. Dan levels all require
|
||||
mastery of 30-digit calculations, with ranks awarded based on
|
||||
exam scores.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</PageWithNav>
|
||||
);
|
||||
}
|
||||
@@ -54,7 +54,7 @@ function MiniAbacus() {
|
||||
value={currentValue}
|
||||
columns={3}
|
||||
beadShape={appConfig.beadShape}
|
||||
styles={darkStyles}
|
||||
customStyles={darkStyles}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -366,12 +366,14 @@ export default function HomePage() {
|
||||
<div
|
||||
className={css({
|
||||
fontSize: '3xl',
|
||||
minW: '50px',
|
||||
width: '75px',
|
||||
height: '115px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
bg: 'rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: 'lg',
|
||||
py: i === 0 ? '4' : '2',
|
||||
px: i === 0 ? '3' : '2',
|
||||
})}
|
||||
>
|
||||
{i === 0 ? <MiniAbacus /> : skill.icon}
|
||||
@@ -552,15 +554,44 @@ export default function HomePage() {
|
||||
<p style={{ color: '#e5e7eb', fontSize: '16px' }}>Progress from beginner to master</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
<Link
|
||||
href="/levels"
|
||||
className={css({
|
||||
bg: 'rgba(0, 0, 0, 0.4)',
|
||||
border: '1px solid',
|
||||
borderColor: 'gray.700',
|
||||
rounded: 'xl',
|
||||
p: '8',
|
||||
display: 'block',
|
||||
transition: 'all 0.2s',
|
||||
cursor: 'pointer',
|
||||
position: 'relative',
|
||||
_hover: {
|
||||
bg: 'rgba(0, 0, 0, 0.5)',
|
||||
borderColor: 'violet.500',
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: '0 8px 16px rgba(124, 58, 237, 0.2)',
|
||||
},
|
||||
})}
|
||||
>
|
||||
{/* Subtle arrow indicator */}
|
||||
<div
|
||||
className={css({
|
||||
position: 'absolute',
|
||||
top: '4',
|
||||
right: '4',
|
||||
fontSize: 'xl',
|
||||
color: 'gray.500',
|
||||
transition: 'all 0.2s',
|
||||
_groupHover: {
|
||||
color: 'violet.400',
|
||||
transform: 'translateX(4px)',
|
||||
},
|
||||
})}
|
||||
>
|
||||
→
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={css({
|
||||
display: 'flex',
|
||||
@@ -572,25 +603,39 @@ export default function HomePage() {
|
||||
>
|
||||
{(
|
||||
[
|
||||
{ level: '10 Kyu', label: 'Beginner', color: 'colors.green.400' },
|
||||
{ level: '5 Kyu', label: 'Intermediate', color: 'colors.blue.400' },
|
||||
{ level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400' },
|
||||
{ level: 'Dan', label: 'Master', color: 'colors.amber.400' },
|
||||
{ level: '10 Kyu', label: 'Beginner', color: 'colors.green.400', emoji: '🧒' },
|
||||
{
|
||||
level: '5 Kyu',
|
||||
label: 'Intermediate',
|
||||
color: 'colors.blue.400',
|
||||
emoji: '🧑',
|
||||
},
|
||||
{ level: '1 Kyu', label: 'Advanced', color: 'colors.violet.400', emoji: '🧔' },
|
||||
{ level: 'Dan', label: 'Master', color: 'colors.amber.400', emoji: '🧙' },
|
||||
] as const
|
||||
).map((stage, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={stack({
|
||||
gap: '2',
|
||||
gap: '0',
|
||||
textAlign: 'center',
|
||||
flex: '1',
|
||||
position: 'relative',
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: '5xl',
|
||||
mb: '0',
|
||||
})}
|
||||
>
|
||||
{stage.emoji}
|
||||
</div>
|
||||
<div
|
||||
className={css({
|
||||
fontSize: 'xl',
|
||||
fontWeight: 'bold',
|
||||
mt: '-2',
|
||||
})}
|
||||
style={{ color: token(stage.color) }}
|
||||
>
|
||||
@@ -636,9 +681,9 @@ export default function HomePage() {
|
||||
mt: '6',
|
||||
})}
|
||||
>
|
||||
You'll progress through all these levels eventually ↑
|
||||
Click to learn about the official Japanese ranking system →
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
{/* Additional Tools Section */}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "soroban-monorepo",
|
||||
"version": "4.24.2",
|
||||
"version": "4.35.0",
|
||||
"private": true,
|
||||
"description": "Beautiful Soroban Flashcard Generator - Monorepo",
|
||||
"workspaces": [
|
||||
|
||||
@@ -1,3 +1,305 @@
|
||||
# [2.1.0](https://github.com/antialias/soroban-abacus-flashcards/compare/abacus-react-v2.0.0...abacus-react-v2.1.0) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **levels:** add fixed height to entire level display pane ([200b26c](https://github.com/antialias/soroban-abacus-flashcards/commit/200b26c2cd35d1d637ede9dcfc3dbbc7f3f19320))
|
||||
* **levels:** increase container height to prevent abacus clipping ([cd5c15a](https://github.com/antialias/soroban-abacus-flashcards/commit/cd5c15aeb260c568fe7ad9b6a4f51c4d6498b2b8))
|
||||
* **levels:** only animate abacus, not container with background/border ([c80477d](https://github.com/antialias/soroban-abacus-flashcards/commit/c80477d24877ddada5f3f4405abbf05e1d753b5d))
|
||||
* **levels:** reduce Dan scale and container height to prevent clipping ([563136f](https://github.com/antialias/soroban-abacus-flashcards/commit/563136fb79fa10b2af3a119bf0f861e3b0812b2e))
|
||||
* **levels:** reduce max scale factor to allow more compact container ([ead9ee9](https://github.com/antialias/soroban-abacus-flashcards/commit/ead9ee9589aa4d7376e9385da5da53a6b444858a))
|
||||
* **levels:** reduce scale factor variation to minimize margin differences ([abb647c](https://github.com/antialias/soroban-abacus-flashcards/commit/abb647ce40b8f9d0c8268ab18c139324ae3195c5))
|
||||
* **levels:** revert delayed column change, keep overflow hidden ([22f00f5](https://github.com/antialias/soroban-abacus-flashcards/commit/22f00f59f5facc36a846408dcd196ec54ea676b1))
|
||||
* **levels:** stabilize slider position and prevent abacus clipping ([09004dc](https://github.com/antialias/soroban-abacus-flashcards/commit/09004dc2c055031ee2f71c964ceee6f7b1d42ecd))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **abacus-react:** export StandaloneBead component wired to AbacusDisplayContext ([0146ce1](https://github.com/antialias/soroban-abacus-flashcards/commit/0146ce1e67da27a24cbaa8338ba6a1a6befd6bd3))
|
||||
* **levels:** add hover interaction and smooth React Spring transitions ([fd2b633](https://github.com/antialias/soroban-abacus-flashcards/commit/fd2b6338a84c3bbc683eff216a8da3b155749f0f))
|
||||
* **levels:** redesign slider with abacus-themed beads ([f3dce84](https://github.com/antialias/soroban-abacus-flashcards/commit/f3dce84532fa706e4ec9551facde2055a060ee13))
|
||||
* **levels:** replace slider thumb with diamond-shaped abacus beads ([0fbde53](https://github.com/antialias/soroban-abacus-flashcards/commit/0fbde53039d3ea000c6a3be492b733479e7bf47c))
|
||||
|
||||
# [2.0.0](https://github.com/antialias/soroban-abacus-flashcards/compare/abacus-react-v1.8.0...abacus-react-v2.0.0) (2025-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add dark color for abacus numerals ([73ff32c](https://github.com/antialias/soroban-abacus-flashcards/commit/73ff32c2432beb62710e57aa8b3b4793eca43fda)), closes [#1f2937](https://github.com/antialias/soroban-abacus-flashcards/issues/1f2937)
|
||||
* add POST handler for join requests API endpoint ([d3e5cdf](https://github.com/antialias/soroban-abacus-flashcards/commit/d3e5cdfc54f2749f27c6f8b8db854a8d0b6029f8))
|
||||
* add Typst to Docker image for flashcard generation ([d9a7694](https://github.com/antialias/soroban-abacus-flashcards/commit/d9a769403187bf70fb069be7ffe77417a62271a5))
|
||||
* allow join with pending invitation for restricted rooms ([85b2cf9](https://github.com/antialias/soroban-abacus-flashcards/commit/85b2cf98167ccf632ab634a94eb436e1eb584614))
|
||||
* allow password retry when joining via share link ([e469363](https://github.com/antialias/soroban-abacus-flashcards/commit/e469363699071610a35e0b5c507d0e15e29daa44))
|
||||
* **api:** add 'math-sprint' to settings endpoint validation ([d790e5e](https://github.com/antialias/soroban-abacus-flashcards/commit/d790e5e278f81686077dbe3ef4adca49574ae434)), closes [#1](https://github.com/antialias/soroban-abacus-flashcards/issues/1)
|
||||
* **api:** include members and memberPlayers in room creation response ([8320d9e](https://github.com/antialias/soroban-abacus-flashcards/commit/8320d9e730e2b9964e509847dfa504a78b721b5a))
|
||||
* **arcade-rooms:** navigate to invite link after room creation ([1922b21](https://github.com/antialias/soroban-abacus-flashcards/commit/1922b2122bb1bc4aeada7526d8c46aa89024bb00))
|
||||
* **arcade:** add defensive checks and update test fixtures ([a93d981](https://github.com/antialias/soroban-abacus-flashcards/commit/a93d981d1ab3abed019b28cebe87525191313cc7))
|
||||
* **arcade:** add host-only game selection with clear messaging ([22df1b0](https://github.com/antialias/soroban-abacus-flashcards/commit/22df1b0b661efe69fac1a6bd716531c904757412))
|
||||
* **arcade:** add host-only game selection with clear messaging ([c0680ca](https://github.com/antialias/soroban-abacus-flashcards/commit/c0680cad0fa26af0933e93a06c50317bf443cc7d))
|
||||
* **arcade:** add Number Guesser to game config helpers ([7d1a351](https://github.com/antialias/soroban-abacus-flashcards/commit/7d1a351ed6a1442ae34f6b75d46039bfa77a921b))
|
||||
* **arcade:** allow room creator to rejoin restricted/approval rooms ([654ba19](https://github.com/antialias/soroban-abacus-flashcards/commit/654ba19ccca595d34ad205c036c18afb99a494c7))
|
||||
* **arcade:** delete old session when room game changes ([98a3a25](https://github.com/antialias/soroban-abacus-flashcards/commit/98a3a2573db51899c41ba02796895d676c4e16ef))
|
||||
* **arcade:** implement settings persistence for matching game ([08fe432](https://github.com/antialias/soroban-abacus-flashcards/commit/08fe4326a6a7c484b9058a241f4ff79b3fb5125f))
|
||||
* **arcade:** only notify room creator of join requests ([bc571e3](https://github.com/antialias/soroban-abacus-flashcards/commit/bc571e3d0d11fe4142680132d551e25ca626d950))
|
||||
* **arcade:** preserve game settings when returning to game selection ([0ee7739](https://github.com/antialias/soroban-abacus-flashcards/commit/0ee7739091d60580d2f98cfe288b8586b03348f3))
|
||||
* **arcade:** preserve gameConfig when switching games ([2273c71](https://github.com/antialias/soroban-abacus-flashcards/commit/2273c71a872a5122d0b2023835fe30640106048e))
|
||||
* **arcade:** prevent empty update in settings API when only gameConfig changes ([ffb626f](https://github.com/antialias/soroban-abacus-flashcards/commit/ffb626f4038fd32d0f40dba8d83ae4d881d698d0))
|
||||
* **arcade:** prevent gameConfig from being overwritten when switching games ([a89d3a9](https://github.com/antialias/soroban-abacus-flashcards/commit/a89d3a970137471e2652de992c45370dbb97416d))
|
||||
* **arcade:** prevent server-side loading of React components ([784793b](https://github.com/antialias/soroban-abacus-flashcards/commit/784793ba244731edf45391da44588a978b137abe))
|
||||
* **arcade:** read nested gameConfig correctly when creating sessions ([94ef392](https://github.com/antialias/soroban-abacus-flashcards/commit/94ef39234d362b82e032cb69d3561b9fcb436eaf))
|
||||
* **arcade:** remove broken query param from game URLs ([87631af](https://github.com/antialias/soroban-abacus-flashcards/commit/87631af6788bd7b42e671374e55ec0ad8435900c))
|
||||
* **arcade:** remove legacy master-organizer placeholder ([76d207e](https://github.com/antialias/soroban-abacus-flashcards/commit/76d207e2e5244f84bc0d76fe3d753034f1991228))
|
||||
* **arcade:** resolve TypeScript errors in game config helpers ([04c9944](https://github.com/antialias/soroban-abacus-flashcards/commit/04c9944f2ed1025f5a4ece61761889edd08cc60d))
|
||||
* **build:** resolve Docker build failures preventing deployment ([7801dbb](https://github.com/antialias/soroban-abacus-flashcards/commit/7801dbb25fb0a33429c70f11294264f7238ce7a4))
|
||||
* **card-sorting:** center AbacusReact SVGs in card tiles ([26edec1](https://github.com/antialias/soroban-abacus-flashcards/commit/26edec1bbf038264405ec9d161edcd18f67a6fc6))
|
||||
* **card-sorting:** faithfully port UI/UX from Python original ([c92076f](https://github.com/antialias/soroban-abacus-flashcards/commit/c92076f232930aa12d9a0230fa745b73b5cc04d9)), closes [#2c5f76](https://github.com/antialias/soroban-abacus-flashcards/issues/2c5f76) [#1976d2](https://github.com/antialias/soroban-abacus-flashcards/issues/1976d2)
|
||||
* **card-sorting:** increase card tile sizes to contain abacuses ([d2a3b7a](https://github.com/antialias/soroban-abacus-flashcards/commit/d2a3b7ae2e3f6819b8d9ace32be22f04f748d1bc))
|
||||
* **card-sorting:** increase SVG size to fill card containers ([cf9d893](https://github.com/antialias/soroban-abacus-flashcards/commit/cf9d893f3fdbef6e91cd0ba283d602b9215569f1))
|
||||
* **card-sorting:** match game selector background to other games ([db62519](https://github.com/antialias/soroban-abacus-flashcards/commit/db62519f9beb0b4bc6120e1fd5ec251cfde5c3c1)), closes [#ccfbf1](https://github.com/antialias/soroban-abacus-flashcards/issues/ccfbf1) [#99f6e4](https://github.com/antialias/soroban-abacus-flashcards/issues/99f6e4)
|
||||
* **card-sorting:** match Python card layout with flex wrap ([9679d68](https://github.com/antialias/soroban-abacus-flashcards/commit/9679d68154ac8b6a2f905ec7d17a34b39bc00237))
|
||||
* **card-sorting:** position slots flow horizontally with wrap ([e14ffe4](https://github.com/antialias/soroban-abacus-flashcards/commit/e14ffe44d66d0c97bc0cc4e0c255698e88ce723a))
|
||||
* **card-sorting:** use blue gradient matching other game cards ([bdb84f5](https://github.com/antialias/soroban-abacus-flashcards/commit/bdb84f5d909542060fa886a83a5af62c4a785a98))
|
||||
* clear hover state in CLEAR_MISMATCH for clean turn transitions ([43f7c92](https://github.com/antialias/soroban-abacus-flashcards/commit/43f7c92f6d61616e18439c995dc4a4848e233520))
|
||||
* clear hover state on turn changes and game transitions ([6fd425c](https://github.com/antialias/soroban-abacus-flashcards/commit/6fd425ce85ddbf5e0125f757dc9886915fb6f749))
|
||||
* **complement-race:** add missing AI commentary cooldown updates ([357aa30](https://github.com/antialias/soroban-abacus-flashcards/commit/357aa30618f80d659ae515f94b7b9254bb458910))
|
||||
* **complement-race:** add missing useEffect import ([3054130](https://github.com/antialias/soroban-abacus-flashcards/commit/30541304dd0f0801860dd62967f7f7cae717bcdd))
|
||||
* **complement-race:** add missing useRef import ([d43829a](https://github.com/antialias/soroban-abacus-flashcards/commit/d43829ad48f7ee879a46879f5e6ac1256db1f564))
|
||||
* **complement-race:** add pressure decay system and improve logging ([66992e8](https://github.com/antialias/soroban-abacus-flashcards/commit/66992e877065a42d00379ef8fae0a6e252b0ffcb))
|
||||
* **complement-race:** balance AI speeds to match original implementation ([054f0c0](https://github.com/antialias/soroban-abacus-flashcards/commit/054f0c0d235dc2b0042a0f6af48840d23a4c5ff8))
|
||||
* **complement-race:** clear input state on question transitions ([5872030](https://github.com/antialias/soroban-abacus-flashcards/commit/587203056a1e1692348805eb0de909d81d16e158))
|
||||
* **complement-race:** correct passenger boarding to use multiplayer fields ([7ed1b94](https://github.com/antialias/soroban-abacus-flashcards/commit/7ed1b94b8fa620cb4f64ba43e160ef511704f3ce))
|
||||
* **complement-race:** counter-flip AI speech bubbles to make text readable ([07d5607](https://github.com/antialias/soroban-abacus-flashcards/commit/07d5607218aee03e813eceff5d161a7838d66bcb))
|
||||
* **complement-race:** flip AI racers to face right in practice mode ([ebfff1a](https://github.com/antialias/soroban-abacus-flashcards/commit/ebfff1a62fd104d531a8158345c8c012ec8a55d3))
|
||||
* **complement-race:** flip player avatar to face right in practice mode ([fa6b3b6](https://github.com/antialias/soroban-abacus-flashcards/commit/fa6b3b69d5a4a7eb70f8c18fc8c122c54c4d504a))
|
||||
* **complement-race:** implement client-side momentum with continuous decay for smooth train movement ([ea19ff9](https://github.com/antialias/soroban-abacus-flashcards/commit/ea19ff918bc70ad3eb0339e18dbd32195f34816e))
|
||||
* **complement-race:** improve AI speech bubble positioning ([6e436db](https://github.com/antialias/soroban-abacus-flashcards/commit/6e436db5e709d944ebffed6936ea1f8e4bd2e19e))
|
||||
* **complement-race:** reduce initial momentum from 50 to 10 to prevent train sailing past first station ([5f146b0](https://github.com/antialias/soroban-abacus-flashcards/commit/5f146b0daf74d54e1c7b9a57d3a2f37e73849ff2))
|
||||
* **complement-race:** remove dual game loop conflict preventing route progression ([84d42e2](https://github.com/antialias/soroban-abacus-flashcards/commit/84d42e22ac0cdd25e87e45dc698029ad7ed78559))
|
||||
* **complement-race:** resolve TypeScript errors in state adapter ([59abcca](https://github.com/antialias/soroban-abacus-flashcards/commit/59abcca4c4192ca28944fa1fa366791d557c1c27))
|
||||
* **complement-race:** restore smooth train movement with client-side game loop ([46a80cb](https://github.com/antialias/soroban-abacus-flashcards/commit/46a80cbcc8ec39224d4edaf540da25611d48fbdd))
|
||||
* **complement-race:** show new passengers when route changes ([ec1c8ed](https://github.com/antialias/soroban-abacus-flashcards/commit/ec1c8ed263844f56477c1f709041339b42b48f4e))
|
||||
* **complement-race:** track physical car indices to prevent boarding issues ([53bbae8](https://github.com/antialias/soroban-abacus-flashcards/commit/53bbae84af7317d5e12109db2054cc70ca5bea27))
|
||||
* **complement-race:** track previous position to detect route threshold crossing ([a6c20aa](https://github.com/antialias/soroban-abacus-flashcards/commit/a6c20aab3b245d9893808d188d16a35ab80cfca9))
|
||||
* **complement-race:** train now moves in sprint mode ([54b46e7](https://github.com/antialias/soroban-abacus-flashcards/commit/54b46e771e654721e7fabb1f45ecd45daf8e447f))
|
||||
* **complement-race:** update passenger display when state changes ([5116364](https://github.com/antialias/soroban-abacus-flashcards/commit/511636400c19776b58c6bddf8f7c9cc398a05236))
|
||||
* **complement-race:** use active local players pattern from navbar ([71cdc34](https://github.com/antialias/soroban-abacus-flashcards/commit/71cdc342c97ca53b5e7e4202d4d344199e8ddd98))
|
||||
* **complement-race:** use local player emoji instead of first active player ([76eb051](https://github.com/antialias/soroban-abacus-flashcards/commit/76eb0517c202d1b9160b49dec0b99ff4972daff2))
|
||||
* correct AbacusReact API usage and add structural styling ([247377f](https://github.com/antialias/soroban-abacus-flashcards/commit/247377fca35ee3433e02ad594ecc1c4f391f0143)), closes [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24) [#a78](https://github.com/antialias/soroban-abacus-flashcards/issues/a78)
|
||||
* create arcade sessions on room join to enable config changes ([c29501f](https://github.com/antialias/soroban-abacus-flashcards/commit/c29501f6663cb6063f2ddef8b3fdb14c31927639))
|
||||
* **db:** add 'math-sprint' to database schema enums ([7b112a9](https://github.com/antialias/soroban-abacus-flashcards/commit/7b112a98babe782d4c254ef18a0295e7cbf8fefa)), closes [#1](https://github.com/antialias/soroban-abacus-flashcards/issues/1)
|
||||
* **deployment:** pass git info to Docker build for deployment info modal ([4b04e43](https://github.com/antialias/soroban-abacus-flashcards/commit/4b04e43ff8c9e9f239d7f5e306aab338b535296f))
|
||||
* **docker:** add packages/templates for Typst flashcard generation ([1417722](https://github.com/antialias/soroban-abacus-flashcards/commit/14177224380b8c37413123bee344c9b762055a15))
|
||||
* **docker:** add qpdf for PDF linearization and validation ([c92ff39](https://github.com/antialias/soroban-abacus-flashcards/commit/c92ff3971c853e4e55ccd632ff3ee292fcce8315))
|
||||
* **docker:** bypass PEP 668 externally-managed-environment error ([bb59c61](https://github.com/antialias/soroban-abacus-flashcards/commit/bb59c61638e60b0678043e954e044d9390f88e7f))
|
||||
* **docker:** copy core package with Python scripts to production image ([33e9ad2](https://github.com/antialias/soroban-abacus-flashcards/commit/33e9ad2f79b591f1c5ee57a6691e1bcf48420859))
|
||||
* **docker:** include Panda CSS styled-system in production image ([57fabff](https://github.com/antialias/soroban-abacus-flashcards/commit/57fabffe605d953b4a4d7e05032401cbf1ab2d14))
|
||||
* **docker:** install py3-pip for Python dependency installation ([0f55909](https://github.com/antialias/soroban-abacus-flashcards/commit/0f55909533414bdc07f113b93bb8bfa21367959b))
|
||||
* **docker:** install Python dependencies for flashcard generation ([c9b7e92](https://github.com/antialias/soroban-abacus-flashcards/commit/c9b7e92f39ee7aa7f13606c2836763144df102e7))
|
||||
* **docker:** remove reference to deleted @soroban/client package ([2953ef8](https://github.com/antialias/soroban-abacus-flashcards/commit/2953ef8917f7b13f6eb562eb7d58d14179a718da))
|
||||
* exclude dist from TypeScript compilation and add missing type import ([b7f1d5a](https://github.com/antialias/soroban-abacus-flashcards/commit/b7f1d5a5696888bb4fbf6d5da14ca333de0f0167))
|
||||
* hide hover avatar for current user's own player ([dba42b5](https://github.com/antialias/soroban-abacus-flashcards/commit/dba42b59257f2422ec8f31a46c222393fcc157d4))
|
||||
* **homepage:** adjust mini abacus container height ([c4066d6](https://github.com/antialias/soroban-abacus-flashcards/commit/c4066d687925bbe7737ebfeefdada7365ff97c6c))
|
||||
* **homepage:** correct positioning of progression arrows in Your Journey section ([3fff9ef](https://github.com/antialias/soroban-abacus-flashcards/commit/3fff9ef140bf1f462042f8319ed6c5e2a376e4ba))
|
||||
* **homepage:** fix MiniAbacus runtime error and improve sizing ([1fa0df8](https://github.com/antialias/soroban-abacus-flashcards/commit/1fa0df85f7d3988cbc61701d89476419ccf0a13c))
|
||||
* **homepage:** improve text contrast in Your Journey section ([24d1200](https://github.com/antialias/soroban-abacus-flashcards/commit/24d120004dccecc1ce2f08c1b73eec902868fb23))
|
||||
* **homepage:** use correct AbacusReact API and fix clipping/styling issues ([1432afd](https://github.com/antialias/soroban-abacus-flashcards/commit/1432afd6e6bd547bd0da76dbeea1c2b71244826f))
|
||||
* **homepage:** use direct conditionals for mini abacus padding ([38ef16a](https://github.com/antialias/soroban-abacus-flashcards/commit/38ef16a8f91f8ab4ad0d717b0321e2002636fafb))
|
||||
* **homepage:** use explicit RGBA colors for Your Journey text ([9c51cc9](https://github.com/antialias/soroban-abacus-flashcards/commit/9c51cc94eec4efcab9c0b9d1190f5b79c0c7d365))
|
||||
* **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)
|
||||
* **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)
|
||||
* **home:** use Panda CSS token() for dynamic colors and center arrows properly ([d52ba63](https://github.com/antialias/soroban-abacus-flashcards/commit/d52ba6373a4577655dc1e5f5ff4926af7f7d96c3))
|
||||
* improve authorization error handling and add missing decline invitation endpoint ([97669ad](https://github.com/antialias/soroban-abacus-flashcards/commit/97669ad084b077cbf6f33b570710016ba666cdb6))
|
||||
* improve join request approval error handling with actionable messages ([57bf846](https://github.com/antialias/soroban-abacus-flashcards/commit/57bf8460c8ecff374355bfb93f4b06dfbb148273))
|
||||
* improve kicked modal message for retired room ejections ([f865ce1](https://github.com/antialias/soroban-abacus-flashcards/commit/f865ce16ecf7648e41549795c8137f4fc33e34ac))
|
||||
* join user socket channel to receive approval notifications ([7d08fdd](https://github.com/antialias/soroban-abacus-flashcards/commit/7d08fdd90643920857eda09998ac01afbae74154))
|
||||
* **levels:** use correct AbacusReact API with direct props ([892b377](https://github.com/antialias/soroban-abacus-flashcards/commit/892b377eb3bbd555dd2566bf58e946e9faa7b9f6))
|
||||
* **levels:** use correct dark mode styling from homepage + docs update ([c38767f](https://github.com/antialias/soroban-abacus-flashcards/commit/c38767f4d399fa2caa5cd4e0185689d0207fbdaf))
|
||||
* **matching:** add settings persistence to matching game ([00dcb87](https://github.com/antialias/soroban-abacus-flashcards/commit/00dcb872b7e70bdb7de301b56fe42195e6ee923f))
|
||||
* **matching:** apply turn indicators to arcade version too ([e6f96a8](https://github.com/antialias/soroban-abacus-flashcards/commit/e6f96a8b992c15f868ac5b1c1ac36b32caf433ed))
|
||||
* **matching:** make MemoryGrid generic to support different card types ([dcda826](https://github.com/antialias/soroban-abacus-flashcards/commit/dcda826b9a7cab6614638f8661f288e9fa010324))
|
||||
* **matching:** only apply turn indicator when game is active ([cb4c061](https://github.com/antialias/soroban-abacus-flashcards/commit/cb4c061d11433799a0091f4a958371ff7cef7a00))
|
||||
* **matching:** replace mismatch banner with card shake animation ([804096f](https://github.com/antialias/soroban-abacus-flashcards/commit/804096fd8a0709750114ab01a1015f9b5fc28b63))
|
||||
* **matching:** use UUID instead of numeric index for scores ([5036cb0](https://github.com/antialias/soroban-abacus-flashcards/commit/5036cb00b6eff91cfa52b5babb7e5a91ff7e18b3))
|
||||
* **math-sprint:** remove unused import and autoFocus attribute ([51593eb](https://github.com/antialias/soroban-abacus-flashcards/commit/51593eb44f93e369d6a773ee80e5f5cf50f3be67))
|
||||
* **memory-quiz:** fix playMode persistence by updating validator ([de0efd5](https://github.com/antialias/soroban-abacus-flashcards/commit/de0efd59321ec779cddb900724035884290419b7))
|
||||
* **memory-quiz:** persist playMode setting across game switches ([487ca7f](https://github.com/antialias/soroban-abacus-flashcards/commit/487ca7fba62e370c85bc3779ca8a96eb2c2cc3e3))
|
||||
* **memory-quiz:** prevent duplicate card processing from optimistic updates ([51676fc](https://github.com/antialias/soroban-abacus-flashcards/commit/51676fc15f5bc15cdb43393d3e66f7c5a0667868))
|
||||
* **memory-quiz:** prevent input lag during rapid typing in room mode ([b45139b](https://github.com/antialias/soroban-abacus-flashcards/commit/b45139b588d0ab6df4d6c1003c1b65b634e2b041))
|
||||
* **memory-quiz:** scope game settings by game name for proper persistence ([3dfe54f](https://github.com/antialias/soroban-abacus-flashcards/commit/3dfe54f1cb89bd636e763e1c5acb03776f97c011))
|
||||
* **memory-quiz:** synchronize card display across all players in multiplayer ([472f201](https://github.com/antialias/soroban-abacus-flashcards/commit/472f201088d82f92030273fadaf8a8e488820d6c))
|
||||
* **migrations:** add migration 0009 for display_password column ([040d749](https://github.com/antialias/soroban-abacus-flashcards/commit/040d7495a0801076b252d2574023f5323540db1a))
|
||||
* **moderation:** don't show pending invitation for users already in room ([fae5920](https://github.com/antialias/soroban-abacus-flashcards/commit/fae5920e2fda910f8db724103a837537b1063ac7))
|
||||
* **moderation:** improve access mode settings UX ([dd9e657](https://github.com/antialias/soroban-abacus-flashcards/commit/dd9e657db85752b32ff91ae1b33a0bf7a7628e07))
|
||||
* move invitations into nav and filter out current/banned rooms ([cfaf82b](https://github.com/antialias/soroban-abacus-flashcards/commit/cfaf82b2cc93c6da1dcceb5aea8d0bd2c7b14cea))
|
||||
* **nav:** add delay to hamburger menu hover to prevent premature closing ([95cd72e](https://github.com/antialias/soroban-abacus-flashcards/commit/95cd72e9bf410c7772999a17fae88719dd6e404e))
|
||||
* **nav:** add z-index to turn labels to prevent avatar overlap ([7c294da](https://github.com/antialias/soroban-abacus-flashcards/commit/7c294dafff4e4d70831e12897aec06092cd3ff3f))
|
||||
* **nav:** close hamburger menu when nested dropdown closes and mouse not hovering ([7d65212](https://github.com/antialias/soroban-abacus-flashcards/commit/7d652126d04239d1971b8aa302137295a3dde90b))
|
||||
* **nav:** enable tooltips for local players during gameplay ([5499700](https://github.com/antialias/soroban-abacus-flashcards/commit/54997007b8485c4d7c605d5b6179cedef3fdc9c7))
|
||||
* **nav:** improve readability of turn label text ([bbd1da0](https://github.com/antialias/soroban-abacus-flashcards/commit/bbd1da02b5e94d625844d9301c617da98d01868a))
|
||||
* **nav:** improve text contrast in room info pane ([3e691cb](https://github.com/antialias/soroban-abacus-flashcards/commit/3e691cb06d64e32f65146ffd690fa1c25e9b487d))
|
||||
* **nav:** navigate to /arcade/room (not /arcade/rooms/{id}) ([1c55f36](https://github.com/antialias/soroban-abacus-flashcards/commit/1c55f3630cb5f07b685555e41baa5a49314f15a3))
|
||||
* **nav:** navigate to room after creation from (+) menu ([21e6e33](https://github.com/antialias/soroban-abacus-flashcards/commit/21e6e33173e7939102a7e6d6a7bd5168a97a49d6))
|
||||
* **nav:** prevent hamburger menu from closing when toggling Style dropdown ([a898fbc](https://github.com/antialias/soroban-abacus-flashcards/commit/a898fbc187bf5286f63719420e0e98654ef25bb3))
|
||||
* **nav:** prevent style dropdown from closing hamburger menu ([560a052](https://github.com/antialias/soroban-abacus-flashcards/commit/560a05266e15b51089cfd127b4ebe0990f04e64d))
|
||||
* **nav:** prevent turn label text from being obscured ([c4b00dd](https://github.com/antialias/soroban-abacus-flashcards/commit/c4b00dd679aa2f87ae6b84a37e5b6d0d38113606))
|
||||
* **nav:** properly prevent nested style dropdown from closing hamburger menu ([c5b6a82](https://github.com/antialias/soroban-abacus-flashcards/commit/c5b6a82ca42e0f9b381f2086e825e3ce36d738a9))
|
||||
* **nav:** remove animation/enlargement from network player turn indicator ([53079ed](https://github.com/antialias/soroban-abacus-flashcards/commit/53079ede13ce9734cd3e702f27e6cb8f7fff626e))
|
||||
* **nav:** remove blue gradient background from network players ([2881aff](https://github.com/antialias/soroban-abacus-flashcards/commit/2881affecca16afefdeb05aecdbb3648cba05691))
|
||||
* **nav:** remove opacity reduction from local players ([5215af8](https://github.com/antialias/soroban-abacus-flashcards/commit/5215af801fc7e7412dc1c84e6abf1231f7670bfb))
|
||||
* **nav:** remove play arrow badge from turn indicators ([80cfc10](https://github.com/antialias/soroban-abacus-flashcards/commit/80cfc10f7887533b20d663f320696917e1856899))
|
||||
* **nav:** update types for registry games with nullable gameName ([a51e539](https://github.com/antialias/soroban-abacus-flashcards/commit/a51e539d023681daf639ec104e79079c8ceec98e))
|
||||
* **number-guesser:** add turn indicators, error feedback, and fix player ordering ([9f62623](https://github.com/antialias/soroban-abacus-flashcards/commit/9f626236845493ef68e1b3626e80efa35637b449))
|
||||
* pixel-perfect alignment across all nav elements ([fa78a2c](https://github.com/antialias/soroban-abacus-flashcards/commit/fa78a2c001f3530b0a0929411e6e0addbc0abda0))
|
||||
* **player-config:** correct label positioning in player settings dialog ([554cc40](https://github.com/antialias/soroban-abacus-flashcards/commit/554cc4063bc756c9c9cd1adf0c1964d3f2f6151b))
|
||||
* populate session activePlayers from room members on join ([2d00939](https://github.com/antialias/soroban-abacus-flashcards/commit/2d00939f1b59a10d271f82098c1b88acb2245ce1))
|
||||
* prevent duplicate arcade sessions per room ([4cc3de5](https://github.com/antialias/soroban-abacus-flashcards/commit/4cc3de5f43711bb2ffe9b10052108b27bba6889c))
|
||||
* remove duplicate ModerationNotifications causing double toasts ([c6886a0](https://github.com/antialias/soroban-abacus-flashcards/commit/c6886a0e59b3cbf051a828e0157495101cd8c823))
|
||||
* replace isLocked with accessMode and add bcryptjs ([a74b96b](https://github.com/antialias/soroban-abacus-flashcards/commit/a74b96bb6fe331d27f3d27b8f77a3ce32b254bce))
|
||||
* replace last remaining isLoading with isPending in CreateRoomModal ([85d13cc](https://github.com/antialias/soroban-abacus-flashcards/commit/85d13cc552cfe2e825f8ea20c7db00d666599134))
|
||||
* replace native alerts with inline confirmations in ModerationPanel ([ebe123e](https://github.com/antialias/soroban-abacus-flashcards/commit/ebe123ed7edf24fbc7b8765ed709455a8513d6d5))
|
||||
* reset join request toast state when moderation event cleared ([6beb58a](https://github.com/antialias/soroban-abacus-flashcards/commit/6beb58a7b8f8e1841c71729a3517ab459e924aa9))
|
||||
* resolve Memory Quiz room-based multiplayer validation issues ([2ffeade](https://github.com/antialias/soroban-abacus-flashcards/commit/2ffeade43710b5f3fff9991cc84763bbdbf97010))
|
||||
* resolve TypeScript errors in MemoryGrid and StandardGameLayout ([cabbc82](https://github.com/antialias/soroban-abacus-flashcards/commit/cabbc821955d70f118630dc21a9fcbb6d340f278))
|
||||
* **room-data:** update query cache when gameConfig changes ([7cea297](https://github.com/antialias/soroban-abacus-flashcards/commit/7cea297095b78d74f5b77ca83489ec1be684a486))
|
||||
* **rooms:** add real-time ownership transfer updates via WebSocket ([c00cfa3](https://github.com/antialias/soroban-abacus-flashcards/commit/c00cfa3de011720f3399fa340182b347f7e0d456))
|
||||
* **room:** update GAME_TYPE_TO_NAME mapping for memory-quiz ([4afa171](https://github.com/antialias/soroban-abacus-flashcards/commit/4afa171af212902120599b3d68f58cfbdf7820b0))
|
||||
* set color on abacus container div for numeral visibility ([cd47960](https://github.com/antialias/soroban-abacus-flashcards/commit/cd4796024e41f731ae5d83c82f6582e19d6eaf99)), closes [#1f2937](https://github.com/antialias/soroban-abacus-flashcards/issues/1f2937)
|
||||
* show initial value and improve numeral contrast ([1b57f6d](https://github.com/antialias/soroban-abacus-flashcards/commit/1b57f6ddecf3a118f2e4fadd1a91be1256f5a034)), closes [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24)
|
||||
* simplify abacus pane with light background ([30f48ab](https://github.com/antialias/soroban-abacus-flashcards/commit/30f48ab8976976688e089b07ece7fdae6d7ada79))
|
||||
* **socket-io:** update import path for socket-server module ([1a64dec](https://github.com/antialias/soroban-abacus-flashcards/commit/1a64decf5afe67c16e1aec283262ffa6132dcd83))
|
||||
* stack game title dropdown ABOVE room pane, not inside it ([7bc815f](https://github.com/antialias/soroban-abacus-flashcards/commit/7bc815fd7dbbb1489a17782b2df0c3fe508dd574))
|
||||
* **toast:** scope animations to prevent affecting other UI elements ([245ed8a](https://github.com/antialias/soroban-abacus-flashcards/commit/245ed8a625ba848f8cd79d51bfd88600cd77f0b9))
|
||||
* **tutorial:** correct column index calculation for variable column counts ([bf1ced4](https://github.com/antialias/soroban-abacus-flashcards/commit/bf1ced43f801938b05f01548eea5fe771de1b58f))
|
||||
* **tutorial:** filter bead highlights when using fewer columns ([4d906ec](https://github.com/antialias/soroban-abacus-flashcards/commit/4d906ec20e90a9b0b3838f9b8428e0c68992f381))
|
||||
* **tutorial:** reduce tooltip z-index to scroll under nav bar ([47640f3](https://github.com/antialias/soroban-abacus-flashcards/commit/47640f3486c6d4a7107d59bdcce043f76fabbb1d))
|
||||
* **tutorial:** resolve React hydration error in TutorialPlayer ([c883d9e](https://github.com/antialias/soroban-abacus-flashcards/commit/c883d9e4c1b3a2f52c9d41e3ddce7418399f2649))
|
||||
* **tutorial:** resolve TypeScript errors in TutorialPlayer ([88f57ce](https://github.com/antialias/soroban-abacus-flashcards/commit/88f57ce6df125142d6ea7feec60c475926bd4929))
|
||||
* **tutorial:** use correct customStyles API for dark mode frame styling ([fdc882c](https://github.com/antialias/soroban-abacus-flashcards/commit/fdc882cb046e3d8835fbca59841e9af5329bcc52))
|
||||
* update locked room terminology and allow existing members ([1ddf985](https://github.com/antialias/soroban-abacus-flashcards/commit/1ddf985938d9542fe26e44da58234f3d4e3c9543))
|
||||
* use app-wide abacus config and remove instruction text ([0a50c73](https://github.com/antialias/soroban-abacus-flashcards/commit/0a50c733b089c7c341f0fdef47da78d1c61a3cb5))
|
||||
* use color instead of fill for numeral styling ([ea10c16](https://github.com/antialias/soroban-abacus-flashcards/commit/ea10c16811eb969b9963417079c330ae9ff295ba))
|
||||
* use defaultValue for interactive abacus control ([06aca98](https://github.com/antialias/soroban-abacus-flashcards/commit/06aca986ace4d76b70f2fd2f5e57f66758185b38))
|
||||
* use useCreateRoom hook instead of nonexistent createRoom from useRoomData ([f7d63b3](https://github.com/antialias/soroban-abacus-flashcards/commit/f7d63b30ac498b63797ae8683a0beb435a1c97b3))
|
||||
|
||||
|
||||
### Code Refactoring
|
||||
|
||||
* **db:** remove database schema coupling for game names ([e135d92](https://github.com/antialias/soroban-abacus-flashcards/commit/e135d92abb4d27f646c1fbeff6524a729d107426)), closes [#1](https://github.com/antialias/soroban-abacus-flashcards/issues/1)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **abacus-react:** add BigInt support for 30-digit Dan level abacuses ([0ab4cc2](https://github.com/antialias/soroban-abacus-flashcards/commit/0ab4cc288066b75a6ea4371f65098db5c0fc8847))
|
||||
* add API routes for moderation and invitations ([79a8518](https://github.com/antialias/soroban-abacus-flashcards/commit/79a85185575571cf628d655b0558f8246d2b02c7))
|
||||
* add backend library functions for room moderation ([84f3c4b](https://github.com/antialias/soroban-abacus-flashcards/commit/84f3c4bcfd258cb2e54b89b55d5162af57b74fe5))
|
||||
* add common UI components ([cd3115a](https://github.com/antialias/soroban-abacus-flashcards/commit/cd3115aa6d6bb8cf227b3d15d055f27dc5377a00))
|
||||
* add database schema for room moderation and invitations ([97d1604](https://github.com/antialias/soroban-abacus-flashcards/commit/97d16041dfe33bd817df2472323962dc4e94f8ee))
|
||||
* add drizzle migration for room_game_configs table ([3bae00b](https://github.com/antialias/soroban-abacus-flashcards/commit/3bae00b9a9dc925039a02fe07d036a2fc5e0fb79))
|
||||
* add fun automatic player naming system ([249257c](https://github.com/antialias/soroban-abacus-flashcards/commit/249257c6c77d503b48479065664c96c5de36a234))
|
||||
* add invitation system UI components ([fd3a2d1](https://github.com/antialias/soroban-abacus-flashcards/commit/fd3a2d1f76eb12473bb2b5a33453362d6889d7b0))
|
||||
* add moderation panel with unban & invite feature ([a2d0169](https://github.com/antialias/soroban-abacus-flashcards/commit/a2d0169f8063f00726ce2769bd5db270cfa82f4d))
|
||||
* add name generator button and abacus emoji ([07212e4](https://github.com/antialias/soroban-abacus-flashcards/commit/07212e4df0c7fd4b8cccf935c48b14164df6961d))
|
||||
* add player count to stacked room info ([540f6b7](https://github.com/antialias/soroban-abacus-flashcards/commit/540f6b76d05f561baa581d67070ab43134d8b5f6))
|
||||
* add prominent join request approval notifications for room moderators ([036da6d](https://github.com/antialias/soroban-abacus-flashcards/commit/036da6de66ca7d3f459c55df657b04a9e88d9cd3))
|
||||
* add real-time socket updates for moderation events ([86ceba3](https://github.com/antialias/soroban-abacus-flashcards/commit/86ceba3df3d39812d63fbf5d03fc37d8c3a75027))
|
||||
* add room access modes and ownership transfer ([6ff21c4](https://github.com/antialias/soroban-abacus-flashcards/commit/6ff21c4f1dd0dd1db14257612809b4d40512689a))
|
||||
* add room creation and join flow UI ([7f95032](https://github.com/antialias/soroban-abacus-flashcards/commit/7f950322530e8deb2e330d0d2147d1a20fa1e642))
|
||||
* add socket listener and polling for approval notifications ([35b4a72](https://github.com/antialias/soroban-abacus-flashcards/commit/35b4a72c8b2f80a74b5d2fe02b048d4ec4d1d6f2))
|
||||
* add waiting state for approval requests in JoinRoomModal ([f9b0429](https://github.com/antialias/soroban-abacus-flashcards/commit/f9b0429a2e2d22944acba66009dd87a9d9eb28c2))
|
||||
* adjust tier probabilities for more abacus flavor ([49219e3](https://github.com/antialias/soroban-abacus-flashcards/commit/49219e34cde32736155a11929d10581e783cba69))
|
||||
* **arcade:** add Card Sorting Challenge game scaffolding ([df37260](https://github.com/antialias/soroban-abacus-flashcards/commit/df37260e26bbb146493e0834e093afd98fa3f2a4))
|
||||
* **arcade:** add Change Game functionality for room hosts ([ee39241](https://github.com/antialias/soroban-abacus-flashcards/commit/ee39241e3c9e04202592497d9987eafcb89c00c9))
|
||||
* **arcade:** add game selection screen with navigation to room page ([4124f1c](https://github.com/antialias/soroban-abacus-flashcards/commit/4124f1cc081f5cb9d6f450f3c2e0cca8a247deba))
|
||||
* **arcade:** add Math Sprint game implementation ([e5be09e](https://github.com/antialias/soroban-abacus-flashcards/commit/e5be09ef5f170c7544557f75b9eca17bb2069246))
|
||||
* **arcade:** add modular game SDK and registry system ([de30bec](https://github.com/antialias/soroban-abacus-flashcards/commit/de30bec47923565fe5d1d5a6f719f3fc4e9d1509))
|
||||
* **arcade:** add Number Guesser demo game with plugin architecture ([0e3c058](https://github.com/antialias/soroban-abacus-flashcards/commit/0e3c0587073a69574a50f05c467f2499296012bf))
|
||||
* **arcade:** broadcast game selection changes to all room members ([b99e754](https://github.com/antialias/soroban-abacus-flashcards/commit/b99e7543952bb0d47f42e79dc4226b3c1280a0ee))
|
||||
* **arcade:** migrate matching pairs - phases 1-4 and 7 complete ([2a3af97](https://github.com/antialias/soroban-abacus-flashcards/commit/2a3af973f70ff07de30b38bbe1cdc549a971846f))
|
||||
* **arcade:** migrate memory-quiz to modular game system ([f48c37a](https://github.com/antialias/soroban-abacus-flashcards/commit/f48c37accccb88e790c7a1b438fd0566e7120e11))
|
||||
* **arcade:** register Math Sprint in game system ([0c05a7c](https://github.com/antialias/soroban-abacus-flashcards/commit/0c05a7c6bbc8d6f6e1f92e15e691d7e1aba0d8f7)), closes [#2](https://github.com/antialias/soroban-abacus-flashcards/issues/2) [#3](https://github.com/antialias/soroban-abacus-flashcards/issues/3)
|
||||
* **card-sorting:** add spectator mode UX enhancements ([4ab093a](https://github.com/antialias/soroban-abacus-flashcards/commit/4ab093a9d8ba5b290da44aaa6aa71ad7d7149b32))
|
||||
* **card-sorting:** add UI components and fix AbacusReact props ([d249ec0](https://github.com/antialias/soroban-abacus-flashcards/commit/d249ec0e5ff4610f55f35f762d726e0c98ac366c))
|
||||
* **card-sorting:** implement Provider with arcade session integration ([7f6fea9](https://github.com/antialias/soroban-abacus-flashcards/commit/7f6fea91f6dcc69a173eea86bcefc9921f1c1664))
|
||||
* **complement-race:** add infinite win condition for Steam Sprint mode ([d8fdfee](https://github.com/antialias/soroban-abacus-flashcards/commit/d8fdfeef74a5d3bb9684254af1c9d64d264b46ad))
|
||||
* **complement-race:** add mini app navigation bar ([ed0ef2d](https://github.com/antialias/soroban-abacus-flashcards/commit/ed0ef2d3b87324470d06b3246652967544caec26))
|
||||
* **complement-race:** enable adaptive AI difficulty in arcade ([55010d2](https://github.com/antialias/soroban-abacus-flashcards/commit/55010d2bcd953718d8fea428b1f7f613a193779c))
|
||||
* **complement-race:** implement state adapter for multiplayer support ([13882bd](https://github.com/antialias/soroban-abacus-flashcards/commit/13882bda3258d68a817473d7d830381f02553043))
|
||||
* **complement-race:** restore AI opponents in practice and survival modes ([325e07d](https://github.com/antialias/soroban-abacus-flashcards/commit/325e07de5929169aa333ef16f7bca5b41eeb1622))
|
||||
* **homepage:** add animated mini abacus to "Read and set numbers" card ([e028e34](https://github.com/antialias/soroban-abacus-flashcards/commit/e028e342ad4bc01491e05a4ba074628155926fd8))
|
||||
* **homepage:** add more visual embellishments to learning cards ([4ec1b95](https://github.com/antialias/soroban-abacus-flashcards/commit/4ec1b952f202d50f6db287c41732ec65ca17c142))
|
||||
* **homepage:** enhance "What You'll Learn" with visual cards ([d142342](https://github.com/antialias/soroban-abacus-flashcards/commit/d1423420e653b26b2f89d9d17ae5d597807d6979))
|
||||
* **home:** redesign home page to showcase complete platform ([ee6c4f2](https://github.com/antialias/soroban-abacus-flashcards/commit/ee6c4f2f4f39e3b30f59c54866c3857c218fb80f))
|
||||
* implement approval request flow for share links ([4a6b3ca](https://github.com/antialias/soroban-abacus-flashcards/commit/4a6b3cabe5c6aa42f4fa00ed09f9b3713f097539))
|
||||
* implement avatar-themed name generation with probabilistic mixing ([76a8472](https://github.com/antialias/soroban-abacus-flashcards/commit/76a8472f12d251071b97f2288f62f0b358576232))
|
||||
* implement proper retired room behavior with member expulsion ([a2d5368](https://github.com/antialias/soroban-abacus-flashcards/commit/a2d53680f27db04b2cd09973e62a76c5a7d4ce06))
|
||||
* improve arcade nav player grouping and add room join code display ([8e9980d](https://github.com/antialias/soroban-abacus-flashcards/commit/8e9980dc82ba2ab4ce973fc2c7ed259a20af9b19))
|
||||
* improve room creation UX and add password support for share links ([dcbb507](https://github.com/antialias/soroban-abacus-flashcards/commit/dcbb5072d8e0a12838fe70e3faa85f94cd63b0c1))
|
||||
* integrate moderation system into arcade pages ([087652f](https://github.com/antialias/soroban-abacus-flashcards/commit/087652f9e7091a93c02906162275ef88ec5e44c6))
|
||||
* **levels:** add Dan levels ladder visualization ([c18012c](https://github.com/antialias/soroban-abacus-flashcards/commit/c18012cb505a1f2a86ebed7579b379a4d7d97f2c))
|
||||
* **levels:** add dark mode styling and responsive scaling to abacus ([92e1e62](https://github.com/antialias/soroban-abacus-flashcards/commit/92e1e621321039206f65b3605f5797bbdc6beafc))
|
||||
* **levels:** add informational footer section ([0b1bff7](https://github.com/antialias/soroban-abacus-flashcards/commit/0b1bff7eab8f5da84ae309dbda336e168c2fe3fd))
|
||||
* **levels:** add Kyu & Dan levels page with homepage link ([39b1e7d](https://github.com/antialias/soroban-abacus-flashcards/commit/39b1e7de16f15412c91cf648c714e31e2de7a6bc))
|
||||
* **levels:** add kyu level data and cards ([6463a3b](https://github.com/antialias/soroban-abacus-flashcards/commit/6463a3b2f6371ebebac1048197fb44178997d2ef))
|
||||
* **levels:** create true horizontal slider with abacus visualizations ([6d734f1](https://github.com/antialias/soroban-abacus-flashcards/commit/6d734f1d51f5ba1367f55923e58bd977413d754e))
|
||||
* **levels:** implement interactive slider for exploring kyu & dan ranks ([eb3b100](https://github.com/antialias/soroban-abacus-flashcards/commit/eb3b1000563536d4143ba1f4ec04e59e8dd2e608))
|
||||
* **levels:** replace kyu grid with interactive slider and abacus visualizations ([10978e8](https://github.com/antialias/soroban-abacus-flashcards/commit/10978e890beee65dea78ddcce52cfe5315d58063))
|
||||
* make home page abacus interactive with audio ([9a53d7e](https://github.com/antialias/soroban-abacus-flashcards/commit/9a53d7e5db18853aca4e2e0c7abc799217feaecf))
|
||||
* **matching:** use nav avatars as turn indicators ([7263828](https://github.com/antialias/soroban-abacus-flashcards/commit/7263828ed494a6487999c8436af53618715b3864))
|
||||
* **math-sprint:** add game manifest ([1eefcc8](https://github.com/antialias/soroban-abacus-flashcards/commit/1eefcc89a58b79f928932a7425d6b88fb45a5526))
|
||||
* **memory-quiz:** add multiplayer support with redesigned scoreboards ([1cf4469](https://github.com/antialias/soroban-abacus-flashcards/commit/1cf44696c26473ce4ab2fc2039ff42f08c20edb6))
|
||||
* **memory-quiz:** persist game settings per-game across sessions ([05a8e0a](https://github.com/antialias/soroban-abacus-flashcards/commit/05a8e0a84272c6c45a4014413ee00726eb88b76a))
|
||||
* **memory-quiz:** show player emojis on cards to indicate who found them ([05bd11a](https://github.com/antialias/soroban-abacus-flashcards/commit/05bd11a133706c9ed8c09c744da7ca8955fa979a))
|
||||
* **moderation:** add inline feedback and persistent password display ([86e3d41](https://github.com/antialias/soroban-abacus-flashcards/commit/86e3d4199628f95048b9265c9de0adfdc2934f93))
|
||||
* **moderation:** improve password input with copy button ([2580e47](https://github.com/antialias/soroban-abacus-flashcards/commit/2580e474d08bf91477339e998b2c70962a633f41))
|
||||
* **nav:** add prominent turn indicator arrow badge ([f574558](https://github.com/antialias/soroban-abacus-flashcards/commit/f574558dffe22a1ecf06ee44d37b5eb1a20011b9))
|
||||
* **nav:** add pulsing indicator for offline network players ([64fb30e](https://github.com/antialias/soroban-abacus-flashcards/commit/64fb30e7eca7b485687329b9dd3d9e90ac507e2d))
|
||||
* **nav:** add turn indicators to network players ([623314b](https://github.com/antialias/soroban-abacus-flashcards/commit/623314bd383a54c57ca93ad9f2d8620cf89412e9))
|
||||
* **nav:** add turn label text under current player avatars ([52a66d5](https://github.com/antialias/soroban-abacus-flashcards/commit/52a66d5f6869e760f2a8914a6d39d21d47cfb7f4))
|
||||
* **nav:** center game context with hamburger menu for utilities ([a35a7d5](https://github.com/antialias/soroban-abacus-flashcards/commit/a35a7d56df945a5b15c1ddfa8b489c0d292e71c4))
|
||||
* **nav:** combine room info and network players in single pane ([d5473ab](https://github.com/antialias/soroban-abacus-flashcards/commit/d5473ab66a7c8c78f10cef9bb7084fc311520b2c))
|
||||
* **nav:** unify room dropdown with join code and game menu ([f7b83f8](https://github.com/antialias/soroban-abacus-flashcards/commit/f7b83f8c149b532321251abed98a94874196b2f5))
|
||||
* prevent invitations to retired rooms ([a7c3c1f](https://github.com/antialias/soroban-abacus-flashcards/commit/a7c3c1f4cd802985c8f040bc1cdf3ea4482a2fce))
|
||||
* redesign home page with component showcase ([29af265](https://github.com/antialias/soroban-abacus-flashcards/commit/29af265958f9fdab0253b92e153c01575840454d))
|
||||
* redesign homepage with educational vision and interactive demo ([2f09cb5](https://github.com/antialias/soroban-abacus-flashcards/commit/2f09cb5539f2bb0b8c77359c6f774c3742313e1e))
|
||||
* redesign room info as compact inline badge with click-to-copy ([6b3a440](https://github.com/antialias/soroban-abacus-flashcards/commit/6b3a4403695cc2f32df684005784a11f054827ff))
|
||||
* replace access mode dropdown with visual button grid ([e5d0672](https://github.com/antialias/soroban-abacus-flashcards/commit/e5d067205989d7c3105998dcd7d67fd0408f332c))
|
||||
* **tutorial:** add dark mode styling for coaching bar and abacus frame ([7e2f580](https://github.com/antialias/soroban-abacus-flashcards/commit/7e2f580877af9d21409f427778fa3569c950fcf5))
|
||||
* **tutorial:** add dark theme and column control props ([d42f9b2](https://github.com/antialias/soroban-abacus-flashcards/commit/d42f9b2d9ad630826c55b753dc581c469e8f9083))
|
||||
* **tutorial:** add fill color support for dark mode column posts and reckoning bar ([2eb3ff3](https://github.com/antialias/soroban-abacus-flashcards/commit/2eb3ff340613301df20bf14f5b461371a27d7f05))
|
||||
* **tutorial:** add hideNavigation prop to TutorialPlayer ([79ea52a](https://github.com/antialias/soroban-abacus-flashcards/commit/79ea52af80c8cbb482bbdd87f77caf32ada737ee))
|
||||
* **tutorial:** add hideTooltip prop and improve dark mode coaching bar ([1ee25b3](https://github.com/antialias/soroban-abacus-flashcards/commit/1ee25b3dd2f0ee9dd7ed571ba818b7ca5a247f85))
|
||||
* **tutorial:** add silentErrors prop to suppress error messages ([8835e1c](https://github.com/antialias/soroban-abacus-flashcards/commit/8835e1c57ab8adcecefe0db082360dd98fbfaac7))
|
||||
|
||||
|
||||
### Reverts
|
||||
|
||||
* **nav:** restore original room creation/join behavior ([710e93c](https://github.com/antialias/soroban-abacus-flashcards/commit/710e93c9972339885b8f4ca02ecd2c1cdf65c040))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **db:** Database schemas now accept any string for game names
|
||||
* Added DELETE /api/arcade/rooms/:roomId/invite endpoint for declining invitations
|
||||
|
||||
Authorization Error Handling:
|
||||
- ModerationPanel: Parse and display API error messages (kick, ban, unban, invite, data loading)
|
||||
- PendingInvitations: Parse and display API error messages (decline, fetch)
|
||||
- All moderation actions now show specific auth errors like "Only the host can kick users"
|
||||
|
||||
New Endpoint:
|
||||
- DELETE /api/arcade/rooms/:roomId/invite: Allow users to decline their pending invitations
|
||||
* Validates invitation exists and is pending
|
||||
* Only invited user can decline their own invitation
|
||||
* Returns proper error messages for auth failures
|
||||
|
||||
Bug Fix:
|
||||
- Fixed invitations/pending/route.ts ban check query (removed reference to non-existent unbannedAt field)
|
||||
- Ban records are deleted when unbanned, so any existing ban is active
|
||||
|
||||
🤖 Generated with [Claude Code](https://claude.com/claude-code)
|
||||
|
||||
Co-Authored-By: Claude <noreply@anthropic.com>
|
||||
|
||||
# [1.8.0](https://github.com/antialias/soroban-abacus-flashcards/compare/abacus-react-v1.7.0...abacus-react-v1.8.0) (2025-10-10)
|
||||
|
||||
|
||||
|
||||
@@ -213,7 +213,7 @@ export interface AbacusCallbacks {
|
||||
value: number,
|
||||
event: React.MouseEvent,
|
||||
) => void;
|
||||
onValueChange?: (newValue: number) => void;
|
||||
onValueChange?: (newValue: number | bigint) => void;
|
||||
onBeadRef?: (bead: BeadConfig, element: SVGElement | null) => void;
|
||||
// Legacy callback for backward compatibility
|
||||
onClick?: (bead: BeadConfig) => void;
|
||||
@@ -240,7 +240,7 @@ export interface AbacusOverlay {
|
||||
|
||||
export interface AbacusConfig {
|
||||
// Basic configuration
|
||||
value?: number;
|
||||
value?: number | bigint;
|
||||
columns?: number | "auto";
|
||||
showEmptyColumns?: boolean;
|
||||
hideInactiveBeads?: boolean;
|
||||
@@ -271,7 +271,7 @@ export interface AbacusConfig {
|
||||
|
||||
// Legacy callbacks for backward compatibility
|
||||
onClick?: (bead: BeadConfig) => void;
|
||||
onValueChange?: (newValue: number) => void;
|
||||
onValueChange?: (newValue: number | bigint) => void;
|
||||
}
|
||||
|
||||
export interface AbacusDimensions {
|
||||
@@ -474,18 +474,23 @@ export function useAbacusState(
|
||||
|
||||
// NEW: Native place-value state management hook (eliminates the column index nightmare!)
|
||||
export function useAbacusPlaceStates(
|
||||
controlledValue: number = 0,
|
||||
controlledValue: number | bigint = 0,
|
||||
maxPlaceValue: ValidPlaceValues = 4,
|
||||
) {
|
||||
// Initialize state from value using place values as keys - NO MORE ARRAY INDICES!
|
||||
const initializeFromValue = useCallback(
|
||||
(value: number): PlaceStatesMap => {
|
||||
(value: number | bigint): PlaceStatesMap => {
|
||||
const states = new Map<ValidPlaceValues, PlaceState>();
|
||||
|
||||
// Convert to string to handle both number and bigint
|
||||
const valueStr = value.toString();
|
||||
const digits = valueStr.split('').map(Number);
|
||||
|
||||
// Always create ALL place values from 0 to maxPlaceValue (to match columns)
|
||||
for (let place = 0; place <= maxPlaceValue; place++) {
|
||||
const placeValueNum = Math.pow(10, place);
|
||||
const digit = Math.floor(value / placeValueNum) % 10;
|
||||
// Get digit from right: place 0 = rightmost, place 1 = second from right, etc.
|
||||
const digitIndex = digits.length - 1 - place;
|
||||
const digit = digitIndex >= 0 ? digits[digitIndex] : 0;
|
||||
|
||||
states.set(place as ValidPlaceValues, {
|
||||
placeValue: place as ValidPlaceValues,
|
||||
@@ -504,18 +509,32 @@ export function useAbacusPlaceStates(
|
||||
);
|
||||
|
||||
// Calculate current value from place states - NO MORE INDEX MATH!
|
||||
// Use BigInt for numbers that exceed safe integer range (>15 digits)
|
||||
const value = useMemo(() => {
|
||||
let total = 0;
|
||||
placeStates.forEach((state) => {
|
||||
const placeValueNum = Math.pow(10, state.placeValue);
|
||||
const digitValue = (state.heavenActive ? 5 : 0) + state.earthActive;
|
||||
total += digitValue * placeValueNum;
|
||||
});
|
||||
return total;
|
||||
}, [placeStates]);
|
||||
// Check if we need BigInt (maxPlaceValue > 14 means >15 digits)
|
||||
const useBigInt = maxPlaceValue > 14;
|
||||
|
||||
if (useBigInt) {
|
||||
let total = 0n;
|
||||
placeStates.forEach((state) => {
|
||||
const placeValueNum = 10n ** BigInt(state.placeValue);
|
||||
const digitValue = BigInt((state.heavenActive ? 5 : 0) + state.earthActive);
|
||||
total += digitValue * placeValueNum;
|
||||
});
|
||||
return total;
|
||||
} else {
|
||||
let total = 0;
|
||||
placeStates.forEach((state) => {
|
||||
const placeValueNum = Math.pow(10, state.placeValue);
|
||||
const digitValue = (state.heavenActive ? 5 : 0) + state.earthActive;
|
||||
total += digitValue * placeValueNum;
|
||||
});
|
||||
return total;
|
||||
}
|
||||
}, [placeStates, maxPlaceValue]);
|
||||
|
||||
const setValue = useCallback(
|
||||
(newValue: number) => {
|
||||
(newValue: number | bigint) => {
|
||||
setPlaceStates(initializeFromValue(newValue));
|
||||
},
|
||||
[initializeFromValue],
|
||||
@@ -531,6 +550,37 @@ export function useAbacusPlaceStates(
|
||||
}
|
||||
}, [controlledValue, initializeFromValue, value]);
|
||||
|
||||
// Clean up place states when maxPlaceValue decreases (columns decrease)
|
||||
// This prevents stale place values from causing out-of-bounds access
|
||||
React.useEffect(() => {
|
||||
setPlaceStates((prev) => {
|
||||
const newStates = new Map(prev);
|
||||
let hasChanges = false;
|
||||
|
||||
// Remove any place values greater than maxPlaceValue
|
||||
for (const placeValue of newStates.keys()) {
|
||||
if (placeValue > maxPlaceValue) {
|
||||
newStates.delete(placeValue);
|
||||
hasChanges = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Add missing place values up to maxPlaceValue
|
||||
for (let place = 0; place <= maxPlaceValue; place++) {
|
||||
if (!newStates.has(place as ValidPlaceValues)) {
|
||||
newStates.set(place as ValidPlaceValues, {
|
||||
placeValue: place as ValidPlaceValues,
|
||||
heavenActive: false,
|
||||
earthActive: 0,
|
||||
});
|
||||
hasChanges = true;
|
||||
}
|
||||
}
|
||||
|
||||
return hasChanges ? newStates : prev;
|
||||
});
|
||||
}, [maxPlaceValue]);
|
||||
|
||||
const getPlaceState = useCallback(
|
||||
(placeValue: ValidPlaceValues): PlaceState => {
|
||||
return (
|
||||
@@ -1058,13 +1108,15 @@ function calculateBeadStates(
|
||||
// NEW: Native place-value bead state calculation (eliminates array index math!)
|
||||
function calculateBeadStatesFromPlaces(
|
||||
placeStates: PlaceStatesMap,
|
||||
maxPlaceValue: ValidPlaceValues,
|
||||
): BeadConfig[][] {
|
||||
const columnsList: BeadConfig[][] = [];
|
||||
|
||||
// Convert Map to sorted array by place value (ascending order for correct visual layout)
|
||||
const sortedPlaces = Array.from(placeStates.entries()).sort(
|
||||
([a], [b]) => a - b,
|
||||
);
|
||||
// Filter to only include place values that are within the current column count
|
||||
const sortedPlaces = Array.from(placeStates.entries())
|
||||
.filter(([placeValue]) => placeValue <= maxPlaceValue)
|
||||
.sort(([a], [b]) => a - b);
|
||||
|
||||
for (const [placeValue, placeState] of sortedPlaces) {
|
||||
const beads: BeadConfig[] = [];
|
||||
@@ -1114,17 +1166,26 @@ function calculateValueFromColumnStates(
|
||||
}
|
||||
|
||||
// NEW: Native place-value calculation (eliminates the array index nightmare!)
|
||||
function calculateValueFromPlaceStates(placeStates: PlaceStatesMap): number {
|
||||
let value = 0;
|
||||
function calculateValueFromPlaceStates(placeStates: PlaceStatesMap): number | bigint {
|
||||
// Determine if we need BigInt based on the largest place value
|
||||
const maxPlace = Math.max(...Array.from(placeStates.keys()));
|
||||
const useBigInt = maxPlace > 14; // >15 digits
|
||||
|
||||
// Direct place value iteration - NO MORE ARRAY INDEX MATH!
|
||||
for (const [placeValue, placeState] of placeStates) {
|
||||
const digitValue =
|
||||
(placeState.heavenActive ? 5 : 0) + placeState.earthActive;
|
||||
value += digitValue * Math.pow(10, placeValue); // Direct place value - no conversion!
|
||||
if (useBigInt) {
|
||||
let value = 0n;
|
||||
for (const [placeValue, placeState] of placeStates) {
|
||||
const digitValue = BigInt((placeState.heavenActive ? 5 : 0) + placeState.earthActive);
|
||||
value += digitValue * (10n ** BigInt(placeValue));
|
||||
}
|
||||
return value;
|
||||
} else {
|
||||
let value = 0;
|
||||
for (const [placeValue, placeState] of placeStates) {
|
||||
const digitValue = (placeState.heavenActive ? 5 : 0) + placeState.earthActive;
|
||||
value += digitValue * Math.pow(10, placeValue);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
// Components
|
||||
@@ -1588,8 +1649,8 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
// Use new place-value bead calculation!
|
||||
const beadStates = useMemo(
|
||||
() => calculateBeadStatesFromPlaces(placeStates),
|
||||
[placeStates],
|
||||
() => calculateBeadStatesFromPlaces(placeStates, maxPlaceValue),
|
||||
[placeStates, maxPlaceValue],
|
||||
);
|
||||
|
||||
// Layout calculations using exact Typst positioning
|
||||
@@ -1939,6 +2000,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
{/* Background glow effects - rendered behind everything */}
|
||||
{Array.from({ length: effectiveColumns }, (_, colIndex) => {
|
||||
const placeValue = effectiveColumns - 1 - colIndex;
|
||||
const columnStyles = customStyles?.columns?.[colIndex];
|
||||
const backgroundGlow = columnStyles?.backgroundGlow;
|
||||
|
||||
@@ -1952,7 +2014,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
return (
|
||||
<rect
|
||||
key={`background-glow-${colIndex}`}
|
||||
key={`background-glow-pv${placeValue}`}
|
||||
x={x - glowWidth / 2}
|
||||
y={-(backgroundGlow.spread || 0) / 2}
|
||||
width={glowWidth}
|
||||
@@ -1970,6 +2032,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
{/* Rods - positioned as rectangles like in Typst */}
|
||||
{Array.from({ length: effectiveColumns }, (_, colIndex) => {
|
||||
const placeValue = effectiveColumns - 1 - colIndex;
|
||||
const x =
|
||||
colIndex * dimensions.rodSpacing + dimensions.rodSpacing / 2;
|
||||
|
||||
@@ -2001,7 +2064,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
return (
|
||||
<rect
|
||||
key={`rod-${colIndex}`}
|
||||
key={`rod-pv${placeValue}`}
|
||||
x={x - dimensions.rodWidth / 2}
|
||||
y={rodStartY}
|
||||
width={dimensions.rodWidth}
|
||||
@@ -2056,6 +2119,15 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
} else {
|
||||
// Earth bead positioning - exact Typst formulas (lines 249-261)
|
||||
const columnState = columnStates[colIndex];
|
||||
if (!columnState) {
|
||||
throw new Error(
|
||||
`Invalid abacus state: columnState is undefined for column index ${colIndex}. ` +
|
||||
`effectiveColumns=${effectiveColumns}, columnStates.length=${columnStates.length}, ` +
|
||||
`beadStates.length=${beadStates.length}, placeValue=${bead.placeValue}. ` +
|
||||
`This indicates a mismatch between the number of columns and the bead states. ` +
|
||||
`Please report this issue with the abacus configuration that triggered it.`
|
||||
);
|
||||
}
|
||||
const earthActive = columnState.earthActive;
|
||||
|
||||
if (bead.active) {
|
||||
@@ -2134,7 +2206,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
return (
|
||||
<Bead
|
||||
key={`bead-${colIndex}-${bead.type}-${beadIndex}`}
|
||||
key={`bead-pv${bead.placeValue}-${bead.type}-${bead.type === "earth" ? bead.position : 0}`}
|
||||
bead={bead}
|
||||
x={x}
|
||||
y={y}
|
||||
@@ -2208,6 +2280,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
{/* Background rectangles for place values - in SVG */}
|
||||
{finalConfig.showNumbers &&
|
||||
placeValues.map((value, columnIndex) => {
|
||||
const placeValue = effectiveColumns - 1 - columnIndex;
|
||||
const x =
|
||||
columnIndex * dimensions.rodSpacing + dimensions.rodSpacing / 2;
|
||||
// Position background rectangles to match the text positioning
|
||||
@@ -2220,7 +2293,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
return (
|
||||
<rect
|
||||
key={`place-bg-${columnIndex}`}
|
||||
key={`place-bg-pv${placeValue}`}
|
||||
x={x - 12 * finalConfig.scaleFactor}
|
||||
y={y - 12 * finalConfig.scaleFactor}
|
||||
width={24 * finalConfig.scaleFactor}
|
||||
@@ -2248,6 +2321,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
{/* NumberFlow place value displays - inside SVG using foreignObject */}
|
||||
{finalConfig.showNumbers &&
|
||||
placeValues.map((value, columnIndex) => {
|
||||
const placeValue = effectiveColumns - 1 - columnIndex;
|
||||
const x =
|
||||
columnIndex * dimensions.rodSpacing + dimensions.rodSpacing / 2;
|
||||
// Position numbers within the allocated numbers space (below the baseHeight)
|
||||
@@ -2259,7 +2333,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
return (
|
||||
<foreignObject
|
||||
key={`place-number-${columnIndex}`}
|
||||
key={`place-number-pv${placeValue}`}
|
||||
x={x - 12 * finalConfig.scaleFactor}
|
||||
y={y - 8 * finalConfig.scaleFactor}
|
||||
width={24 * finalConfig.scaleFactor}
|
||||
@@ -2320,6 +2394,12 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
if (targetBeadType === "heaven") {
|
||||
const columnState = columnStates[targetColumn];
|
||||
if (!columnState) {
|
||||
console.error(
|
||||
`Invalid abacus overlay: columnState is undefined for overlay targeting column ${targetColumn}`
|
||||
);
|
||||
return;
|
||||
}
|
||||
y = columnState.heavenActive
|
||||
? dimensions.heavenEarthGap -
|
||||
dimensions.beadSize / 2 -
|
||||
@@ -2332,6 +2412,12 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
targetBeadPosition !== undefined
|
||||
) {
|
||||
const columnState = columnStates[targetColumn];
|
||||
if (!columnState) {
|
||||
console.error(
|
||||
`Invalid abacus overlay: columnState is undefined for overlay targeting column ${targetColumn}`
|
||||
);
|
||||
return;
|
||||
}
|
||||
const earthActive = columnState.earthActive;
|
||||
const isActive = targetBeadPosition < earthActive;
|
||||
|
||||
@@ -2403,6 +2489,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
{/* Column interaction areas - rendered last to be on top of all other elements */}
|
||||
{Array.from({ length: effectiveColumns }, (_, colIndex) => {
|
||||
const placeValue = effectiveColumns - 1 - colIndex;
|
||||
const x =
|
||||
colIndex * dimensions.rodSpacing + dimensions.rodSpacing / 2;
|
||||
const columnStyles = customStyles?.columns?.[colIndex];
|
||||
@@ -2413,7 +2500,7 @@ export const AbacusReact: React.FC<AbacusConfig> = ({
|
||||
|
||||
return (
|
||||
<rect
|
||||
key={`column-interaction-${colIndex}`}
|
||||
key={`column-interaction-pv${placeValue}`}
|
||||
x={x - backgroundWidth / 2}
|
||||
y={0}
|
||||
width={backgroundWidth}
|
||||
|
||||
147
packages/abacus-react/src/StandaloneBead.tsx
Normal file
147
packages/abacus-react/src/StandaloneBead.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { useSpring, animated } from "@react-spring/web";
|
||||
import {
|
||||
useAbacusConfig,
|
||||
getDefaultAbacusConfig,
|
||||
type BeadShape,
|
||||
} from "./AbacusContext";
|
||||
|
||||
export interface StandaloneBeadProps {
|
||||
/** Size of the bead in pixels */
|
||||
size?: number;
|
||||
/** Override the shape from context (diamond, circle, square) */
|
||||
shape?: BeadShape;
|
||||
/** Override the color from context */
|
||||
color?: string;
|
||||
/** Enable animation */
|
||||
animated?: boolean;
|
||||
/** Custom className */
|
||||
className?: string;
|
||||
/** Custom style */
|
||||
style?: React.CSSProperties;
|
||||
/** Active state for the bead */
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Standalone Bead component that respects the AbacusDisplayContext.
|
||||
* This component renders a single abacus bead with styling from the context.
|
||||
*
|
||||
* Usage:
|
||||
* ```tsx
|
||||
* import { StandaloneBead, AbacusDisplayProvider } from '@soroban/abacus-react';
|
||||
*
|
||||
* <AbacusDisplayProvider>
|
||||
* <StandaloneBead size={28} color="#8b5cf6" />
|
||||
* </AbacusDisplayProvider>
|
||||
* ```
|
||||
*/
|
||||
export const StandaloneBead: React.FC<StandaloneBeadProps> = ({
|
||||
size = 28,
|
||||
shape: shapeProp,
|
||||
color: colorProp,
|
||||
animated: animatedProp,
|
||||
className,
|
||||
style,
|
||||
active = true,
|
||||
}) => {
|
||||
// Try to use context config, fallback to defaults if no context
|
||||
let contextConfig;
|
||||
try {
|
||||
contextConfig = useAbacusConfig();
|
||||
} catch {
|
||||
// No context provider, use defaults
|
||||
contextConfig = getDefaultAbacusConfig();
|
||||
}
|
||||
|
||||
// Use props if provided, otherwise fall back to context config
|
||||
const shape = shapeProp ?? contextConfig.beadShape;
|
||||
const enableAnimation = animatedProp ?? contextConfig.animated;
|
||||
const color = colorProp ?? "#000000";
|
||||
|
||||
const [springs, api] = useSpring(() => ({
|
||||
scale: 1,
|
||||
config: { tension: 300, friction: 20 },
|
||||
}));
|
||||
|
||||
React.useEffect(() => {
|
||||
if (enableAnimation) {
|
||||
api.start({ scale: 1 });
|
||||
}
|
||||
}, [enableAnimation, api]);
|
||||
|
||||
const renderShape = () => {
|
||||
const halfSize = size / 2;
|
||||
const actualColor = active ? color : "rgb(211, 211, 211)";
|
||||
|
||||
switch (shape) {
|
||||
case "diamond":
|
||||
return (
|
||||
<polygon
|
||||
points={`${size * 0.7},0 ${size * 1.4},${halfSize} ${size * 0.7},${size} 0,${halfSize}`}
|
||||
fill={actualColor}
|
||||
stroke="#000"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
);
|
||||
case "square":
|
||||
return (
|
||||
<rect
|
||||
width={size}
|
||||
height={size}
|
||||
fill={actualColor}
|
||||
stroke="#000"
|
||||
strokeWidth="0.5"
|
||||
rx="1"
|
||||
/>
|
||||
);
|
||||
case "circle":
|
||||
default:
|
||||
return (
|
||||
<circle
|
||||
cx={halfSize}
|
||||
cy={halfSize}
|
||||
r={halfSize}
|
||||
fill={actualColor}
|
||||
stroke="#000"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const getXOffset = () => {
|
||||
return shape === "diamond" ? size * 0.7 : size / 2;
|
||||
};
|
||||
|
||||
const getYOffset = () => {
|
||||
return size / 2;
|
||||
};
|
||||
|
||||
const AnimatedG = animated.g;
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={size * (shape === "diamond" ? 1.4 : 1)}
|
||||
height={size}
|
||||
className={className}
|
||||
style={style}
|
||||
>
|
||||
<AnimatedG
|
||||
transform={`translate(0, 0)`}
|
||||
style={
|
||||
enableAnimation
|
||||
? {
|
||||
transform: springs.scale.to((s) => `scale(${s})`),
|
||||
transformOrigin: "center",
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{renderShape()}
|
||||
</AnimatedG>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -14,3 +14,6 @@ export type {
|
||||
AbacusDisplayConfig,
|
||||
AbacusDisplayContextType,
|
||||
} from "./AbacusContext";
|
||||
|
||||
export { StandaloneBead } from "./StandaloneBead";
|
||||
export type { StandaloneBeadProps } from "./StandaloneBead";
|
||||
|
||||
Reference in New Issue
Block a user