Hello, Schulte

Probably every programmer who is interested in objects with the prefix "psi" must embody Schulte's tables in virtuality - they really seduce with their easily accessible, square-digital outlines. But scribbling the tables on native pros was somehow not out of hand - it's like driving a ice cream on a tank. Now, in old age, professional curiosity has come to the web, and for immersing in the wisdom of HTML / CSS / JavaScript (as an educational and engaging project) on the Schulte table, this is it.

To the extent of limited strength, a huge two-week experience and an underdeveloped design talent, I tried to make it “stylish, fashionable, youthful” - so that everything was as responsive and reactive as possible and built in properly via iframe .

All the online implementation of Schulte's tables, which are found on the first links of the search engines, were for some reason limited in size (some were completely nailed to the monitor), which is strange, because the point of the exercise is precisely to develop peripheral attention and width is crucial value. And in general - I love Zen mode. Therefore, I spread the table on the whole page (and without any timers ticking along the nerves of the timers, which the developers sculpted with enviable persistence next to the table).

Favorite framework for this mini-application assigned Vue.js. I chose intuitively and irrationally. I liked everything. Straight as a nail, jQuery did not inspire aesthetically, I wanted something elegant and plastic like Qt (this, of course, is “for philosophy” and not about a specific library spectrum). Of course, he also looked towards React and Angular, but somehow he didn’t grow together.

Below the spoiler is the shock code for generating the table. It can be said, the core of the project (oh, if the school teacher of computer science would know which hellish mix would come out from under my fingers, it would burn them with a ruler). Almost all available methods of reactive binding of style to element are involved in it. An interesting detail is that if you use a number in the v-for directive (<div v-for = "r in gridSize" ...), then when you change the gridSize to a hot label, it does not redraw. I had to make a gridRange (an enum array of gridSize a la Python). In addition, several local variables were lacking inside v-for (in order not to enter r * gridSize + c nine times), however, not all the Maslenitsa cat - the author of Vue decided that the game was not worth the trouble.

<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> 

I also wanted to try the taste and color of html-canvas. To do this, implemented the Mouse Map - a map of mouse movements during the passage of the table (ideally, of course, should be an eye tracker, but where can it be, dear, for an ordinary person to take).

Mouse map

By the way, you can move the mouse very differently.

Sources of the site on GitHub.

With gratitude, I will accept all comments, suggestions and wishes.