解いた結果をダイアログで表示する (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

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">&times;</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">&times;</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)
  },

  // 後略
}

実行結果

実行結果です。解けたときに"できたよ"のダイアログ、解けなかったときに、"このくみあわせではできないみたい"のダイアログが表示されました。

f:id:yucatio:20191017092211p:plain

f:id:yucatio:20191017092225p:plain

updateResultMessageが複数回呼ばれたときの対応について

updateResultMessageは今回はsolverStateが変化したときにしか呼ばれないので、今回はこれで動作します。しかし今後他のstateが変化したときにも呼ばれた際に、何度もダイアログが表示されてしまうというバグが発生します。その場合は、解いたあと一度ダイアログを閉じたら、その状態でいる間は再びダイアログを表示しないといった変更が必要になります。

以上で解いた結果をダイアログで表示することができました。