Javaエンジニア、React+Firebaseでアプリを作る

趣味で作ったものいろいろ

ピースの選択エリアの作成 (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

ピースの選択エリアを作成します。ドラッグアンドドロップでピースを選択できるようにします。 jQuery-UIのDraggableDroppableを使用します。

使用するbootstrapのコンポーネントは以下のようにContainerAlertCardを使用します。

f:id:yucatio:20191007095431p:plain

使うピースと使わないピースの配置

ピースを選択する画面を作成しましょう。まずはピースを置く枠を作成します。cardコンポーネントを使用します。

text-centerでテキストを中央寄せしています(参考: Text · Bootstrap)。 my-4my-2はマージンの設定です(参考: Spacing · Bootstrap)。

index.html

<!-- 前略 -->
  <body>
    <nav class="navbar navbar-expand-md navbar-light shadow-sm mb-5">
      <img class="navbar-brand" src="img/logo/Primary_logo_on_transparent_400x63.png" />
    </nav>
    <!-- <h1>Hello, world!</h1> は削除 -->
    <!-- 追加ここから -->
    <div class="container">
      <div class="alert alert-warning text-center my-4">
        つかうピースを ドラッグアンドドロップで したのわくに いれてから スタートボタンをおしてね
      </div>
      <div id="unused-piece" class="card text-center my-2">
        <div id="unused-piece-droppable" class="card-body">
        </div>
      </div><!-- end of card for unused-piece -->
      <div id="used-piece" class="card text-center border-warning my-2">
        <div id="used-piece-droppable" class="card-body">
        </div>
        <div class="card-footer">
          つかうピース
        </div>
      </div><!-- end of card for used-piece -->
    </div><!-- end of container -->
    <!-- 追加ここまで -->
<!-- 後略 -->

ピースを配置していきます。ピース番号1, 2, ,9, 5, 10のピースは使うピースに配置しておきましょう。 各ピースには、draggable-pieceというクラス名を付与しています。これはドラッグ対象を指定するために使用されます。data-piece-idの属性も付与します。これは、どのピースが選択されたかを判断するために使用されます。

index.html

<!-- 前略 -->
  <body>
    <nav class="navbar navbar-expand-md navbar-light shadow-sm mb-5">
      <img class="navbar-brand" src="img/logo/Primary_logo_on_transparent_400x63.png" />
    </nav>
    <div class="container">
      <div id="unused-piece" class="card text-center my-2">
        <div id="unused-piece-droppable" class="card-body">
          <!-- 追加ここから -->
          <span id="piece_0" class="draggable-piece m-2 p-0" data-piece-id="0">
            <img src="img/piece/piece_0_1.png" width="25px" />
          </span>
          <span id="piece_3" class="draggable-piece m-2 p-0" data-piece-id="3">
            <img src="img/piece/piece_3_5.png" width="50px" />
          </span>
          <span id="piece_4" class="draggable-piece m-2 p-0" data-piece-id="4">
            <img src="img/piece/piece_4_2.png" width="75px" />
          </span>
          <span id="piece_6" class="draggable-piece m-2 p-0" data-piece-id="6">
            <img src="img/piece/piece_6_1.png" width="50px" />
          </span>
          <span id="piece_7" class="draggable-piece m-2 p-0" data-piece-id="7">
            <img src="img/piece/piece_7_0.png" width="75px" />
          </span>
          <span id="piece_8" class="draggable-piece m-2 p-0" data-piece-id="8">
            <img src="img/piece/piece_8_0.png" width="75px" />
          </span>
          <span id="piece_11" class="draggable-piece m-2 p-0" data-piece-id="11">
            <img src="img/piece/piece_11_0.png" width="75px" />
          </span>
          <!-- 追加ここまで -->
        </div>
      </div><!-- end of card for unused-piece -->
      <div id="used-piece" class="card text-center border-warning my-2">
        <div id="used-piece-droppable" class="card-body">
          <!-- 追加ここから -->
          <span id="piece_1" class="draggable-piece m-2 p-0" data-piece-id="1">
            <img src="img/piece/piece_1_5.png" width="50px" />
          </span>
          <span id="piece_2" class="draggable-piece m-2 p-0" data-piece-id="2">
            <img src="img/piece/piece_2_5.png" width="50px" />
          </span>
          <span id="piece_9" class="draggable-piece m-2 p-0" data-piece-id="9">
            <img src="img/piece/piece_9_0.png" width="75px" />
          </span>
          <span id="piece_5" class="draggable-piece m-2 p-0" data-piece-id="5">
            <img src="img/piece/piece_5_3.png" width="50px" />
          </span>
          <span id="piece_10" class="draggable-piece m-2 p-0" data-piece-id="10">
            <img src="img/piece/piece_10_0.png" width="75px" />
          </span>
          <!-- 追加ここまで -->
        </div>
        <div class="card-footer">
          つかうピース
        </div>
      </div><!-- end of card for used-piece -->
<!-- 後略 -->

使うピースの背景色を変更します。

css/main.css

#used-piece-droppable {
  background-color: #fff8e1;
}

ここまでの実行結果

ここまでの実行結果です。 枠の中にピースが表示されました。

f:id:yucatio:20191006224308p:plain

矢印の描画

上から下にピースを移動させるということがわかりやすいように、使用しないピースのcardから使用するピースのcardへ矢印を描きます。

【CSS】CSSのみで三角と矢印を作る方法 - bagelee(ベーグリー) のページを参考にし、CSSで矢印を描画します。

使わないピースと使うピースのcardの間に矢印を配置します。htmlに追記します。mx-autoでページの中央に表示されるようにしています。

index.html

<!-- 前略 -->
  <body>
    <!-- 中略 -->
        </div>
      </div><!-- end of card for unused-piece -->
      <!-- 追加ここから -->
      <div class="arrow-down mx-auto">
      </div>
      <!-- 追加ここまで -->
      <div id="used-piece" class="card text-center border-warning my-2">
        <div id="used-piece-droppable" class="card-body">
<!-- 後略 -->

CSSのみで三角と矢印を作る方法ページの内容を参考に、以下の内容を追加します。

css/main.css

.arrow-down {
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-top: 30px solid #ffc107;
}

実行結果

実行結果です。使うピースと使わないピースの間に矢印が表示されました。

f:id:yucatio:20191006224343p:plain

以上でピースの選択エリアの、見た目の部分が完成しました。


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com