next.js (Run ID: codestoryai_sidecar_issue_2140_d914abf6)

puzzle-game/.gitignore

@@ -0,0 +1,33 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

puzzle-game/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Next.js Puzzle Game
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

puzzle-game/README.md

@@ -0,0 +1,65 @@
+# Next.js Sliding Puzzle Game
+
+A simple sliding puzzle game built with Next.js for Windows.
+
+## Features
+
+- Three difficulty levels: Easy (3x3), Medium (4x4), and Hard (5x5)
+- Timer and move counter to track your progress
+- Responsive design that works on all screen sizes
+- Optimized for Windows desktop environments
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 14.0 or later
+- npm or yarn
+
+### Installation
+
+1. Clone this repository or download the source code
+2. Navigate to the project directory
+3. Install dependencies:
+
+```bash
+npm install
+# or
+yarn install
+```
+
+### Development
+
+Run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser to see the game.
+
+### Building for Windows
+
+To create a static build that can be used in a Windows application:
+
+```bash
+npm run build
+# or
+yarn build
+```
+
+This will generate a static export in the `out` directory that can be served as a static site or embedded in a Windows application.
+
+## How to Play
+
+1. Select a difficulty level (Easy, Medium, or Hard)
+2. Click "Start Game" to begin
+3. Click on tiles adjacent to the empty space to move them
+4. Arrange the tiles in numerical order to win
+5. Try to complete the puzzle in the fewest moves and shortest time!
+
+## License
+
+This project is open source and available under the [MIT License](LICENSE).

puzzle-game/components/GameControls.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+interface GameControlsProps {
+  moves: number;
+  time: number;
+  onReset: () => void;
+}
+
+const GameControls: React.FC<GameControlsProps> = ({ moves, time, onReset }) => {
+  // Format time as MM:SS
+  const formatTime = (seconds: number): string => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className="game-controls">
+      <div className="stats">
+        <div className="stat-item">
+          <span className="stat-label">Moves:</span>
+          <span className="stat-value">{moves}</span>
+        </div>
+        <div className="stat-item">
+          <span className="stat-label">Time:</span>
+          <span className="stat-value">{formatTime(time)}</span>
+        </div>
+      </div>
+      <button className="reset-button" onClick={onReset}>
+        Reset Game
+      </button>
+
+      <style jsx>{`
+        .game-controls {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-bottom: 20px;
+          width: 100%;
+        }
+
+        .stats {
+          display: flex;
+          justify-content: center;
+          gap: 30px;
+          margin-bottom: 15px;
+          width: 100%;
+        }
+
+        .stat-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
+        .stat-label {
+          font-size: 0.9rem;
+          color: #666;
+        }
+
+        .stat-value {
+          font-size: 1.5rem;
+          font-weight: bold;
+        }
+
+        .reset-button {
+          background-color: var(--secondary-color);
+          margin-bottom: 20px;
+        }
+
+        .reset-button:hover {
+          background-color: #d03167;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default GameControls;

puzzle-game/components/PuzzleBoard.tsx

@@ -0,0 +1,192 @@
+import { useState, useEffect } from 'react';
+
+interface PuzzleBoardProps {
+  difficulty: 'easy' | 'medium' | 'hard';
+  onMove: () => void;
+  onWin: () => void;
+}
+
+const PuzzleBoard: React.FC<PuzzleBoardProps> = ({ difficulty, onMove, onWin }) => {
+  // Set grid size based on difficulty
+  const gridSize = difficulty === 'easy' ? 3 : difficulty === 'medium' ? 4 : 5;
+
+  // State for the puzzle tiles
+  const [tiles, setTiles] = useState<number[]>([]);
+  const [emptyIndex, setEmptyIndex] = useState<number>(0);
+
+  // Initialize the puzzle
+  useEffect(() => {
+    initializePuzzle();
+  }, [difficulty]);
+
+  // Check for win condition
+  useEffect(() => {
+    if (tiles.length === 0) return;
+
+    const isWin = checkWinCondition();
+    if (isWin) {
+      onWin();
+    }
+  }, [tiles]);
+
+  // Initialize the puzzle with shuffled tiles
+  const initializePuzzle = () => {
+    const totalTiles = gridSize * gridSize;
+    const newTiles = Array.from({ length: totalTiles - 1 }, (_, i) => i + 1);
+    newTiles.push(0); // Add empty tile (represented by 0)
+
+    // Shuffle the tiles (ensuring it's solvable)
+    const shuffledTiles = shuffleTiles(newTiles);
+
+    setTiles(shuffledTiles);
+    setEmptyIndex(shuffledTiles.indexOf(0));
+  };
+
+  // Shuffle the tiles while ensuring the puzzle is solvable
+  const shuffleTiles = (tiles: number[]): number[] => {
+    const shuffled = [...tiles];
+    let currentIndex = shuffled.length;
+
+    // Fisher-Yates shuffle algorithm
+    while (currentIndex !== 0) {
+      const randomIndex = Math.floor(Math.random() * currentIndex);
+      currentIndex--;
+
+      [shuffled[currentIndex], shuffled[randomIndex]] = 
+      [shuffled[randomIndex], shuffled[currentIndex]];
+    }
+
+    // Check if the puzzle is solvable
+    if (isSolvable(shuffled)) {
+      return shuffled;
+    } else {
+      // If not solvable, swap two tiles to make it solvable
+      if (shuffled[0] !== 0 && shuffled[1] !== 0) {
+        [shuffled[0], shuffled[1]] = [shuffled[1], shuffled[0]];
+      } else {
+        [shuffled[shuffled.length - 1], shuffled[shuffled.length - 2]] = 
+        [shuffled[shuffled.length - 2], shuffled[shuffled.length - 1]];
+      }
+      return shuffled;
+    }
+  };
+
+  // Check if the puzzle is solvable
+  const isSolvable = (tiles: number[]): boolean => {
+    // Count inversions
+    let inversions = 0;
+    const tilesWithoutEmpty = tiles.filter(tile => tile !== 0);
+
+    for (let i = 0; i < tilesWithoutEmpty.length; i++) {
+      for (let j = i + 1; j < tilesWithoutEmpty.length; j++) {
+        if (tilesWithoutEmpty[i] > tilesWithoutEmpty[j]) {
+          inversions++;
+        }
+      }
+    }
+
+    // For odd grid sizes, the puzzle is solvable if inversions is even
+    if (gridSize % 2 === 1) {
+      return inversions % 2 === 0;
+    } 
+    // For even grid sizes, the puzzle is solvable if:
+    // (inversions + row of empty from bottom) is odd
+    else {
+      const emptyTileIndex = tiles.indexOf(0);
+      const emptyTileRow = Math.floor(emptyTileIndex / gridSize);
+      const rowFromBottom = gridSize - emptyTileRow;
+      return (inversions + rowFromBottom) % 2 === 1;
+    }
+  };
+
+  // Check if the puzzle is solved
+  const checkWinCondition = (): boolean => {
+    for (let i = 0; i < tiles.length - 1; i++) {
+      if (tiles[i] !== i + 1) {
+        return false;
+      }
+    }
+    return tiles[tiles.length - 1] === 0;
+  };
+
+  // Handle tile click
+  const handleTileClick = (index: number) => {
+    if (!isMovable(index)) return;
+
+    const newTiles = [...tiles];
+    newTiles[emptyIndex] = newTiles[index];
+    newTiles[index] = 0;
+
+    setTiles(newTiles);
+    setEmptyIndex(index);
+    onMove();
+  };
+
+  // Check if a tile is movable (adjacent to the empty tile)
+  const isMovable = (index: number): boolean => {
+    // Check if the tile is in the same row and adjacent column
+    const sameRow = Math.floor(index / gridSize) === Math.floor(emptyIndex / gridSize);
+    const adjacentCol = Math.abs((index % gridSize) - (emptyIndex % gridSize)) === 1;
+
+    // Check if the tile is in the same column and adjacent row
+    const sameCol = (index % gridSize) === (emptyIndex % gridSize);
+    const adjacentRow = Math.abs(Math.floor(index / gridSize) - Math.floor(emptyIndex / gridSize)) === 1;
+
+    return (sameRow && adjacentCol) || (sameCol && adjacentRow);
+  };
+
+  return (
+    <div className="puzzle-board">
+      {tiles.map((tile, index) => (
+        <div
+          key={index}
+          className={`puzzle-tile ${tile === 0 ? 'empty' : ''} ${isMovable(index) ? 'movable' : ''}`}
+          onClick={() => handleTileClick(index)}
+        >
+          {tile !== 0 && tile}
+        </div>
+      ))}
+
+      <style jsx>{`
+        .puzzle-board {
+          display: grid;
+          grid-template-columns: repeat(${gridSize}, 1fr);
+          grid-template-rows: repeat(${gridSize}, 1fr);
+          gap: 5px;
+          width: min(80vw, 500px);
+          height: min(80vw, 500px);
+          margin: 0 auto;
+        }
+
+        .puzzle-tile {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: white;
+          border: 2px solid var(--border-color);
+          border-radius: 8px;
+          font-size: ${gridSize <= 3 ? '2rem' : gridSize <= 4 ? '1.5rem' : '1.2rem'};
+          font-weight: bold;
+          cursor: pointer;
+          transition: all 0.2s;
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        .puzzle-tile.empty {
+          background-color: transparent;
+          border: none;
+          box-shadow: none;
+          cursor: default;
+        }
+
+        .puzzle-tile.movable:not(.empty):hover {
+          transform: scale(0.95);
+          background-color: #e6f7ff;
+          border-color: var(--primary-color);
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default PuzzleBoard;