一時停止・再開ボタン、速度調節用スライダーの用意 (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

一時停止・再開ボタンの追加

フイールドのcardコンポーネントのフッターに一時停止・再開のボタンを追加します。両方ともページが読み込まれたときには押せないボタンなのでdisabled属性を付与しています。

index.html

<!-- 前略 -->
      <div class="card my-2">
        <div class="card-body">
          <div id="katamino-field" class="mx-auto p-0">
            <img src="img/field/field.jpg" width="352" height="177"/>

            <!-- 中略 -->
          </div><!-- end of katamino-field -->
        </div><!-- end of card-body for katamino-field -->
        <!-- 追加ここから -->
        <div class="card-footer">
          <button id="pause-button" type="button" class="btn btn-outline-secondary" disabled>いちじていし</button>
          <button id="resume-button" type="button" class="btn btn-outline-secondary" disabled>さいかい</button>
        </div><!-- end of card-footer for katamino-field -->
        <!-- 追加ここまで -->
      </div><!-- end of card for katamino-field -->
    </div><!-- end of container -->
<!-- 後略 -->

ここまでの実行結果

実行結果です。フッターにボタンが表示されました。

f:id:yucatio:20191011085427p:plain

速度調節用パーツの追加

速度調整用のスライダーを追加します。スライダーはinput要素にtype="range"を指定することで作成できます。

スライダーはcardのフッターの右側に配置します。ボタンを左側に置いたまま、スライダーを右側に置きたいので、flexの例を参考にd-flexとflex-grow-1クラスを使用します。

card-footerにd-flexクラスを追加します。一時停止・再開ボタンをdivで囲み、flex-grow-1クラスを付与して、スライダーを右へ移動させました。スライダーの親のdivにはalign-self-centerクラスを追加して、上下方向中央に配置されるようにしています。

index.html

<!-- 前略 -->
        </div><!-- end of card-body for katamino-field -->
        <div class="card-footer d-flex">  <!-- d-flexを追加 -->
          <div class="flex-grow-1"> <!-- divを追加 -->
            <button id="pause-button" type="button" class="btn btn-outline-secondary" disabled>いちじていし</button>
            <button id="resume-button" type="button" class="btn btn-outline-secondary" disabled>さいかい</button>
          </div> <!-- /divを追加 -->
          <!-- 追加ここから -->
          <div class="align-self-center">
            <label class="text-secondary">はやさ: はやい <input id="speed-range" type="range" name="speed" min="0" max="4" value="3"> おそい</label>
          </div>
          <!-- 追加ここまで -->
        </div><!-- end of card-footer for katamino-field -->
      </div><!-- end of card for katamino-field -->
    </div><!-- end of container -->
<!-- 後略 -->