Как решить задачку (шахматная доска, ход конем) без использования js?

Question

[Александр Буки]

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

Сложность в том, что нельзя использовать js. Только css и html.
Изначально ни одна ячейка не выделена.

Я пока смог сверстать только доску и при клике выделять нужную клетку.
Делал через input radio + label и display:grid
Ниже код и ссылка на codepen.

Comments

[Lynn «Кофеман»]

Я бы не заморачивался выделением существующих клеток, а просто нарисовал 8 синих квадратиков поверх доски.

Второй вариант, вообще фон доски вынести в блок после всех клеток рисовать нужный

[Сергей delphinpro]

Проблема заключается в том, что в css нельзя стилизовать предыдущие элементы.
И она не решаема в данном случае (когда стилизовать требуется и предыдущие, и последующие). Так что единственное решение, которое так же пришло в голову - то, что предложил Алексей Тен

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

[Александр Буки]

Сергей delphinpro, то есть у каждого лейбла будет псевдоэлемент?

[Сергей delphinpro]

Александр Буки, ну да. можете его делать только при фокусе, если хочется.

[Rustam Bainazarov]

А-ля так, только градиент, например, сделать для подсветки ячеек на фон.



Есть ещё две теоретические идеи (display: contents и игра с отдельным блоком поверх), но нужна проверка, для чего сейчас у меня не совсем есть время :))

P. S. Не нравятся мне такие задачи, которые требуют костылей и хаков. На JS было бы идеально решить.

[Ankhena]

Все инпуты располагаем до всех лейблов.
После этого начинают работать селекторы с тильдой ~
т.е. инпут ~ соответствующий лейбл и лейблы куда можно сходить "лошадью".

Но больше мне нравится идея Рустам Байназаров нарисовать в псевдоэлементе клеточки с помощью градиента и накладывать его абсолютом относительно нужной клетки (лейбла).

Answer 1

[profesor08]

Вот ты с выделением ячейки справился. Молодец. Теперь задай для выделенной ячейки 8 теней синего цвета и позиционируй как надо.

input[type="radio"]:checked + label {
    background: #FF0000;
    box-shadow: 60px 30px 0 0 blue, 60px -30px 0 0 blue;
    position: relative;
    z-index: 1;
}

Можешь даже анимацию задать для тени

label {
    transition: ease box-shadow .3s;
}

Comments

[Rustam Bainazarov]

Я уже и забыл, что так можно. Хороший вариант. Александр Буки, я думаю, это самое простое, что можно сделать.

И это будет работать:

[Дядя Толя]

гениально! :)

[Александр Буки]

profesor08,
это супер! Спасибо огромное!
А то я уже бэкграунд градиенты устал рисовать

[origami1024]

И анимация тени нойс

[Андрей]

Всё гениальное просто!

Answer 2

[Александр Буки]

Спасибо всем и особенно profesor08 и Рустам Байназаров
В итоге так получилось

Answer 3

[zkrvndm]

Для ячеек, что после красного идут можно определить стили через селекторы + / ~
А вот для ячеек что идут до красного, кажется что никак нельзя стили определить, ведь селекторы соседей работают только вниз. Однако, чисто гипотетически можно наложить поверх доски ещё одну прозрачную дочку повернув на 180 градусов и тогда по идее можно. Только надо изучить как себя тут будет вести свойство pointer-events

Comments

[zkrvndm]

А ещё чисто теоретически можно составить полигонов 5x5 и накрыть ими внахлёст всю доску и если какой-то полигон получает фокус, он теряет прозрачность и становится виден нужный узор ходов.

[profesor08]

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