ticstar-3d-tic-tac-toe

Interactive 3D Tic Tac Toe game with online multiplayer capabilities.

Developed with the software and tools below.

📑 Table of Contents

• 📍 Overview
• 📦 Features
• 📂 Structure
• 💻 Installation
• 🏗️ Usage
• 🌐 Hosting
• 📄 License
• 👏 Authors

📍 Overview

The repository contains a Minimum Viable Product (MVP) of a 3D Tic Tac Toe game, named "ticstar-3d-tic-tac-toe". It features an interactive 3D game board rendered using React Three Fiber. The game logic is implemented with TypeScript, providing a visually engaging rendition of the classic game.

📦 Features

	Feature	Description
⚙️	3D Rendering	Implements 3D game elements (board, pieces) using Three.js and React Three Fiber for an immersive user experience.
🎮	Game Logic	Manages game state, move validation, win condition checking, and draw detection using TypeScript.
🎨	Animations	Includes animations for piece placement and hover effects using GSAP and Framer Motion.
🖱️	User Interaction	Allows users to interact with the 3D board via mouse clicks to place pieces.
🧱	Modular Design	The codebase follows a modular architecture with separate components for the board, cells, and pieces.
🧪	Unit Testing	Utilizes Jest for comprehensive unit tests of the game logic.
🎨	Styling	Styles the game interface using Tailwind CSS, providing a visually appealing and responsive design.
🌐	Cross-Platform	Designed to be compatible across different web browsers and devices.
🚀	Performance	Optimized for performance, leveraging efficient rendering and model loading techniques.

📂 Structure

└─ src
   └─ components
      └─ Board.tsx
      └─ Cell.tsx
      └─ Piece.tsx
   └─ utils
      └─ gameLogic.ts
   └─ App.tsx
   └─ main.tsx
└─ public
   └─ assets
      └─ models
         └─ board.glb
         └─ x.glb
         └─ o.glb
└─ tests
   └─ gameLogic.test.ts
└─ .env
└─ package.json
└─ README.md
└─ tsconfig.json
└─ tailwind.config.js
└─ .prettierrc.js
└─ jest.config.js

💻 Installation

Warning

🔧 Prerequisites

• Node.js v18+
• npm 6+

🚀 Setup Instructions

1. Clone the repository:

   git clone https://github.com/coslynx/ticstar-3d-tic-tac-toe.git
   cd ticstar-3d-tic-tac-toe

2. Install dependencies:

   npm install

🏗️ Usage

🏃‍♂️ Running the MVP

1. Start the development server:

   npm run dev

2. Access the application:

   • Web interface: http://localhost:5173

Tip

⚙️ Configuration

• 3D asset paths are configured using environment variables in .env.
• Modify styling by editing the tailwind.config.js file.

📚 Examples

• 🎮 Playing a move: Click on an empty cell to place an 'X'.
• 🔄 Animations: Observe the scaling animation when a piece is placed on the board.
• 💡 Hover effect: Hover over a cell to see it highlight, indicating it can be selected.

🌐 Hosting

🚀 Deployment Instructions

Deploying to Netlify

1. Sign up or log in to Netlify.
2. Connect your GitHub repository to Netlify.
3. Configure the build settings:
   • Build command: npm run build
   • Publish directory: dist
4. Deploy the site.

🔑 Environment Variables

Provide a comprehensive list of all required environment variables, their purposes, and example values:

• THREE_PUBLIC_PATH: Base URL for accessing 3D assets. Example: /assets/models/

📜 API Documentation

This MVP does not include a backend, therefore there are no API endpoints. All game logic and rendering are handled client-side.

Note

📜 License & Attribution

📄 License

This Minimum Viable Product (MVP) is licensed under the GNU AGPLv3 license.

🤖 AI-Generated MVP

This MVP was entirely generated using artificial intelligence through CosLynx.com.

No human was directly involved in the coding process of the repository: ticstar-3d-tic-tac-toe

📞 Contact

For any questions or concerns regarding this AI-generated MVP, please contact CosLynx at:

• Website: CosLynx.com
• Twitter: @CosLynxAI

🌐 CosLynx.com

Create Your Custom MVP in Minutes With CosLynxAI!

3D Model Files Required

This project requires the following 3D model files that need to be created manually:

• public/assets/models/board.glb
• public/assets/models/x.glb
• public/assets/models/o.glb

These placeholder files need to be replaced with actual binary 3D model files.