★前回の記事
KATAMINOが解き終わったときに、解けたか解けなかったかをダイアログに表示します。 ダイアログにはbootstrapのmodalコンポーネントを使用します。
ダイアログパーツの作成
Modal · Bootstrap に載っている例を参考にダイアログのhtmlを組み立てます。
はじめに、解けた場合のダイアログを作成します。javascriptの読み込みタグの直前にダイアログ用のhtmlを書きます。ヘッダーの背景色を黄色に変更しました。
index.html
<! -- 前略 --> </div><!-- end of container --> <! -- 追加ここから --> <div id="solved-modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header bg-warning"> <h5 class="modal-title">できたよ</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>こたえをみてみよう</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">とじる</button> </div> </div> </div> </div> <! -- 追加ここまで --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <! -- 後略 -->
同様に、今追加した部分のすぐ下に、解けなかった場合のダイアログ用のhtmlを書きます。ヘッダーの背景色は灰色にします。
index.html
<! -- 追加ここから --> <div id="not-solved-modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-white bg-secondary"> <h5 class="modal-title">この くみあわせでは できないみたい</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>ほかの くみあわせで ためしてみてね</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">とじる</button> </div> </div> </div> </div> <! -- 追加ここまで --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <! -- 後略 -->
ダイアログを表示するプログラム
ダイアログを表示する処理を書きます。
ダイアログを表すjQueryオブジェクトに対してmodal
メソッドを呼び出します。オプションに"show"
または"hide"
を渡すことによって表示・非表示を制御します。
js/display.js
const display = { // 前略 updateResultMessage: ({solverState}) => { $("#solved-modal").modal(solverState === "solvedSuccess" ? "show" : "hide") $("#not-solved-modal").modal(solverState === "solvedFailed" ? "show" : "hide") }, }
stateManagerへの登録
solverState
が変化したときにupdateResultMessage
を呼び出すようにします。
js/stateManager.js
const stateManager = { // 前略 setSolverState: (solverState) => { state.solverState = solverState display.updateDraggablePieces(state) display.updateStartButtons(state) // 追加 display.updateResultMessage(state) }, // 後略 }
実行結果
実行結果です。解けたときに"できたよ"のダイアログ、解けなかったときに、"この くみあわせでは できないみたい"のダイアログが表示されました。
updateResultMessageが複数回呼ばれたときの対応について
updateResultMessage
は今回はsolverState
が変化したときにしか呼ばれないので、今回はこれで動作します。しかし今後他のstate
が変化したときにも呼ばれた際に、何度もダイアログが表示されてしまうというバグが発生します。その場合は、解いたあと一度ダイアログを閉じたら、その状態でいる間は再びダイアログを表示しないといった変更が必要になります。
以上で解いた結果をダイアログで表示することができました。
★次回の記事
★目次