現在の実装では、フィールドに新しくピースが置かれたときにフィールドのピースを描画しています。フィールドに置かれたビースを再描画する際、フィールドに置かれたピースが一気に置き換わる瞬間があります。ピースの表示をもう少し工夫してみましょう。KATAMINOを遠いている最中、フィールドに置かれたピースをピースの選択エリアから消します。現在のUIでは、解くのをスタートさせたときに、どの位置までKATAMINOが置かれるべきかわかりにくいです。今回はこれを改善します。現在300ms間隔で描画を行なっていますが、ピースの数が多い場合は若干遅く感じます。そこで速度調節機能を追加します。速度の設定を追加しましょう。下記の記事で5段階のスライダーを用意しました。一時停止機能は、solver.solveで実行したsetTimeoutをキャンセル(clearTimeout)することで実現します。"ピースをえらびなおす"ボタンが押されたときの動作をプログラミングしていきます。フィールドに置かれているピース(placedPieces)を空にして、画面の状態(solverState)をピースの選択中(selectPiece)に変更します。KATAMINOが解き終わったときに、解けたか解けなかったかをダイアログに表示します。ダイアログにはbootstrapのmodalコンポーネントを使用します。KATAMINOを解くのが終わったときに、解けた(solvedSuccess)または解けなかった(solvedFailed)へ状態を遷移させます。解けたか解けなかったかはsolverの中でわかるので、コールバックを使用してstateを更新します。フィールド上のピースの表示を行います。KATAMINOを解いているときのピースの選択エリアやボタンの部分も変更します。スタートボタンを押したときの挙動をプログラミングしていきます。スタートボタンへactionを登録します。スタートボタンがクリックされたときにaction.startSolveを呼びます。プログラミングをしていきます。使うピースの選択です。選択中のピースをstateに追加します。10ですので、これを追加します。画面の状態遷移について考えます。画面の状態とは、"ピースの選択中"や"解いている"という状態です。"ピースの選択中"と"解いている"、"解けた"、"解けなかった"の状態遷移は以下のようになります。プログラムの内部設計をします。フイールドのcardコンポーネントのフッターに一時停止・再開のボタンを追加します。両方ともページが読み込まれたときには押せないボタンなのでdisabled属性を付与しています。KTAMINOのフィールドを配置します。今回はKATAMINOを置くマス目(フィールド)に画像を用います。画像はこちらからダウンロードできます。ダウンロードしたら、img/fieldに配置します。KATAMINOを解くのをスタートさせるボタンを用意します。作成するプログラムでの、ボタンの状態は以下の4つです。前回までで、選択用のピースを画面に表示させることができました。今回はピースをドラッグ&ドロップさせる処理を追加します。ピースの選択エリアを作成します。ドラッグアンドドロップでピースを選択できるようにします。jQuery-UIのDraggableとDroppableを使用します。1では、KATAMINOのフィールドの1マスをテーブルの1セルに対応させていました。このままでは見栄えが良くないので改善します。見た目を整える最初の1歩として、ロゴを作成して表示してみましょう。jQuery-UIのライブラリを読み込んでおきましょう。ひな形をbootstrapのページからコピーします。前回までの内容は一旦全て削除します。STEP2では見た目を整えてアプリを完成させます。ページを開いた時の見た目はこのようになります。画面上部でピースを選択します。スタートボタンを押すと、解くのを開始し、解く過程が表示されます。前回まででピースを画面から選ぶことができ、解く過程も表示することができました。いくつかの組み合わせを試してみると、以下の画像のように、フィールドに穴が空いている場合でも、ピースを置くのを続けてしまう場合があることに気づきます。これまで、使用するピースはjs/main.jsで指定してきましたが、画面で選べるように変更します。ピースを選択する際にどのピースの画像を表示させます。画像をダウンロードします。前回までで解けた場合のフィールドを表示しました。今回は途中の経過も表示します。ピースが置けた時にフィールドを更新します。途中経過を表示します。ピースが置けたときに画面を更新します。前回の記事で解けた内容を画面に表示しました。見づらいので今回は見た目を整えていきます。テーブルの枠線の表示し各セルに色をつけます。各ピースの色は以下のとおりです。ここまでコンソールに表示してきましたが、仕上げとして画面に表示してみましょう。js/display.jsというファイルに表示用関数をまとめることにします。作成して以下の内容を書いておきます。前回まででスタックに新たにデータを投入する準備が整いました。今回はスタックに次のデータを投入しましょう。今回はminEmptyの更新をします。minEmptyはピースが置かれていないマスのうち、1番上の段の、1番左のマスです。フィールドを渡して最小の空白を探すfindMinEmptyを実装します。呼び出し側を書きます。続いてunPlacedPieceの更新をします。unPlacedPieceはまだ置かれていないピースの番号を格納しています。置かれたピースの番号をここから削除します。「ピーターからの問題」1から9までを使って分数の穴埋め算。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。