Add files via upload

Author: Tapyon

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Mateusz Sokola
+
+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.

README.md

@@ -1,2 +1,53 @@
-# vibecodingames.github.io
-wawa
+# 2048-in-react
+
+[![Open issues][issues-badge]][issues-url]
+[![CI][lint-badge]][lint-url]
+[![CI][test-badge]][test-url]
+[![TypeScript][typescript-badge]][typescript-url]
+
+This is a fully functional clone of the popular 2048 game, built using React and Next.js. Not only does it offer smooth animations and works on mobile devices, but it's also a fantastic learning resource for developers. Whether you're here to play, contribute, or learn, this project has something for everyone.
+
+If you're interested in mastering React by building this game step-by-step, check out the course linked below!
+
+[![](.docs/demo.gif)](https://mateuszsokola.github.io/2048-in-react/)
+
+## [Play 2048 💥](https://mateuszsokola.github.io/2048-in-react/)
+
+## Features
+
+- Fully-functional 2048 clone
+- Animations
+- Supports **keyboard** and **touch** events
+
+## Development
+
+_Easily set up a local development environment!_
+
+Just start dev server on [localhost](http://localhost:3000):
+
+- clone
+- `npm install`
+- `npm run dev`
+
+**Start coding!** 🎉
+
+## Build your own 2048 Game! 🚀
+
+Want to learn how to build this game from scratch using React & Next.js? I've got you covered! This project is part of an online course where I guide you through the entire process, step-by-step.
+
+Whether you're a beginner looking to enhance your skills or an experienced developer seeking a fun project, this course will take you through the core concepts of React while building a fully functional game.
+
+[![Build 2048 Game in React](https://assets.mateu.sh/assets/github-2048-in-react-readme)](https://assets.mateu.sh/r/github-2048-in-react-readme)
+
+## Support
+
+If you encounter any issues or have suggestions, feel free to open an issue. Your feedback is always appreciated!
+
+[lint-badge]: https://github.com/mateuszsokola/2048-in-react/actions/workflows/lint.yml/badge.svg
+[lint-url]: https://github.com/mateuszsokola/2048-in-react/actions/workflows/actions/workflows/lint.yml
+[test-badge]: https://github.com/mateuszsokola/2048-in-react/actions/workflows/test.yml/badge.svg
+[test-url]: https://github.com/mateuszsokola/2048-in-react/actions/workflows/test.yml
+[issues-badge]: https://img.shields.io/github/issues/mateuszsokola/2048-in-react
+[issues-url]: https://github.com/mateuszsokola/2048-in-react/issues
+[typescript-badge]: https://badges.frapsoft.com/typescript/code/typescript.svg?v=101
+[typescript-url]: https://github.com/microsoft/TypeScript

__tests__/compontents/board.test.tsx

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react";
+import Board from "@/components/board";
+import GameProvider from "@/context/game-context";
+
+describe("Board", () => {
+  it("should render board with 16 cells", () => {
+    const { container } = render(
+      <GameProvider>
+        <Board />
+      </GameProvider>,
+    );
+    const cellElements = container.querySelectorAll(".cell");
+
+    expect(cellElements.length).toEqual(16);
+  });
+
+  it("should render board with 2 tiles", async () => {
+    const { container } = render(
+      <GameProvider>
+        <Board />
+      </GameProvider>,
+    );
+    const tiles = container.querySelectorAll(".tile");
+
+    expect(tiles.length).toEqual(2);
+  });
+});

__tests__/compontents/mobile-swiper.test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import MobileSwiper, { SwipeInput } from "@/components/mobile-swiper";
+
+describe("MobileSwiper", () => {
+  it("should trigger onSwipe with correct input on touch end", () => {
+    const onSwipeMock = jest.fn();
+    const { container } = render(
+      <MobileSwiper onSwipe={onSwipeMock}>
+        <div data-testid="swipe-target">Swipe me!</div>
+      </MobileSwiper>,
+    );
+
+    const swipeTarget = container.querySelector(
+      "[data-testid='swipe-target']",
+    ) as HTMLElement;
+
+    fireEvent.touchStart(swipeTarget, {
+      touches: [{ clientX: 0, clientY: 0 }],
+    });
+    fireEvent.touchEnd(swipeTarget, {
+      changedTouches: [{ clientX: 50, clientY: 0 }],
+    });
+
+    expect(onSwipeMock).toHaveBeenCalledWith({ deltaX: 50, deltaY: 0 });
+  });
+
+  it("should not trigger onSwipe if touch is outside the component", () => {
+    const onSwipeMock = jest.fn();
+    const { container } = render(
+      <MobileSwiper onSwipe={onSwipeMock}>
+        <div data-testid="swipe-target">Swipe me!</div>
+      </MobileSwiper>,
+    );
+
+    const swipeTarget = container.querySelector(
+      "[data-testid='swipe-target']",
+    ) as HTMLElement;
+
+    fireEvent.touchStart(swipeTarget, {
+      touches: [{ clientX: 0, clientY: 0 }],
+    });
+    fireEvent.touchEnd(document.body, {
+      changedTouches: [{ clientX: 50, clientY: 0 }],
+    });
+
+    expect(onSwipeMock).not.toHaveBeenCalled();
+  });
+});

__tests__/compontents/score.test.tsx

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+import GameProvider from "@/context/game-context";
+import Board from "@/components/board";
+import Score from "@/components/score";
+
+describe("Score", () => {
+  it("should display score", () => {
+    const { container } = render(
+      <GameProvider>
+        <Score />
+        <Board />
+      </GameProvider>,
+    );
+
+    expect(container.querySelector(".score > div")?.textContent).toEqual("0");
+  });
+});

__tests__/compontents/tile.test.tsx

@@ -0,0 +1,61 @@
+import { render, waitFor } from "@testing-library/react";
+import Tile from "@/components/tile";
+
+describe("Tile", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  it("should render with correct position and value", () => {
+    // Arrange
+    const position: [number, number] = [1, 2];
+    const value = 2048;
+
+    // Act
+    const { container } = render(<Tile position={position} value={value} />);
+
+    const tile: HTMLDivElement = container.firstChild as HTMLDivElement;
+    expect(tile.textContent).toEqual("2048");
+    expect(tile.className).toEqual("tile tile2048");
+    expect(tile).toHaveStyle({
+      left: `72px`,
+      top: `144px`,
+      zIndex: `2048`,
+    });
+  });
+
+  it("should apply animation when value changes", async () => {
+    // Arrange
+    const position: [number, number] = [0, 0];
+    const initialValue = 2;
+    const updatedValue = 4;
+
+    // Act
+    const { getByText, rerender } = render(
+      <Tile position={position} value={initialValue} />,
+    );
+
+    // Assert initial state
+    const tileElement = getByText(`${initialValue}`);
+    expect(tileElement).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(tileElement).toHaveStyle({
+        transform: "scale(1)",
+      });
+    });
+    rerender(<Tile position={position} value={updatedValue} />);
+
+    await waitFor(() => {
+      expect(tileElement).toHaveStyle({
+        transform: "scale(1.1)",
+      });
+    });
+
+    await waitFor(() => {
+      expect(tileElement).toHaveStyle({
+        transform: "scale(1)",
+      });
+    });
+  });
+});

__tests__/context/game-context.test.tsx

@@ -0,0 +1,82 @@
+import { fireEvent, render } from "@testing-library/react";
+import GameProvider from "@/context/game-context";
+import Board from "@/components/board";
+import Score from "@/components/score";
+
+describe("GameProvider", () => {
+  describe("startGame", () => {
+    it("should start the game with two tiles", () => {
+      const { container } = render(
+        <GameProvider>
+          <Board />
+        </GameProvider>,
+      );
+
+      expect(container.querySelectorAll(".tile")).toHaveLength(2);
+    });
+  });
+
+  describe("getTiles", () => {
+    it("should return tiles", () => {
+      const { container } = render(
+        <GameProvider>
+          <Board />
+        </GameProvider>,
+      );
+
+      expect(container.querySelectorAll(".tile")).toHaveLength(2);
+    });
+  });
+
+  describe("moveTiles", () => {
+    it("should move tiles and merge them together", () => {
+      const { container } = render(
+        <GameProvider>
+          <Board />
+        </GameProvider>,
+      );
+
+      expect(container.querySelectorAll(".tile4")).toHaveLength(0);
+      expect(container.querySelectorAll(".tile2")).toHaveLength(2);
+
+      fireEvent.keyDown(container, {
+        key: "ArrowUp",
+        code: "ArrowUp",
+      });
+
+      expect(container.querySelectorAll(".tile4")).toHaveLength(1);
+      expect(container.querySelectorAll(".tile2")).toHaveLength(1);
+    });
+  });
+
+  describe("score", () => {
+    it("should return score", () => {
+      const { container } = render(
+        <GameProvider>
+          <Score />
+          <Board />
+        </GameProvider>,
+      );
+
+      expect(container.querySelector(".score > div")?.textContent).toEqual("0");
+    });
+
+    it("should refresh score after move", () => {
+      const { container } = render(
+        <GameProvider>
+          <Score />
+          <Board />
+        </GameProvider>,
+      );
+
+      expect(container.querySelector(".score > div")?.textContent).toEqual("0");
+
+      fireEvent.keyDown(container, {
+        key: "ArrowUp",
+        code: "ArrowUp",
+      });
+
+      expect(container.querySelector(".score > div")?.textContent).toEqual("4");
+    });
+  });
+});

__tests__/hooks/use-previous-props.test.ts

@@ -0,0 +1,21 @@
+import { renderHook } from "@testing-library/react";
+import usePreviousProps from "@/hooks/use-previous-props";
+
+describe("usePreviousProps", () => {
+  it("should return undefined for the first render", () => {
+    const { result } = renderHook(() => usePreviousProps("initial value"));
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it("should return the previous value of the prop", () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => usePreviousProps(value),
+      { initialProps: { value: "initial value" } },
+    );
+
+    rerender({ value: "updated value" });
+
+    expect(result.current).toEqual("initial value");
+  });
+});