Шахматы на React и TypeScript С НУЛЯ. Практикуем ООП 

у русского фронт енд -кодерского сообщества новый король-мистер Улби) Материалы-мощь

Ждали, ждали! Курс по созданию шахмат на javascript typescript react ооп и еще больше больше слов для продвижения ролика в рекоммендации

Продвигаем видосик в рекомендации!

Тимур, ты идешь в историю со своим контентом. Я поражаюсь качеству твоего контента. Он безупречен.

Ты делаешь очень крутой контент, без лишних движений, очень чистый) Шахматы для меня пока слишком сложно, пойду смотреть прошлые уроки про реакт) спасибо

Спасибо, только начал смотреть, но уже понимаю, что всё просто волшебно!

ну ты даешь, такой полезный материал и бесплатно тебе огромное уважение что до сих пор бесплатно выкладываешь все что нужно и без воды и глупостей, желаю удачи и всего доброго, в русскоязычном ютубе ты один из лучших по IT курсам, если не лучший.

Мощный урок, много подумал, почерпнул ))) Не задумывался никогда о реализации шахмат... оч интересно. Спасибо Тимур!

Сразу лайк, не глядя ставлю)) У тебя отличный контент! Много нового для себя узнаю, когда смотрю твои видео. Еще комменты ниже пролайкал, надеюсь, это поможет продвижению канала. Удачи!

Вот это подгон!) Очень рад новому ролику!

Спасибо за уроки! Интересно было бы увидеть реализацию CRM-системы, со списками, напоминаниями, автоматическим удалением по истечению определённого времени

Супер! Отличное изложение, логика, все понятно, и приходит азарт решить оставшиеся задачи.) Спасибо!

Наконец то новое видео) Улби лучший! Продвигаем видосик в рекомендации!

Спасибо! Как всегда интересно и познавательно. Так держать и удачи!

Спасибо братан! долго ждали ) ВЕЛИКОЛЕПНО!!!!

бро спасибо) твои труды бесценны мы очень ценим )

Обязательно посмотрю курс )) Спасибо !

Ну тут лайк не глядя. Когда слышу твой голос, понимаю - следующие несколько часов пройдут офигенно

Очередное отличное видео, будем посмотреть! Спасибо тебе!

Отлично! Обязательно посмотрю!

В этом ролике мы разработаем свои шахматы на React и typescript. Попрактикуем ООП. Шахматы на Javascript. для продвижения

Приветствую. Спасибо за старания и качественный контент! Лайк однозначно

Ещё не делал, но уверен что полезно. Спасибо 👍

Супер! Спасибо. Ждём ролика по Angular! :)

Как же мне повезло начать изучать js одновременно со стартом этого канала. На столько плавного и эффективного обучения у меня в жизни никогда еще не было.

Оооо, крутяк, я так хотел чтобы они появились на канале)

спасибо, побольше бы подобных видео с проектами интересными

Спасибо, Ульбич)

Спасибо, будем смотреть)

Как же долго я ждал это видео))

Лайк не глядя) Потом обязательно посмотрю)

Спасибо за урок. Переписал проект, немного изменил стили и фигуры. Надо ещё подумать как: - Реализовать проход пешки в ферзи (ладью, слона и коня) - Взятие пешки на проходе (После первого хода на две клетки, пешку может взять вражеская пешка, пройдя за её "спиной" ) - Запрет хода, если ты этим ходом ты ставишь своего короля под удар - Рокировку в длинную и короткую сторону

Только начал смотреть, но уже лайк. Красава, контент лучший

Неплохой курс знатно попотел, давно так не кодил, благодарю

О! Круто, спасибо! Тимур лучший!

Ролик в реки!!!

Воу, огромное спасибо за курс

Спасибо большое за данный видос. Давно хотел написать шахматы, а ты ещё тут и столько простора для фантазии, рефакторинга и доработок оставил, что по завершению проекта - джуновский пост точно должен ждать)

Ура , ждал видео , как всегда годнота

Очень хочется посмотреть !!!) но нельзя… посмотрю после того, как сделаю свои шахматы, чтобы не получилось копирование твоих идей)

Ооо, молитвы людей учлышаны) Большое спасибо за курс. Обязательно посмотрю)

ОЧЕНЬ КРУТО! Спасибо) Шахматы на React и TypeScript С НУЛЯ. Практикуем ООП

Тимур, потрясный урок!!! Спасибо!

Крутоооо. Учу реакт. Уже жду когда смогу начать практику)

Огромное спасибо за видео, пришла идея отработать ООП на создании какой-нибудь игры)

Спасибо! Максимально полезно. Как раз изучил ООП в JS и разобрался с основами TS. Красавчик!

Здорово👍🏼 я пока вообще ничего не понимаю, но поддержу канал 💪🏽

Вот прикол, как раз на прошлой неделе закончился but camp, где мы делали шахматы)))

Смотрю и это очень интересно!!!

Спасибо огромное за курс. Попробовал все через styled-component сделать - так еще интереснее (хотя явно чувствуется - что это лишнее). Еще раз огромное спасибо автору! Дай Бог тебе здоровья!!!

В твоих видео столько полезных микромоментов. Спасибо за это

Супер!!! Ждём курс про CRM систеы))

Мегахорош) Отличное видео, никакой воды. Осталось только доделать игру до конца. Спасибо!!!

Спасибо за контент, продолжай в том же духе

Круто

Круто. Лайк поставил. Жду новых видео.

Лучший контент, спасибо тебе!

Ура! Мы ждали

Спасибо за уроки!

мужик, спасибо тебе большое 🙌

Было бы интересно увидеть и послушать как ты рассуждаешь за архитектуру, как анализируешь задачу что уже сходу знаешь какую файловую структуру создавать

Тимур ты вообще отличный парень!))

Было интересно, спасибо 🙏

Очень рад, что в роликах стала появляться реклама, наконец хоть какое то денежное вознаграждение за твои труды)) Честно, не встречал ещё таких каналов, где так много годноты и очень полезных и простых в освоении уроков. Ты потрясающий учитель, ютубер и самое главное разработчик! Безумно счастлив, что когда то наткнулся на твой канал, ибо теперь с него вообще не слезаю)))

Очень круто, спасибо!

Ждала!💥👍

Спасибо, очень полезное видео.

Ура!!! Обожаю шахматы!!!!

Спасибо за видео!

Спасибо большое, на выходном залип на 6 часов, сейчас послеработы доделал! Очень интересно

Чёрт возьми, мне как раз нужен TypeScript для работы! Обязательно буду смотреть ролик)

Вот это интересно. Как раз хотел тайпскрипт узнать получше) А тут ещё и реакт с ООП 👍👍👍

Этому парню надо памятник ставить при жизни как лучшему преподу

Отличный курс, больше спасибо!

Класс, спасибо 🦾

Спасибо, классный ролик, показал на практике пользу от ООП и реализацию все на React с хуками. Круто)

Спасибо большое, Тимур, за твой труд!))

Это видео шикарно! ООП подход рулит)

Ипать, это очень круто. Очень доступно и интересно. Я долго не хотел смотреть это видео и делать этот проект из-за того, что думаю все устарело, а там вообще с этим никаких проблем. Еще и на ts, что вообще лбве ошибки на нет списывает. Спасибо🎉😮😊

Интересно было понаблюдать за разработкой👍

Выявил у себя явные проблемы с математикой :) Все остальное очень понятно, отличная подача материала, спасибо тебе!

Обещал - сделал! Респектище)

ЗА ролик спасибо, НО есть конструктивная критика) Нету ни слова про оптимизацию. Каждый onSelect рендерит дважды каждую ячейку, т.е. 128 раз!!!, что ни есть круто. Т.е. реализация ООП прям норм, но работа с самим Реактом тут скорее антипоказательная. Я подрубил православнй Mobx и React.memo для клеток, ибо самому было лень делать весь функционал, теперь идет перерендер только тех клеток, которые меняют состояние. Если сделаешь продолжение, где средствами только Reacta будет мемоизация - то будет супер респект)

Если у вас такая ошибка Cannot find module '../../assets/black-king.png'., нужно создать файл react-app-env.d.ts в папке src с контентом: declare module "*.png"; declare module "*.svg"; declare module "*.jpeg"; declare module "*.jpg";

Как любитель шахмат(1300 в рапиде) оч надеялся на подобный выпуск. Спасибо, долждался)

Все, я полностью просмотрел канал Просто гигантский труд, Вы выполнили Большое спасибо!

Еще толком даже не начал изучать js, ну так, немного понимаю что есть слушатели события, циклы, переменные, ну в целом полнейший новичок :) Понял я примерно процентов 15 из этого ролика, НО! всю суть, и что вообще происходит в коде я как-будто бы понимал, благо объяснение можно сказать на пальцах. Не люблю часовые видео, но это видео просмотрел на одном дыхании. Спасибо, было очень интересно :)

Безупречный контент. Мое почтение. 👍

Как всегда. Ты - ЛУЧШИЙ

Великолепно! понравилась работа с классами и конкструкторами, хочу так же научиться делать с легкой руки

Закончил ещё одно прекрасное видео с тобой. Даже не знаю, как благодирить за такую практику. Делал все вместе с тобой, после окончания полез проверять коменты и гит, чтобы найти готовые ответы на оставщийся функционал, но ничего не смог найти, так что пришлось садиться делать все самому. Честно, по началу думал, что ничего не выйдет. По итогу сделал проверки на шах и мат, король научился ходить только на не битые поля и делать ракировку, добавил проверку на пат, а также победу по окончанию времени, также научил пешки превращаться в любую фигуру и добавил модальное окно выбора. Из внешних изменений добавил только мобильную версию, объявление шаха и модальные окна победы, пата и выбора фигуры для пешкию Если кому-то будет нужно, то вы можете взять код у меня в гите StasKobles (буду благодарен за звездочку). Тимур, ещё раз низкий поклон тебе за все, что ты делаешь. Твой канал это кладезь для меня P.S. Обещаю подписаться на твой бусти , как устроюсь на работу)

Было бы круто увидеть развитие этого проекта до полноценного приложения с сессией на два юзера. Помимо бека, заодно можно будет затронуть и реализацию websockets

Ну тут лайкос не глядя)!!!

Спасибо за Ваш труд!

Супер подача🥰. Интерсно сколко вы готовите такие ролики. Взял данную модель немного прееделал и уже получилась совсем другая настолка. Спасибо огромное.

если кому-то интересно как реализовать что бы ходил король, то: в классе class King extends Figure ``` canMove(target: Cell): boolean { if(target.figure?.name === FigureNames.KING && target.figure?.color) console.log(target); if(!super.canMove(target)) return false; const isVerticalMove = (target.y === this.cell.y + 1 || target.y === this.cell.y - 1) && target.x === this.cell.x; const isHorizontalMove = (target.x === this.cell.x + 1 || target.x === this.cell.x - 1) && target.y === this.cell.y; const isLeftDiagonal = ( (target.x === this.cell.x + 1 && target.y === this.cell.y + 1) || (target.x === this.cell.x - 1 && target.y === this.cell.y - 1) ) const isRightDiagonal = ( (target.x === this.cell.x + 1 && target.y === this.cell.y - 1) || (target.x === this.cell.x - 1 && target.y === this.cell.y + 1) ) if(isVerticalMove || isHorizontalMove || isLeftDiagonal || isRightDiagonal) return true; return false; } ``` что бы запретить ходить на клетки которые под боем(для короля), то надо надо в class Cell реализовать такой метод: ``` whichCellsIsUnderAttack(target: Cell): any[] { /** * @info * получаем все клетки которые находятся под боем других фигур(противоположного цвета) * и потом когда ходит король, то сделать условие что клетка куда походит король - нету в этом массиве */ console.log(this.board.cells.length); return []; } ``` то есть условие например cellsUnderAttacckEnemy. findIndex(клеткаПодБоемПротивника => клеткаПодБоемПротивника.x === target.y && клеткаПодБоемПротивника.y === this.cell.y + 1) >= 0 (то это условие значит что клетка (target.x, this.cell.y + 1 - то есть на 1ну клетку вверх) если найдет индекс больше 0я или 0 - значит клетка есть в массиве) типо что-то такого к условию: ``` if(isVerticalMove || isHorizontalMove || isLeftDiagonal || isRightDiagonal) return true; ``` было честно лень реализовывать дальше) просто даю подсказку так же добавил координаты для каждой клетки и оси в верстке, так как сложно было ориентироватся, может кому-то поможет, ссылка на репу: гитХабТочкаКом/Shkulipa/ulbitv-oop-chess ссылка вставлять не буду, так как бывали моменты что коммент удалялся если в нем присутствывала ссылка надеюсь кому-то поможет накидайте плз. лайков что бы в топ вывести, и другие могли увидеть как хотя бы короля реализовать, спасибо Автору видео, как всего громаднешое спасибо за контент

Ух ты интересненько

Что бы уже совсем игра была законченной, надо еще добавить 00 и 000 (рокировки - длинную и короткую)

Сначала лайк, потом смотреть

Супер урок получился!!!