🎯 Ровно 101! Очки обнулены!
` + : ''; + resultItem.innerHTML = `Очки за раунд: +${result.points}
+ ${resetText}Всего очков: ${result.total_score}
${cardsHtml} `; @@ -1502,6 +1978,12 @@ class CardGame { closeResultsModal() { this.resultsModal.classList.remove('active'); this.showScreen('room'); + + // Обновляем настройки комнаты чтобы скрыть блок приватной комнаты после первого раунда + if (this.currentRoom) { + this.updateRoomSettings(this.currentRoom); + } + // Удаляем обработчик Enter if (this.resultsEnterHandler) { document.removeEventListener('keydown', this.resultsEnterHandler); @@ -1535,6 +2017,205 @@ class CardGame { this.closeChat(); } + showReactionPicker(e) { + e.stopPropagation(); + + if (!this.reactionPicker) return; + + // Проверяем кулдаун (5 секунд) + const now = Date.now(); + const cooldown = 5000; // 5 секунд в миллисекундах + + if (now - this.lastReactionTime < cooldown) { + // Просто игнорируем клик если кулдаун активен + return; + } + + // Получаем координаты блока руки (.player-hand) + const playerHand = document.querySelector('.player-hand'); + if (!playerHand) return; + + const rect = playerHand.getBoundingClientRect(); + + // Позиционируем пикер НАД блоком руки по центру + const vh = window.innerHeight / 100; + this.reactionPicker.style.left = `${rect.left + rect.width / 2}px`; + this.reactionPicker.style.transform = 'translateX(-50%)'; + this.reactionPicker.style.top = `${rect.top - 70 - vh}px`; // Над рукой + 1vh выше + + this.reactionPicker.classList.add('active'); + + // Предотвращаем конфликт свайпа с другими элементами + const scrollContainer = this.reactionPicker.querySelector('.reaction-picker-scroll'); + if (scrollContainer) { + scrollContainer.addEventListener('touchstart', (e) => { + e.stopPropagation(); + }, { passive: true, once: false }); + + scrollContainer.addEventListener('touchmove', (e) => { + e.stopPropagation(); + }, { passive: true, once: false }); + + // Drag-скролл мышкой (как на телефоне) + let isDown = false; + let startX; + let scrollLeft; + let hasMoved = false; + + scrollContainer.addEventListener('mousedown', (e) => { + isDown = true; + hasMoved = false; + scrollContainer.style.scrollBehavior = 'auto'; + startX = e.pageX; + scrollLeft = scrollContainer.scrollLeft; + }); + + scrollContainer.addEventListener('mouseleave', () => { + isDown = false; + scrollContainer.style.scrollBehavior = 'smooth'; + }); + + scrollContainer.addEventListener('mouseup', () => { + isDown = false; + scrollContainer.style.scrollBehavior = 'smooth'; + }); + + scrollContainer.addEventListener('mousemove', (e) => { + if (!isDown) return; + e.preventDefault(); + const x = e.pageX; + const walk = x - startX; + + // Если сдвинули больше чем на 5px, считаем это скроллом + if (Math.abs(walk) > 5) { + hasMoved = true; + } + + scrollContainer.scrollLeft = scrollLeft - walk; + }); + + // Предотвращаем клик на кнопках если был скролл + scrollContainer.addEventListener('click', (e) => { + if (hasMoved) { + e.preventDefault(); + e.stopPropagation(); + hasMoved = false; + } + }, true); + + // Скролл колёсиком мыши по горизонтали + scrollContainer.addEventListener('wheel', (e) => { + e.preventDefault(); + scrollContainer.scrollLeft += e.deltaY * 2.42; // Ускоряем скролл в 2 раза + }, { passive: false }); + } + } + + hideReactionPicker() { + if (this.reactionPicker) { + this.reactionPicker.classList.remove('active'); + } + } + + sendReaction(emoji) { + // Обновляем время последней реакции + this.lastReactionTime = Date.now(); + + this.send({ + type: 'reaction', + emoji: emoji + }); + } + + showReactionBubble(playerId, emoji) { + // Находим область игрока + let targetElement; + if (playerId === this.playerId) { + // Реакция от нас самих - показываем над нашими картами + targetElement = this.handCards; + } else { + // Реакция от противника - находим блок с ником и очками + const opponentArea = this.getOpponentAreaById(playerId); + if (opponentArea) { + // Берём блок opponent-info (ник и очки) для центрирования + targetElement = opponentArea.querySelector('.opponent-info'); + } + } + + if (!targetElement) return; + + // Создаём пузырёк + const bubble = document.createElement('div'); + bubble.className = 'reaction-bubble'; + bubble.textContent = emoji; + + // Позиционируем пузырёк и добавляем стрелочку + const rect = targetElement.getBoundingClientRect(); + bubble.style.left = `${rect.left + rect.width / 2}px`; // Центр элемента + bubble.style.transform = 'translateX(-50%)'; // Центрируем пузырёк + + if (playerId === this.playerId) { + // Наш пузырёк - НАД картами, стрелка ВНИЗ на наши карты + bubble.style.top = `${rect.top - 70}px`; + bubble.classList.add('from-me'); + } else { + // Пузырёк противника - ПОД блоком с ником, стрелка ВВЕРХ + bubble.style.top = `${rect.bottom + 10}px`; + bubble.classList.add('from-opponent'); + } + + document.body.appendChild(bubble); + + // Удаляем пузырёк после анимации (3 секунды для реакций) + setTimeout(() => { + bubble.remove(); + }, 4200); + } + + showChatBubble(playerId, message) { + // Находим область игрока + let targetElement; + if (playerId === this.playerId) { + // Сообщение от нас - показываем над нашими картами + targetElement = this.handCards; + } else { + // Сообщение от противника - находим блок с ником и очками + const opponentArea = this.getOpponentAreaById(playerId); + if (opponentArea) { + targetElement = opponentArea.querySelector('.opponent-info'); + } + } + + if (!targetElement) return; + + // Создаём пузырёк для сообщения + const bubble = document.createElement('div'); + bubble.className = 'reaction-bubble chat-bubble'; + bubble.textContent = message; + + // Позиционируем пузырёк + const rect = targetElement.getBoundingClientRect(); + bubble.style.left = `${rect.left + rect.width / 2}px`; + bubble.style.transform = 'translateX(-50%)'; + + if (playerId === this.playerId) { + // Наш пузырёк - НАД картами + bubble.style.top = `${rect.top - 70}px`; + bubble.classList.add('from-me'); + } else { + // Пузырёк противника - ПОД блоком с ником + bubble.style.top = `${rect.bottom + 10}px`; + bubble.classList.add('from-opponent'); + } + + document.body.appendChild(bubble); + + // Удаляем пузырёк после 5 секунд (дольше чем реакции) + setTimeout(() => { + bubble.remove(); + }, 10000); + } + handleKeyPress(e) { // Проверяем что мы не в поле ввода (кроме чата) const isInInput = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA'; @@ -1788,6 +2469,19 @@ class CardGame { }, cardCount * 80); } + // Анимация тряски карты сброса + animateShakeDiscard() { + if (!this.discardPile) return; + + // Добавляем класс для анимации тряски + this.discardPile.classList.add('shaking'); + + // Убираем класс после завершения анимации + setTimeout(() => { + this.discardPile.classList.remove('shaking'); + }, 500); + } + getPlayerColorIndex(playerId) { // Создаем простой хеш из ID игрока для определения цвета // Возвращаем число от 1 до 3 для разных цветов diff --git a/index.html b/index.html new file mode 100644 index 0000000..ed809bc --- /dev/null +++ b/index.html @@ -0,0 +1,630 @@ + + + + + + + + + +Игра начнётся когда все игроки будут готовы (минимум 2 игрока)
+ + + + + + + + + +Эта комната не существует или была удалена
+ +