おそらく、接頭辞「psi」が付いたアイテムに興味があるプログラマーはすべて、 Schulteテーブルを仮想に変換する必要があります。彼らは、簡単にアクセスできる正方形のデジタルアウトラインで本当に誘惑します。 しかし、独自のプラスでテーブルをスクロールすることは、タンクでアイスクリームを運転するのと同じように、どういうわけか便利ではありませんでした。 現在、老年期にはプロの好奇心がウェブに到達し、HTML / CSS / JavaScript（教育的で魅力的なプロジェクトとして）の知恵に没頭するために、Schulteのテーブルはまさにそれです。
限られた力、2週間の膨大な経験、そして未熟なデザインの才能で、「スタイリッシュ、ファッショナブル、若々しく」 それをやろうとしました 。
- テーブルサイズ（グリッド）;
- テーブル内の数字のグループ（グループ）;
- 数走査順序の逆数（逆カウント）;
- ポインターの下にセルを表示（ホバー表示）;
- バックグラウンドで渡される番号を示します（トレースの表示）。
- クリックの結果を強調表示（ヒット結果の表示）;
- シャッフル番号（シャッフル番号）;
- 異なる方向に番号を回す（番号を回す）;
- 回転数（スピン番号）。
最後の2つのオプションは、6つを9つから区別するという重要なタスクです。
何らかの理由で、検索エンジンからの最初のリンクで見つかったSchulteテーブルのすべてのオンライン実装はサイズが制限されていることが判明しました（一部はモニターに完全に「釘付け」されました）、これは奇妙です-演習の意味は周辺の注意と幅を開発することです値。 とにかく-私は禅モードが大好きです。 そのため、ページの顔全体のテーブルを作成しました（そして、テーブルの横にうらやましい永続性のスカルプトを持つデベロッパーが、カチカチと音を立てるタイマーを使用していません）。
Vue.jsは、このガジェットのお気に入りのフレームワークとして割り当てられています。 私は直感的かつ非合理的に選択しました。 私はそれがすべて好きだった。 爪のように、jQueryは審美的にインスピレーションを与えませんでした; Qtのようなエレガントでプラスチック製のものが欲しかった（もちろん、特定のライブラリスペクトルではなく、「哲学のため」でした）。 ReactとAngularの方向では、もちろん彼も見ましたが、どういうわけか一緒に成長しませんでした。
ネタバレの下にあるのは、テーブルを生成するためのショックコードです。 私たちはプロジェクトの核心と言えます（ああ、学校のコンピューターサイエンスの教師は、どの地獄のミックスが私の指の下に出てくるか、定規でそれらを打つことを知っています）。 スタイルを要素にリアクティブバインドするために使用できるほとんどすべてのメソッドがそれに関与します。 興味深い詳細は、v-forディレクティブで数値を使用すると（<div v-for = "r in gridSize" ...）、gridSizeをホットプレートに変更しても再描画されないことです。 gridRange（長さgridSize a la Pythonの列挙された配列）をしなければなりませんでした。 さらに、そのローカル変数のいくつかはv-for内にありませんでした（r * gridSize + cが9回入力されません）が、すべてのカーニバルが猫のためではありませんでした-Vueの作者はゲームがろうそくに値しないと判断しました。
<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キャンバスの味と色を試してみたかったです。 これを行うために、私はマウスマップを実装しました-テーブルの通過中のマウスカーソルのマップ（理想的には、もちろんアイトラッカーがあるはずですが、普通の人を連れて行くにはどこにありますか）。
GitHub のサイトのソース 。
感謝の気持ちで、すべてのコメント、提案、別れの言葉を受け入れます。