refactor(pente): extract turn bar, rules panel, game-over drawer from pente.js - #47
Merged
Merged
Conversation
…rd-display helpers Splits src/pages/posts/pente.js (1249 lines) the same way PR #36/#40 did for basketball-platform.jsx and nba.tsx: pull out provably pure / cleanly parameterizable presentational chunks, leave all game-state logic (move handling, bot effects, matchmaking, capture rules) in the page component untouched. - src/lib/pente/boardDisplay.js — cellClass/captureClass/hoverClass, MODE_PRESETS, MODE_RULES, and the two button-class helpers. Pure functions/constants, zero behavior change. - src/components/pente/TurnStatusBar.jsx — turn dot + score/captures row. - src/components/pente/RulesPanel.jsx — the collapsible rules blurb. - src/components/pente/GameOverDrawer.jsx — post-game banner, analysis list, and consulting CTA for local (non-multiplayer) games. pente.js drops from 1249 to 1006 lines. Content was moved verbatim (diffed programmatically against the original, not retyped) so rendered output and game behavior are unchanged. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016Lfm8TKaQqN3pRXLxF3b1g
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
src/pages/posts/pente.js(1249 lines) was the last of the three large-file refactor candidates the ledger has tracked since 2026-08-15 (siblingsbasketball-platform.jsxandnba.tsxwere already split up in PR refactor(basketball-platform): extract 1206-line page into five components #36 and refactor(nba): extract explorer config and canvas drawing from nba.tsx #40). This PR does the same for Pente, following the same pattern: pull out provably pure / cleanly parameterizable presentational chunks, leave all game-state logic (move handling, bot effects, matchmaking, capture rules) in the page component untouched.src/lib/pente/boardDisplay.js(cell/style class helpers + the staticMODE_PRESETS/MODE_RULEStables — pure, zero behavior change),src/components/pente/TurnStatusBar.jsx(turn dot + score/captures row),src/components/pente/RulesPanel.jsx(collapsible rules blurb),src/components/pente/GameOverDrawer.jsx(post-game banner, move analysis list, consulting CTA).pente.jsdrops from 1249 → 1006 lines (19%). Content was moved verbatim — diffed programmatically against the original text rather than retyped — so rendered output and game behavior are unchanged.Livelihood stream
This is the site's flagship game (
/posts/pente), with a documented roadmap to paid tiers (tip jar → premium puzzles → competitive tier). A 1249-line single component is the same risk class that caused the Hardwood incident (PR #43, reverted same-day) — harder to safely hotfix under time pressure, harder to review, harder to test in isolation. Shrinking the flagship page to a shell plus four focused, independently reviewable components reduces that risk without touching player-facing behavior.Files changed
src/lib/pente/boardDisplay.js(new)src/components/pente/TurnStatusBar.jsx(new)src/components/pente/RulesPanel.jsx(new)src/components/pente/GameOverDrawer.jsx(new)src/pages/posts/pente.js(modified — imports the four extractions, all extracted JSX replaced with component calls)Test steps
yarn dev, open/posts/penteVerification actually run this session (pasted output, not asserted):
yarn lint→Done in 16.79s(no errors,--max-warnings 0)npx tsc --noEmit→ clean, no errorsyarn test→Test Files 73 passed (73)/Tests 834 passed (834)— matches the pre-PR baseline exactly, no regressionsyarn build→ succeeds,/posts/pentepresent in the static route manifestyarn dev+ headless-Chromium pass on/posts/pente: turn indicator rendered ("Black's turn"), a click placed a Black stone, the Rules panel opened and showed "Capture:" copy, and after the click the bot (White) placed a stone in response — confirmingTurnStatusBar,RulesPanel, and the untouched game loop all still work end-to-end. (The only console errors captured were sandbox-network artifacts — blocked Google Fonts/accounts requests — not application errors.)Agent checklist
yarn buildpasses locallyyarn testpasses (834/834, no regressions to game logic)TODO, placeholder, or stub code.envvalues committedog:title,og:description,og:image,twitter:card— n/a, no new page,/posts/pente's existing<Head>is untouchedPreText,Reveal,TiltCardused for any new UI text/cards — n/a, extracted components reuse existing markup verbatim, no new UI textLearn
🤖 Generated with Claude Code
https://claude.ai/code/session_016Lfm8TKaQqN3pRXLxF3b1g
Generated by Claude Code