Привет, Шульте

Наверное, каждому программисту, интересующемуся объектами с приставкой «пси», стоит сделать виртуальными Таблицы Шульте - они очень соблазнительны своими легкодоступными квадратно-цифровыми очертаниями.

А вот строчить таблицы по родным плюсам было как-то неуместно - это все равно, что ездить на танке за мороженым.

Теперь, в старости, мое профессиональное любопытство достигло Интернета, и для погружения в тонкости HTML/CSS/JavaScript (в качестве образовательного и развлекательного проекта) таблицы Шульте как раз то, что нужно.

Имея ограниченные силы, огромный двухнедельный опыт и неразвитый дизайнерский талант, я попробовал делать «стильный, модный, молодежный» — чтобы все было максимально отзывчиво и реактивно и можно было нормально интегрироваться через iframe .

Список доступных настроек

Привет, Шульте

размер таблицы (Сетка);
группы чисел в таблице (Groups);
инверсия порядка обхода чисел (Inverse Count);
показать ячейку под указателем (Show Hover);
указать числа, передаваемые в фоновом режиме (Show Trace);
выделить результат клика (Show Hit Result);
Перетасовать номера;
номера поворотов в разные стороны (Turn Numbers);
номера спинов (Spin Numbers).

Последние два варианта ставят нетривиальную задачу – отличить шестерку от девятки.

Все онлайн-реализации таблиц Шульте, найденные в первых ссылках поисковых систем, почему-то оказывались ограниченными в размерах (некоторые даже были «прибиты» к монитору), что странно – ведь в этом смысл упражнения именно в развитии периферийного внимания и ширина имеет решающее значение.

И вообще, я люблю режим Дзен.

Поэтому я нарисовал таблицу по всей лицевой стороне страницы (и без каких-либо действующих мне на нервы таймеров, которые разработчики с завидным упорством лепят рядом с таблицей).

Я выбрал Vue.js в качестве любимого фреймворка для этого мини-приложения.

Я выбрал интуитивно и иррационально.

Это все, что мне понравилось.

Прямолинейный jQuery не вдохновлял с эстетической точки зрения; Мне хотелось чего-то элегантного и гибкого типа Qt (мы, конечно, говорим о «философии», а не о конкретном спектре библиотек).

Я, конечно, тоже смотрел в сторону React и Angular, но как-то не сложилось.

Ниже под спойлером шок-код для генерации таблицы.

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

Он использует практически все доступные методы реактивной привязки стиля к элементу.

Интересная деталь — если в директиве v-for использовать число ( решенный что игра не стоит свеч.

Код создания таблицы воздействия в HTML

   

 <div v-for="r in gridRange" class="row" :style="{height: rowHeight}">
     <div v-for="c in gridRange" class="cell" :style="{width: colWidth}"
          @mouseover="hoveredCell = r*gridSize + c"
          @mouseleave="hoveredCell = -1"
          @click="setClickedCell(r*gridSize + c, $event)"
          :class="{'normal-cell' : !showHover && !showClickAnimation,
                   'hovered-cell': showHover && (hoveredCell == r*gridSize + c),
                   'correct-cell': showClickAnimation && 
                                   clickedCell == r*gridSize + c && 
                                   clickedCell == correctIndex,
                   'wrong-cell'  : showClickAnimation && 
                                   clickedCell == r*gridSize + c &&
                                   clickedCell != correctIndex,
                   'traced-cell' : showTrace && tracedCell(r*gridSize + c)
                   }">
         <span :class="[cells[r*gridSize + c].

cssClasses]"
               :style="cells[r*gridSize + c].

colorStyle"
               style="cursor: default;">
             {{ cells[r*gridSize + c].

number }}
         </span>
     </div>
 </div>

Еще мне захотелось попробовать на вкус и цвет html-canvas. Для этого я реализовал Mouse Map — карту движений курсора мыши при прохождении по таблице (в идеале, конечно, должен быть айтрекер, но где, уважаемый, обычному человеку его взять).

Карта мыши

Привет, Шульте

Кстати, двигать мышью можно очень по-разному.