Enhanced Torn Racing UI: Telemetry, driver stats, advanced stats panel, history tracking, and race results export.
// ==UserScript== // @name Torn Racing Telemetry // @namespace https://www.torn.com/profiles.php?XID=2782979 // @version 3.4.2 // @description Enhanced Torn Racing UI: Telemetry, driver stats, advanced stats panel, history tracking, and race results export. // @match https://www.torn.com/page.php?sid=racing* // @match https://www.torn.com/loader.php?sid=racing* // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js // @grant GM_setValue // @grant GM_getValue // @grant GM_deleteValue // @grant GM_addStyle // @grant GM_info // @grant GM_setClipboard // @connect api.torn.com // @license MIT // ==/UserScript== (function() { 'use strict'; const ScriptInfo = { version: '3.4.2', author: "TheProgrammer", contactId: "2782979", contactUrl: function() { return `https://www.torn.com/profiles.php?XID=${this.contactId}`; }, description: "Provides enhanced telemetry, stats analysis, historical tracking, and race results export for Torn Racing.", notes: [ "v3.4.2: Thanks to @MikeyJDoug[2137820] for noticing. Fixed a critical error in the stats panel for new users or users with no official race history. The panel will now display a proper message instead of crashing.", "v3.4.1: Implemented Race ID capture for unique race identification in logs and exports. Improved User ID detection for better script initialization.", "v3.4.0: Major telemetry engine overhaul. Implemented advanced EMA smoothing for speed & acceleration, robust handling for data gaps to prevent artifacts, and a more predictive lap time estimation model for significantly improved accuracy and stability.", "Your API key and all other script data (settings, history log) are stored **locally** in your browser's userscript storage. They are **never** transmitted anywhere except to the official Torn API when fetching data.", ] }; if (window.racingCustomUITelemetryHasRun) return; window.racingCustomUITelemetryHasRun = true; // Check if we're running in Torn PDA const isPDA = typeof window.flutter_inappwebview !== 'undefined' && typeof window.flutter_inappwebview.callHandler === 'function'; // Function to load Chart.js in PDA environment async function loadChartJsInPDA() { try { if (typeof __PDA_platformReadyPromise !== 'undefined') { await __PDA_platformReadyPromise; } const chartJsUrl = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js'; const response = await window.flutter_inappwebview.callHandler("PDA_httpGet", chartJsUrl, {}); if (response && response.status === 200 && response.responseText) { await window.flutter_inappwebview.callHandler("PDA_evaluateJavascript", response.responseText); console.log("Torn Racing Telemetry: Successfully loaded Chart.js in PDA environment"); return true; } else { console.error("Torn Racing Telemetry: Failed to fetch Chart.js in PDA environment", response); return false; } } catch (error) { console.error("Torn Racing Telemetry: Error loading Chart.js in PDA environment", error); return false; } } // Load Chart.js if needed if (isPDA) { console.log("Torn Racing Telemetry: Running in Torn PDA environment"); loadChartJsInPDA().then(success => { if (!success) { console.error("Torn Racing Telemetry: Charts will not be available in PDA"); } }); } const Config = { defaults: { telemetryDisplayOptions: ['speed'], colorCode: true, animateChanges: true, speedUnit: 'mph', minUpdateInterval: 300, telemetryVisible: true, hideOriginalList: true, showLapEstimate: true, lapEstimateSmoothingFactor: 0.15, fetchApiStatsOnClick: true, historicalRaceLimit: 20, historyEnabled: true, statsPanelEnabled: true, historyCheckInterval: 15000, historyLogLimit: 10, speedSmoothingFactor: 0.7, maxAnimationDurationMs: 1000 }, data: {}, storageKey: 'racingCustomUITelemetryConfig_v3.1.3', //never change or delete this comment unless absolutely game breaking update apiKeyStorageKey: 'racingCustomUITelemetryApiKey_persistent', load() { try { this.data = {...this.defaults, ...JSON.parse(GM_getValue(this.storageKey, '{}'))}; this.data.apiKey = GM_getValue(this.apiKeyStorageKey, ''); } catch (e) { this.data = {...this.defaults}; this.data.apiKey = GM_getValue(this.apiKeyStorageKey, ''); } for (const key in this.defaults) { if (!(key in this.data)) { this.data[key] = this.defaults[key]; } } if (!('speedSmoothingFactor' in this.data)) { this.data.speedSmoothingFactor = this.defaults.speedSmoothingFactor; } if (!('maxAnimationDurationMs' in this.data)) { this.data.maxAnimationDurationMs = this.defaults.maxAnimationDurationMs; } if ('animationLerpRate' in this.data) { delete this.data.animationLerpRate; this.save(); } return this.data; }, save() { const dataToSave = { ...this.data }; delete dataToSave.apiKey; GM_setValue(this.storageKey, JSON.stringify(dataToSave)); }, get(key) { return key in this.data ? this.data[key] : this.defaults[key]; }, set(key, value) { if (key === 'apiKey') { this.data.apiKey = value; GM_setValue(this.apiKeyStorageKey, value); } else { this.data[key] = value; this.save(); } }, clearData() { const currentApiKey = GM_getValue(this.apiKeyStorageKey, ''); this.data = { ...this.defaults }; this.data.apiKey = currentApiKey; this.save(); GM_deleteValue(HistoryManager.logStorageKey); HistoryManager.loadLog(); }, clearApiKey() { this.data.apiKey = ''; GM_deleteValue(this.apiKeyStorageKey); } }; Config.load(); const State = { userId: null, previousMetrics: {}, trackInfo: { id: null, name: null, laps: 5, length: 3.4, get total() { return this.laps * this.length; } }, observers: [], lastUpdateTimes: {}, periodicCheckIntervalId: null, isUpdating: false, customUIContainer: null, originalLeaderboard: null, settingsPopupInstance: null, advancedStatsPanelInstance: null, historyPanelInstance: null, infoPanelInstance: null, downloadPopupInstance: null, trackNameMap: null, carBaseStatsMap: null, currentRaceClass: null, isInitialized: false, isRaceViewActive: false, raceFinished: false, currentRaceId: null, controlsContainer: null, lastKnownSkill: null, lastKnownClass: null, lastKnownPoints: null, historyLog: [], historyCheckIntervalId: null, isFetchingPoints: false, activeCharts: [], finalRaceData: [], resetRaceState() { document.querySelectorAll('.driver-telemetry-display').forEach(el => { if (el._animationRAF) cancelAnimationFrame(el._animationRAF); el._animationRAF = null; el._currentAnimSpeed = undefined; el._currentAnimAcc = undefined; }); this.previousMetrics = {}; this.lastUpdateTimes = {}; if (this.periodicCheckIntervalId) clearInterval(this.periodicCheckIntervalId); this.periodicCheckIntervalId = null; document.querySelectorAll('.custom-driver-item[data-stats-loaded]').forEach(el => { el.removeAttribute('data-stats-loaded'); el.querySelectorAll('.api-stat').forEach(span => span.textContent = '...'); el.querySelector('.api-stats-container')?.classList.remove('error', 'loaded', 'no-key'); }); this.destroyActiveCharts(); this.raceFinished = false; this.finalRaceData = []; this.currentRaceId = null; UI.updateControlButtonsVisibility(); }, clearPopupsAndFullReset() { this.resetRaceState(); this.settingsPopupInstance?.remove(); this.settingsPopupInstance = null; this.advancedStatsPanelInstance?.remove(); this.advancedStatsPanelInstance = null; this.historyPanelInstance?.remove(); this.historyPanelInstance = null; this.infoPanelInstance?.remove(); this.infoPanelInstance = null; this.downloadPopupInstance?.remove(); this.downloadPopupInstance = null; this.trackInfo = { id: null, name: null, laps: 5, length: 3.4, get total() { return this.laps * this.length; } }; this.currentRaceClass = null; this.trackNameMap = null; this.carBaseStatsMap = null; this.isInitialized = false; this.controlsContainer = null; this.customUIContainer = null; if (this.historyCheckIntervalId) clearInterval(this.historyCheckIntervalId); this.historyCheckIntervalId = null; this.lastKnownSkill = null; this.lastKnownClass = null; this.lastKnownPoints = null; this.historyLog = []; this.isFetchingPoints = false; this.destroyActiveCharts(); this.raceFinished = false; this.finalRaceData = []; this.currentRaceId = null; }, destroyActiveCharts() { this.activeCharts.forEach(chart => { if (chart && typeof chart.destroy === 'function') { try { chart.destroy(); } catch (e) {} } }); this.activeCharts = []; } }; GM_addStyle(` :root { --text-color: #e0e0e0; --background-dark: #1a1a1a; --background-light: #2a2a2a; --border-color: #404040; --accent-color: #64B5F6; --primary-color: #4CAF50; --telemetry-default-color: rgb(136, 136, 136); --telemetry-accel-color: rgb(76, 175, 80); --telemetry-decel-color: rgb(244, 67, 54); --details-bg: #2f2f2f; --self-highlight-bg: #2a3a2a; --self-highlight-border: #4CAF50; --api-loading-color: #aaa; --api-error-color: #ff8a80; --api-info-color: #64B5F6; --table-header-bg: #333; --table-row-alt-bg: #222; --history-color: #FFC107; --danger-color: #f44336; --danger-hover-color: #d32f2f; --info-color: #2196F3; --download-color: #9C27B0;} #custom-driver-list-container { display: none; } #drivers-scrollbar { display: block !important; } #telemetryControlsContainer { display: flex; } body.hide-original-leaderboard #drivers-scrollbar { display: none !important; } body.hide-original-leaderboard #custom-driver-list-container { display: block; } #custom-driver-list-container { margin-top: 10px; border: 1px solid var(--border-color); border-radius: 5px; background-color: var(--background-dark); color: var(--text-color); padding: 0; max-height: 450px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #555 var(--background-dark); position: relative; } #custom-driver-list-container::-webkit-scrollbar { width: 8px; } #custom-driver-list-container::-webkit-scrollbar-track { background: var(--background-dark); border-radius: 4px; } #custom-driver-list-container::-webkit-scrollbar-thumb { background-color: #555; border-radius: 4px; border: 2px solid var(--background-dark); } .custom-driver-item { display: flex; padding: 6px 8px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s ease; position: relative; flex-direction: column; align-items: stretch; } .driver-info-row { display: flex; align-items: center; width: 100%; } .custom-driver-item:last-child { border-bottom: none; } .custom-driver-item:hover { background-color: var(--background-light); } .custom-driver-item.is-self { background-color: var(--self-highlight-bg); border-left: 3px solid var(--self-highlight-border); padding-left: 5px; } .custom-driver-item.is-self:hover { background-color: #3a4a3a; } .driver-color-indicator { width: 10px; height: 20px; margin-right: 8px; border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 9px; font-weight: bold; line-height: 1; overflow: hidden; text-shadow: 0 0 2px rgba(0,0,0,0.7); } .driver-car-img { width: 38px; height: 19px; margin-right: 8px; object-fit: contain; flex-shrink: 0; } .driver-name { flex-grow: 1; font-weight: bold; margin-right: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 100px; } .driver-name .self-tag { color: #90EE90; font-weight: normal; margin-left: 4px; } .driver-telemetry-display { font-size: 0.85em; color: var(--telemetry-default-color); margin-left: auto; flex-shrink: 0; padding: 2px 6px; background: rgba(0,0,0,0.2); border-radius: 3px; white-space: nowrap; min-width: 70px; text-align: right; transition: color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease; opacity: 1; } .driver-telemetry-display .lap-estimate { font-size: 0.9em; opacity: 0.7; margin-left: 4px; } body.telemetry-hidden .driver-telemetry-display { opacity: 0; pointer-events: none; min-width: 0; padding: 0; } .driver-details { width: 100%; background-color: var(--details-bg); margin-top: 6px; padding: 0 10px; box-sizing: border-box; max-height: 0; opacity: 0; overflow: hidden; border-radius: 4px; color: #bbb; font-size: 0.9em; transition: max-height 0.4s ease-out, opacity 0.3s ease-in, padding-top 0.4s ease-out, padding-bottom 0.4s ease-out, margin-top 0.4s ease-out; } .driver-details p { margin: 5px 0; line-height: 1.4; } .driver-details strong { color: #ddd; } .driver-details a { color: var(--accent-color); text-decoration: none; } .driver-details a:hover { text-decoration: underline; } .custom-driver-item.details-visible .driver-details { max-height: 350px; opacity: 1; padding-top: 8px; padding-bottom: 8px; margin-top: 6px; } .api-stats-container { border-top: 1px dashed var(--border-color); margin-top: 8px; padding-top: 8px; } .api-stats-container.loading .api-stat { color: var(--api-loading-color); font-style: italic; } .api-stats-container.error .api-stat-error-msg, .api-stats-container.no-key .api-stat-error-msg { color: var(--api-error-color); display: block; font-style: italic; } .api-stats-container.no-key .api-stat-error-msg { color: var(--api-info-color); } .api-stat-error-msg { display: none; } .api-stats-container p { margin: 3px 0; } .api-stat { font-weight: bold; color: var(--text-color); } #telemetryControlsContainer { margin: 10px 0 5px 0; justify-content: flex-end; gap: 5px; } .telemetry-download-button, .telemetry-info-button, .telemetry-history-button, .telemetry-stats-button, .telemetry-settings-button { background: var(--background-light); color: var(--text-color); border: 1px solid var(--border-color); padding: 6px 12px; text-align: center; cursor: pointer; transition: all 0.2s ease; font-size: 13px; border-radius: 4px; display: inline-block; } .telemetry-info-button:hover, .telemetry-history-button:hover, .telemetry-stats-button:hover, .telemetry-settings-button:hover, .telemetry-download-button:hover { background-color: var(--accent-color); color: var(--background-dark); } .telemetry-history-button:hover { background-color: var(--history-color); color: var(--background-dark); } .telemetry-info-button:hover { background-color: var(--info-color); color: var(--background-dark); } .telemetry-download-button:hover { background-color: var(--download-color); color: white; } .telemetry-download-button { display: none; } .settings-popup, .stats-panel, .history-panel, .info-panel, .download-popup { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; backdrop-filter: blur(3px); } .stats-panel, .history-panel, .info-panel, .download-popup { z-index: 1010; scrollbar-width: thin; scrollbar-color: #555 var(--background-dark); } .settings-popup-content, .stats-panel-content, .history-panel-content, .info-panel-content, .download-popup-content { background: var(--background-dark); border-radius: 10px; border: 1px solid var(--border-color); width: 90%; max-height: 90vh; overflow-y: auto; padding: 20px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); } .settings-popup-content { max-width: 500px; } .stats-panel-content { max-width: 800px; } .history-panel-content { max-width: 750px; } .info-panel-content { max-width: 600px; } .download-popup-content { max-width: 450px; } .settings-title, .stats-title, .history-title, .info-title, .download-title { font-size: 20px; font-weight: bold; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .settings-title { color: var(--primary-color); } .stats-title { color: var(--accent-color); } .history-title { color: var(--history-color); } .info-title { color: var(--info-color); } .download-title { color: var(--download-color); } .settings-close, .stats-close, .history-close, .info-close, .download-close { background: var(--background-light); color: var(--text-color); border: none; border-radius: 4px; padding: 8px 15px; cursor: pointer; transition: all 0.2s ease; } .settings-close:hover, .stats-close:hover, .history-close:hover, .info-close:hover, .download-close:hover { background: var(--accent-color); color: var(--background-dark); } .history-panel .panel-actions { display: flex; justify-content: flex-end; margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--border-color); } .history-clear-button { background: var(--danger-color); color: white; border: none; border-radius: 4px; padding: 8px 15px; cursor: pointer; transition: background-color 0.2s ease; font-size: 0.9em; } .history-clear-button:hover { background: var(--danger-hover-color); } .settings-content, .stats-content, .history-content, .info-content, .download-content { padding-top: 10px; } .stats-content, .history-content, .info-content, .download-content { font-size: 0.9em; } .download-content .download-options { display: flex; flex-direction: column; gap: 15px; } .download-content .format-group, .download-content .action-group { display: flex; align-items: center; gap: 10px; } .download-content label { font-weight: bold; min-width: 60px; } .download-content select { padding: 8px; background: var(--background-light); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-color); flex-grow: 1;} .download-content button { background: var(--background-light); color: var(--text-color); border: 1px solid var(--border-color); padding: 8px 15px; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .download-content button:hover { background: var(--accent-color); color: var(--background-dark); } .download-content button.primary { background: var(--download-color); color: white; } .download-content button.primary:hover { background: #7B1FA2; } .info-content h3 { color: var(--primary-color); margin-top: 20px; margin-bottom: 10px; font-size: 1.1em;} .info-content p, .info-content ul { margin-bottom: 10px; line-height: 1.5; color: var(--text-color); } .info-content ul { list-style: disc; padding-left: 25px; } .info-content li { margin-bottom: 5px; } .info-content a { color: var(--accent-color); } .info-content a:hover { text-decoration: underline; } .stats-content h3, .history-content h3 { color: var(--primary-color); margin-top: 20px; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dashed var(--border-color); font-size: 1.2em; } .stats-content h3:first-child, .history-content h3:first-child { margin-top: 0; } .stats-content h4 { color: var(--accent-color); margin-top: 15px; margin-bottom: 8px; font-size: 1.1em; } .stats-content p { margin: 5px 0 10px 0; line-height: 1.5; color: #ccc; } .stats-content strong { color: var(--text-color); } .stats-content .loading-msg, .stats-content .error-msg, .stats-content .info-msg { padding: 10px; border-radius: 4px; margin: 15px 0; text-align: center; } .stats-content .loading-msg { background-color: rgba(170, 170, 170, 0.2); color: var(--api-loading-color); } .stats-content .error-msg { background-color: rgba(255, 138, 128, 0.2); color: var(--api-error-color); } .stats-content .info-msg { background-color: rgba(100, 181, 246, 0.2); color: var(--api-info-color); } .stats-content table { width: 100%; border-collapse: collapse; margin-top: 10px; margin-bottom: 20px; font-size: 0.95em; } .stats-content th, .stats-content td { border: 1px solid var(--border-color); padding: 6px 8px; text-align: left; } .stats-content th { background-color: var(--table-header-bg); font-weight: bold; color: var(--text-color); } .stats-content tr:nth-child(even) { background-color: var(--table-row-alt-bg); } .stats-content td.numeric, .stats-content th.numeric { text-align: right; } .stats-content .stat-label { color: #bbb; } .stats-content .stat-value { font-weight: bold; color: var(--text-color); } .stats-content .car-stats-inline { font-size: 0.8em; color: #aaa; } .stats-content .car-stats-inline strong { color: #bbb; } .stats-content .user-car-highlight { background-color: rgba(76, 175, 80, 0.15); } .stats-content a { color: var(--accent-color); text-decoration: none; } .stats-content a:hover { text-decoration: underline; } .stats-content td { color: var(--text-color); padding: 2px !important; } .stats-chart-container, .history-chart-container { margin: 20px 0; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; background-color: var(--background-light); min-height: 250px; position: relative;} .history-content table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.95em; } .history-content th, .history-content td { border: 1px solid var(--border-color); padding: 5px 8px; text-align: left; color: var(--text-color); } .history-content th { background-color: var(--table-header-bg); font-weight: bold; } .history-content tr:nth-child(even) { background-color: var(--table-row-alt-bg); } .history-content td.numeric, .history-content th.numeric { text-align: right; } .history-content .no-history-msg { padding: 15px; text-align: center; color: #aaa; font-style: italic; } .history-content .change-indicator { margin-left: 5px; font-weight: bold; font-size: 0.9em; } .history-content .change-positive { color: #81C784; } .history-content .change-negative { color: #E57373; } .history-content .change-neutral { color: #90A4AE; } .settings-item { margin-bottom: 15px; display: flex; flex-direction: column; } .settings-item label:not(.switch) { margin-bottom: 8px; color: var(--text-color); font-weight: bold; display: block; } .settings-item .telemetry-options-group { display: flex; flex-direction: column; gap: 10px; margin-top: 5px; border: 1px solid var(--border-color); border-radius: 4px; padding: 10px; background: var(--background-light);} .settings-item .telemetry-options-group .toggle-container { margin-bottom: 0; } .settings-item select, .settings-item input[type=number], .settings-item input[type=text], .settings-item input[type=password] { padding: 8px; background: var(--background-light); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-color); width: 100%; box-sizing: border-box; } .settings-item input[type=password] { font-family: monospace; } .toggle-container { padding: 0; display: flex; align-items: center; justify-content: space-between; background: none; border: none; } .toggle-container label:first-child { margin-bottom: 0; } .settings-buttons { display: flex; justify-content: space-between; margin-top: 25px; padding-top: 15px; border-top: 1px solid var(--border-color); gap: 10px; flex-wrap: wrap; } .settings-btn { padding: 10px 15px; border-radius: 4px; border: none; cursor: pointer; background: var(--background-light); color: var(--text-color); transition: all 0.2s ease; flex-grow: 1; } .settings-btn:hover { background: var(--accent-color); color: var(--background-dark); } .settings-btn.primary { background: var(--primary-color); color: white; } .settings-btn.primary:hover { background: #388E3C; } .settings-btn.danger { background-color: var(--danger-color); color: white; } .settings-btn.danger:hover { background-color: var(--danger-hover-color); } .settings-data-buttons { display: flex; gap: 10px; width: 100%; margin-top: 10px; } .switch { position: relative; display: inline-block; width: 45px; height: 24px; flex-shrink: 0;} .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4d4d4d; transition: .3s; border-radius: 12px; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 2px; background-color: #f4f4f4; transition: .3s; border-radius: 50%; } input:checked + .slider { background-color: var(--primary-color); } input:checked + .slider:before { transform: translateX(21px); } .api-tos-container { margin-top: 10px; margin-bottom: 15px; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 4px; font-size: 0.85em; color: #ccc; line-height: 1.4; border: 1px solid var(--border-color); } .api-tos-container p { margin: 0 0 8px 0; } .api-tos-container details { margin-top: 10px; } .api-tos-container summary { cursor: pointer; font-weight: bold; color: var(--text-color); } .api-tos-container table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95em; } .api-tos-container th, .api-tos-container td { border: 1px solid var(--border-color); padding: 5px; text-align: left; vertical-align: top; } .api-tos-container th { background-color: var(--table-header-bg); } .api-tos-container td { color: var(--text-color); } .api-tos-container code { background: var(--background-light); padding: 2px 4px; border-radius: 3px; font-family: monospace; } .color-1 { background-color: #DC143C; } .color-2 { background-color: #4682B4; } .color-3 { background-color: #32CD32; } .color-4 { background-color: #FFD700; } .color-5 { background-color: #FF8C00; } .color-6 { background-color: #9932CC; } .color-7 { background-color: #00CED1; } .color-8 { background-color: #FF1493; } .color-9 { background-color: #8B4513; } .color-10 { background-color: #7FFF00; } .color-11 { background-color: #00FA9A; } .color-12 { background-color: #D2691E; } .color-13 { background-color: #6495ED; } .color-14 { background-color: #F08080; } .color-15 { background-color: #20B2AA; } .color-16 { background-color: #B0C4DE; } .color-17 { background-color: #DA70D6; } .color-18 { background-color: #FF6347; } .color-19 { background-color: #40E0D0; } .color-20 { background-color: #C71585; } .color-21 { background-color: #6A5ACD; } .color-22 { background-color: #FA8072; } .color-default { background-color: #666; } @media (max-width: 768px) { .custom-driver-item { padding: 5px; } .driver-info-row { margin-bottom: 4px; } .driver-name { min-width: 80px; } .driver-telemetry-display { font-size: 0.8em; min-width: 60px; margin-left: 5px; padding: 1px 4px;} .driver-details { font-size: 0.85em; } #custom-driver-list-container { max-height: 350px; } .telemetry-download-button, .telemetry-info-button, .telemetry-history-button, .telemetry-stats-button, .telemetry-settings-button { font-size: 12px; padding: 5px 10px; } .settings-popup-content, .stats-panel-content, .history-panel-content, .info-panel-content, .download-popup-content { width: 95%; padding: 15px; } .settings-title, .stats-title, .history-title, .info-title, .download-title { font-size: 18px; } .settings-btn { padding: 8px 12px; font-size: 14px; } .custom-driver-item.details-visible .driver-details { max-height: 320px; } .stats-content table { font-size: 0.9em; } .stats-content th, .stats-content td { padding: 4px 6px; } .history-content table { font-size: 0.9em; } .history-content th, .history-content td { padding: 4px 6px; } } @media (max-width: 480px) { .driver-name { min-width: 60px; } .driver-telemetry-display { min-width: 55px; font-size: 0.75em; } .stats-content table { font-size: 0.85em; } .stats-content th, .stats-content td { padding: 3px 4px; } .history-content table { font-size: 0.85em; } .history-content th, .history-content td { padding: 3px 4px; } .settings-buttons { flex-direction: column; } .settings-data-buttons { flex-direction: column; } } `); const Utils = { convertSpeed(speed, unit) { return unit === 'kmh' ? speed * 1.60934 : speed; }, formatTime(seconds, showMs = false) { if (isNaN(seconds) || seconds < 0 || !isFinite(seconds)) return '--:--' + (showMs ? '.---' : ''); const min = Math.floor(seconds / 60); const sec = Math.floor(seconds % 60); const ms = showMs ? '.' + (seconds % 1).toFixed(3).substring(2) : ''; return `${min}:${sec < 10 ? '0' : ''}${sec}${ms}`; }, formatDate(timestamp, includeTime = false) { if (!timestamp || timestamp <= 0) return 'N/A'; try { const date = new Date(timestamp); const dateString = date.toISOString().split('T')[0]; if (includeTime) { const timeString = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }); return `${dateString} ${timeString}`; } return dateString; } catch (e) { return 'N/A'; } }, isApiKeyAvailable() { const apiKey = Config.get('apiKey'); if (!apiKey) return false; if (apiKey.trim() !== '###PDA-APIKEY###') return true; return isPDA; }, parseTime(timeString) { if (!timeString?.includes(':')) return 0; const parts = timeString.split(':'); if (parts.length === 2) { return (parseInt(parts[0], 10) || 0) * 60 + (parseFloat(parts[1]) || 0); } return 0; }, parseProgress(text) { const match = text?.match(/(\d+\.?\d*)%/); return match ? parseFloat(match[1]) : 0; }, makeAbsoluteUrl(url) { if (!url || url.startsWith('http') || url.startsWith('data:')) return url; if (url.startsWith('//')) return `${window.location.protocol}${url}`; if (url.startsWith('/')) return `${window.location.protocol}//${window.location.host}${url}`; const base = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')); return `${window.location.protocol}//${window.location.host}${base}/${url}`; }, showNotification(message, type = 'info') { const notif = document.createElement('div'); notif.style.cssText = `position: fixed; bottom: 20px; right: 20px; background: ${type === 'error' ? '#f44336' : type === 'success' ? '#4CAF50' : '#2196F3'}; color: white; padding: 12px 20px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); z-index: 9999; font-size: 14px; opacity: 0; transition: opacity 0.3s ease-in-out;`; notif.textContent = message; document.body.appendChild(notif); setTimeout(() => notif.style.opacity = '1', 10); setTimeout(() => { notif.style.opacity = '0'; setTimeout(() => notif.remove(), 300); }, 3000); }, createChart(ctx, config) { if (!ctx || typeof Chart === 'undefined') return null; try { Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim(); const chart = new Chart(ctx, config); State.activeCharts.push(chart); return chart; } catch(e) { return null; } }, escapeCSVField(field) { if (field === null || field === undefined) { return ''; } const stringField = String(field); if (stringField.includes(',') || stringField.includes('"') || stringField.includes('\n')) { return `"${stringField.replace(/"/g, '""')}"`; } return stringField; } }; const Telemetry = { easeInOutQuad(t) { return t < 0.5 ? 2*t*t : -1+(4-2*t)*t; }, interpolateColor(color1, color2, factor) { const result = color1.map((c, i) => Math.round(c + factor * (color2[i] - c))); return `rgb(${result[0]}, ${result[1]}, ${result[2]})`; }, getTelemetryColor(acceleration) { const grey = [136, 136, 136]; const green = [76, 175, 80]; const red = [244, 67, 54]; const defaultColor = getComputedStyle(document.documentElement).getPropertyValue('--telemetry-default-color').match(/\d+/g)?.map(Number) || grey; const accelColor = getComputedStyle(document.documentElement).getPropertyValue('--telemetry-accel-color').match(/\d+/g)?.map(Number) || green; const decelColor = getComputedStyle(document.documentElement).getPropertyValue('--telemetry-decel-color').match(/\d+/g)?.map(Number) || red; if (!Config.get('colorCode')) return `rgb(${defaultColor.join(', ')})`; const maxAcc = 1.0; let factor = Math.min(Math.abs(acceleration) / maxAcc, 1); factor = isNaN(factor) ? 0 : factor; if (acceleration > 0.05) return this.interpolateColor(defaultColor, accelColor, factor); if (acceleration < -0.05) return this.interpolateColor(defaultColor, decelColor, factor); return `rgb(${defaultColor.join(', ')})`; }, ema(current, prev, alpha) { if (prev === null || typeof prev === 'undefined' || !isFinite(prev)) return current; return alpha * current + (1 - alpha) * prev; }, calculateDriverMetrics(driverId, progressPercentage, timestamp) { const prev = State.previousMetrics[driverId] || { progress: 0, time: timestamp - Config.get('minUpdateInterval'), lastProgressValueAtChange: 0, lastProgressChangeTimestamp: timestamp - Config.get('minUpdateInterval'), reportedSpeed: 0, acceleration: 0, lastDisplayedSpeed: 0, lastDisplayedAcceleration: 0, firstUpdate: true, currentLap: 1, progressInLap: 0, rawLapEstimate: null, smoothedLapEstimate: null, statusClass: 'ready', raceStartTime: timestamp, totalTimeElapsed: 0, totalDistanceTraveled: 0, wasStale: false }; const minDt = Config.get('minUpdateInterval') / 1000; const dtSinceLastUpdate = (timestamp - prev.time) / 1000; const staleThresholdMs = 1500; if (prev.firstUpdate) { const totalLaps = State.trackInfo.laps || 1; const percentPerLap = 100 / totalLaps; const currentLap = Math.min(totalLaps, Math.floor(progressPercentage / percentPerLap) + 1); const startPercentOfLap = (currentLap - 1) * percentPerLap; const progressInLap = percentPerLap > 0 ? Math.max(0, Math.min(100, ((progressPercentage - startPercentOfLap) / percentPerLap) * 100)) : 0; State.previousMetrics[driverId] = { ...prev, progress: progressPercentage, time: timestamp, lastProgressValueAtChange: progressPercentage, lastProgressChangeTimestamp: timestamp, reportedSpeed: 0, acceleration: 0, lastDisplayedSpeed: 0, lastDisplayedAcceleration: 0, firstUpdate: false, currentLap: currentLap, progressInLap: progressInLap, raceStartTime: timestamp, wasStale: false }; return { speed: 0, acceleration: 0, timeDelta: dtSinceLastUpdate * 1000, noUpdate: true }; } // REVISED: Stale data handling. If no update for a while, decay speed. if (dtSinceLastUpdate * 1000 > staleThresholdMs) { const decayFactor = 0.85; const decayedSpeed = prev.reportedSpeed * decayFactor; const gentleDeceleration = -0.5; prev.time = timestamp; prev.reportedSpeed = decayedSpeed; prev.acceleration = this.ema(gentleDeceleration, prev.acceleration, 0.1); prev.wasStale = true; return { speed: prev.reportedSpeed, acceleration: prev.acceleration, timeDelta: dtSinceLastUpdate * 1000, noUpdate: false }; } if (dtSinceLastUpdate < minDt) { return { speed: prev.reportedSpeed, acceleration: prev.acceleration, timeDelta: dtSinceLastUpdate * 1000, noUpdate: true }; } let currentSpeed = prev.reportedSpeed; let calculatedSpeedThisTick = false; const epsilon = 0.001; const progressChanged = Math.abs(progressPercentage - prev.lastProgressValueAtChange) > epsilon; let distanceDelta = 0; if (progressChanged) { const dtSinceChange = (timestamp - prev.lastProgressChangeTimestamp) / 1000; const progressDeltaSinceChange = progressPercentage - prev.lastProgressValueAtChange; if (dtSinceChange > 0 && progressDeltaSinceChange > 0) { distanceDelta = State.trackInfo.total * (progressDeltaSinceChange / 100); const rawSpeedMph = (distanceDelta / dtSinceChange) * 3600; // REVISED: Use explicit EMA with faster catch-up after stale period let speedAlpha = 1.0 - Config.get('speedSmoothingFactor'); if (prev.wasStale) speedAlpha = Math.min(0.9, speedAlpha * 2); currentSpeed = this.ema(rawSpeedMph, prev.reportedSpeed, speedAlpha); calculatedSpeedThisTick = true; prev.lastProgressValueAtChange = progressPercentage; prev.lastProgressChangeTimestamp = timestamp; } else { currentSpeed = prev.reportedSpeed * Math.max(0.1, 1.0 - (dtSinceChange * 0.5)); } } currentSpeed = Math.max(0, currentSpeed); const speedDeltaMps = (currentSpeed - prev.reportedSpeed) * 0.44704; const rawAcceleration = (dtSinceLastUpdate <= 0) ? 0 : (speedDeltaMps / dtSinceLastUpdate) / 9.81; // REVISED: Dual-stage smoothing. Apply a separate, gentle EMA to acceleration. const accelAlpha = 0.25; // More smoothing for acceleration let smoothedAcceleration = this.ema(rawAcceleration, prev.acceleration, accelAlpha); smoothedAcceleration = Math.max(-3.0, Math.min(3.0, smoothedAcceleration)); // Clamp to realistic values const totalLaps = State.trackInfo.laps || 1; const percentPerLap = 100 / totalLaps; const currentLap = Math.min(totalLaps, Math.floor(progressPercentage / percentPerLap) + 1); const startPercentOfLap = (currentLap - 1) * percentPerLap; const progressInLap = percentPerLap > 0 ? Math.max(0, Math.min(100, ((progressPercentage - startPercentOfLap) / percentPerLap) * 100)) : 0; const totalTimeElapsed = (timestamp - prev.raceStartTime) / 1000; const totalDistanceTraveled = (prev.totalDistanceTraveled || 0) + distanceDelta; State.previousMetrics[driverId] = { ...prev, progress: progressPercentage, time: timestamp, reportedSpeed: currentSpeed, acceleration: smoothedAcceleration, lastDisplayedSpeed: currentSpeed, lastDisplayedAcceleration: smoothedAcceleration, currentLap, progressInLap, totalTimeElapsed, totalDistanceTraveled, wasStale: false }; return { speed: currentSpeed, acceleration: smoothedAcceleration, timeDelta: dtSinceLastUpdate * 1000, noUpdate: !calculatedSpeedThisTick }; }, calculateSmoothedLapEstimate(driverId, metrics) { const driverState = State.previousMetrics[driverId]; if (!driverState || (driverState.totalTimeElapsed || 0) < 5) return null; // REVISED: Use average race speed for a more stable prediction base let baseSpeed = metrics.speed; if (driverState.totalTimeElapsed > 0 && driverState.totalDistanceTraveled > 0) { const avgRaceSpeed = (driverState.totalDistanceTraveled / driverState.totalTimeElapsed) * 3600; if (avgRaceSpeed > 10) baseSpeed = avgRaceSpeed; // Use average if it's plausible } if (baseSpeed <= 1) return null; const lapLength = State.trackInfo.length || 0; if (lapLength <= 0) return null; const remainingProgressInLap = 100 - driverState.progressInLap; const remainingDistance = lapLength * (remainingProgressInLap / 100); const rawEstimate = (remainingDistance / baseSpeed) * 3600; driverState.rawLapEstimate = rawEstimate; const alpha = Config.get('lapEstimateSmoothingFactor'); let smoothedEstimate = this.ema(rawEstimate, driverState.smoothedLapEstimate, alpha); if (smoothedEstimate > 3600 || smoothedEstimate < 0 || !isFinite(smoothedEstimate)) { smoothedEstimate = driverState.smoothedLapEstimate ?? rawEstimate; } driverState.smoothedLapEstimate = smoothedEstimate; return smoothedEstimate; }, animateTelemetry(element, fromSpeed, toSpeed, fromAcc, toAcc, duration, displayMode, speedUnit, extraText) { let startTime = null; const easeFunction = this.easeInOutQuad; const getColor = this.getTelemetryColor.bind(this); fromSpeed = Number(fromSpeed) || 0; toSpeed = Number(toSpeed) || 0; fromAcc = Number(fromAcc) || 0; toAcc = Number(toAcc) || 0; duration = Math.max(Config.get('minUpdateInterval'), Math.min(Number(duration) || Config.get('minUpdateInterval'), Config.get('maxAnimationDurationMs'))); function step(timestamp) { if (!startTime) startTime = timestamp; let linearProgress = Math.min((timestamp - startTime) / duration, 1); if (isNaN(linearProgress) || duration <= 0) linearProgress = 1; let progress = easeFunction(linearProgress); let currentSpeed = fromSpeed + (toSpeed - fromSpeed) * progress; let currentAcc = fromAcc + (toAcc - fromAcc) * progress; element._currentAnimSpeed = currentSpeed; element._currentAnimAcc = currentAcc; let color = Config.get('colorCode') ? getColor(currentAcc) : 'var(--telemetry-default-color)'; let text = ''; if (displayMode === 'speed') { text = `${Math.round(currentSpeed)} ${speedUnit}`; } else if (displayMode === 'acceleration') { text = `${currentAcc.toFixed(1)} g`; } else if (displayMode === 'both') { text = `${Math.round(currentSpeed)} ${speedUnit} | ${currentAcc.toFixed(1)} g`; } element.innerHTML = text + extraText; element.style.color = color; if (linearProgress < 1) { element._animationRAF = requestAnimationFrame(step); } else { element._animationRAF = null; let finalSpeedText = `${Math.round(toSpeed)} ${speedUnit}`; let finalAccelText = `${toAcc.toFixed(1)} g`; let finalText = ''; if (displayMode === 'speed') { finalText = finalSpeedText; } else if (displayMode === 'acceleration') { finalText = finalAccelText; } else if (displayMode === 'both') { finalText = `${finalSpeedText} | ${finalAccelText}`; } element.innerHTML = finalText + extraText; element.style.color = Config.get('colorCode') ? getColor(toAcc) : 'var(--telemetry-default-color)'; element._currentAnimSpeed = undefined; element._currentAnimAcc = undefined; } } if (element._animationRAF) { cancelAnimationFrame(element._animationRAF); } element._animationRAF = requestAnimationFrame(step); }, }; const UI = { createSettingsPopup() { if (State.settingsPopupInstance) State.settingsPopupInstance.remove(); const popup = document.createElement('div'); popup.className = 'settings-popup'; const content = document.createElement('div'); content.className = 'settings-popup-content'; const displayOptions = Config.get('telemetryDisplayOptions'); content.innerHTML = ` <div class="settings-title">Telemetry & UI Settings <button class="settings-close">×</button></div> <div class="settings-content"> <div class="settings-item"> <div class="toggle-container"> <label for="historyEnabled">Enable History Panel & Logging</label> <label class="switch"> <input type="checkbox" id="historyEnabled"> <span class="slider"></span> </label> </div> </div> <div class="settings-item"> <div class="toggle-container"> <label for="statsPanelEnabled">Enable Stats Panel</label> <label class="switch"> <input type="checkbox" id="statsPanelEnabled"> <span class="slider"></span> </label> </div> </div> <hr style="border: none; border-top: 1px solid var(--border-color); margin: 20px 0;"> <div class="settings-item"> <label>Telemetry Display Options:</label> <div class="telemetry-options-group"> <div class="toggle-container"> <label for="telemetryShowSpeed">Show Speed</label> <label class="switch"> <input type="checkbox" id="telemetryShowSpeed"> <span class="slider"></span> </label> </div> <div class="toggle-container"> <label for="telemetryShowAcceleration">Show Acceleration</label> <label class="switch"> <input type="checkbox" id="telemetryShowAcceleration"> <span class="slider"></span> </label> </div> <div class="toggle-container"> <label for="telemetryShowProgress">Show Progress %</label> <label class="switch"> <input type="checkbox" id="telemetryShowProgress"> <span class="slider"></span> </label> </div> </div> </div> <div class="settings-item"> <label for="speedUnit">Speed Unit</label> <select id="speedUnit"> <option value="mph">mph</option> <option value="kmh">km/h</option> </select> </div> <div class="settings-item"> <div class="toggle-container"> <label for="colorCode">Color Code Telemetry (by Accel)</label> <label class="switch"> <input type="checkbox" id="colorCode"> <span class="slider"></span> </label> </div> </div> <div class="settings-item"> <div class="toggle-container"> <label for="animateChanges">Animate Changes (Simple Cases)</label> <label class="switch"> <input type="checkbox" id="animateChanges"> <span class="slider"></span> </label> </div> <small style="color: #aaa; margin-top: 5px;">Animation only applies if just Speed, just Accel, or only Speed & Accel are shown. Uses capped duration.</small></div> <div class="settings-item"> <label for="speedSmoothingFactor">Speed Smoothing Factor (0.1-0.9)</label> <input type="number" id="speedSmoothingFactor" min="0.1" max="0.9" step="0.1"> <small style="color: #aaa; margin-top: 5px;">Weight of *previous* speed vs. new calculation (higher = smoother). Default: ${Config.defaults.speedSmoothingFactor}</small></div> <div class="settings-item"> <label for="maxAnimationDurationMs">Max Animation Duration (ms)</label> <input type="number" id="maxAnimationDurationMs" min="100" max="3000" step="100"> <small style="color: #aaa; margin-top: 5px;">Caps animation time for large update gaps. Default: ${Config.defaults.maxAnimationDurationMs}</small></div> <div class="settings-item"> <div class="toggle-container"> <label for="showLapEstimate">Show Est. Lap Time</label> <label class="switch"> <input type="checkbox" id="showLapEstimate"> <span class="slider"></span> </label> </div> </div> <div class="settings-item"> <label for="lapEstimateSmoothingFactor">Lap Est. Smoothing (0.01-1.0)</label> <input type="number" id="lapEstimateSmoothingFactor" min="0.01" max="1.0" step="0.01"> </div> <hr style="border: none; border-top: 1px solid var(--border-color); margin: 20px 0;"> <div class="settings-item"> <div class="toggle-container"> <label for="fetchApiStatsOnClick">Load Driver API Stats on Click</label> <label class="switch"> <input type="checkbox" id="fetchApiStatsOnClick"> <span class="slider"></span> </label> </div> <small style="color: #aaa; margin-top: 5px;">(Requires API key)</small> </div> <div class="api-tos-container"> <p><strong>API Key Usage (ToS):</strong> This script stores your key and data locally in your browser only. It is never shared. Please expand the details below for full compliance information.</p> <details> <summary>View API Usage Details (Torn ToS)</summary> <table> <thead> <tr> <th>Data Storage</th> <th>Data Sharing</th> <th>Purpose of Use</th> <th>Key Storage & Sharing</th> <th>Key Access Level</th> </tr> </thead> <tbody> <tr> <td>Only locally</td> <td>Nobody</td> <td>Non-malicious statistical analysis</td> <td>Stored locally / Not shared</td> <td>Custom selections: <code>user (personalstats, races)</code>, <code>racing (tracks, cars, records)</code>. A 'Limited Access' key is sufficient.</td> </tr> </tbody> </table> </details> </div> <div class="settings-item"> <label for="apiKey">Torn API Key (Limited Access Recommended)</label> <input type="password" id="apiKey" placeholder="Enter API Key or use '###PDA-APIKEY###' in Torn PDA"> </div> <div class="settings-item"> <label for="historicalRaceLimit">Advanced Stats: Races to Analyze</label> <input type="number" id="historicalRaceLimit" min="10" max="1000" step="10"> </div> <hr style="border: none; border-top: 1px solid var(--border-color); margin: 20px 0;"> <div class="settings-item"> <label for="historyCheckInterval">History: Check Interval (ms)</label> <input type="number" id="historyCheckInterval" min="5000" max="60000" step="1000"> </div> <div class="settings-item"> <label for="historyLogLimit">History: Max Log Entries</label> <input type="number" id="historyLogLimit" min="5" max="50" step="1"> </div> <hr style="border: none; border-top: 1px solid var(--border-color); margin: 20px 0;"> <div class="settings-item"> <div class="toggle-container"> <label for="hideOriginalList">Hide Torn's Leaderboard</label> <label class="switch"> <input type="checkbox" id="hideOriginalList"> <span class="slider"></span> </label> </div> </div> <div class="settings-buttons"> <button class="settings-btn toggle-telemetry-btn">Toggle Telemetry</button> <button class="settings-btn primary" id="saveSettings">Save & Close</button> </div> <div class="settings-data-buttons"> <button class="settings-btn danger" id="clearData">Clear Script Data</button> <button class="settings-btn danger" id="clearApiKey">Clear API Key</button> </div> </div>`; content.querySelector('#historyEnabled').checked = Config.get('historyEnabled'); content.querySelector('#statsPanelEnabled').checked = Config.get('statsPanelEnabled'); content.querySelector('#telemetryShowSpeed').checked = displayOptions.includes('speed'); content.querySelector('#telemetryShowAcceleration').checked = displayOptions.includes('acceleration'); content.querySelector('#telemetryShowProgress').checked = displayOptions.includes('progress'); content.querySelector('#speedUnit').value = Config.get('speedUnit'); content.querySelector('#colorCode').checked = Config.get('colorCode'); content.querySelector('#animateChanges').checked = Config.get('animateChanges'); content.querySelector('#speedSmoothingFactor').value = Config.get('speedSmoothingFactor'); content.querySelector('#maxAnimationDurationMs').value = Config.get('maxAnimationDurationMs'); content.querySelector('#showLapEstimate').checked = Config.get('showLapEstimate'); content.querySelector('#lapEstimateSmoothingFactor').value = Config.get('lapEstimateSmoothingFactor'); content.querySelector('#fetchApiStatsOnClick').checked = Config.get('fetchApiStatsOnClick'); content.querySelector('#historicalRaceLimit').value = Config.get('historicalRaceLimit'); content.querySelector('#historyCheckInterval').value = Config.get('historyCheckInterval'); content.querySelector('#historyLogLimit').value = Config.get('historyLogLimit'); content.querySelector('#hideOriginalList').checked = Config.get('hideOriginalList'); content.querySelector('.toggle-telemetry-btn').textContent = Config.get('telemetryVisible') ? 'Hide Telemetry' : 'Show Telemetry'; const apiKeyInput = content.querySelector('#apiKey'); apiKeyInput.value = Config.get('apiKey'); if (isPDA && apiKeyInput.value.trim() === '###PDA-APIKEY###') { apiKeyInput.disabled = true; const pdaNote = document.createElement('small'); pdaNote.style.cssText = 'color: var(--api-info-color); margin-top: 5px; display: block;'; pdaNote.textContent = 'Using Torn PDA managed API key. To change, edit in Torn PDA settings.'; apiKeyInput.parentNode.insertBefore(pdaNote, apiKeyInput.nextSibling); } const closePopup = () => { popup.remove(); State.settingsPopupInstance = null; }; content.querySelector('.settings-close').addEventListener('click', closePopup); popup.addEventListener('click', (e) => { if (e.target === popup) closePopup(); }); content.querySelector('.toggle-telemetry-btn').addEventListener('click', (e) => { const newState = !Config.get('telemetryVisible'); Config.set('telemetryVisible', newState); document.body.classList.toggle('telemetry-hidden', !newState); e.target.textContent = newState ? 'Hide Telemetry' : 'Show Telemetry'; Utils.showNotification(`Telemetry display ${newState ? 'shown' : 'hidden'}.`); }); content.querySelector('#hideOriginalList').addEventListener('change', (e) => { const hide = e.target.checked; Config.set('hideOriginalList', hide); document.body.classList.toggle('hide-original-leaderboard', hide); if (!hide) { RaceManager.stableUpdateCustomList(); }}); content.querySelector('#saveSettings').addEventListener('click', () => { const historyWasEnabled = Config.get('historyEnabled'); const selectedOptions = []; if (content.querySelector('#telemetryShowSpeed').checked) selectedOptions.push('speed'); if (content.querySelector('#telemetryShowAcceleration').checked) selectedOptions.push('acceleration'); if (content.querySelector('#telemetryShowProgress').checked) selectedOptions.push('progress'); Config.set('telemetryDisplayOptions', selectedOptions); Config.set('historyEnabled', content.querySelector('#historyEnabled').checked); Config.set('statsPanelEnabled', content.querySelector('#statsPanelEnabled').checked); Config.set('speedUnit', content.querySelector('#speedUnit').value); Config.set('colorCode', content.querySelector('#colorCode').checked); Config.set('animateChanges', content.querySelector('#animateChanges').checked); let speedSmooth = parseFloat(content.querySelector('#speedSmoothingFactor').value); if (isNaN(speedSmooth) || speedSmooth < 0.1 || speedSmooth > 0.9) { speedSmooth = Config.defaults.speedSmoothingFactor; content.querySelector('#speedSmoothingFactor').value = speedSmooth; Utils.showNotification('Invalid Speed Smoothing Factor, reset to default.', 'error'); } Config.set('speedSmoothingFactor', speedSmooth); let animDuration = parseInt(content.querySelector('#maxAnimationDurationMs').value, 10); if (isNaN(animDuration) || animDuration < 100 || animDuration > 3000) { animDuration = Config.defaults.maxAnimationDurationMs; content.querySelector('#maxAnimationDurationMs').value = animDuration; Utils.showNotification('Invalid Max Animation Duration, reset to default.', 'error'); } Config.set('maxAnimationDurationMs', animDuration); Config.set('showLapEstimate', content.querySelector('#showLapEstimate').checked); Config.set('fetchApiStatsOnClick', content.querySelector('#fetchApiStatsOnClick').checked); const apiKeyInputFromUser = content.querySelector('#apiKey').value.trim(); if (apiKeyInputFromUser.length > 0 && apiKeyInputFromUser.length < 16 && apiKeyInputFromUser !== '###PDA-APIKEY###') { Utils.showNotification('API Key seems too short.', 'error'); } else { Config.set('apiKey', apiKeyInputFromUser); } let lapSmoothFactor = parseFloat(content.querySelector('#lapEstimateSmoothingFactor').value); if (isNaN(lapSmoothFactor) || lapSmoothFactor < 0.01 || lapSmoothFactor > 1.0) { lapSmoothFactor = Config.defaults.lapEstimateSmoothingFactor; content.querySelector('#lapEstimateSmoothingFactor').value = lapSmoothFactor; Utils.showNotification('Invalid Lap Est. Smoothing Factor, reset to default.', 'error'); } Config.set('lapEstimateSmoothingFactor', lapSmoothFactor); let raceLimit = parseInt(content.querySelector('#historicalRaceLimit').value, 10); if (isNaN(raceLimit) || raceLimit < 10 || raceLimit > 1000) { raceLimit = Config.defaults.historicalRaceLimit; content.querySelector('#historicalRaceLimit').value = raceLimit; Utils.showNotification('Invalid Race Limit, reset to default.', 'error'); } Config.set('historicalRaceLimit', raceLimit); let histInterval = parseInt(content.querySelector('#historyCheckInterval').value, 10); if (isNaN(histInterval) || histInterval < 5000 || histInterval > 60000) { histInterval = Config.defaults.historyCheckInterval; content.querySelector('#historyCheckInterval').value = histInterval; Utils.showNotification('Invalid History Interval, reset to default.', 'error'); } Config.set('historyCheckInterval', histInterval); let histLimit = parseInt(content.querySelector('#historyLogLimit').value, 10); if (isNaN(histLimit) || histLimit < 5 || histLimit > 50) { histLimit = Config.defaults.historyLogLimit; content.querySelector('#historyLogLimit').value = histLimit; Utils.showNotification('Invalid History Limit, reset to default.', 'error'); } Config.set('historyLogLimit', histLimit); Utils.showNotification('Settings saved!', 'success'); closePopup(); UI.updateControlButtonsVisibility(); if (Config.get('historyEnabled')) { HistoryManager.restartCheckInterval(); } else if (historyWasEnabled) { if(State.historyCheckIntervalId) clearInterval(State.historyCheckIntervalId); State.historyCheckIntervalId = null; } RaceManager.stableUpdateCustomList(); }); content.querySelector('#clearData').addEventListener('click', () => { if (confirm('Are you sure you want to clear all script settings (except API key) and history data? This cannot be undone.')) { Config.clearData(); Utils.showNotification('Script data cleared!', 'success'); closePopup(); UI.updateControlButtonsVisibility(); RaceManager.stableUpdateCustomList(); HistoryManager.restartCheckInterval(); } }); content.querySelector('#clearApiKey').addEventListener('click', () => { if (confirm('Are you sure you want to clear your API key? You will need to re-enter it to use API features.')) { Config.clearApiKey(); content.querySelector('#apiKey').value = ''; Utils.showNotification('API Key cleared!', 'success'); } }); popup.appendChild(content); document.body.appendChild(popup); State.settingsPopupInstance = popup; }, async createAdvancedStatsPanel() { if (!Config.get('statsPanelEnabled')) return; if (State.advancedStatsPanelInstance) State.advancedStatsPanelInstance.remove(); State.destroyActiveCharts(); const popup = document.createElement('div'); popup.className = 'stats-panel'; const content = document.createElement('div'); content.className = 'stats-panel-content'; const statsContentDiv = document.createElement('div'); statsContentDiv.className = 'stats-content'; statsContentDiv.innerHTML = `<div class="loading-msg">Loading advanced stats...</div>`; content.innerHTML = `<div class="stats-title">Advanced Race Statistics <button class="stats-close">×</button></div>`; content.appendChild(statsContentDiv); const closePanel = () => { popup.remove(); State.advancedStatsPanelInstance = null; State.destroyActiveCharts(); }; content.querySelector('.stats-close').addEventListener('click', closePanel); popup.addEventListener('click', (e) => { if (e.target === popup) closePanel(); }); popup.appendChild(content); document.body.appendChild(popup); State.advancedStatsPanelInstance = popup; let errorMessages = []; let historicalStatsHTML = ''; let trackAnalysisHTML = ''; let processedData = null; let trackRecords = null; let topCarsData = null; try { if (!Utils.isApiKeyAvailable()) throw new Error("API Key not configured in Settings."); const apiKey = Config.get('apiKey'); if (!State.userId) throw new Error("User ID not found."); if (!State.trackNameMap) { try { State.trackNameMap = await APIManager.fetchTrackData(apiKey); } catch (e) { errorMessages.push(`Could not fetch track names: ${e.message}`); State.trackNameMap = {}; } } if (!State.carBaseStatsMap) { try { State.carBaseStatsMap = await APIManager.fetchCarBaseStats(apiKey); } catch (e) { errorMessages.push(`Could not fetch car base stats: ${e.message}`); State.carBaseStatsMap = {}; } } await RaceManager.updateTrackAndClassInfo(); const currentTrackId = State.trackInfo.id; const currentTrackName = State.trackInfo.name || `Track ${currentTrackId || 'Unknown'}`; const currentRaceClass = State.currentRaceClass; let currentUserCar = null; try { currentUserCar = this.parseCurrentUserCarStats(); } catch (e) {} let historicalRaces = null; const promises = [APIManager.fetchHistoricalRaceData(apiKey, State.userId, Config.get('historicalRaceLimit'))]; if (currentTrackId && currentRaceClass) { promises.push(APIManager.fetchTrackRecords(apiKey, currentTrackId, currentRaceClass)); } else { promises.push(Promise.resolve(null)); if (!currentTrackId) errorMessages.push("Could not identify the current track."); if (!currentRaceClass) errorMessages.push("Could not identify the race class from page banner."); } const [histResult, recordResult] = await Promise.allSettled(promises); if (histResult.status === 'fulfilled') { historicalRaces = histResult.value; processedData = StatsCalculator.processRaceData(historicalRaces, State.userId); historicalStatsHTML = this.buildHistoricalStatsHTML(processedData); } else { errorMessages.push(`Could not fetch historical races: ${histResult.reason.message}`); historicalStatsHTML = `<p class="info-msg">Historical race data could not be loaded.</p>`; } if (recordResult.status === 'fulfilled' && recordResult.value !== null) { trackRecords = recordResult.value; topCarsData = StatsCalculator.processTrackRecords(trackRecords); } else if (recordResult.status === 'rejected') { if (!recordResult.reason.message?.includes('404')) { errorMessages.push(`Could not fetch track records: ${recordResult.reason.message}`); } else { trackRecords = []; topCarsData = []; } } if (currentTrackId && currentRaceClass) { trackAnalysisHTML = this.buildTrackAnalysisHTML(trackRecords, currentUserCar, currentTrackName, currentRaceClass, topCarsData); } else { trackAnalysisHTML = `<p class="info-msg">Track analysis requires knowing the track and race class.</p>`; } } catch (error) { errorMessages.push(`An unexpected error occurred: ${error.message}`); if (!historicalStatsHTML) historicalStatsHTML = `<p class="error-msg">Failed to load historical data.</p>`; if (!trackAnalysisHTML) trackAnalysisHTML = `<p class="error-msg">Failed to load track analysis data.</p>`; } finally { let finalHTML = ''; if (errorMessages.length > 0) { finalHTML += `<div class="error-msg"><strong>Encountered issues:</strong><br>${errorMessages.join('<br>')}</div>`; } finalHTML += historicalStatsHTML; finalHTML += trackAnalysisHTML; statsContentDiv.innerHTML = finalHTML; if (typeof Chart !== 'undefined') { this.renderStatsCharts(processedData, topCarsData); } else { statsContentDiv.querySelectorAll('.stats-chart-container').forEach(el => el.innerHTML = '<p class="info-msg">Charting library not loaded.</p>'); } } }, buildHistoricalStatsHTML(processedData) { if (!processedData || processedData.totalRaces === 0) { return `<h3>Your Recent Performance</h3><p class="info-msg">No recent official race data found to analyze.</p>`; } const overall = processedData.overall; const trackStats = Object.values(processedData.trackStats).sort((a, b) => b.races - a.races); const carStats = Object.values(processedData.carStats).sort((a, b) => b.races - a.races); let html = `<h3>Your Recent Performance</h3>`; html += `<p>Analyzed <strong>${overall.races}</strong> official races from ${Utils.formatDate(processedData.firstRaceTime)} to ${Utils.formatDate(processedData.lastRaceTime)}.</p>`; html += `<p><span class="stat-label">Avg Position:</span> <span class="stat-value">${overall.avgPosition.toFixed(2)}</span> | <span class="stat-label">Win Rate:</span> <span class="stat-value">${overall.winRate.toFixed(1)}%</span> | <span class="stat-label">Podium Rate:</span> <span class="stat-value">${overall.podiumRate.toFixed(1)}%</span> | <span class="stat-label">Crash Rate:</span> <span class="stat-value">${overall.crashRate.toFixed(1)}%</span></p>`; html += `<h4>Performance by Track</h4>`; if (trackStats.length > 0) { html += `<div class="stats-chart-container"><canvas id="trackPerformanceChart"></canvas></div>`; html += `<table><thead><tr><th>Track</th><th class="numeric">Races</th><th class="numeric">Avg Pos</th><th class="numeric">Win %</th><th class="numeric">Podium %</th><th class="numeric">Crash %</th><th class="numeric">Best Lap</th></tr></thead><tbody>`; trackStats.forEach(t => { html += `<tr><td>${t.name}</td><td class="numeric">${t.races}</td><td class="numeric">${t.avgPosition.toFixed(2)}</td><td class="numeric">${t.winRate.toFixed(1)}</td><td class="numeric">${t.podiumRate.toFixed(1)}</td><td class="numeric">${t.crashRate.toFixed(1)}</td><td class="numeric">${t.bestLap === Infinity ? '-' : t.bestLap.toFixed(2)}s</td></tr>`; }); html += `</tbody></table>`; } else { html += `<p>No track-specific data.</p>`; } html += `<h4>Performance by Car</h4>`; if (carStats.length > 0) { html += `<div class="stats-chart-container"><canvas id="carPerformanceChart"></canvas></div>`; html += `<table><thead><tr><th>Car</th><th class="numeric">Races</th><th class="numeric">Avg Pos</th><th class="numeric">Win %</th><th class="numeric">Podium %</th><th class="numeric">Crash %</th></tr></thead><tbody>`; carStats.forEach(c => { html += `<tr><td>${c.name}</td><td class="numeric">${c.races}</td><td class="numeric">${c.avgPosition.toFixed(2)}</td><td class="numeric">${c.winRate.toFixed(1)}</td><td class="numeric">${c.podiumRate.toFixed(1)}</td><td class="numeric">${c.crashRate.toFixed(1)}</td></tr>`; }); html += `</tbody></table>`; } else { html += `<p>No car-specific data.</p>`; } return html; }, buildTrackAnalysisHTML(trackRecords, currentUserCar, trackName, raceClass, topCarsData) { let html = `<h3>Track Analysis: ${trackName} (Class ${raceClass || 'Unknown'})</h3>`; html += `<h4>Your Current Car</h4>`; if (currentUserCar && currentUserCar.stats) { html += `<p><strong>${currentUserCar.name}</strong> (ID: ${currentUserCar.id})</p><p class="car-stats-inline">`; const statOrder = ["Top Speed", "Acceleration", "Handling", "Braking", "Dirt", "Tarmac", "Safety"]; html += statOrder.map(statName => { const value = currentUserCar.stats[statName]; return value !== undefined ? `<strong>${statName}:</strong> ${value}` : null; }).filter(s => s !== null).join(' | '); html += `</p>`; } else if (currentUserCar) { html += `<p><strong>${currentUserCar.name}</strong> (ID: ${currentUserCar.id}) - <i>Stats could not be parsed.</i></p>`; } else { html += `<p class="info-msg">Could not identify your currently selected car.</p>`; } html += `<h4>Track Records (Top 5)</h4>`; if (trackRecords && trackRecords.length > 0) { html += `<table><thead><tr><th class="numeric">#</th><th class="numeric">Lap Time</th><th>Car</th><th>Driver</th></tr></thead><tbody>`; trackRecords.slice(0, 5).forEach((rec, index) => { const isUserCar = currentUserCar && rec.car_item_id === currentUserCar.id; html += `<tr ${isUserCar ? 'class="user-car-highlight"' : ''}><td class="numeric">${index + 1}</td><td class="numeric">${rec.lap_time.toFixed(2)}s</td><td>${rec.car_item_name} ${isUserCar ? '(Your Car)' : ''}</td><td><a href="/profiles.php?XID=${rec.driver_id}" target="_blank" rel="noopener noreferrer">${rec.driver_name} [${rec.driver_id}]</a></td></tr>`; }); html += `</tbody></table>`; html += `<h4>Top Performing Cars Analysis</h4>`; if (topCarsData && topCarsData.length > 0) { html += `<div class="stats-chart-container"><canvas id="topCarsChart"></canvas></div>`; html += `<table><thead><tr><th>Car</th><th class="numeric">Times in Top ${trackRecords.length}</th><th>Key Stats</th></tr></thead><tbody>`; topCarsData.slice(0, 5).forEach(carData => { const baseStats = State.carBaseStatsMap?.[carData.car_item_id]; let statsString = '<i>Base stats unavailable</i>'; if (baseStats) { statsString = `<strong>Spd:</strong> ${baseStats.top_speed}, <strong>Acc:</strong> ${baseStats.acceleration}, <strong>Hnd:</strong> ${baseStats.handling}, <strong>Brk:</strong> ${baseStats.braking}, <strong>Drt:</strong> ${baseStats.dirt}`; } const isUserCar = currentUserCar && carData.car_item_id === currentUserCar.id; html += `<tr ${isUserCar ? 'class="user-car-highlight"' : ''}><td>${carData.car_item_name} ${isUserCar ? '(Your Car)' : ''}</td><td class="numeric">${carData.count}</td><td><span class="car-stats-inline">${statsString}</span></td></tr>`; }); html += `</tbody></table>`; } else { html += `<p>Could not analyze top performing cars.</p>`; } } else if (trackRecords) { html += `<p class="info-msg">No records found for this track/class.</p>`; } else { html += `<p class="error-msg">Track records could not be loaded.</p>`; } return html; }, renderStatsCharts(processedData, topCarsData) { const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim(); const gridColor = 'rgba(255, 255, 255, 0.1)'; const chartOptionsBase = { responsive: true, maintainAspectRatio: false, plugins: { legend: { labels: { color: textColor } }, tooltip: { mode: 'index', intersect: false } } }; const barColors = ['#64B5F6', '#81C784', '#FFB74D', '#E57373', '#BA68C8', '#FFF176', '#7986CB', '#4DD0E1', '#FF8A65', '#A1887F']; if (processedData?.trackStats && Object.keys(processedData.trackStats).length > 0) { const ctxTrack = document.getElementById('trackPerformanceChart')?.getContext('2d'); if(ctxTrack) { const trackStats = Object.values(processedData.trackStats).sort((a, b) => b.races - a.races).slice(0, 10); Utils.createChart(ctxTrack, { type: 'bar', data: { labels: trackStats.map(t => t.name.length > 15 ? t.name.substring(0, 12) + '...' : t.name), datasets: [ { label: 'Win %', data: trackStats.map(t => t.winRate), backgroundColor: barColors[0], yAxisID: 'yPercent' }, { label: 'Podium %', data: trackStats.map(t => t.podiumRate), backgroundColor: barColors[1], yAxisID: 'yPercent' }, { label: 'Crash %', data: trackStats.map(t => t.crashRate), backgroundColor: barColors[3], yAxisID: 'yPercent' }, { label: 'Races', data: trackStats.map(t => t.races), backgroundColor: barColors[4], yAxisID: 'yRaces' } ] }, options: { ...chartOptionsBase, scales: { x: { ticks: { color: textColor, autoSkip: false, maxRotation: 90, minRotation: 45 }, grid: { color: gridColor }, title: { color: textColor } }, yPercent: { type: 'linear', position: 'left', beginAtZero: true, title: { display: true, text: 'Percentage (%)', color: textColor }, ticks: { color: textColor }, grid: { color: gridColor } }, yRaces: { type: 'linear', position: 'right', beginAtZero: true, title: { display: true, text: 'Races', color: textColor }, ticks: { color: textColor, precision: 0 }, grid: { drawOnChartArea: false } } } } }); } } if (processedData?.carStats && Object.keys(processedData.carStats).length > 0) { const ctxCar = document.getElementById('carPerformanceChart')?.getContext('2d'); if(ctxCar) { const carStats = Object.values(processedData.carStats).sort((a, b) => b.races - a.races).slice(0, 10); Utils.createChart(ctxCar, { type: 'bar', data: { labels: carStats.map(c => c.name.length > 15 ? c.name.substring(0, 12) + '...' : c.name), datasets: [ { label: 'Win %', data: carStats.map(c => c.winRate), backgroundColor: barColors[0], yAxisID: 'yPercent' }, { label: 'Podium %', data: carStats.map(c => c.podiumRate), backgroundColor: barColors[1], yAxisID: 'yPercent' }, { label: 'Crash %', data: carStats.map(c => c.crashRate), backgroundColor: barColors[3], yAxisID: 'yPercent' }, { label: 'Races', data: carStats.map(c => c.races), backgroundColor: barColors[4], yAxisID: 'yRaces' } ] }, options: { ...chartOptionsBase, scales: { x: { ticks: { color: textColor, autoSkip: false, maxRotation: 90, minRotation: 45 }, grid: { color: gridColor }, title: { color: textColor } }, yPercent: { type: 'linear', position: 'left', beginAtZero: true, title: { display: true, text: 'Percentage (%)', color: textColor }, ticks: { color: textColor }, grid: { color: gridColor } }, yRaces: { type: 'linear', position: 'right', beginAtZero: true, title: { display: true, text: 'Races', color: textColor }, ticks: { color: textColor, precision: 0 }, grid: { drawOnChartArea: false } } } } }); } } if (topCarsData && topCarsData.length > 0) { const ctxTopCars = document.getElementById('topCarsChart')?.getContext('2d'); if(ctxTopCars && typeof trackRecords !== 'undefined') { const topCars = topCarsData.slice(0, 10); Utils.createChart(ctxTopCars, { type: 'bar', data: { labels: topCars.map(c => c.car_item_name.length > 15 ? c.car_item_name.substring(0, 12) + '...' : c.car_item_name), datasets: [{ label: `Times in Top ${trackRecords?.length || '?'} Records`, data: topCars.map(c => c.count), backgroundColor: barColors.slice(0, topCars.length) }] }, options: { ...chartOptionsBase, indexAxis: 'y', scales: { x: { ticks: { color: textColor, precision: 0 }, grid: { color: gridColor }, title: { color: textColor } }, y: { ticks: { color: textColor }, grid: { color: gridColor }, title: { color: textColor } } }, plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } } } }); } } }, parseCurrentUserCarStats() { const carDiv = document.querySelector('div.car-selected.left'); if (!carDiv) return null; try { const nameEl = carDiv.querySelector('.model p:first-child'); const imgEl = carDiv.querySelector('.model .img img.torn-item'); const name = nameEl ? nameEl.textContent.trim() : 'Unknown Car'; let id = null; if (imgEl && imgEl.src) { const idMatch = imgEl.src.match(/\/items\/(\d+)\//); if (idMatch) id = parseInt(idMatch[1], 10); } const stats = {}; const statItems = carDiv.querySelectorAll('ul.properties-wrap li'); statItems.forEach(li => { const titleEl = li.querySelector('.title'); const progressBarEl = li.querySelector('.progressbar-wrap'); if (titleEl && progressBarEl && progressBarEl.title) { const statName = titleEl.textContent.trim(); const titleAttr = progressBarEl.title; const valueMatch = titleAttr.match(/^(\d+)\s*\(/); if (valueMatch) { stats[statName] = parseInt(valueMatch[1], 10); } } }); if (Object.keys(stats).length === 0) { return { name, id, stats: null }; } return { name, id, stats }; } catch (e) { return null; } }, createHistoryPanel() { if (!Config.get('historyEnabled')) return; if (State.historyPanelInstance) State.historyPanelInstance.remove(); State.destroyActiveCharts(); const popup = document.createElement('div'); popup.className = 'history-panel'; const content = document.createElement('div'); content.className = 'history-panel-content'; const historyContentDiv = document.createElement('div'); historyContentDiv.className = 'history-content'; const historyLog = HistoryManager.getLog(); let chartHTML = ''; let tableHTML = ''; if (historyLog.length === 0) { historyContentDiv.innerHTML = `<p class="no-history-msg">No historical changes recorded yet.</p>`; } else { if (historyLog.length > 1 && typeof Chart !== 'undefined') { chartHTML = `<div class="history-chart-container"><canvas id="historyProgressionChart" style="max-height: 250px;"></canvas></div>`; } else if (historyLog.length <=1) { chartHTML = `<p class="no-history-msg">Need at least two data points for a chart.</p>`; } else { chartHTML = `<p class="no-history-msg">Charting library not loaded.</p>`; } const formatChange = (value, change, decimals = 2) => { if (value === null) return 'N/A'; const formattedValue = typeof value === 'number' ? value.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) : value; if (change === 0 || isNaN(change) || change === null) return formattedValue; const isIncrease = change > 0; const sign = isIncrease ? '+' : ''; const changeClass = isIncrease ? 'change-positive' : 'change-negative'; const formattedChange = typeof change === 'number' ? change.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) : change; return `${formattedValue} <span class="change-indicator ${changeClass}">(${sign}${formattedChange})</span>`; }; const formatClassChange = (currentClass, previousClass) => { if (currentClass === null) return 'N/A'; if (!previousClass || currentClass === previousClass || previousClass === null) return currentClass; return `${currentClass} <span class="change-indicator change-neutral">(was ${previousClass})</span>`; }; tableHTML = `<h3>History Log (Last ${historyLog.length})</h3><table><thead><tr><th>Date & Time</th><th class="numeric">Skill</th><th class="numeric">Class</th><th class="numeric">Points</th></tr></thead><tbody>`; for (let i = 0; i < historyLog.length; i++) { const entry = historyLog[i]; const olderEntry = historyLog[i + 1] || null; let skillChange = null; let pointsChange = null; let previousClass = null; if (olderEntry) { skillChange = (entry.skill !== null && olderEntry.skill !== null) ? (entry.skill - olderEntry.skill) : null; pointsChange = (entry.points !== null && olderEntry.points !== null) ? (entry.points - olderEntry.points) : null; previousClass = olderEntry.class; } tableHTML += `<tr> <td>${Utils.formatDate(entry.timestamp, true)}</td> <td class="numeric">${formatChange(entry.skill, skillChange, 2)}</td> <td class="numeric">${formatClassChange(entry.class, previousClass)}</td> <td class="numeric">${formatChange(entry.points, pointsChange, 0)}</td> </tr>`; } tableHTML += `</tbody></table>`; historyContentDiv.innerHTML = chartHTML + tableHTML; } content.innerHTML = `<div class="history-title">Your Racing Stats History <button class="history-close">×</button></div>`; content.appendChild(historyContentDiv); const actionsDiv = document.createElement('div'); actionsDiv.className = 'panel-actions'; const clearButton = document.createElement('button'); clearButton.className = 'history-clear-button'; clearButton.textContent = 'Clear History Log'; clearButton.addEventListener('click', () => { if (confirm('Are you sure you want to clear your entire racing stats history log? This cannot be undone.')) { HistoryManager.clearLog(); this.createHistoryPanel(); Utils.showNotification('History log cleared!', 'success'); } }); actionsDiv.appendChild(clearButton); const exportButton = document.createElement('button'); exportButton.textContent = 'Export History'; exportButton.addEventListener('click', () => { const format = prompt('Export as (csv/json):') || 'csv'; let dataStr = format === 'json' ? JSON.stringify(HistoryManager.getLog(), null, 2) : 'Timestamp,Skill,Class,Points\n' + HistoryManager.getLog().map(e => `${Utils.formatDate(e.timestamp, true)},${e.skill},${e.class},${e.points}`).join('\n'); DataExporter.downloadData(dataStr, format, `text/${format}`); }); actionsDiv.appendChild(exportButton); content.appendChild(actionsDiv); const closePanel = () => { popup.remove(); State.historyPanelInstance = null; State.destroyActiveCharts(); }; content.querySelector('.history-close').addEventListener('click', closePanel); popup.addEventListener('click', (e) => { if (e.target === popup) closePanel(); }); popup.appendChild(content); document.body.appendChild(popup); State.historyPanelInstance = popup; if (historyLog.length > 1 && typeof Chart !== 'undefined') { this.renderHistoryChart(historyLog); } }, renderHistoryChart(historyLog) { const ctx = document.getElementById('historyProgressionChart')?.getContext('2d'); if (!ctx) return; const reversedLog = [...historyLog].reverse(); const labels = reversedLog.map(entry => Utils.formatDate(entry.timestamp, true)); const skillData = reversedLog.map(entry => entry.skill); const pointsData = reversedLog.map(entry => entry.points); const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim(); const gridColor = 'rgba(255, 255, 255, 0.1)'; Utils.createChart(ctx, { type: 'line', data: { labels: labels, datasets: [ { label: 'Racing Skill', data: skillData, borderColor: 'var(--primary-color)', backgroundColor: 'rgba(76, 175, 80, 0.1)', tension: 0.1, yAxisID: 'ySkill', spanGaps: true, pointRadius: 2, pointHoverRadius: 4 }, { label: 'Racing Points', data: pointsData, borderColor: 'var(--history-color)', backgroundColor: 'rgba(255, 193, 7, 0.1)', tension: 0.1, yAxisID: 'yPoints', spanGaps: true, pointRadius: 2, pointHoverRadius: 4 } ] }, options: { responsive: true, maintainAspectRatio: false, interaction: { mode: 'index', intersect: false }, scales: { x: { ticks: { color: textColor, maxRotation: 70, minRotation: 45, autoSkip: true, maxTicksLimit: 15 }, grid: { color: gridColor }, title: { color: textColor } }, ySkill: { type: 'linear', position: 'left', beginAtZero: false, title: { display: true, text: 'Skill', color: textColor }, ticks: { color: textColor, precision: 2 }, grid: { color: gridColor } }, yPoints: { type: 'linear', position: 'right', beginAtZero: false, title: { display: true, text: 'Points', color: textColor }, ticks: { color: textColor, precision: 0 }, grid: { drawOnChartArea: false } } }, plugins: { legend: { labels: { color: textColor } }, tooltip: { mode: 'index', intersect: false } } } }); }, createInfoPanel() { if (State.infoPanelInstance) State.infoPanelInstance.remove(); const popup = document.createElement('div'); popup.className = 'info-panel'; const content = document.createElement('div'); content.className = 'info-panel-content'; let notesHTML = ScriptInfo.notes.map(note => `<li>${note}</li>`).join(''); content.innerHTML = ` <div class="info-title">Script Information <button class="info-close">×</button></div> <div class="info-content"> <h3>Torn Racing Telemetry</h3> <p><strong>Version:</strong> ${ScriptInfo.version}</p> <p><strong>Author:</strong> ${ScriptInfo.author} [<a href="${ScriptInfo.contactUrl()}" target="_blank" rel="noopener noreferrer">${ScriptInfo.contactId}</a>]</p> <p><strong>Description:</strong> ${ScriptInfo.description}</p> <h3>Contact & Support</h3> <p>For suggestions, bug reports, or questions, please contact <a href="${ScriptInfo.contactUrl()}" target="_blank" rel="noopener noreferrer">${ScriptInfo.author} [${ScriptInfo.contactId}]</a> via Torn mail.</p> <h3>Important Notes</h3> <ul>${notesHTML}</ul> </div>`; const closePanel = () => { popup.remove(); State.infoPanelInstance = null; }; content.querySelector('.info-close').addEventListener('click', closePanel); popup.addEventListener('click', (e) => { if (e.target === popup) closePanel(); }); popup.appendChild(content); document.body.appendChild(popup); State.infoPanelInstance = popup; }, createDownloadPopup() { if (State.downloadPopupInstance) State.downloadPopupInstance.remove(); const popup = document.createElement('div'); popup.className = 'download-popup'; const content = document.createElement('div'); content.className = 'download-popup-content'; content.innerHTML = ` <div class="download-title">Export Race Results <button class="download-close">×</button></div> <div class="download-content"> <div class="download-options"> <div class="format-group"> <label for="downloadFormat">Format:</label> <select id="downloadFormat"> <option value="html">HTML Table</option> <option value="md">Markdown Table</option> <option value="csv">CSV (Comma Separated)</option> <option value="txt">Plain Text</option> <option value="json">JSON Data</option> </select> </div> <div class="action-group"> <button id="downloadFileBtn" class="primary">💾 Download File</button> <button id="copyClipboardBtn">📋 Copy to Clipboard</button> </div> </div> </div>`; const closePopup = () => { popup.remove(); State.downloadPopupInstance = null; }; content.querySelector('.download-close').addEventListener('click', closePopup); popup.addEventListener('click', (e) => { if (e.target === popup) closePopup(); }); const formatSelect = content.querySelector('#downloadFormat'); const downloadBtn = content.querySelector('#downloadFileBtn'); const copyBtn = content.querySelector('#copyClipboardBtn'); const performAction = (actionType) => { const format = formatSelect.value; let dataString; let fileExt; let mimeType; try { switch(format) { case 'html': dataString = DataExporter.formatAsHTML(); fileExt = 'html'; mimeType = 'text/html'; break; case 'md': dataString = DataExporter.formatAsMarkdown(); fileExt = 'md'; mimeType = 'text/markdown'; break; case 'csv': dataString = DataExporter.formatAsCSV(); fileExt = 'csv'; mimeType = 'text/csv'; break; case 'txt': dataString = DataExporter.formatAsPlainText(); fileExt = 'txt'; mimeType = 'text/plain'; break; case 'json': default: dataString = DataExporter.formatAsJSON(); fileExt = 'json'; mimeType = 'application/json'; break; } if (actionType === 'download') { DataExporter.downloadData(dataString, fileExt, mimeType); Utils.showNotification('File download initiated.', 'success'); } else if (actionType === 'copy') { DataExporter.copyToClipboard(dataString); Utils.showNotification('Copied to clipboard!', 'success'); } closePopup(); } catch (e) { Utils.showNotification('Error preparing data: ' + e.message, 'error'); } }; downloadBtn.addEventListener('click', () => performAction('download')); copyBtn.addEventListener('click', () => performAction('copy')); popup.appendChild(content); document.body.appendChild(popup); State.downloadPopupInstance = popup; }, updateControlButtonsVisibility() { if (!State.controlsContainer) return; const historyBtn = State.controlsContainer.querySelector('.telemetry-history-button'); const statsBtn = State.controlsContainer.querySelector('.telemetry-stats-button'); const downloadBtn = State.controlsContainer.querySelector('.telemetry-download-button'); if (historyBtn) historyBtn.style.display = Config.get('historyEnabled') ? 'inline-block' : 'none'; if (statsBtn) statsBtn.style.display = Config.get('statsPanelEnabled') ? 'inline-block' : 'none'; if (downloadBtn) downloadBtn.style.display = State.raceFinished ? 'inline-block' : 'none'; }, initializeControls() { if (!State.controlsContainer) return; State.controlsContainer.innerHTML = ''; const infoButton = document.createElement('button'); infoButton.className = 'telemetry-info-button'; infoButton.textContent = 'ℹ️ Info'; infoButton.title = 'View Script Information'; infoButton.addEventListener('click', () => { this.createInfoPanel(); }); State.controlsContainer.appendChild(infoButton); const historyButton = document.createElement('button'); historyButton.className = 'telemetry-history-button'; historyButton.textContent = '📜 History'; historyButton.title = 'View Your Racing Stats History'; historyButton.style.display = 'none'; historyButton.addEventListener('click', () => { this.createHistoryPanel(); }); State.controlsContainer.appendChild(historyButton); const statsButton = document.createElement('button'); statsButton.className = 'telemetry-stats-button'; statsButton.textContent = '📊 Stats'; statsButton.title = 'Open Advanced Race Statistics'; statsButton.style.display = 'none'; statsButton.addEventListener('click', () => { RaceManager.updateTrackAndClassInfo().then(() => { this.createAdvancedStatsPanel(); }) .catch(e => { Utils.showNotification("Error getting latest track/class info.", "error"); }); }); State.controlsContainer.appendChild(statsButton); const downloadButton = document.createElement('button'); downloadButton.className = 'telemetry-download-button'; downloadButton.textContent = '💾 Export'; downloadButton.title = 'Export Race Results'; downloadButton.style.display = 'none'; downloadButton.addEventListener('click', () => { this.createDownloadPopup(); }); State.controlsContainer.appendChild(downloadButton); const settingsButton = document.createElement('button'); settingsButton.className = 'telemetry-settings-button'; settingsButton.textContent = '⚙ Settings'; settingsButton.title = 'Open Telemetry & UI Settings'; settingsButton.addEventListener('click', () => { this.createSettingsPopup(); }); State.controlsContainer.appendChild(settingsButton); this.updateControlButtonsVisibility(); document.body.classList.toggle('telemetry-hidden', !Config.get('telemetryVisible')); } }; const APIManager = { isFetching: new Set(), async fetchWithAuthHeader(url, apiKey, options = {}, retries = 3, baseDelay = 1000) { let delay = baseDelay; for (let attempt = 0; attempt < retries; attempt++) { try { const response = await fetch(url, { ...options, headers: { 'Accept': 'application/json', 'Authorization': 'ApiKey ' + apiKey, ...(options.headers || {}) } }); if (!response.ok) { let errorMsg = `API Error (${response.status}): ${response.statusText}`; try { const errorData = await response.json(); if (errorData.error?.error) { errorMsg = `API Error: ${errorData.error.error} (Code ${errorData.error.code})`; } } catch (e) {} const error = new Error(errorMsg); error.statusCode = response.status; throw error; } const data = await response.json(); if (data.error) { if (data.error.code === 2 && attempt < retries - 1) { await new Promise(res => setTimeout(res, delay)); delay *= 2; continue; } throw new Error(`API Error: ${data.error.error} (Code ${data.error.code})`); } return data; } catch (error) { if (attempt < retries - 1 && (error.message.includes('Too many requests') || error.message.includes('Code 2') || error.statusCode === 429)) { await new Promise(res => setTimeout(res, delay)); delay *= 2; continue; } throw error; } } throw new Error('Max retries reached'); }, async fetchAndDisplayRacingStats(driverItem, userId) { const detailsDiv = driverItem.querySelector('.driver-details'); const statsContainer = detailsDiv?.querySelector('.api-stats-container'); if (!statsContainer || !userId || this.isFetching.has(userId)) return; if (!Utils.isApiKeyAvailable()) { statsContainer.classList.add('no-key'); statsContainer.querySelector('.api-stat-error-msg').textContent = 'API key not configured in settings.'; statsContainer.querySelectorAll('.api-stat').forEach(span => span.textContent = 'N/A'); driverItem.dataset.statsLoaded = 'true'; return; } const apiKey = Config.get('apiKey'); this.isFetching.add(userId); statsContainer.classList.remove('error', 'loaded', 'no-key'); statsContainer.classList.add('loading'); statsContainer.querySelector('.api-stat-error-msg').textContent = ''; statsContainer.querySelectorAll('.api-stat').forEach(span => span.textContent = '...'); const apiUrl = `https://api.torn.com/v2/user?selections=personalstats&id=${userId}&cat=racing&key=${apiKey}`; try { const response = await fetch(apiUrl); if (!response.ok) { let errorMsg = `HTTP error ${response.status}`; try { const errorData = await response.json(); if (errorData.error?.error) errorMsg = `API Error: ${errorData.error.error} (Code ${errorData.error.code})`; } catch (e) {} throw new Error(errorMsg); } const data = await response.json(); if (data.error) throw new Error(`API Error: ${data.error.error} (Code ${data.error.code})`); const racingStats = data?.personalstats?.racing; if (racingStats && typeof racingStats === 'object') { statsContainer.querySelector('.stat-skill').textContent = racingStats.skill?.toLocaleString() ?? 'N/A'; statsContainer.querySelector('.stat-points').textContent = racingStats.points?.toLocaleString() ?? 'N/A'; const racesEntered = racingStats.races?.entered; const racesWon = racingStats.races?.won; statsContainer.querySelector('.stat-races-entered').textContent = racesEntered?.toLocaleString() ?? 'N/A'; statsContainer.querySelector('.stat-races-won').textContent = racesWon?.toLocaleString() ?? 'N/A'; const winRate = (racesEntered && racesWon > 0) ? ((racesWon / racesEntered) * 100).toFixed(1) + '%' : (racesEntered > 0 ? '0.0%' : 'N/A'); statsContainer.querySelector('.stat-win-rate').textContent = winRate; statsContainer.classList.add('loaded'); driverItem.dataset.statsLoaded = 'true'; } else { statsContainer.classList.add('error'); statsContainer.querySelector('.api-stat-error-msg').textContent = 'No racing stats found (or permission denied).'; statsContainer.querySelectorAll('.api-stat').forEach(span => span.textContent = 'N/A'); driverItem.dataset.statsLoaded = 'true'; } } catch (error) { statsContainer.classList.add('error'); statsContainer.querySelector('.api-stat-error-msg').textContent = `Error: ${error.message}`; statsContainer.querySelectorAll('.api-stat').forEach(span => span.textContent = '-'); delete driverItem.dataset.statsLoaded; Utils.showNotification(error.message, 'error'); } finally { statsContainer.classList.remove('loading'); this.isFetching.delete(userId); } }, async fetchUserRacingPoints(apiKey, userId) { if (!apiKey || !userId) return null; if (this.isFetching.has(`points-${userId}`)) return null; this.isFetching.add(`points-${userId}`); const apiUrl = `https://api.torn.com/v2/user?selections=personalstats&id=${userId}&cat=racing&key=${apiKey}`; try { const response = await fetch(apiUrl); if (!response.ok) { let errorMsg = `HTTP error ${response.status}`; let errorData = null; try { errorData = await response.json(); } catch (e) { } if (errorData && errorData.error?.error) { errorMsg = `API Error: ${errorData.error.error} (Code ${errorData.error.code})`; } throw new Error(errorMsg); } const data = await response.json(); if (data.error) { throw new Error(`API Error: ${data.error.error} (Code ${data.error.code})`); } const points = data?.personalstats?.racing?.points; return typeof points === 'number' ? points : null; } catch (error) { Utils.showNotification(error.message, 'error'); return null; } finally { this.isFetching.delete(`points-${userId}`); } }, async fetchTrackData(apiKey) { const cached = GM_getValue('tornTrackCache', null); if (cached && Date.now() - cached.timestamp < 86400000) return cached.data; const data = await this.fetchWithAuthHeader('https://api.torn.com/v2/racing/tracks', apiKey); const trackMap = data.tracks ? data.tracks.reduce((map, t) => { map[t.id] = t.title; return map; }, {}) : {}; GM_setValue('tornTrackCache', { data: trackMap, timestamp: Date.now() }); return trackMap; }, async fetchCarBaseStats(apiKey) { const cached = GM_getValue('tornCarCache', null); if (cached && Date.now() - cached.timestamp < 86400000) return cached.data; const data = await this.fetchWithAuthHeader('https://api.torn.com/v2/racing/cars', apiKey); const carMap = data.cars ? data.cars.reduce((map, c) => { map[c.car_item_id] = c; return map; }, {}) : {}; GM_setValue('tornCarCache', { data: carMap, timestamp: Date.now() }); return carMap; }, async fetchHistoricalRaceData(apiKey, userId, limit) { if (!apiKey) throw new Error("API Key required."); if (!userId) throw new Error("User ID required."); limit = Math.max(10, Math.min(1000, limit || 100)); const url = `https://api.torn.com/v2/user/races?key=${apiKey}&id=${userId}&cat=official&sort=DESC&limit=${limit}`; const response = await fetch(url); if (!response.ok) { let errorMsg = `API Error (${response.status}): ${response.statusText}`; try { const errorData = await response.json(); if (errorData.error?.error) errorMsg = `API Error: ${errorData.error.error} (Code ${errorData.error.code})`; } catch (e) {} throw new Error(errorMsg); } const data = await response.json(); if (data.error) { throw new Error(`API Error: ${data.error.error} (Code ${data.error.code})`); } return data.races || []; }, async fetchTrackRecords(apiKey, trackId, raceClass) { if (!trackId) throw new Error("Track ID required."); if (!raceClass) throw new Error("Race Class required."); const url = `https://api.torn.com/v2/racing/${trackId}/records?cat=${raceClass}`; const data = await this.fetchWithAuthHeader(url, apiKey); return data.records || []; } }; const StatsCalculator = { processRaceData(races, userId) { if (!races || races.length === 0 || !userId) { return { overall: { races: 0, wins: 0, podiums: 0, crashes: 0, positionSum: 0, winRate: 0, podiumRate: 0, crashRate: 0, avgPosition: 0 }, trackStats: {}, carStats: {}, totalRaces: 0, firstRaceTime: null, lastRaceTime: null }; } const overall = { races: 0, wins: 0, podiums: 0, crashes: 0, positionSum: 0 }; const trackStats = {}; const carStats = {}; let firstRaceTime = Infinity; let lastRaceTime = 0; races.forEach(race => { if (race.status !== 'finished' || !race.results) return; const userResult = race.results.find(r => r.driver_id == userId); if (!userResult) return; overall.races++; const raceTime = race.schedule?.end || 0; if (raceTime > 0) { firstRaceTime = Math.min(firstRaceTime, raceTime * 1000); lastRaceTime = Math.max(lastRaceTime, raceTime * 1000); } const trackId = race.track_id; const carName = userResult.car_item_name || 'Unknown Car'; const trackName = State.trackNameMap?.[trackId] || `Track ${trackId}`; if (!trackStats[trackId]) trackStats[trackId] = { name: trackName, races: 0, wins: 0, podiums: 0, crashes: 0, positionSum: 0, bestLap: Infinity }; if (!carStats[carName]) carStats[carName] = { name: carName, races: 0, wins: 0, podiums: 0, crashes: 0, positionSum: 0 }; trackStats[trackId].races++; carStats[carName].races++; if (userResult.has_crashed) { overall.crashes++; trackStats[trackId].crashes++; carStats[carName].crashes++; } else { const position = userResult.position; overall.positionSum += position; trackStats[trackId].positionSum += position; carStats[carName].positionSum += position; if (position === 1) { overall.wins++; trackStats[trackId].wins++; carStats[carName].wins++; } if (position <= 3) { overall.podiums++; trackStats[trackId].podiums++; carStats[carName].podiums++; } if (userResult.best_lap_time && userResult.best_lap_time < trackStats[trackId].bestLap) { trackStats[trackId].bestLap = userResult.best_lap_time; } } }); const calcRates = (stats) => { const finishedRaces = stats.races - stats.crashes; stats.winRate = finishedRaces > 0 ? (stats.wins / finishedRaces) * 100 : 0; stats.podiumRate = finishedRaces > 0 ? (stats.podiums / finishedRaces) * 100 : 0; stats.crashRate = stats.races > 0 ? (stats.crashes / stats.races) * 100 : 0; stats.avgPosition = finishedRaces > 0 ? (stats.positionSum / finishedRaces) : 0; return stats; }; calcRates(overall); Object.values(trackStats).forEach(calcRates); Object.values(carStats).forEach(calcRates); return { overall, trackStats, carStats, totalRaces: overall.races, firstRaceTime: firstRaceTime === Infinity ? null : firstRaceTime, lastRaceTime: lastRaceTime === 0 ? null : lastRaceTime }; }, processTrackRecords(records) { if (!records || records.length === 0) return []; const carCounts = {}; records.forEach(rec => { if (!carCounts[rec.car_item_id]) { carCounts[rec.car_item_id] = { car_item_id: rec.car_item_id, car_item_name: rec.car_item_name, count: 0 }; } carCounts[rec.car_item_id].count++; }); return Object.values(carCounts).sort((a, b) => b.count - a.count); } }; const DataExporter = { getFinalData() { const raceData = { raceId: State.currentRaceId, trackInfo: { ...State.trackInfo }, results: State.finalRaceData.map((driver, index) => ({ position: index + 1, name: driver.name, userId: driver.userId, car: driver.carTitle, status: driver.statusClass, finalTimeOrStatus: driver.originalStatusText })) }; return raceData; }, formatAsHTML() { const data = this.getFinalData(); let tableRows = data.results.map(r => ` <tr> <td>${r.position}</td> <td><a href="https://www.torn.com/profiles.php?XID=${r.userId}" target="_blank">${r.name} [${r.userId}]</a></td> <td>${r.car}</td> <td>${r.status === 'finished' ? r.finalTimeOrStatus : r.status.toUpperCase()}</td> </tr>`).join(''); return `<!DOCTYPE html> <html> <head> <title>Torn Race Results - ${data.trackInfo.name || 'Unknown Track'}</title> <meta charset="UTF-8"> <style> body { font-family: sans-serif; line-height: 1.4; background-color: #f0f0f0; color: #333; margin: 20px; } table { border-collapse: collapse; width: 100%; margin-top: 15px; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } th, td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; } th { background-color: #e9e9e9; font-weight: bold; } tr:nth-child(even) { background-color: #f9f9f9; } a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } h1, h2 { color: #555; } </style> </head> <body> <h1>Race Results</h1> <h2>Race ID: ${data.raceId || 'N/A'}</h2> <h2>Track: ${data.trackInfo.name || 'Unknown'} (${data.trackInfo.laps} Laps, ${data.trackInfo.length} Miles)</h2> <table> <thead> <tr><th>Pos</th><th>Driver</th><th>Car</th><th>Time/Status</th></tr> </thead> <tbody> ${tableRows} </tbody> </table> <p><small>Exported by Torn Racing Telemetry Script v${ScriptInfo.version}</small></p> </body> </html>`; }, formatAsMarkdown() { const data = this.getFinalData(); let md = `# Race Results\n\n`; md += `**Race ID:** ${data.raceId || 'N/A'}\n`; md += `**Track:** ${data.trackInfo.name || 'Unknown'} (${data.trackInfo.laps} Laps, ${data.trackInfo.length} Miles)\n\n`; md += `| Pos | Driver | Car | Time/Status |\n`; md += `|----:|--------|-----|-------------|\n`; data.results.forEach(r => { const driverLink = `[${r.name} [${r.userId}]](https://www.torn.com/profiles.php?XID=${r.userId})`; const status = r.status === 'finished' ? r.finalTimeOrStatus : r.status.toUpperCase(); md += `| ${r.position} | ${driverLink} | ${r.car} | ${status} |\n`; }); md += `\n*Exported by Torn Racing Telemetry Script v${ScriptInfo.version}*`; return md; }, formatAsCSV() { const data = this.getFinalData(); const esc = Utils.escapeCSVField; const header = ["Position", "Driver Name", "Driver ID", "Car Name", "Status", "Final Time/Status"]; const rows = data.results.map(r => [ r.position, r.name, r.userId, r.car, r.status, r.status === 'finished' ? r.finalTimeOrStatus : r.status.toUpperCase() ].map(esc).join(',')); let csvString = `# Torn Race Results\n`; csvString += `# Race ID: ${esc(data.raceId || 'N/A')}\n`; csvString += `# Track: ${esc(data.trackInfo.name || 'Unknown')} (${data.trackInfo.laps} Laps, ${data.trackInfo.length} Miles)\n`; csvString += `# Exported: ${new Date().toISOString()}\n`; csvString += `# Script Version: ${ScriptInfo.version}\n`; csvString += header.map(esc).join(',') + '\n'; csvString += rows.join('\n'); return csvString; }, formatAsPlainText() { const data = this.getFinalData(); let txt = `Torn Race Results\n`; txt += `Race ID: ${data.raceId || 'N/A'}\n`; txt += `Track: ${data.trackInfo.name || 'Unknown'} (${data.trackInfo.laps} Laps, ${data.trackInfo.length} Miles)\n`; txt += `--------------------------------------------------\n`; data.results.forEach(r => { const status = r.status === 'finished' ? r.finalTimeOrStatus : r.status.toUpperCase(); txt += `${String(r.position).padStart(3)}. ${r.name} [${r.userId}] (${r.car}) - ${status}\n`; }); txt += `--------------------------------------------------\n`; txt += `Exported by Torn Racing Telemetry Script v${ScriptInfo.version}\n`; return txt; }, formatAsJSON() { const data = this.getFinalData(); return JSON.stringify(data, null, 2); }, downloadData(dataString, fileExt, mimeType) { const blob = new Blob([dataString], { type: mimeType + ';charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; const trackNameSafe = (State.trackInfo.name || 'UnknownTrack').replace(/[^a-z0-9]/gi, '_').toLowerCase(); const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); a.download = `torn_race_${State.currentRaceId || trackNameSafe}_${timestamp}.${fileExt}`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }, copyToClipboard(text) { if (typeof GM_setClipboard !== 'undefined') { GM_setClipboard(text); } else if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).catch(err => { Utils.showNotification('Failed to copy to clipboard.', 'error'); }); } else { Utils.showNotification('Clipboard copy not supported by browser/script manager.', 'error'); } } }; const RaceManager = { getRaceId() { const firstDriverLi = document.querySelector('#leaderBoard > li[data-id]'); if (firstDriverLi && firstDriverLi.dataset.id) { const parts = firstDriverLi.dataset.id.split('-'); if (parts.length === 2 && /^\d+$/.test(parts[0])) { return parts[0]; } } return null; }, parseDriverData(originalLi) { if (!originalLi || !originalLi.matches('li[id^="lbr-"]')) return null; const nameEl = originalLi.querySelector('.name span'); const carEl = originalLi.querySelector('.car img'); const colorEl = originalLi.querySelector('.color'); const timeEl = originalLi.querySelector('.time'); const statusDiv = originalLi.querySelector('.status-wrap > div'); const dataId = originalLi.dataset.id; const userId = dataId ? dataId.split('-')[1] : null; if (!userId) { return null; } const progressText = timeEl ? timeEl.textContent.trim() : '0%'; const progressPercentage = Utils.parseProgress(progressText); let statusClass = 'unknown'; let isFinished = false; let isCrashed = false; if (statusDiv) { const classList = statusDiv.classList; if (classList.contains('crashed')) { isCrashed = true; statusClass = 'crashed'; } else if (classList.contains('gold') || classList.contains('silver') || classList.contains('bronze') || classList.contains('finished')) { isFinished = true; statusClass = 'finished'; } } if (!isFinished && !isCrashed && timeEl && timeEl.textContent.includes(':')) { isFinished = true; statusClass = 'finished'; } if (!isCrashed && !isFinished) { if (progressPercentage > 0) { statusClass = 'racing'; } else { let raceStarted = false; const anyTimeEl = document.querySelector('#leaderBoard li .time:not(:empty)'); if (anyTimeEl) { raceStarted = true; } statusClass = raceStarted ? 'racing' : 'ready'; } } if (State.previousMetrics[userId]?.statusClass === 'finished' && statusClass !== 'crashed') { statusClass = 'finished'; } return { userId, originalId: originalLi.id, name: nameEl ? nameEl.textContent.trim() : 'N/A', carImgRaw: carEl ? carEl.getAttribute('src') : '', carTitle: carEl ? carEl.title : 'Unknown Car', colorClass: colorEl ? colorEl.className.replace('color', '').trim() : 'color-default', statusClass, originalStatusText: progressText, progress: progressPercentage }; }, async updateTrackAndClassInfo() { let trackInfoUpdated = false; let classInfoUpdated = false; try { const infoElement = document.querySelector('div.track-info'); const trackHeader = document.querySelector('.drivers-list .title-black'); if (infoElement && infoElement.title) { const trackNameFromTitle = infoElement.title.trim(); const lengthMatch = infoElement.dataset.length?.match(/(\d+\.?\d*)/); const lapsMatch = trackHeader?.textContent.match(/(\d+)\s+laps?/i); const laps = lapsMatch ? parseInt(lapsMatch[1]) : (State.trackInfo.laps || 5); const length = lengthMatch ? parseFloat(lengthMatch[1]) : (State.trackInfo.length || 3.4); let trackId = State.trackInfo.id; let trackName = State.trackInfo.name; if (!trackId || trackNameFromTitle !== trackName) { if (!State.trackNameMap && Utils.isApiKeyAvailable()) { try { const apiKey = Config.get('apiKey'); if (apiKey) { State.trackNameMap = await APIManager.fetchTrackData(apiKey); } } catch (e) { State.trackNameMap = {}; } } if (State.trackNameMap) { const foundEntry = Object.entries(State.trackNameMap).find(([id, name]) => name.toLowerCase() === trackNameFromTitle.toLowerCase()); if (foundEntry) { trackId = parseInt(foundEntry[0], 10); trackName = foundEntry[1]; } else { trackName = trackNameFromTitle; trackId = null; } } else { trackName = trackNameFromTitle; trackId = null; } } if (trackId !== State.trackInfo.id || laps !== State.trackInfo.laps || Math.abs(length - State.trackInfo.length) > 0.01 || trackName !== State.trackInfo.name) { State.trackInfo = { id: trackId, name: trackName, laps, length, get total() { return this.laps * this.length; } }; trackInfoUpdated = true; if (trackId !== State.trackInfo.id || laps !== State.trackInfo.laps || Math.abs(length - State.trackInfo.length) > 0.01) { State.resetRaceState(); } } } const classElement = document.querySelector('div.banner div.class-letter'); const detectedClass = classElement ? classElement.textContent.trim().toUpperCase() : null; if (detectedClass && detectedClass !== State.currentRaceClass) { State.currentRaceClass = detectedClass; classInfoUpdated = true; } } catch (e) { console.error("Telemetry Script: Error in updateTrackAndClassInfo:", e); } return trackInfoUpdated || classInfoUpdated; }, createDriverElement(driverData, position) { const item = document.createElement('div'); item.className = 'custom-driver-item'; item.dataset.originalId = driverData.originalId; item.dataset.userId = driverData.userId; const isSelf = driverData.userId === State.userId; if (isSelf) item.classList.add('is-self'); item.classList.add(`status-${driverData.statusClass}`); const absoluteCarImgUrl = Utils.makeAbsoluteUrl(driverData.carImgRaw); item.innerHTML = `<div class="driver-info-row"><div class="driver-color-indicator ${driverData.colorClass}"></div><img class="driver-car-img" src="${absoluteCarImgUrl}" alt="${driverData.carTitle}" title="${driverData.carTitle}"><div class="driver-name">${driverData.name}${isSelf ? '<span class="self-tag">(You)</span>' : ''}</div><div class="driver-telemetry-display"></div></div><div class="driver-details"></div>`; this.updateDriverElement(item, driverData, position); return item; }, updateDriverElement(element, driverData, position) { const driverId = driverData.userId; const isSelf = driverId === State.userId; const now = Date.now(); const detailsVisible = element.classList.contains('details-visible'); const driverState = State.previousMetrics[driverId]; element.className = `custom-driver-item status-${driverData.statusClass} ${isSelf ? 'is-self' : ''} ${detailsVisible ? 'details-visible' : ''}`.trim().replace(/\s+/g, ' '); const colorIndicator = element.querySelector('.driver-color-indicator'); if (colorIndicator) { if (!colorIndicator.classList.contains(driverData.colorClass)) { colorIndicator.className = `driver-color-indicator ${driverData.colorClass}`; } let indicatorContent = position; if (driverData.statusClass === 'finished') { if (position === 1) indicatorContent = '🥇'; else if (position === 2) indicatorContent = '🥈'; else if (position === 3) indicatorContent = '🥉'; } else if (driverData.statusClass === 'crashed') { indicatorContent = '💥'; } else if (driverData.statusClass === 'ready') { indicatorContent = '-'; } colorIndicator.textContent = indicatorContent; } const carImg = element.querySelector('.driver-car-img'); const currentCarSrc = carImg ? carImg.getAttribute('src') : ''; const newCarSrc = Utils.makeAbsoluteUrl(driverData.carImgRaw); if (carImg && currentCarSrc !== newCarSrc) { carImg.src = newCarSrc; carImg.alt = driverData.carTitle; carImg.title = driverData.carTitle; } const nameDiv = element.querySelector('.driver-name'); const expectedNameHTML = `${driverData.name}${isSelf ? '<span class="self-tag">(You)</span>' : ''}`; if (nameDiv && nameDiv.innerHTML !== expectedNameHTML) { nameDiv.innerHTML = expectedNameHTML; } const telemetryDiv = element.querySelector('.driver-telemetry-display'); if (telemetryDiv) { const displayOptions = Config.get('telemetryDisplayOptions') || []; const speedUnit = Config.get('speedUnit'); let extraTelemetryText = ''; if (driverData.statusClass === 'crashed' || driverData.statusClass === 'finished' || driverData.statusClass === 'ready') { if (telemetryDiv._animationRAF) { cancelAnimationFrame(telemetryDiv._animationRAF); telemetryDiv._animationRAF = null; telemetryDiv._currentAnimSpeed = undefined; telemetryDiv._currentAnimAcc = undefined; } let telemetryText = ''; let telemetryColor = 'var(--telemetry-default-color)'; if (driverData.statusClass === 'crashed') { telemetryText = '💥 CRASHED'; telemetryColor = 'var(--telemetry-decel-color)'; } else if (driverData.statusClass === 'finished') { const finishTime = Utils.parseTime(driverData.originalStatusText); let avgSpeedFormatted = '---'; let finishTimeText = driverData.originalStatusText || '--:--'; if (finishTime > 0 && State.trackInfo.total > 0) { const avgSpeed = (State.trackInfo.total / finishTime) * 3600; avgSpeedFormatted = `~${Math.round(Utils.convertSpeed(avgSpeed, speedUnit))} ${speedUnit}`; } telemetryText = `🏁 ${finishTimeText} (${avgSpeedFormatted})`; } else { const displayParts = []; if (displayOptions.includes('speed')) displayParts.push(`0 ${speedUnit}`); if (displayOptions.includes('acceleration')) displayParts.push(`0.0 g`); if (displayOptions.includes('progress')) displayParts.push(`${driverData.progress.toFixed(1)}%`); telemetryText = displayParts.length > 0 ? displayParts.join(' | ') : '-'; } telemetryDiv.innerHTML = telemetryText; telemetryDiv.style.color = telemetryColor; } else { const metrics = Telemetry.calculateDriverMetrics(driverId, driverData.progress, now); const targetSpeed = Utils.convertSpeed(metrics.speed, speedUnit); const targetAcc = metrics.acceleration; if (Config.get('showLapEstimate') && driverData.progress < 100 && State.trackInfo.id && driverState) { const lapEstimateSeconds = Telemetry.calculateSmoothedLapEstimate(driverId, metrics); if (lapEstimateSeconds !== null && isFinite(lapEstimateSeconds) && lapEstimateSeconds > 0) { extraTelemetryText = ` <span class="lap-estimate">(~${Utils.formatTime(lapEstimateSeconds)})</span>`; } } const canAnimate = Config.get('animateChanges') && driverState && !driverState.firstUpdate && (displayOptions.includes('speed') || displayOptions.includes('acceleration')) && !displayOptions.includes('progress'); if (canAnimate) { const fromSpeed = (telemetryDiv._currentAnimSpeed !== undefined) ? telemetryDiv._currentAnimSpeed : Math.round(Utils.convertSpeed(driverState.lastDisplayedSpeed || 0, speedUnit)); const fromAcc = (telemetryDiv._currentAnimAcc !== undefined) ? telemetryDiv._currentAnimAcc : driverState.lastDisplayedAcceleration || 0; const animationDuration = Math.min(metrics.timeDelta || Config.get('minUpdateInterval'), Config.get('maxAnimationDurationMs')); let animationMode = ''; if (displayOptions.includes('speed') && displayOptions.includes('acceleration')) animationMode = 'both'; else if (displayOptions.includes('speed')) animationMode = 'speed'; else if (displayOptions.includes('acceleration')) animationMode = 'acceleration'; if (animationMode) { Telemetry.animateTelemetry(telemetryDiv, fromSpeed, Math.round(targetSpeed), fromAcc, targetAcc, animationDuration, animationMode, speedUnit, extraTelemetryText); } else { if (telemetryDiv._animationRAF) cancelAnimationFrame(telemetryDiv._animationRAF); telemetryDiv._animationRAF = null; telemetryDiv.innerHTML = `${Math.round(targetSpeed)} ${speedUnit}${extraTelemetryText}`; telemetryDiv.style.color = Config.get('colorCode') ? Telemetry.getTelemetryColor(targetAcc) : 'var(--telemetry-default-color)'; } } else { if (telemetryDiv._animationRAF) { cancelAnimationFrame(telemetryDiv._animationRAF); telemetryDiv._animationRAF = null; telemetryDiv._currentAnimSpeed = undefined; telemetryDiv._currentAnimAcc = undefined; } let staticText = ''; let staticColor = 'var(--telemetry-default-color)'; const parts = []; if (displayOptions.includes('speed')) { parts.push(`${Math.round(targetSpeed)} ${speedUnit}`); } if (displayOptions.includes('acceleration')) { parts.push(`${targetAcc.toFixed(1)} g`); if (Config.get('colorCode')) { staticColor = Telemetry.getTelemetryColor(targetAcc); } } if (displayOptions.includes('progress')) { parts.push(`${driverData.progress.toFixed(1)}%`); if (!displayOptions.includes('acceleration') || !Config.get('colorCode')) { staticColor = 'var(--telemetry-default-color)'; } } staticText = parts.join(' | '); if (!staticText) staticText = '-'; telemetryDiv.innerHTML = staticText + extraTelemetryText; telemetryDiv.style.color = staticColor; } if (driverState) { driverState.lastDisplayedSpeed = metrics.speed; driverState.lastDisplayedAcceleration = metrics.acceleration; } } } const detailsDiv = element.querySelector('.driver-details'); if (detailsDiv) { const needsHTMLStructure = detailsVisible && !detailsDiv.hasChildNodes(); if (needsHTMLStructure) { let localInfoHTML = `<p><strong>Position:</strong> <span class="detail-stat detail-position">${driverData.statusClass === 'crashed' ? 'Crashed' : position}</span></p>`; localInfoHTML += `<p><strong>Progress:</strong> <span class="detail-stat detail-progress">${driverData.progress.toFixed(2)}%</span></p>`; localInfoHTML += `<p><strong>Lap:</strong> <span class="detail-stat detail-lap">-/-</span></p>`; localInfoHTML += `<p><strong>Lap Progress:</strong> <span class="detail-stat detail-lap-progress">-%</span></p>`; localInfoHTML += `<p><strong>Speed (Calc MPH):</strong> <span class="detail-stat detail-calc-speed">-</span> mph</p>`; localInfoHTML += `<p><strong>Accel (Calc g):</strong> <span class="detail-stat detail-calc-accel">-</span> g</p>`; localInfoHTML += `<p class="p-est-lap-time" style="display: none;"><strong>Est. Lap Time:</strong> <span class="detail-stat detail-est-lap-time">N/A</span></p>`; const apiStatsHTML = Config.get('fetchApiStatsOnClick') ? `<div class="api-stats-container"><p>Skill: <span class="api-stat stat-skill">...</span></p><p>Points: <span class="api-stat stat-points">...</span></p><p>Races: <span class="api-stat stat-races-entered">...</span> (<span class="api-stat stat-races-won">...</span> Wins)</p><p>Win Rate: <span class="api-stat stat-win-rate">...</span></p><span class="api-stat-error-msg"></span></div>` : ''; detailsDiv.innerHTML = ` <p><strong>User:</strong> ${driverData.name} [<a href="/profiles.php?XID=${driverId}" target="_blank" rel="noopener noreferrer" title="View Profile">${driverId}</a>] ${isSelf ? '<strong>(You)</strong>':''}</p> <p><strong>Car:</strong> ${driverData.carTitle}</p> <p><strong>Status:</strong> <span style="text-transform: capitalize;" class="detail-status">${driverData.statusClass}</span> <span class="detail-original-status"></span></p> ${localInfoHTML} ${apiStatsHTML} <p><em>Original ID: ${driverData.originalId}</em></p>`; if (Config.get('fetchApiStatsOnClick') && driverId && !element.hasAttribute('data-stats-loaded') && !APIManager.isFetching.has(driverId)) { setTimeout(() => APIManager.fetchAndDisplayRacingStats(element, driverId), 50); } } if (detailsVisible) { const updateDetailStat = (selector, value, placeholder = '-', isLiveData = true) => { const el = detailsDiv.querySelector(selector); const usePlaceholder = isLiveData && driverData.statusClass !== 'racing'; if (el) el.textContent = usePlaceholder ? placeholder : value; }; updateDetailStat('.detail-position', driverData.statusClass === 'crashed' ? 'Crashed' : position, '-', false); updateDetailStat('.detail-progress', `${driverData.progress.toFixed(2)}%`, '0.00%', false); const statusEl = detailsDiv.querySelector('.detail-status'); if (statusEl) statusEl.textContent = driverData.statusClass; const statusSpan = detailsDiv.querySelector('.detail-original-status'); if (statusSpan) { statusSpan.textContent = (driverData.originalStatusText && !['finished', 'crashed'].includes(driverData.statusClass)) ? `(${driverData.originalStatusText})` : ''; } if (driverState || driverData.statusClass !== 'racing') { updateDetailStat('.detail-lap', `${driverState?.currentLap || '-'}/${State.trackInfo.laps || '-'}`, '-/-'); updateDetailStat('.detail-lap-progress', `${driverState?.progressInLap !== undefined ? driverState.progressInLap.toFixed(1) : '-'}%`, '-%'); updateDetailStat('.detail-calc-speed', `${driverState?.lastDisplayedSpeed !== undefined ? driverState.lastDisplayedSpeed.toFixed(1) : '-'}`, '-'); updateDetailStat('.detail-calc-accel', `${driverState?.lastDisplayedAcceleration !== undefined ? driverState.lastDisplayedAcceleration.toFixed(3) : '-'}`, '-'); const estLapTimeEl = detailsDiv.querySelector('.detail-est-lap-time'); const estLapParaEl = detailsDiv.querySelector('.p-est-lap-time'); if (estLapTimeEl && estLapParaEl) { const isRacing = driverData.statusClass === 'racing'; const estLapVisible = isRacing && Config.get('showLapEstimate') && driverState?.smoothedLapEstimate !== null && isFinite(driverState?.smoothedLapEstimate) && State.trackInfo.id && driverState?.smoothedLapEstimate > 0; if (estLapVisible) { estLapTimeEl.textContent = `${Utils.formatTime(driverState.smoothedLapEstimate)} (Raw: ${driverState.rawLapEstimate !== null && isFinite(driverState.rawLapEstimate) ? Utils.formatTime(driverState.rawLapEstimate) : '--:--'})`; estLapParaEl.style.display = ''; } else { estLapTimeEl.textContent = 'N/A'; estLapParaEl.style.display = 'none'; } } } if (Config.get('fetchApiStatsOnClick') && driverId && !element.hasAttribute('data-stats-loaded') && !APIManager.isFetching.has(driverId)) { const statsContainer = detailsDiv.querySelector('.api-stats-container'); if (statsContainer && !statsContainer.matches('.loading, .loaded, .error, .no-key')) { setTimeout(() => APIManager.fetchAndDisplayRacingStats(element, driverId), 50); } } } } if (driverState) driverState.statusClass = driverData.statusClass; }, stableUpdateCustomList() { if (!Config.get('hideOriginalList')) { if (State.isInitialized) { State.resetRaceState(); } return; } if (State.isUpdating || !State.customUIContainer || !State.originalLeaderboard || !document.body.contains(State.originalLeaderboard)) { return; } State.isUpdating = true; const savedScrollTop = State.customUIContainer.scrollTop; const hadFocus = document.activeElement === State.customUIContainer || State.customUIContainer.contains(document.activeElement); const originalListItems = Array.from(State.originalLeaderboard.querySelectorAll(':scope > li[id^="lbr-"]')); const newDriversData = originalListItems.map(this.parseDriverData).filter(data => data !== null); const currentElementsMap = new Map(); State.customUIContainer.querySelectorAll(':scope > .custom-driver-item[data-user-id]').forEach(el => { currentElementsMap.set(el.dataset.userId, el); }); const newElementsToProcess = new Map(); newDriversData.forEach((driverData, index) => { const position = index + 1; let element = currentElementsMap.get(driverData.userId); if (element) { this.updateDriverElement(element, driverData, position); newElementsToProcess.set(driverData.userId, { data: driverData, element: element, position: position }); currentElementsMap.delete(driverData.userId); } else { element = this.createDriverElement(driverData, position); newElementsToProcess.set(driverData.userId, { data: driverData, element: element, position: position }); } }); currentElementsMap.forEach((elementToRemove, removedUserId) => { const telemetryDiv = elementToRemove.querySelector('.driver-telemetry-display'); if (telemetryDiv && telemetryDiv._animationRAF) { cancelAnimationFrame(telemetryDiv._animationRAF); } if(State.previousMetrics[removedUserId]) { delete State.previousMetrics[removedUserId]; delete State.lastUpdateTimes[removedUserId]; } elementToRemove.remove(); }); let previousElement = null; newDriversData.forEach((driverData) => { const { element } = newElementsToProcess.get(driverData.userId); const insertBeforeNode = previousElement ? previousElement.nextSibling : State.customUIContainer.firstChild; if (element !== insertBeforeNode) { State.customUIContainer.insertBefore(element, insertBeforeNode); } previousElement = element; }); const finishedOrCrashed = ['finished', 'crashed']; const allDriversFinished = newDriversData.length > 0 && newDriversData.every(d => finishedOrCrashed.includes(d.statusClass)); if (allDriversFinished && !State.raceFinished) { State.raceFinished = true; State.finalRaceData = newDriversData; UI.updateControlButtonsVisibility(); } else if (!allDriversFinished && State.raceFinished) { State.raceFinished = false; State.finalRaceData = []; UI.updateControlButtonsVisibility(); } if (hadFocus && document.body.contains(State.customUIContainer)) { State.customUIContainer.scrollTop = savedScrollTop; } State.isUpdating = false; } }; const HistoryManager = { logStorageKey: 'racingHistoryLog_v3.1.0', loadLog() { try { const storedLog = GM_getValue(this.logStorageKey, '[]'); State.historyLog = JSON.parse(storedLog); if (State.historyLog.length > 0) { const latest = State.historyLog[0]; State.lastKnownSkill = latest.skill; State.lastKnownClass = latest.class; State.lastKnownPoints = latest.points; } else { State.lastKnownSkill = null; State.lastKnownClass = null; State.lastKnownPoints = null; } } catch (e) { State.historyLog = []; State.lastKnownSkill = null; State.lastKnownClass = null; State.lastKnownPoints = null; GM_setValue(this.logStorageKey, '[]'); } }, saveLog() { try { const limit = Config.get('historyLogLimit'); if (State.historyLog.length > limit) { State.historyLog = State.historyLog.slice(0, limit); } GM_setValue(this.logStorageKey, JSON.stringify(State.historyLog)); } catch (e) {} }, getLog() { return [...State.historyLog]; }, clearLog() { State.historyLog = []; State.lastKnownSkill = null; State.lastKnownClass = null; State.lastKnownPoints = null; GM_deleteValue(this.logStorageKey); }, getCurrentSkillAndClass() { const skillElement = document.querySelector('div.banner div.skill'); const classElement = document.querySelector('div.banner div.class-letter'); const skill = skillElement ? parseFloat(skillElement.textContent) : null; const className = classElement ? classElement.textContent.trim().toUpperCase() : null; return { skill: !isNaN(skill) ? skill : null, class: className }; }, async checkAndLogUserStats() { if (!Config.get('historyEnabled') || !State.isRaceViewActive || !State.userId) return; const { skill: currentSkill, class: currentClass } = this.getCurrentSkillAndClass(); let currentPoints = State.lastKnownPoints; if (Utils.isApiKeyAvailable() && !State.isFetchingPoints) { State.isFetchingPoints = true; const apiKey = Config.get('apiKey'); try { const fetchedPoints = await APIManager.fetchUserRacingPoints(apiKey, State.userId); if (fetchedPoints !== null) currentPoints = fetchedPoints; } catch (e) { } finally { State.isFetchingPoints = false; } } const latestLogEntry = State.historyLog.length > 0 ? State.historyLog[0] : null; const skillChanged = currentSkill !== null && (!latestLogEntry || currentSkill !== latestLogEntry.skill); const classChanged = currentClass !== null && (!latestLogEntry || currentClass !== latestLogEntry.class); const pointsChanged = currentPoints !== null && (!latestLogEntry || currentPoints !== latestLogEntry.points); if (!latestLogEntry || skillChanged || classChanged || pointsChanged) { if (currentSkill !== null || currentClass !== null || currentPoints !== null) { const newEntry = { timestamp: Date.now(), skill: currentSkill, class: currentClass, points: currentPoints }; State.historyLog.unshift(newEntry); const limit = Config.get('historyLogLimit'); if (State.historyLog.length > limit) { State.historyLog = State.historyLog.slice(0, limit); } this.saveLog(); State.lastKnownSkill = currentSkill; State.lastKnownClass = currentClass; State.lastKnownPoints = currentPoints; if (State.historyPanelInstance) { UI.createHistoryPanel(); } } } }, startCheckInterval() { if (State.historyCheckIntervalId) clearInterval(State.historyCheckIntervalId); State.historyCheckIntervalId = null; if (!Config.get('historyEnabled') || !State.isInitialized || !State.isRaceViewActive || !State.userId) return; this.checkAndLogUserStats(); const intervalMs = Config.get('historyCheckInterval'); State.historyCheckIntervalId = setInterval(() => { this.checkAndLogUserStats(); }, intervalMs); }, restartCheckInterval() { this.startCheckInterval(); } }; function toggleDetails(event) { if (event.target.tagName === 'A') return; const driverItem = event.target.closest('.custom-driver-item'); if (driverItem && !State.isUpdating) { const driverId = driverItem.dataset.userId; const isOpening = !driverItem.classList.contains('details-visible'); driverItem.classList.toggle('details-visible'); const position = Array.from(driverItem.parentNode.children).indexOf(driverItem) + 1; const driverData = RaceManager.parseDriverData(document.getElementById(driverItem.dataset.originalId)); if (driverData) { RaceManager.updateDriverElement(driverItem, driverData, position); } if (isOpening && Config.get('fetchApiStatsOnClick') && driverId) { if (!driverItem.hasAttribute('data-stats-loaded') && !APIManager.isFetching.has(driverId)) { setTimeout(() => APIManager.fetchAndDisplayRacingStats(driverItem, driverId), 50); } } } } function cleanupScriptState(reason = "Unknown") { if (State.observers.length > 0) { State.observers.forEach(obs => obs.disconnect()); State.observers = []; } if (State.historyCheckIntervalId) { clearInterval(State.historyCheckIntervalId); State.historyCheckIntervalId = null; } document.querySelectorAll('.driver-telemetry-display').forEach(el => { if (el._animationRAF) cancelAnimationFrame(el._animationRAF); el._animationRAF = null; el._currentAnimSpeed = undefined; el._currentAnimAcc = undefined; }); State.controlsContainer?.remove(); State.customUIContainer?.remove(); State.customUIContainer = null; State.controlsContainer = null; State.clearPopupsAndFullReset(); State.isRaceViewActive = false; document.body.classList.remove('hide-original-leaderboard', 'telemetry-hidden'); } async function initialize() { if (State.isInitialized) { return true; } try { let userIdFound = false; // Primary source: topBannerInitData global object const userIdFromBanner = window.topBannerInitData?.user?.data?.userID; if (userIdFromBanner) { State.userId = userIdFromBanner.toString(); userIdFound = true; } // Fallback source: #torn-user input element if (!userIdFound) { const userInput = document.getElementById('torn-user'); if (userInput) { const userData = JSON.parse(userInput.value); State.userId = userData.id?.toString(); if (State.userId) { userIdFound = true; } } } if (!userIdFound) throw new Error("User ID could not be determined."); // Auto-configure PDA key if running in PDA and no key is set if (isPDA && Config.get('apiKey') === '') { Config.set('apiKey', '###PDA-APIKEY###'); Utils.showNotification('Torn PDA API key automatically configured.', 'success'); } HistoryManager.loadLog(); State.originalLeaderboard = document.getElementById('leaderBoard'); const originalScrollbarContainer = document.getElementById('drivers-scrollbar'); if (!State.originalLeaderboard || !originalScrollbarContainer) { throw new Error("Leaderboard elements not found."); } const parentContainer = originalScrollbarContainer.parentNode; if (!State.controlsContainer) { State.controlsContainer = document.getElementById('telemetryControlsContainer'); if (!State.controlsContainer) { State.controlsContainer = document.createElement('div'); State.controlsContainer.id = 'telemetryControlsContainer'; State.controlsContainer.className = 'telemetry-controls-container'; parentContainer.insertBefore(State.controlsContainer, originalScrollbarContainer); } } if (!State.customUIContainer) { State.customUIContainer = document.getElementById('custom-driver-list-container'); if (State.customUIContainer) { State.customUIContainer.removeEventListener('click', toggleDetails); } else { State.customUIContainer = document.createElement('div'); State.customUIContainer.id = 'custom-driver-list-container'; parentContainer.insertBefore(State.customUIContainer, originalScrollbarContainer); } State.customUIContainer.addEventListener('click', toggleDetails); } UI.initializeControls(); State.currentRaceId = RaceManager.getRaceId(); await RaceManager.updateTrackAndClassInfo(); document.body.classList.toggle('hide-original-leaderboard', Config.get('hideOriginalList')); if (Config.get('hideOriginalList') && State.originalLeaderboard.children.length > 0) { RaceManager.stableUpdateCustomList(); } else if (!Config.get('hideOriginalList')) { State.resetRaceState(); } State.isInitialized = true; HistoryManager.startCheckInterval(); if (State.observers.length === 0 && document.body.contains(State.originalLeaderboard)) { const observer = new MutationObserver(() => { window.requestAnimationFrame(async () => { if (State.isUpdating || !State.isInitialized) return; try { const detectedRaceId = RaceManager.getRaceId(); if (detectedRaceId && detectedRaceId !== State.currentRaceId) { State.currentRaceId = detectedRaceId; } await RaceManager.updateTrackAndClassInfo(); RaceManager.stableUpdateCustomList(); } catch (e) { console.error("Telemetry Script: Error during leaderboard update:", e); } }); }); const observerConfig = { childList: true, subtree: true, attributes: true, characterData: true }; observer.observe(State.originalLeaderboard, observerConfig); State.observers.push(observer); } RaceManager.stableUpdateCustomList(); return true; } catch (e) { Utils.showNotification(`Init Error: ${e.message}`, "error"); cleanupScriptState("Initialization error"); return false; } } let currentHref = document.location.href; const pageObserver = new MutationObserver(() => { if (currentHref !== document.location.href) { currentHref = document.location.href; if (State.isInitialized) { cleanupScriptState("Page Navigation"); } } }); const raceViewObserver = new MutationObserver((mutations) => { let raceViewEntered = false; let raceViewExited = false; for (const mutation of mutations) { if (mutation.addedNodes.length) { for (const node of mutation.addedNodes) { if (node.nodeType === 1 && (node.id === 'racingupdates' || node.querySelector('#racingupdates'))) { raceViewEntered = true; break; } } } if (raceViewEntered) break; if (mutation.removedNodes.length) { for (const node of mutation.removedNodes) { if (node.nodeType === 1 && node.id === 'racingupdates') { raceViewExited = true; break; } } } if (raceViewExited) break; } if (raceViewEntered && !State.isRaceViewActive) { State.isRaceViewActive = true; setTimeout(initialize, 150); } else if (raceViewExited && State.isRaceViewActive) { State.isRaceViewActive = false; if (State.isInitialized) { cleanupScriptState("Exited Race View"); } } }); function startObservers() { pageObserver.observe(document.body, { childList: true, subtree: true }); raceViewObserver.observe(document.body, { childList: true, subtree: true }); if (document.getElementById('racingupdates')) { if (!State.isRaceViewActive) { State.isRaceViewActive = true; setTimeout(initialize, 100); } } else { State.isRaceViewActive = false; } } if (document.readyState === 'complete' || document.readyState === 'interactive') { startObservers(); } else { document.addEventListener('DOMContentLoaded', startObservers); } window.addEventListener('unload', () => { pageObserver.disconnect(); raceViewObserver.disconnect(); if (State.isInitialized) { cleanupScriptState("Window Unload"); } }); })();
