diff --git a/index.html b/index.html index 903c5b6..4eac06f 100644 --- a/index.html +++ b/index.html @@ -105,6 +105,19 @@ th{color:var(--gray-500);font-size:11px;text-transform:uppercase} .chat-tab{flex:1;padding:8px;border-radius:10px;border:none;font-size:13px;font-weight:600;cursor:pointer;background:#1a2332;color:var(--gray-500);transition:all .2s} .chat-tab.active{background:var(--cyan);color:var(--ink)} + +.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:180px;margin:12px auto} +.game-cell{aspect-ratio:1;background:#1a2332;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;cursor:pointer;transition:background .2s;border:2px solid #2a3342} +.game-cell:active{background:#2a3342} +.game-cell.x{color:var(--cyan)} +.game-cell.o{color:var(--red)} +.game-cell.disabled{pointer-events:none} +.game-status{text-align:center;font-size:14px;font-weight:600;margin:8px 0} +.quiz-option{display:block;width:100%;padding:12px;margin:6px 0;background:#1a2332;border:2px solid #2a3342;border-radius:10px;color:var(--white);font-size:14px;cursor:pointer;text-align:left;transition:all .2s} +.quiz-option:active{background:#2a3342} +.quiz-option.right{background:var(--green);border-color:var(--green);color:#fff} +.quiz-option.wrong{background:var(--red);border-color:var(--red);color:#fff} + .empty-state{text-align:center;padding:40px 20px;color:var(--gray-500)} .empty-state .big{font-size:48px;margin-bottom:8px} @@ -476,7 +489,10 @@ function renderChatList(){ const other=users.filter(u=>u.id!==uid()); const msgs=LS('messages')||{}; let h='
'; - // Show create group chat button + // Games button + h+=''; + Show create group chat button + h+=''; if(!other.length){h+='
💬
Нет других пользователей
';return h} h+='
Выбери с кем общаться:
'; @@ -529,6 +545,178 @@ function sendMsg(){ // scroll to bottom setTimeout(()=>{const el=document.getElementById('chatMsgs');if(el)el.scrollTop=el.scrollHeight},100); } +let gameState = null; + +function renderGames(){ + const c = document.getElementById('mainContent'); + c.innerHTML = ` +
+

🎮 Игры в чате

+

Выбери игру и играй с друзьями!

+ + + + + +
+
+ `; +} + +function startTicTacToe(){ + gameState = { type: 'tictactoe', board: Array(9).fill(''), turn: 'X', over: false }; + renderTicTacToe(); +} +function renderTicTacToe(){ + const g = gameState; + let h = '

❌⭕ Крестики-нолики

'; + if(g.over){ + h += g.winner === 'draw' ? 'Ничья!' : g.winner + ' победил!'; + h += '
'; + } else { + h += 'Ход: ' + (g.turn === 'X' ? '❌ Крестики' : '⭕ Нолики'); + } + h += '
'; + g.board.forEach((cell, i) => { + h += `
${cell}
`; + }); + h += '
'; + document.getElementById('gameArea').innerHTML = h; +} +function ticMove(i){ + if(!gameState||gameState.over||gameState.board[i])return; + gameState.board[i] = gameState.turn; + const lines = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]]; + for(const [a,b,c] of lines){ + if(gameState.board[a]&&gameState.board[a]===gameState.board[b]&&gameState.board[a]===gameState.board[c]){ + gameState.over = true; gameState.winner = gameState.board[a]; break; + } + } + if(!gameState.over && gameState.board.every(c=>c)){ gameState.over = true; gameState.winner = 'draw'; } + if(!gameState.over) gameState.turn = gameState.turn === 'X' ? 'O' : 'X'; + renderTicTacToe(); +} + +function startGuessNumber(){ + gameState = { type: 'guess', number: Math.floor(Math.random()*100)+1, attempts: 0, max: 7 }; + renderGuessNumber(); +} +function renderGuessNumber(){ + const g = gameState; + let h = `

🔢 Угадай число (1-100)

+

Осталось попыток: ${g.max - g.attempts}

`; + if(g.won){ + h += `

🎉 Угадал! Это ${g.number}!

За ${g.attempts} попыток

`; + h += ''; + } else if(g.attempts >= g.max){ + h += `

Не угадал! Это было ${g.number}

`; + h += ''; + } else { + h += ''; + } + h += '
'; + document.getElementById('gameArea').innerHTML = h; +} +function doGuess(){ + if(!gameState||gameState.won||gameState.attempts>=gameState.max)return; + const n = +document.getElementById('guessInput').value; + if(!n||n<1||n>100)return; + gameState.attempts++; + if(n === gameState.number){ gameState.won = true; renderGuessNumber(); return } + const hint = n < gameState.number ? '📈 Больше!' : '📉 Меньше!'; + const tempDiv = document.createElement('div'); tempDiv.innerHTML = `

${n} — ${hint}

`; + document.getElementById('gameArea').insertBefore(tempDiv, document.getElementById('gameArea').firstChild); + if(gameState.attempts >= gameState.max) renderGuessNumber(); + else { document.getElementById('guessInput').value=''; document.getElementById('guessInput').focus(); } +} + +function startReaction(){ + gameState = { type: 'reaction', state: 'waiting', startTime: 0, best: getMy('reactionBest') || 9999 }; + renderReaction(); +} +function renderReaction(){ + const g = gameState; + let bg = '#151c28', txt = ''; + if(g.state === 'waiting'){ bg = '#FF6B6B'; txt = '🔴 Жди зелёный!'; } + else if(g.state === 'ready'){ bg = '#4CAF50'; txt = '🟢 ЖМИ СЕЙЧАС!'; } + else if(g.state === 'early'){ bg = '#FFD700'; txt = '⚠ Слишком рано! Жми "Начать"'; } + else if(g.state === 'done'){ txt = `⏱ Твоё время: ${g.reaction} мс
Рекорд: ${g.best !== 9999 ? g.best+' мс' : '—'}`; } + let h = `
+

⚡ Реакция

+
${txt||'🎯 Нажми "Начать"'}
`; + if(g.state === 'done'){ + h += ''; + } else if(g.state === 'waiting' || g.state === 'early'){ + h += ''; + } + h += '
'; + document.getElementById('gameArea').innerHTML = h; +} +function reactStart(){ + if(!gameState||gameState.state==='ready')return; + gameState.state = 'waiting'; renderReaction(); + const delay = 1500 + Math.random() * 3000; + setTimeout(() => { + if(gameState.state !== 'waiting') return; + gameState.state = 'ready'; gameState.startTime = Date.now(); renderReaction(); + }, delay); +} +function reactClick(){ + if(!gameState)return; + if(gameState.state === 'waiting'){ gameState.state = 'early'; renderReaction(); return; } + if(gameState.state === 'ready'){ gameState.reaction = Date.now() - gameState.startTime; gameState.state = 'done'; + if(gameState.reaction < gameState.best){ gameState.best = gameState.reaction; setMy('reactionBest', gameState.reaction); } + renderReaction(); } +} + +function startQuiz(){ + const questions = [ + {q:'Сколько метров в олимпийском бассейне?',a:['25 м','50 м','100 м','33 м'],r:1}, + {q:'Какой стиль плавания самый быстрый?',a:['Брасс','Баттерфляй','Кроль','На спине'],r:2}, + {q:'Сколько золотых медалей у Майкла Фелпса?',a:['8','15','23','28'],r:2}, + {q:'Как зовут лучшего спринтера мира (50 м в/с)?',a:['Майкл Фелпс','Калеб Дрессел','Райан Лохте','Адам Пити'],r:1}, + {q:'Где пройдёт Олимпиада-2032?',a:['Лос-Анджелес','Париж','Брисбен','Токио'],r:2}, + {q:'Сколько длится олимпийский цикл?',a:['2 года','3 года','4 года','5 лет'],r:2}, + {q:'Какая страна выиграла больше всех медалей в плавании?',a:['Китай','Австралия','Россия','США'],r:3}, + {q:'Как называется поворот в кроле?',a:['Сальто','Кувырок','Разворот','Маятник'],r:1} + ]; + gameState = { type: 'quiz', questions, current: 0, score: 0, answered: false }; + renderQuiz(); +} +function renderQuiz(){ + const g = gameState; + if(g.current >= g.questions.length){ + document.getElementById('gameArea').innerHTML = `

🏆 Викторина завершена!

${g.score} / ${g.questions.length}

${g.score>=6?'👑 Ты знаток спорта!':g.score>=4?'👍 Неплохо!':'📚 Учи матчасть!'}

`; + return; + } + const q = g.questions[g.current]; + let h = `

❓ Вопрос ${g.current+1}/${g.questions.length}

${q.q}

`; + q.a.forEach((ans,i)=>{ + let cls = 'quiz-option'; + if(g.answered){ + if(i === q.r) cls += ' right'; + else if(g.selected === i) cls += ' wrong'; + } + h += ``; + }); + h += `
Счёт: ${g.score}
`; + if(g.answered){ + h += ''; + } + h += '
'; + document.getElementById('gameArea').innerHTML = h; +} +function answerQuiz(i){ + if(!gameState||gameState.answered)return; + gameState.answered = true; gameState.selected = i; + if(i === gameState.questions[gameState.current].r) gameState.score++; + renderQuiz(); +} +function nextQuiz(){ + gameState.current++; gameState.answered = false; gameState.selected = null; renderQuiz(); +} + + function createGroupChat(){ const name=prompt('Название группового чата:'); if(!name)return;