Official Documentation
Comprehensive guide, architecture breakdown, and deployment instructions for Tic-Tac-Toe Pro Ultimate.
1. Introduction
Welcome to Tic-Tac-Toe Pro Ultimate. This is a highly scalable, real-time multiplayer gaming system built with Vanilla JavaScript, PHP, and MySQL. It completely avoids the high server costs of WebSockets by utilizing an advanced Atomic Polling Engine and direct WebRTC for peer-to-peer video streaming.
Key Enterprise Features:
- WebRTC P2P Video: Players can see each other via direct camera feeds without straining your server bandwidth.
- Smart Bot Injection: If no human opponent is found in 35 seconds, the server seamlessly injects a challenging AI.
- ELO Rank System: Players progress from "Iron" to "Legend" based on their win/loss ratios.
- Glassmorphism UI: A premium, fully responsive interface devoid of intrusive native browser alerts.
- Automated Installer: Deploy the entire database structure in seconds via a visual setup wizard.
2. Server Requirements
- Web Server: Apache, Nginx, or LiteSpeed (Compatible with standard shared hosting environments).
- PHP Version: PHP 7.4 or higher (PHP 8.0+ recommended for best performance).
- Database: MySQL 5.7+ or MariaDB.
- PHP Extensions: PDO, pdo_mysql, json.
3. Installation Guide
Deploying your game is incredibly easy thanks to the included automated setup wizard. Follow these steps:
- Upload Files: Extract the provided ZIP file and upload all contents to your public web directory (e.g., public_html or htdocs) using FTP or your hosting's File Manager.
- Create Database: Go to your hosting control panel (cPanel, hPanel, etc.) and create a new MySQL Database. Write down the Database Name, Database User, and Password.
- Run Installer: Open your browser and navigate to the installer file:
https://yourdomain.com/install.php - Execute: Enter the database credentials into the elegant setup UI and click "INSTALL & CONFIGURE". The script will automatically generate the db.php connection file and build all 6 required SQL tables.
- Security Cleanup: IMPORTANT! Delete the install.php file from your server immediately after a successful setup to prevent unauthorized access or accidental resets.
4. Cron Job Setup (Garbage Collector)
To ensure server health and handle disconnected players, you must configure a Cron Job. The cron_cleanup.php script acts as an automated referee, resolving "Walkovers" (W.O.) if a player closes their browser mid-game.
In your hosting control panel, add a new Cron Job to run Every Minute (* * * * *):
/usr/local/bin/php /home/YOUR_USERNAME/public_html/cron_cleanup.php >/dev/null 2>&1
Note: Adjust the absolute path according to your specific server configuration (e.g., replacing YOUR_USERNAME).
5. Core Architecture & Deep Dive
A. Atomic Matchmaking (server.php)
To prevent race conditions where two players might accidentally join the same room slot simultaneously, the matchmaking engine uses MySQL transactional row-level locking (FOR UPDATE).
// server.php - Safe Matchmaking Logic
$pdo->beginTransaction();
try {
// Locks the row exclusively for this specific request
$stmt = $pdo->prepare("SELECT id FROM rooms WHERE status = 'waiting' AND player_o_id IS NULL LIMIT 1 FOR UPDATE");
$stmt->execute();
$publicRoom = $stmt->fetchColumn();
// Safely assign player to the locked room
if ($publicRoom) {
$pdo->prepare("UPDATE rooms SET player_o_id = ?, status = 'playing' WHERE id = ?")->execute([$playerId, $publicRoom]);
$pdo->commit();
}
} catch (Exception $e) {
$pdo->rollBack();
}
B. Server-less WebRTC Signaling (sinalizar.php & main.js)
Traditional WebRTC requires expensive Node.js/WebSocket servers for SDP signaling. This system bypasses that by using high-frequency AJAX polling through standard PHP and MySQL, dropping old signals every 30 seconds to keep the database hyper-light.
// main.js - Processing SDP Offers without WebSockets
if (signal.tipo === 'oferta' && myPiece === 'O') {
initializePeer();
await peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp));
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
sendSignal({tipo:'resposta', sdp: answer}); // Sends back via PHP
}
C. Security: CSPRNG Session Tokens (login.php)
Instead of relying on fragile cookies, the game issues a Cryptographically Secure Pseudo-Random Number Generator (CSPRNG) token stored in the user's LocalStorage. This prevents session hijacking.
// login.php - Generating impenetrable tokens
$token = bin2hex(random_bytes(32));
$stmtUpdate = $pdo->prepare("UPDATE users SET session_token = ? WHERE id = ?");
$stmtUpdate->execute([$token, $user['id']]);
Every subsequent request to server.php verifies this exact token against the database before executing any action.
6. Customization & Localization
Translating the Game
The entire interface is translation-ready. Open lang.js and simply modify the string values inside the LANG constant object. The system will automatically apply these changes to the UI.
const LANG = {
documentTitle: "Tic-Tac-Toe Pro Ultimate",
loginBtn: "LOGIN NOW",
arenaBtn: "ENTER THE ARENA",
// ... modify any string here
};
Changing Theme Colors
Open style.css. At the very top, you will find the CSS root variables. Edit these HEX codes to rebrand the application instantly without touching the core code.
:root {
--bg-dark: #1a1a24;
--bg-light: #3a3a4f;
--primary: #670185; /* Main Button Color */
--success: #28a745;
}
7. Support & Contact
If you encounter any bugs, database structural issues, or require assistance setting up your environment, please reach out directly via email. When requesting support, kindly provide:
- Your PHP version.
- A link to your live installation.
- Screenshots of any errors in the browser console (F12).
* Please allow 24-48 hours for a response during business days.