feat: add Sliding Puzzle (15 Puzzle) game (closes #4)#123
Conversation
|
CodeAnt AI is reviewing your PR. Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
|
@Recamm is attempting to deploy a commit to the ajaynegi45's projects Team on Vercel. A member of the Team first needs to authorize it. |
Summary by CodeRabbit
WalkthroughThis PR adds a sliding puzzle game with solvable board generation, move tracking, win detection, game selection wiring, styled controls, and Node 24 runtime metadata. ChangesSliding Puzzle Game Implementation
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Player
participant SlidingPuzzlePage
participant PuzzleLogic
Player->>SlidingPuzzlePage: select board size
SlidingPuzzlePage->>PuzzleLogic: startGame(size)
PuzzleLogic-->>SlidingPuzzlePage: new solvable board
Player->>SlidingPuzzlePage: click tile
SlidingPuzzlePage->>SlidingPuzzlePage: validate adjacency and swap tiles
SlidingPuzzlePage->>PuzzleLogic: check solved state
PuzzleLogic-->>SlidingPuzzlePage: return win status
SlidingPuzzlePage->>SlidingPuzzlePage: update moves and win state
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
👋 Hello @Recamm! Thanks for contributing to Old-School-Game – a curated collection of classic, brain-training games that boost memory, focus, creativity, and long-term brain health 🎯🧠. In today's world full of short-form distractions, this project helps rebuild deep focus and mental endurance through thoughtful gameplay. ✅ Important Things To Do:
✅ Your pull request has been submitted successfully, and a maintainer will review it soon. |
codeant-ai
Bot
added
the
size:L
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| .tile { | ||
| width: 80px; | ||
| height: 80px; |
There was a problem hiding this comment.
Suggestion: Tile dimensions are hardcoded to 80px, so the 5x5 board exceeds common mobile viewport widths and becomes horizontally clipped/unusable. Make tile sizing responsive (for example with viewport-based sizing and max bounds) so all supported grid sizes remain fully visible and playable on small screens. [css layout issue]
Severity Level: Major ⚠️
- ❌ 5x5 grid overflows viewport on small screens.
- ⚠️ Mobile players must scroll, tiles partially offscreen.
- ⚠️ Layout inconsistent with other responsive game pages.Steps of Reproduction ✅
1. Start the Next.js app and open `/game/sliding-puzzle`, which is served by
`src/app/game/sliding-puzzle/page.tsx:48` exporting the `SlidingPuzzle` component.
2. In browser dev tools, enable a mobile viewport (e.g., 375px width) to simulate a common
phone screen.
3. On the Sliding Puzzle page, click the `5x5` size button rendered from `SIZES` in
`page.tsx:93-100` to switch the board size to 5.
4. Observe the board styling: `.grid` at `SlidingPuzzle.module.css:50-57` and `.tile` at
`SlidingPuzzle.module.css:59-73` fix each tile to `width: 80px; height: 80px;` with a
`gap: 6px` and grid padding, producing an effective board width ~444px that exceeds a
375px viewport, causing the 5x5 board to overflow horizontally so tiles are partially
clipped or require horizontal scrolling on small screens.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** src/app/game/sliding-puzzle/SlidingPuzzle.module.css
**Line:** 59:61
**Comment:**
*Css Layout Issue: Tile dimensions are hardcoded to `80px`, so the 5x5 board exceeds common mobile viewport widths and becomes horizontally clipped/unusable. Make tile sizing responsive (for example with viewport-based sizing and max bounds) so all supported grid sizes remain fully visible and playable on small screens.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
| export default function SlidingPuzzle() { | ||
| const [size, setSize] = useState(4); | ||
| const [tiles, setTiles] = useState<number[]>([]); | ||
| const [moves, setMoves] = useState(0); | ||
| const [won, setWon] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| startGame(); | ||
| }, [size]); | ||
|
|
||
| const startGame = () => { | ||
| setTiles(generateSolvablePuzzle(size)); | ||
| setMoves(0); | ||
| setWon(false); | ||
| }; | ||
|
|
||
| const handleTileClick = (index: number) => { | ||
| if (won) return; | ||
| const emptyIndex = tiles.indexOf(0); | ||
| const row = Math.floor(index / size); | ||
| const col = index % size; | ||
| const emptyRow = Math.floor(emptyIndex / size); | ||
| const emptyCol = emptyIndex % size; | ||
|
|
||
| const isAdjacent = | ||
| (Math.abs(row - emptyRow) === 1 && col === emptyCol) || | ||
| (Math.abs(col - emptyCol) === 1 && row === emptyRow); | ||
|
|
||
| if (isAdjacent) { | ||
| const newTiles = [...tiles]; | ||
| [newTiles[index], newTiles[emptyIndex]] = [newTiles[emptyIndex], newTiles[index]]; | ||
| setTiles(newTiles); | ||
| setMoves(moves + 1); | ||
|
|
||
| if (isSolved(newTiles)) { | ||
| setWon(true); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| <h1>Sliding Puzzle</h1> | ||
|
|
||
| <div className={styles.sizeSelector}> | ||
| {SIZES.map((s) => ( | ||
| <button | ||
| key={s} | ||
| className={`${styles.sizeButton} ${s === size ? styles.activeSize : ""}`} | ||
| onClick={() => setSize(s)} | ||
| > | ||
| {s}x{s} | ||
| </button> | ||
| ))} | ||
| </div> | ||
|
|
||
| <p className={styles.moves}>Moves: {moves}</p> | ||
|
|
||
| {won && ( | ||
| <p className={styles.winMessage}>🎉 Congratulations! Solved in {moves} moves!</p> | ||
| )} | ||
|
|
||
| <div | ||
| className={styles.grid} | ||
| style={{ gridTemplateColumns: `repeat(${size}, 1fr)` }} | ||
| > | ||
| {tiles.map((tile, index) => ( | ||
| <div | ||
| key={index} | ||
| className={`${styles.tile} ${tile === 0 ? styles.empty : ""}`} | ||
| onClick={() => handleTileClick(index)} | ||
| > | ||
| {tile !== 0 ? tile : ""} | ||
| </div> | ||
| ))} | ||
| </div> | ||
|
|
||
| <button className={styles.resetButton} onClick={startGame}> | ||
| New Game | ||
| </button> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🟠 Architect Review — HIGH
The Sliding Puzzle is implemented as its own route but is not added to the existing "Choose Your Game" selection, so users following the normal game discovery flow will not see or reach this game.
Suggestion: Add a Sliding Puzzle card to the game selection grid in src/app/game/page.tsx (and any other standard game discovery surfaces used in this app) so the new route is reachable via the normal navigation flow.
Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is an **Architect / Logical Review** comment left during a code review. These reviews are first-class, important findings — not optional suggestions. Do NOT dismiss this as a 'big architectural change' just because the title says architect review; most of these can be resolved with a small, localized fix once the intent is understood.
**Path:** src/app/game/sliding-puzzle/page.tsx
**Line:** 48:130
**Comment:**
*HIGH: The Sliding Puzzle is implemented as its own route but is not added to the existing "Choose Your Game" selection, so users following the normal game discovery flow will not see or reach this game.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
If a suggested approach is provided above, use it as the authoritative instruction. If no explicit code suggestion is given, you MUST still draft and apply your own minimal, localized fix — do not punt back with 'no suggestion provided, review manually'. Keep the change as small as possible: add a guard clause, gate on a loading state, reorder an await, wrap in a conditional, etc. Do not refactor surrounding code or expand scope beyond the finding.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| <div | ||
| key={index} | ||
| className={`${styles.tile} ${tile === 0 ? styles.empty : ""}`} | ||
| onClick={() => handleTileClick(index)} | ||
| > |
There was a problem hiding this comment.
🎨 Design Review — HIGH
Do you think using clickable
Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a **Design Review** comment — a question about the UX/design of frontend code. It is intentionally framed as a question, not a prescription. The author may agree or disagree.
**Path:** src/app/game/sliding-puzzle/page.tsx
**Line:** 115:119
**Comment:**
*HIGH: Do you think using clickable <div> tiles here could block keyboard-only users from playing, since the tiles are not naturally focusable/operable like buttons (WCAG 2.1.1 Keyboard, 2.4.7 Focus Visible)?
- If you agree with the proposal, apply a small, localized change (swap a color token, bump a font size, adjust spacing, add an aria-label, etc.).
- If you disagree, or the answer depends on a design decision a human should make, explain your reasoning and ask the user how to proceed.
Do NOT refactor surrounding components or apply other design changes that weren't asked about.| .tile { | ||
| width: 80px; | ||
| height: 80px; | ||
| display: flex; |
There was a problem hiding this comment.
🎨 Design Review — MEDIUM
Do you think fixed 80px tile sizing could cause horizontal overflow on smaller phones (especially 5x5 mode), since the board width grows beyond typical sub-400px viewports once gaps and padding are included?
Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a **Design Review** comment — a question about the UX/design of frontend code. It is intentionally framed as a question, not a prescription. The author may agree or disagree.
**Path:** src/app/game/sliding-puzzle/SlidingPuzzle.module.css
**Line:** 59:62
**Comment:**
*MEDIUM: Do you think fixed 80px tile sizing could cause horizontal overflow on smaller phones (especially 5x5 mode), since the board width grows beyond typical sub-400px viewports once gaps and padding are included?
- If you agree with the proposal, apply a small, localized change (swap a color token, bump a font size, adjust spacing, add an aria-label, etc.).
- If you disagree, or the answer depends on a design decision a human should make, explain your reasoning and ask the user how to proceed.
Do NOT refactor surrounding components or apply other design changes that weren't asked about.| .sizeButton { | ||
| padding: 8px 16px; | ||
| font-size: 1rem; |
There was a problem hiding this comment.
🎨 Design Review — LOW
Would you want to increase the size-selector button hit area, since the current padding likely produces controls under the 44×44px touch target guidance on mobile (WCAG 2.5.5 Target Size)?
Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a **Design Review** comment — a question about the UX/design of frontend code. It is intentionally framed as a question, not a prescription. The author may agree or disagree.
**Path:** src/app/game/sliding-puzzle/SlidingPuzzle.module.css
**Line:** 20:22
**Comment:**
*LOW: Would you want to increase the size-selector button hit area, since the current padding likely produces controls under the 44×44px touch target guidance on mobile (WCAG 2.5.5 Target Size)?
- If you agree with the proposal, apply a small, localized change (swap a color token, bump a font size, adjust spacing, add an aria-label, etc.).
- If you disagree, or the answer depends on a design decision a human should make, explain your reasoning and ask the user how to proceed.
Do NOT refactor surrounding components or apply other design changes that weren't asked about.
|
CodeAnt AI finished reviewing your PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/game/sliding-puzzle/page.tsx`:
- Around line 10-18: The shuffler's do/while currently only checks
isSolvable(tiles, size) and can return the already-solved layout (1..N,0);
update the do/while that builds tiles so it also rejects a solved board—e.g.
after tiles.push(0) check that the board is not solved and repeat while
(!isSolvable(tiles, size) || isSolved(tiles)) or, if no isSolved helper exists,
compare tiles against the canonical solved array
([...Array(total-1)].map((_,i)=>i+1).concat(0)) and continue the loop when they
are equal.
- Around line 114-121: Replace the clickable divs with actual button elements in
the tiles rendering (the map over tiles in page.tsx), keeping the same className
composition (`styles.tile` and `styles.empty`) and `handleTileClick(index)` as
the click handler; give each button type="button" and an accessible label (e.g.,
aria-label={`Tile ${tile}`}) and make the empty tile non-interactive by using
disabled or aria-disabled as appropriate so keyboard and assistive-tech users
can focus and activate tiles correctly while preserving existing styling and
behavior.
- Around line 1-2: The project has a dependency mismatch: Next.js 15.3.3
requires React 19 but package.json lists react/react-dom ^18; update
package.json to align versions (either upgrade react and react-dom to React 19
to match Next.js 15.3.3, or downgrade next to a React 18-compatible version),
then reinstall and update the lockfile; specifically change the react and
react-dom entries in package.json (or change next) and run the installer
(npm/yarn/pnpm) so components using "use client" and hooks like
useState/useEffect in src/app/game/sliding-puzzle/page.tsx run against the
correct React runtime.
In `@src/app/game/sliding-puzzle/SlidingPuzzle.module.css`:
- Around line 50-73: Tiles are fixed at 80px causing overflow on small screens;
update the .grid/.tile styles to use responsive sizing so the board scales (use
grid-template-columns with repeat and a tile size defined by minmax or a CSS
variable tied to viewport width, constrain .grid with max-width and padding, and
maintain square tiles with aspect-ratio: 1/1). Specifically, replace the
hardcoded width/height on .tile and fixed column sizing with a responsive
approach (refer to .grid and .tile) so a 5x5 board fits smaller viewports
without overflow while preserving gaps, border-radius and transitions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 74b1dbba-3838-46fa-90e5-ba7c05dcd0af
📒 Files selected for processing (2)
src/app/game/sliding-puzzle/SlidingPuzzle.module.csssrc/app/game/sliding-puzzle/page.tsx
| "use client"; | ||
| import { useState, useEffect } from "react"; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== package.json files =="
fd '^package\.json$' -H
echo
echo "== next/react/react-dom versions =="
fd '^package\.json$' -H -x sh -c '
echo "--- $1 ---"
jq -r "
{
next: (.dependencies.next // .devDependencies.next // \"missing\"),
react: (.dependencies.react // .devDependencies.react // \"missing\"),
reactDom: (.dependencies[\"react-dom\"] // .devDependencies[\"react-dom\"] // \"missing\")
}
" "$1"
' sh {}Repository: ajaynegi45/Old-School-Game
Length of output: 230
🌐 Web query:
Next.js 15 supported React versions React 18 App Router
💡 Result:
Next.js 15 is designed primarily for use with React 19 [1][2]. While Next.js 15 introduced React 19 support as a core requirement for its primary features, it includes specific support strategies for developers needing to maintain compatibility with older versions [1]. Regarding the use of React 18 with the App Router in Next.js 15: 1. Primary Requirement: Next.js 15 is built to align with React 19 [1][2]. The App Router relies on features and optimizations introduced in React 19 (including React Server Components enhancements) [1][3]. 2. React 18 Compatibility: While official documentation and the Next.js team emphasize React 19 for the App Router [1][4], Next.js 15 does not strictly prevent the installation of React 18 in all scenarios [5][4]. However, the framework is heavily optimized for React 19, and using React 18 may result in missing features, unexpected behavior, or incompatibility with certain App Router functionalities that expect React 19 APIs [1][4]. 3. Pages Router vs. App Router: Next.js 15 explicitly maintains backward compatibility for the Pages Router with React 18 [1]. This was implemented specifically to provide a smoother upgrade path for existing projects [1]. 4. Recommendation: It is strongly recommended to use React 19 with Next.js 15 [6]. If your project dependencies are incompatible with React 19, the standard recommendation is to either upgrade those dependencies or keep the project on a previous version of Next.js (such as 14.x) that natively supports React 18 until you are ready to migrate [4][7]. In summary, while you may be able to force an installation of React 18 with the App Router, it is not the supported or recommended configuration for Next.js 15, as the App Router's architecture is tightly coupled with React 19 [1][6].
Citations:
- 1: https://nextjs.org/blog/next-15
- 2: https://nextjs.im/blog/next-15-1/
- 3: https://www.techsystemlab.com/en/blog/nextjs-15-app-router-complete-guide
- 4: Can React 18 be used with Next.js version 15? vercel/next.js#72795
- 5: https://www.reddit.com/r/nextjs/comments/1gpb104/nextjs_15_with_react_18/
- 6: https://depfixer.com/blog/post_next15_683de9c6/nextjs-15-compatibility-guide
- 7: https://securityboulevard.com/2026/05/cve-2026-44575-middleware-authorization-bypass-in-next-js-app-router/
Major dependency mismatch: Next.js 15.3.3 with React 18
- Your
package.jsonusesnext: 15.3.3butreact: ^18/react-dom: ^18. - Next.js 15’s App Router is primarily built around React 19, so running it with React 18 can lead to missing/changed App Router + RSC behaviors and break runtime/builds.
- Fix: upgrade
react/react-domto React 19 (recommended) or downgrade Next.js to a version that supports React 18.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/app/game/sliding-puzzle/page.tsx` around lines 1 - 2, The project has a
dependency mismatch: Next.js 15.3.3 requires React 19 but package.json lists
react/react-dom ^18; update package.json to align versions (either upgrade react
and react-dom to React 19 to match Next.js 15.3.3, or downgrade next to a React
18-compatible version), then reinstall and update the lockfile; specifically
change the react and react-dom entries in package.json (or change next) and run
the installer (npm/yarn/pnpm) so components using "use client" and hooks like
useState/useEffect in src/app/game/sliding-puzzle/page.tsx run against the
correct React runtime.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@Recamm Resolve the error. so that I can check it. Also review the CodeRabbit |
- Fix useEffect/startGame ordering: wrap startGame in useCallback and update dependency array to [startGame] to satisfy exhaustive-deps rule - Fix: exclude already-solved board from shuffle (isSolved check in do-while) - Accessibility: replace clickable <div> tiles with <button> elements, add aria-label and disabled prop on empty tile (WCAG 2.1.1, 2.4.7) - Responsive layout: replace fixed 80px tiles with aspect-ratio:1 and grid width capped at min(440px, calc(100vw - 40px)) to prevent overflow on mobile (especially 5x5) - Increase sizeButton min-height to 44px for touch targets (WCAG 2.5.5) - Add Sliding Puzzle card to game selection page (src/app/game/page.tsx) so the game is reachable via normal navigation flow - Add SlidingPuzzle.svg icon for the game card
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/game/sliding-puzzle/page.tsx (1)
64-86: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueTile-click logic looks correct.
Adjacency check, swap, move increment, and win detection all line up nicely with the puzzle rules. One small friendly suggestion for the future: using
setMoves((m) => m + 1)instead ofsetMoves(moves + 1)is a slightly safer pattern in React, since it always works off the freshest state rather than the value captured in the closure. Not a blocker today, just a nice habit to build!🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/app/game/sliding-puzzle/page.tsx` around lines 64 - 86, The tile-click handler in handleTileClick uses a state value from the render closure when incrementing moves, which can become stale during rapid updates. Update the move increment in handleTileClick to use the functional setMoves form so it always derives from the latest state, while keeping the existing adjacency check, tile swap, and isSolved win detection intact.
♻️ Duplicate comments (1)
src/app/game/sliding-puzzle/page.tsx (1)
115-124: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winAwesome work switching to real
<button>elements!This fixes the earlier accessibility concern nicely — keyboard and screen-reader users can now play the game too. Just two small polish items left:
- Line 115: the button doesn't declare a
type, so it defaults to"submit". If this component ever ends up inside a<form>(now or later), clicking a tile could accidentally submit it. Cheap and safe to addtype="button"now.- Line 116: using the array
indexas the Reactkeymeans that when tiles swap positions, React just re-renders the same DOM node's content instead of moving a distinct element. Since the PR specifically calls out "smooth transitions" as a feature, this will quietly stop position based CSS transitions from animating the tile move. Using the tile's own value as the key (each value 1..N and 0 for empty tile are unique) would let React correctly identify tiles as they move and animate them properly.🔧 Suggested fix
{tiles.map((tile, index) => ( <button - key={index} + key={tile} + type="button" className={`${styles.tile} ${tile === 0 ? styles.empty : ""}`} onClick={() => handleTileClick(index)} aria-label={tile !== 0 ? `Tile ${tile}` : "Empty space"} disabled={tile === 0} > {tile !== 0 ? tile : ""} </button> ))}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/app/game/sliding-puzzle/page.tsx` around lines 115 - 124, The tile render in the sliding puzzle board should explicitly avoid implicit form submission and use stable identity for animation. Update the button inside the map in the game board component to set type to “button”, and replace the React key based on the loop index with the tile’s unique value so React can track each tile correctly as it moves and preserve smooth transitions.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/app/game/sliding-puzzle/page.tsx`:
- Around line 64-86: The tile-click handler in handleTileClick uses a state
value from the render closure when incrementing moves, which can become stale
during rapid updates. Update the move increment in handleTileClick to use the
functional setMoves form so it always derives from the latest state, while
keeping the existing adjacency check, tile swap, and isSolved win detection
intact.
---
Duplicate comments:
In `@src/app/game/sliding-puzzle/page.tsx`:
- Around line 115-124: The tile render in the sliding puzzle board should
explicitly avoid implicit form submission and use stable identity for animation.
Update the button inside the map in the game board component to set type to
“button”, and replace the React key based on the loop index with the tile’s
unique value so React can track each tile correctly as it moves and preserve
smooth transitions.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: d496b415-4b06-4e1b-aa90-48d31fedefa2
⛔ Files ignored due to path filters (1)
public/SlidingPuzzle.svgis excluded by!**/*.svg
📒 Files selected for processing (3)
src/app/game/page.tsxsrc/app/game/sliding-puzzle/SlidingPuzzle.module.csssrc/app/game/sliding-puzzle/page.tsx
|
Hi @ajaynegi33 ! I've pushed a new commit addressing all the review feedback. Here's a summary of what was fixed: Build fix
CodeRabbit feedback
Navigation
Let me know if there's anything else to adjust! |
@Recamm Error: Node.js version 20.x is deprecated. Deployments created on or after 2026-10-01 will fail to build. Please set Node.js Version to 24.x in your Project Settings to use Node.js 24. |
|
Hi @ajaynegi33! Fixed the Node.js deprecation warning — added an |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@package.json`:
- Around line 6-8: Update the Node.js setup step in the code-quality workflow to
use Node 24 instead of Node 18 before running npm ci, keeping it consistent with
the package.json engines requirement.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
| "engines": { | ||
| "node": ">=24.x" | ||
| }, |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n --glob '.github/workflows/**' --glob 'package.json' --glob '.npmrc' \
"node-version|engines|engine-strict"Repository: ajaynegi33/Old-School-Game
Length of output: 164
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== package.json ==\n'
cat -n package.json | sed -n '1,80p'
printf '\n== workflow files ==\n'
git ls-files '.github/workflows/*' | sort
printf '\n== Node-related settings in workflows ==\n'
rg -n -C 2 "node-version|setup-node|engines|engine-strict|npm ci" .github/workflows package.json .npmrc || trueRepository: ajaynegi33/Old-School-Game
Length of output: 2205
Update the workflow to use Node.js 24
package.json now requires node >=24.x, but .github/workflows/code-quality.yml still sets up Node.js 18 before npm ci. Please switch that job to Node 24 so CI matches the supported runtime.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@package.json` around lines 6 - 8, Update the Node.js setup step in the
code-quality workflow to use Node 24 instead of Node 18 before running npm ci,
keeping it consistent with the package.json engines requirement.
2 participants
User description
Summary
Added a new classic game: Sliding Puzzle with 3 difficulty levels.
What it does:
Cognitive Benefits:
Tech:
CodeAnt-AI Description
Add a Sliding Puzzle game with selectable difficulty levels
What Changed
Impact
✅ New puzzle game available✅ Solvable boards every time✅ Clear move tracking💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.