Stats Site¶

The Stats Site is a live racing dashboard for your server. It shows player standings, track records, race history, live race data, and more — all pulling from the same database as the in-game race system.

Local (dev): http://localhost/stats/
Live: https://raycin.com/stats/ (or your domain)

Note: The local version now works even when the FiveM server is offline — it reads directly from the XAMPP MySQL database. The live race and server status sections show an offline fallback when FiveM is not running.

Pages¶

🏠 Home¶

The dashboard overview. Shows at a glance:

Top 5 Race Points — the current leaderboard leaders with points and medal icons
Top 5 Recent Records — the five most recently set track records across all tracks
Server Status — current player count, server name, map, and game type
Live Race Banner — a pulsing green banner appears at the top of every page when a race is actively in progress

The home page auto-refreshes every 30 seconds.

🖥 Servers¶

Shows the live player list for your FiveM server:

Column	Description
Player	In-game name
Ping	Current connection latency

Auto-refreshes every 30 seconds
Shows total player count and max slots
Connect button links directly to your FiveM server (opens the game)
Discord invite button (if configured in config.js)

🗺 Tracks¶

Full browsable track library. Every published track appears here.

Track card shows: - Track name, category, checkpoint count, distance, lap type (Circuit / P2P) - Best time and record holder - Play count (how many times the track has been raced) - ★ star rating (if players have rated it)

Filtering and search: 1. Search box — type any part of the track name to filter in real time 2. Category buttons — click a category pill (Custom, Street, Highway, etc.) to filter by category 3. Type filter — Circuit or P2P toggle to narrow to a track format 4. ⭐ Favourites — click the star on any track card to save it to favourites. Favourited tracks appear at the top and are remembered between visits (stored locally in your browser)

Track detail — click any track card to open the full detail view: - All-time best times table (positions 1–10 with player name, time, vehicle, and date) - GTA V map showing the track route as a line with coloured markers for start (green), end (red), and checkpoints (blue) - Three map layers: Satellite, Game, Print — toggle via the layer control - ⛶ Fullscreen button to expand the map; press Escape to close

🚗 Cars¶

Shows a bar chart of the most used vehicles across all recorded track records. Each bar represents one vehicle model, sorted by how many track records it appears in.

Click any bar to filter the records table below to that vehicle only
Useful for seeing which cars dominate the server's records

⏱ Lap Times¶

The full track records leaderboard — every position-1 best time across every track.

Filters: - Track — type to filter by track name - Player — type to filter by player name - Vehicle — type to filter by vehicle model

Columns: Track · Category · Record Holder · Time · Vehicle · Date set

🔴 Live Race¶

Real-time display of the currently active race. Polls the server every 10 seconds.

When a race is running you see: - Track name and race status badge (Racing / Loading / Ending) - Driver table: Position · Name · Lap · Checkpoint · Best Lap · Status (Finished / DNF)

When no race is running: "No race currently active" message.

Note: This page requires FiveM to be running — live race data lives in memory on the FiveM server and cannot be stored in the database.

📋 Race History¶

A log of every completed race finish recorded by the system.

Filters: - Player name — show races for a specific player - Date range — From and To date pickers - Limit — 25 / 50 / 100 / 200 results

Columns: Date · Track · Player · Position · Finish Time · Best Lap · Vehicle · RP Earned

🏆 Players¶

Searchable player leaderboard.

Column	Description
#	Current rank
Player	Name (click to open profile)
Race Points	Total RP earned all-time
ELO	Competitive rating (starts at 1000)
Season Points	Points in the current season
Races Hosted	Number of races this player has created

Type in the search box to filter by name in real time.

👤 Player Profile¶

Click any player name from the Players page or Head to Head to open their profile.

Shows: - Stats card — Race Points, ELO, Season Points, Races Hosted, number of wins (Position 1 finishes), podiums (Top 3), win rate - Recent Race History — last 30 races with track name, position, finish time, best lap, vehicle, RP, and date

URL format: /stats/#/player?name=PlayerName — shareable link.

📊 Track Records¶

All track records in one table — one row per track showing the all-time fastest time, who holds it, the vehicle, and date.

Search: filter by track name or player name.

Click a track name to jump to that track's full detail page (same as clicking from the Tracks page).

⚔ Head to Head¶

Compare two players directly.

Type the first player name → click Search
Type the second player name → click Search
Click Compare

The comparison shows: - Stats table — Race Points, ELO, Season Points, Wins, Podiums, Win Rate side by side - Shared tracks table — every track where both players have a recorded time, with their times shown side by side. The faster time is highlighted green.

📖 Guide¶

In-app documentation page (the Stats site's own quick help section, not this help system).

Admin & Settings¶

The Stats site has no admin panel and no login page. There are no user accounts. All configuration is done by editing one file directly on the server.

Configuration file¶

File: C:\xampp\htdocs\stats\config.js

Open this file in any text editor, change the values you need, and save. The page picks up the changes on next refresh — no restart needed.

window.CR = {
    serverName: 'Raycin - Random Racing UK',
    discordUrl: '',
    vehicleDbUrl: 'https://raycin.com/raycin-gta-vehicles-database/',
    connectUrl:  'fivem://connect/localhost:30110',
    // These are set automatically — do not edit:
    apiBase:  ...,
    apiToken: '',
    fivemHost: ...,
    fivemPort: 30120,
};

What each setting does¶

Setting	Default	What it changes
`serverName`	`'Raycin - Random Racing UK'`	The name shown in the sidebar header and the browser tab title
`discordUrl`	`''`	Discord invite link. A Discord button appears in the sidebar when this is set. Leave as `''` to hide it
`vehicleDbUrl`	`'https://raycin.com/...'`	URL linked from the Cars page — points players to your vehicle database
`connectUrl`	`'fivem://connect/...'`	The Connect button on the Servers page. Clicking it opens FiveM and joins your server directly

Examples¶

Change the server name:

serverName: 'My Racing Server',

Add a Discord invite button:

discordUrl: 'https://discord.gg/your-invite-code',

Point the Connect button to your live server IP:

connectUrl: 'fivem://connect/88.198.96.34:30110',

Settings that update automatically¶

These are set by the auto-detect logic — do not edit them manually:

Setting	Local value	Live value
`apiBase`	`http://localhost/stats/local-api.php`	`https://raycin.com/stats/api-proxy.php`
`apiToken`	`''`	`''` (token is injected server-side)
`fivemHost`	`localhost`	`88.198.96.34`
`fivemPort`	`30120`	`30120`

If you change your FiveM server's public IP, update the _fivemIp constant at the top of config.js — everything else updates from it automatically.

How the API works¶

Environment	Data source	Works offline?
localhost	`local-api.php` → XAMPP MySQL	✅ Yes
raycin.com	`api-proxy.php` → FiveM HTTP API	❌ Requires FiveM online

The local PHP backend queries your XAMPP MySQL database directly, so all stats pages work even when the FiveM server is not running. Only Live Race and Server Status need FiveM running — they try it and show an offline fallback if unavailable.

WordPress Integration¶

The Stats site can be embedded inside your WordPress site so it inherits your theme's header and footer.

Steps¶

Configure the wrapper path
Open C:\xampp\htdocs\stats\wrapper-config.php and set the path to your WordPress installation:

define('CR_WP_LOAD', '/var/www/html/wp-load.php');
// Local XAMPP example:
// define('CR_WP_LOAD', 'C:/xampp/htdocs/yoursite/wp-load.php');

Upload index.php and wrapper-config.php to your live server alongside the stats files
Visit index.php instead of index.html
The wrapper loads WordPress, outputs your theme's header and footer, and injects the SPA between them.
Style adjustments happen automatically
The wrapper adds a cr-stats-wrapped CSS class to <body>. The stats CSS uses this to reset WordPress theme padding, hide breadcrumbs, and match the dark background to the theme header colour.

What WordPress wrapping does¶

Outputs your theme's <head>, header, and footer
Injects the full stats SPA in the page body
Disables any membership/access-restriction plugins (IHC) on this page
Sets --header-height CSS variable so the SPA fills the correct vertical space

Impreza theme note: The CSS already handles the Impreza theme's breadcrumb bar, sidebar collapse, and header colour override. Other themes may need minor CSS additions in style.css under the body.cr-stats-wrapped selector block.

Deploying to raycin.com¶

Upload the entire stats/ folder to your web root
Set wrapper-config.php to point to your live WordPress wp-load.php
The api-proxy.php relays requests to your FiveM server at 88.198.96.34:30110 — update the FIVEM_API_BASE constant in that file if your server IP or port changes
The API_TOKEN in api-proxy.php must match Config.Api.token in raycin_races/config/config_server.lua