Тоже участвовал в данной олимпиаде, правда с чуть более худшим результатом в отборочном и аналогичным в финале) Даже близко не топ100.
Хотел поделиться с Вами намного более простым и, на мой взгляд, изящным способом решения задачи про шахматы:
1. Делаем клеточки
<button></button>
— тогда у них появляется :focus (чтобы не прописывать всем элементам tabindex=0 или не делать контролов форм не на форме, как в предложенном решении), а так же лучше для доступности.
2. Для доски нужно убрать overflow, а для каждой клеточки сделать абсолютно спозиционированный ::after или ::before элемент.
3. С помощью множественно background-image через linear-gradient рисуем «карту» возможных ходов конём из каждой ячейки.
4. делаем pointer-events:none для этого псевдоэлемента.
Итого: получаем независимость от разметки, а так же её чистоту и простоту.
Личный опыт.
Хотел поделиться с Вами намного более простым и, на мой взгляд, изящным способом решения задачи про шахматы:
1. Делаем клеточки — тогда у них появляется :focus (чтобы не прописывать всем элементам tabindex=0 или не делать контролов форм не на форме, как в предложенном решении), а так же лучше для доступности.
2. Для доски нужно убрать overflow, а для каждой клеточки сделать абсолютно спозиционированный ::after или ::before элемент.
3. С помощью множественно background-image через linear-gradient рисуем «карту» возможных ходов конём из каждой ячейки.
4. делаем pointer-events:none для этого псевдоэлемента.
Итого: получаем независимость от разметки, а так же её чистоту и простоту.
codepen.io/Mr_DECOY/pen/gOOvybZ