diff --git a/README.md b/README.md index d69a115..3c7132e 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,167 @@ -# Nuxt 3 Minimal Starter +# ๐Ÿงฉ Perplex Image -Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. +> A beautiful, browser-based image puzzle game powered by Nuxt 3 and the Pexels photo API. -## Setup +Perplex Image challenges you to reassemble a real photograph by dragging and swapping shuffled tiles. Choose your difficulty, race the clock, and put the picture back together โ€” one piece at a time. -Make sure to install the dependencies: +--- + +## โœจ Features + +- ๐Ÿ–ผ๏ธ **Real photos** โ€” puzzles are generated from stunning images sourced via the [Pexels](https://www.pexels.com/) API +- ๐ŸŽฏ **Three difficulty levels** โ€” 9 ร— 13, 15 ร— 23, or 18 ร— 26 tile grids +- ๐Ÿ–ฑ๏ธ **Drag & swap mechanics** โ€” click and drag individual pieces or select multiple pieces and move them as a group +- โฑ๏ธ **Stopwatch & move counter** โ€” track how long it takes and how many moves you need +- โธ๏ธ **Pause / Resume** โ€” take a break without losing your progress +- ๐ŸŒ **Internationalization** โ€” i18n-ready for multiple languages +- ๐Ÿ“ฑ **Responsive design** โ€” works on desktop and tablet + +--- + +## ๐Ÿ› ๏ธ Tech Stack + +| Layer | Technology | +|---|---| +| Framework | [Nuxt 3](https://nuxt.com/) (Vue 3) | +| State management | [Pinia](https://pinia.vuejs.org/) | +| Styling | [Tailwind CSS](https://tailwindcss.com/) | +| Icons | [nuxt-icon](https://github.com/nuxt-modules/icon) | +| i18n | [@nuxtjs/i18n](https://i18n.nuxtjs.org/) | +| Unit tests | [Vitest](https://vitest.dev/) + [Vue Test Utils](https://test-utils.vuejs.org/) | +| E2E tests | [Playwright](https://playwright.dev/) | +| Linting | ESLint + Prettier | +| Package manager | [pnpm](https://pnpm.io/) | + +--- + +## ๐Ÿš€ Getting Started + +### Prerequisites + +- **Node.js** โ‰ฅ 18 +- **pnpm** โ‰ฅ 8 (`npm install -g pnpm`) +- A free **Pexels API key** โ€” get one at + +### Installation ```bash -# yarn -yarn install +# Clone the repository +git clone https://github.com/makuchpatryk/perplex-image.git +cd perplex-image -# npm -npm install +# Install dependencies +pnpm install +``` + +### Environment Variables + +Create a `.env` file in the project root: + +```env +PEXELS_API_KEY=your_pexels_api_key_here +``` -# pnpm -pnpm install --shamefully-hoist +### Start the Development Server + +```bash +pnpm dev ``` -## Development Server +Open [http://localhost:3000](http://localhost:3000) in your browser. + +--- + +## ๐ŸŽฎ How to Play + +1. **Home screen** โ€” browse the photo gallery and click a picture you want to puzzle. +2. **Choose difficulty** โ€” pick a grid size (easy โ†’ hard: 9 ร— 13, 15 ร— 23, 18 ร— 26). +3. **Solve the puzzle** โ€” drag tiles to swap them back into their correct positions. + - Hold **Shift** (or use the multi-select mode) to pick several tiles at once and move them as a group. +4. **Win!** โ€” once every tile is in place the finish screen shows your time and move count. -Start the development server on http://localhost:3000 +--- + +## ๐Ÿ“ Project Structure + +``` +perplex-image/ +โ”œโ”€โ”€ modules/ +โ”‚ โ”œโ”€โ”€ core/ # Shared composables, store, types & constants +โ”‚ โ”‚ โ”œโ”€โ”€ components/ # Core UI components +โ”‚ โ”‚ โ”œโ”€โ”€ composables/ # useImage, useStopwatch +โ”‚ โ”‚ โ”œโ”€โ”€ constants/ # Difficulty level definitions +โ”‚ โ”‚ โ”œโ”€โ”€ store/ # Pinia stores (images, pieces) +โ”‚ โ”‚ โ””โ”€โ”€ types/ # TypeScript interfaces +โ”‚ โ”œโ”€โ”€ game/ # Puzzle game module +โ”‚ โ”‚ โ”œโ”€โ”€ components/ # Piece, GameSidebar, PauseModal, FinishModal +โ”‚ โ”‚ โ”œโ”€โ”€ composables/ # useEventGame, useShuffle +โ”‚ โ”‚ โ”œโ”€โ”€ pages/ # Game route +โ”‚ โ”‚ โ””โ”€โ”€ views/ # MainView, GameView +โ”‚ โ””โ”€โ”€ ui/ # Generic UI primitives (Button, Modal, Select) +โ”œโ”€โ”€ server/api/ # Nuxt server routes proxying the Pexels API +โ”œโ”€โ”€ layouts/ # Nuxt layouts +โ”œโ”€โ”€ assets/ # Global styles & images +โ”œโ”€โ”€ public/ # Static assets +โ””โ”€โ”€ tests/ # Unit & E2E test suites +``` + +--- + +## ๐Ÿ”Œ API Endpoints + +The app proxies all Pexels requests through two server-side routes so the API key is never exposed to the browser. + +| Route | Method | Description | +|---|---|---| +| `/api/get-images?per_page=N` | GET | Returns a collection of photos (default 100) | +| `/api/get-image?id=ID` | GET | Returns a single photo by its Pexels ID | + +--- + +## ๐Ÿงช Testing ```bash -npm run dev +# Run unit tests (Vitest) +pnpm test + +# Run E2E tests (Playwright, headless) +pnpm test:e2e + +# Run E2E tests with the interactive Playwright UI +pnpm test:e2e:ui + +# Debug E2E tests step-by-step +pnpm test:e2e:debug ``` -## Production +--- -Build the application for production: +## ๐Ÿงน Code Quality ```bash -npm run build +# Lint the codebase +pnpm lint + +# Auto-fix linting & formatting issues +pnpm lintfix ``` -Locally preview production build: +--- + +## ๐Ÿ“ฆ Building for Production ```bash -npm run preview +# Build the application +pnpm build + +# Preview the production build locally +pnpm preview ``` -Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. +For deployment options (Node server, static hosting, edge, etc.) see the [Nuxt deployment documentation](https://nuxt.com/docs/getting-started/deployment). + +--- + +## ๐Ÿ“„ License + +This project is open-source. See the [LICENSE](LICENSE) file for details.