From c38767f4d399fa2caa5cd4e0185689d0207fbdaf Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 07:58:46 -0500
Subject: [PATCH] fix(levels): use correct dark mode styling from homepage +
 docs update
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed abacus styling issues by matching homepage implementation:
- Use `fill` (not just `stroke`) for columnPosts and reckoningBar
- Changed from all zeros to interesting display value (123456...)
- Removed incorrect color customization causing mixed bead styles
- Now uses exact same darkStyles pattern as homepage MiniAbacus

Documentation update:
- Added MANDATORY section: "Read the Docs Before Customizing"
- Emphasized always reading packages/abacus-react/README.md
- Added references to homepage and storybook examples
- Included concrete example of correct darkStyles usage
- Key point: columnPosts and reckoningBar need `fill` property

This ensures columns and reckoning bar are now visible on dark backgrounds
and provides guidance to prevent similar issues in the future.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/.claude/CLAUDE.md       | 37 +++++++++++++++++++++++++++++---
 apps/web/src/app/levels/page.tsx | 33 +++++++++++++++++++++-------
 2 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/apps/web/.claude/CLAUDE.md b/apps/web/.claude/CLAUDE.md
index 25384a9a..ac7ddc1d 100644
--- a/apps/web/.claude/CLAUDE.md
+++ b/apps/web/.claude/CLAUDE.md
@@ -138,12 +138,43 @@ See `.claude/GAME_THEMES.md` for standardized color theme usage in arcade games.
 - ✅ 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, useAbacusConfig } from '@soroban/abacus-react'
+import { AbacusReact } from '@soroban/abacus-react'
 
-const config = useAbacusConfig({ columns: 5 })
-<AbacusReact config={config} initialNumber={123} />
+<AbacusReact value={123} columns={5} scaleFactor={1.5} showNumbers={true} />
 ```
 
 ## Known Issues
diff --git a/apps/web/src/app/levels/page.tsx b/apps/web/src/app/levels/page.tsx
index 28387577..f30ab1cc 100644
--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -127,6 +127,29 @@ export default function LevelsPage() {
   // Smaller scale for more columns (Dan levels with 30 columns)
   const scaleFactor = Math.min(2.5, 20 / currentLevel.digits)
 
+  // Generate an interesting non-zero number to display on the abacus
+  // Create a value that uses all available columns (e.g., 2 columns = 12, 3 columns = 123)
+  // For larger numbers, create a pattern like 123456789012... up to the column count
+  const digitPattern = '123456789'
+  const displayValue = Number.parseInt(
+    digitPattern.repeat(Math.ceil(currentLevel.digits / digitPattern.length)).slice(0, currentLevel.digits),
+    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' })}>
@@ -251,17 +274,11 @@ export default function LevelsPage() {
                 })}
               >
                 <AbacusReact
-                  value={0}
+                  value={displayValue}
                   columns={currentLevel.digits}
                   scaleFactor={scaleFactor}
                   showNumbers={true}
-                  customStyles={{
-                    reckoningBar: { stroke: '#9ca3af', strokeWidth: 3 },
-                    columnPosts: { stroke: '#6b7280' },
-                    numerals: { color: '#d1d5db', fontSize: '14px', fontWeight: 'normal' },
-                    heavenBeads: { fill: '#60a5fa' },
-                    earthBeads: { fill: '#34d399' },
-                  }}
+                  customStyles={darkStyles}
                 />
               </div>