app.js - master - developer228/fanproject

app.js
200 строк9 KB
developer228
update: app.js, index.html, style.css
02 май 2026, 10:55
02 май 2026, 10:5568a7c2a
let state = {
    rating: parseInt(localStorage.getItem('chess_rating')) || 0,
    coins: parseInt(localStorage.getItem('chess_coins')) || 0,
    nick: localStorage.getItem('chess_nick') || '',
    color: localStorage.getItem('chess_color') || '#ffffff',
    pass: localStorage.getItem('chess_pass') || '',
    avatar: localStorage.getItem('chess_avatar') || '👤',
    collection: JSON.parse(localStorage.getItem('chess_collection')) || [],
    inventory: JSON.parse(localStorage.getItem('chess_inv')) || ['👤'],
    chatHistory: JSON.parse(localStorage.getItem('chess_chat')) || [],
    lastClaim: parseInt(localStorage.getItem('chess_last_claim')) || 0,
    hasRainbow: localStorage.getItem('chess_rainbow') === 'true'
};

const champions = [
    { name: "Гукеш Доммараджу", year: "2024-н.в." },
    { name: "Жавохир Синдаров", year: "2026 (Претендент)" },
    { name: "Магнус Карлсен", year: "2013-2023" },
    { name: "Вишванатан Ананд", year: "2007-2013" },
    { name: "Гарри Каспаров", year: "1985-2000" },
    { name: "Анатолий Карпов", year: "1975-1985" },
    { name: "Роберт Фишер", year: "1972-1975" }
];

const pool = [
    { name: "Хикару Накамура", inc: 5 }, { name: "Ян Непомнящий", inc: 4 },
    { name: "Алиреза Фирузджа", inc: 6 }, { name: "Жавохир Синдаров", inc: 10 }
];

const shopItems = [
    { id: '🐸', name: 'Жабка Пепе (Rare)', price: 150 },
    { id: '👑', name: 'Корона Монарха', price: 1000 },
    { id: '🤖', name: 'Стокфиш-9000', price: 500 },
    { id: '🔥', name: 'Огненный шар', price: 300 },
    { id: '💎', name: 'Алмазный Каспаров', price: 2000 }
];

let startTime;

window.onload = () => {
    initColorPicker();
    if (state.nick) { document.getElementById('nickname').value = state.nick; }
};

function save() {
    Object.keys(state).forEach(k => {
        let val = typeof state[k] === 'object' ? JSON.stringify(state[k]) : state[k];
        localStorage.setItem('chess_' + k, val);
    });
}

function handleLogin() {
    const name = document.getElementById('nickname').value;
    if (!name) return alert("Введи ник!");
    if (state.nick && name === state.nick) {
        const p = prompt("Введи пароль:");
        if (p === state.pass) enterApp();
        else alert("Неверно!");
    } else {
        const p = prompt("Придумай пароль:");
        if (!p) return;
        state.nick = name; state.pass = p; save(); enterApp();
    }
}

function enterApp() {
    document.getElementById('auth-screen').style.display = 'none';
    document.getElementById('main-screen').style.display = 'block';
    updateHeader(); showPage('game');
}

function updateHeader() {
    const el = document.getElementById('user-display');
    el.innerHTML = `<span style="font-size:1.2em">${state.avatar}</span> ${state.nick} <b style="color:#f1c40f">$${state.coins}</b>`;
    el.className = state.hasRainbow ? 'rainbow-text' : '';
    el.style.color = state.hasRainbow ? '' : state.color;
}

function showPage(p) {
    const app = document.getElementById('app');
    app.innerHTML = "";
    if (p === 'game') renderGame();
    else if (p === 'collection') renderCollection();
    else if (p === 'shop') renderShop();
    else if (p === 'profile') renderProfile();
    else if (p === 'chat') renderChat();
}

// --- ЧАТ С ПАМЯТЬЮ ---
function renderChat() {
    const app = document.getElementById('app');
    app.innerHTML = `
        <h2>Чат Чемпионов</h2>
        <div class="chat-box" id="chat-c">
            ${state.chatHistory.map(m => `<div><b style="color:${m.color}">${m.user}:</b> ${m.text}</div>`).join('')}
        </div>
        <div style="display:flex; gap:5px">
            <input type="text" id="chat-i" placeholder="Напиши что-нибудь..." style="flex:1; margin:0">
            <button onclick="sendMsg()" style="margin:0">></button>
        </div>
    `;
    const c = document.getElementById('chat-c');
    c.scrollTop = c.scrollHeight;
}

function sendMsg() {
    const i = document.getElementById('chat-i'); if (!i.value) return;
    const msg = { user: state.nick, color: state.color, text: i.value };
    state.chatHistory.push(msg);
    if (state.chatHistory.length > 30) state.chatHistory.shift();
    save(); renderChat();
    setTimeout(botReply, 1500);
}

function botReply() {
    const phrases = ["Gg wp!", "Пепе — сила!", "Кто в турнир?", "Я набил 500 рейтинга!", "Синдаров топ"];
    const bot = { user: "Гросс-Бот", color: "#f1c40f", text: phrases[Math.floor(Math.random()*phrases.length)] };
    state.chatHistory.push(bot);
    save();
    if (document.getElementById('chat-c')) renderChat();
}

// --- ПРОФИЛЬ И МАГАЗИН ---
function renderProfile() {
    document.getElementById('app').innerHTML = `
        <h2>Профиль</h2>
        <div class="avatar-slot">${state.avatar}</div>
        <p>Рейтинг: <b>${state.rating}</b> | Монеты: <b>$${state.coins}</b></p>
        <hr><h4>Твои аватарки:</h4>
        <div style="display:flex; justify-content:center; gap:10px; flex-wrap:wrap">
            ${state.inventory.map(a => `<div class="color-dot" style="background:#34495e; display:flex; align-items:center; justify-content:center; font-size:20px" onclick="setAv('${a}')">${a}</div>`).join('')}
        </div>
    `;
}
function setAv(a) { state.avatar = a; save(); updateHeader(); renderProfile(); }

function renderShop() {
    document.getElementById('app').innerHTML = `
        <h2>Магазин</h2>
        <div class="shop-card"><span>🌈 Радужный ник</span><button onclick="buyR()" ${state.coins >= 500 && !state.hasRainbow ? '' : 'disabled'}>$500</button></div>
        ${shopItems.map(i => `<div class="shop-card"><span>${i.id} ${i.name}</span><button onclick="buyA('${i.id}', ${i.price})" ${state.coins >= i.price && !state.inventory.includes(i.id) ? '' : 'disabled'}>$${i.price}</button></div>`).join('')}
    `;
}
function buyR() { if (state.coins >= 500) { state.coins -= 500; state.hasRainbow = true; save(); updateHeader(); renderShop(); } }
function buyA(id, p) { if (state.coins >= p) { state.coins -= p; state.inventory.push(id); save(); updateHeader(); renderShop(); } }

// --- ИГРА И КОЛЛЕКЦИЯ ---
function renderGame() {
    const t = champions[Math.floor(Math.random()*champions.length)];
    let o = champions.filter(x => x.name !== t.name).sort(() => .5 - Math.random()).slice(0,3);
    o.push(t); o.sort(() => .5 - Math.random());
    document.getElementById('app').innerHTML = `<h3>Чемпион в ${t.year}?</h3>
        ${o.map(x => `<button class="option-btn" onclick="check('${x.name}','${t.name}')">${x.name}</button>`).join('')}
        <p>Рейтинг: <b>${state.rating}</b></p>`;
    startTime = Date.now();
}

function check(s, c) {
    if (s === c) {
        let pts = Math.max(1, Math.round(20 / ((Date.now()-startTime)/1000)));
        state.rating += pts; state.coins += 10; alert("Верно!");
    } else { state.rating = Math.max(0, state.rating - 5); alert("Ошибка!"); }
    save(); updateHeader(); renderGame();
}

function renderCollection() {
    const can = Date.now() - state.lastClaim > 60000;
    document.getElementById('app').innerHTML = `<h3>Коллекция</h3><button onclick="claim()" ${can?'':'disabled'}>${can?'Нанять GM':'Жди минуту'}</button>
        <div style="margin-top:20px">${state.collection.map(g => `<div class="gm-card"><span>🏆 ${g.name}</span><span>+$${g.inc}</span></div>`).join('')}</div>`;
}

function claim() {
    const g = pool[Math.floor(Math.random()*pool.length)];
    state.collection.push(g); state.lastClaim = Date.now(); save(); renderCollection();
    alert(`Контракт с ${g.name} подписан!`);
}

setInterval(() => {
    let inc = state.collection.reduce((a, b) => a + b.inc, 0);
    if (inc > 0 && document.getElementById('main-screen').style.display === 'block') {
        state.coins += inc; save(); updateHeader();
    }
}, 10000);

function initColorPicker() {
    const colors = ['#ff4757', '#2ed573', '#1e90ff', '#ffa502', '#ffffff', '#9b59b6', '#1abc9c'];
    const picker = document.getElementById('color-picker');
    picker.innerHTML = "";
    colors.forEach(c => {
        const d = document.createElement('div');
        d.className = 'color-dot' + (c === state.color ? ' active-color' : '');
        d.style.background = c;
        d.onclick = () => {
            document.querySelectorAll('.color-dot').forEach(x => x.classList.remove('active-color'));
            d.classList.add('active-color'); state.color = c; save();
        };
        picker.appendChild(d);
    });
}
function logout() { if(confirm("Выйти?")) location.reload(); }