(KATAMINOを解くプログラムを作成する)KATAMINOを解くプログラム★前回の記事yucatio.hatenablog.comプログラミングをしていきます。使うピースの選択です。選択中のピースをstateに追加します。10ですので、これを追加します。10],}state.targetPiecesの初期値は、初期化処理でhtml要素から取得した方がよいのですが、今回は簡易的にstateに直接書き込みました。actionの登録ピースがドロップされたときの動作を実装します。各エリアにドロップされたときに使うピースを更新します。ドロップされたときの動作はdroppable関数のdropプロパティに記載します。使わないピースのエリア#unused-piece-droppableにドロップされたときは、ドロップされたピースを使うピースから削除するaction.removeFromTargetPieces(まだ定義していません)を呼び出します。同様に使うピースのエリア(#used-piece-droppable)にドロップされたときは、ドロップされたピースを使うピースに追加するaction.addToTargetPieces(まだ定義していません)を呼び出します。data-piece-id="0">のように書いたhtmlタグの、data-piece-id="0"の部分から取得します。取得した際は文字列型なので、数値型に変換します。},}actionの実装ドロップされたピースを使うピースから削除するaction.removeFromTargetPiecesとドロップされたピースを使うピースに追加するaction.addToTargetPiecesを実装します。先にaction.removeFromTargetPiecesを実装します。受け取ったpieceIdが、使うピース(state.targetPieces)に含まれているか判定します。ピースが含まれていれば、そのピースの番号を使うピースのリストから削除します。新しいリストをstateManagerに渡します。受け取ったpieceIdが、使うピースに含まれているかはindexOfの値が0以上かどうかで判定します。選択したピースのリストからの削除にはfilterを使用しています。stateManager.setTargetPiecesはまだ実装していません。追加ここまで次に、action.addToTargetPiecesを実装します。受け取ったpieceIdが、使うピース(state.targetPieces)に含まれているか判定し、含まれいなければ、pieceIdを追加した配列をstateManager.setTargetPiecesに渡します。追加ここまで}stateManagerの実装stateManager.setTargetPiecesを実装します。stateを書き換えます。(stateManagerのみがstateを書き換えることができます。書き換えたあとは画面を更新するのですが、一旦ここでコンソールに表示してここまでの動作を確認しましょう。"使うピース"の中にあるピースがstate.targetPiecesと同期しているのが分かります。6番のピースをドロップすると、targetPiecesの末尾に番号が追加されました。5番ののピースをドロップすると、targetPiecesから番号が削除されました。ボタンの表示の切り替えボタンの表示を切り替えます。選択されたピースの個数が3未満の場合には"つかうピースをもっとおいてください"のボタンを表示します。3以上の場合はスタートボタンを表示します。ボタンの表示の切り替えはtoggle関数で行います。追加ここまで}使うピースが更新されたときに、ボタンの更新を呼び出すようにstateManagerを更新します。以上で使うピースの選択を実装ができました。※消費税10%価格に変更済ページです。「ピーターからの問題」1から9までを使って分数の穴埋め算。(1)はてなブログをはじめよう!yucatioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。