const currentUpgrades = {
color: '#00ff55',
finish: 'glossy'
};
let paletteVisible = false;
let hue = 0;
let selectorX = 320;
let selectorY = 0;
function toggleCustomPalette() {
paletteVisible = !paletteVisible;
const palette = document.getElementById('custom-palette');
palette.style.display = paletteVisible ? 'flex' : 'none';
}
function toggleSubmenu(name) {
if (name === 'colorandfinish') {
const colorPanel = document.getElementById('color-panel');
const finishOptions = document.getElementById('finish-options');
if (!colorPanel || !finishOptions) {
console.error('color-panel or finish-options element not found');
return;
}
// Всегда показываем панели выбора цвета и покрытия при нажатии на кнопку
colorPanel.classList.add('active');
finishOptions.classList.add('active');
clearMessage();
return;
}
const submenus = document.querySelectorAll('.submenu');
let isClosingActive = false;
submenus.forEach(s => {
if (s.id === name + '-submenu') {
if (s.classList.contains('active')) {
s.classList.remove('active');
// При закрытии активной вкладки скрываем палитру и панель покрытия
hideColorPanel();
hideFinishOptions();
isClosingActive = true;
return;
}
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
if (!isClosingActive) {
// При переключении на другую вкладку скрываем палитру и панель покрытия
hideColorPanel();
hideFinishOptions();
}
clearMessage();
}
document.addEventListener('DOMContentLoaded', () => {
const colorAndFinishBtn = document.getElementById('colorandfinish-btn');
if (colorAndFinishBtn) {
colorAndFinishBtn.addEventListener('click', () => {
toggleSubmenu('colorandfinish');
});
} else {
console.error('colorandfinish-btn element not found');
}
});
function hideFinishOptions() {
const finishOptions = document.getElementById('finish-options');
const colorPanel = document.getElementById('color-panel');
if (finishOptions) finishOptions.classList.remove('active');
if (colorPanel) colorPanel.classList.remove('active');
}
function upgrade(type, level) {
updateMessage(`Вы выбрали апгрейд: ${type}, уровень ${level + 1}`);
if (type === 'color') return;
if (type === 'turbo') {
mp.trigger('LSC_UpgradeSelected', `turbo:${level}`);
} else {
mp.trigger('LSC_UpgradeSelected', `${type}:${level}`);
}
}
function exitLSC() {
updateMessage('Выход из меню...');
mp.trigger('LSC_Exit');
}
function showColorPanel() {
document.getElementById('color-panel').classList.add('active');
document.getElementById('custom-palette').style.display = 'flex';
paletteVisible = true;
}
function hideColorPanel() {
document.getElementById('color-panel').classList.remove('active');
document.getElementById('custom-palette').style.display = 'none';
paletteVisible = false;
}
function showColorPicker() {
// Функция отключена, так как переключение между цветом и покрытием убрано
// и оба блока всегда показываются
}
function showFinishOptions() {
// Убрано переключение между цветом и покрытием, всегда показываем оба блока
}
function onFinishChange() {
const radios = document.querySelectorAll('#finish-options input[name="finish"]');
radios.forEach(radio => {
if (radio.checked) {
currentUpgrades.finish = radio.value;
updateMessage(`Выбрали покрытие: ${formatFinishName(radio.value)}`);
}
});
}
function hexToIntRGB(hex) {
hex = hex.replace('#', '');
return parseInt(hex, 16);
}
function applyColorFinish() {
updateMessage(`Применяем цвет ${currentUpgrades.color} с покрытием ${formatFinishName(currentUpgrades.finish)}`);
const colorInt = hexToIntRGB(currentUpgrades.color);
mp.trigger('LSC_UpgradeSelected', `color:${colorInt}:${currentUpgrades.finish}`);
}
function formatFinishName(value) {
switch (value) {
case 'glossy': return 'Глянцевый';
case 'matte': return 'Матовый';
case 'metallic': return 'Металлик';
case 'pearl': return 'Перламутр';
case 'chrome': return 'Хром';
default: return value;
}
}
function updateMessage(msg) {
const el = document.getElementById('message');
el.textContent = msg;
}
function clearMessage() {
updateMessage('');
}
function hsvToRgb(h, s, v) {
let c = v * s;
let x = c * (1 - Math.abs((h / 60) % 2 - 1));
let m = v - c;
let r = 0, g = 0, b = 0;
if (0 <= h && h < 60) { r = c; g = x; b = 0; }
else if (60 <= h && h < 120) { r = x; g = c; b = 0; }
else if (120 <= h && h < 180) { r = 0; g = c; b = x; }
else if (180 <= h && h < 240) { r = 0; g = x; b = c; }
else if (240 <= h && h < 300) { r = x; g = 0; b = c; }
else if (300 <= h && h < 360) { r = c; g = 0; b = x; }
r = Math.round((r + m) * 255);
g = Math.round((g + m) * 255);
b = Math.round((b + m) * 255);
return { r, g, b };
}
document.addEventListener('DOMContentLoaded', () => {
const colorStrip = document.getElementById('color-strip');
colorStrip.style.backgroundColor = currentUpgrades.color;
// colorStrip.onclick = null; // отключаем клик, чтобы палитра не открывалась по клику на полоску
const canvas = document.getElementById('palette-canvas');
const ctx = canvas.getContext('2d');
// Жестко задаем размеры canvas, чтобы совпадали с CSS
const width = canvas.width = 320;
const height = canvas.height = 300;
const hueSlider = document.getElementById('hue-slider');
hueSlider.disabled = false; // Активируем слайдер, если был заблокирован
hueSlider.value = hue; // Устанавливаем значение слайдера в текущий hue
function drawPalette(hue) {
ctx.clearRect(0, 0, width, height);
// Создаем градиент по горизонтали (оттенки от белого до цвета)
const color = hsvToRgb(hue, 1, 1);
const rgbColor = `rgb(${color.r},${color.g},${color.b})`;
const gradientH = ctx.createLinearGradient(0, 0, width, 0);
gradientH.addColorStop(0, 'white');
gradientH.addColorStop(1, rgbColor);
ctx.fillStyle = gradientH;
ctx.fillRect(0, 0, width, height);
// Создаем вертикальный градиент (от прозрачного до черного)
const gradientV = ctx.createLinearGradient(0, 0, 0, height);
gradientV.addColorStop(0, 'rgba(0,0,0,0)');
gradientV.addColorStop(1, 'rgba(0,0,0,1)');
ctx.fillStyle = gradientV;
ctx.fillRect(0, 0, width, height);
// Рисуем круг выбора цвета
ctx.beginPath();
ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
ctx.shadowColor = 'black';
ctx.shadowBlur = 4;
ctx.arc(selectorX, selectorY, 8, 0, 2 * Math.PI);
ctx.stroke();
}
drawPalette(hue);
hueSlider.addEventListener('input', () => {
// Убираем инверсию значения, чтобы цвет соответствовал положению ползунка
hue = parseInt(hueSlider.value);
drawPalette(hue);
});
hueSlider.addEventListener('change', () => {
hue = parseInt(hueSlider.value);
drawPalette(hue);
});
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
selectorX = e.clientX - rect.left;
selectorY = e.clientY - rect.top;
const imageData = ctx.getImageData(selectorX, selectorY, 1, 1).data;
function componentToHex(c) {
const hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
const hexColor = rgbToHex(imageData[0], imageData[1], imageData[2]);
currentUpgrades.color = hexColor;
colorStrip.style.backgroundColor = hexColor;
updateMessage(`Выбрали цвет: ${hexColor}`);
function rgbToHsv(r, g, b) {
r /= 255; g /= 255; b /= 255;
let max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, v = max;
let d = max - min;
s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0;
} else {
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return { h: h * 360, s: s, v: v };
}
const hsv = rgbToHsv(imageData[0], imageData[1], imageData[2]);
hue = Math.round(hsv.h);
hueSlider.value = hue;
drawPalette(hue);
});
});
function repairVehicle() {
updateMessage('Починка авто...');
mp.trigger('LSC_RepairVehicle');
}