セルに色をつける (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

前回の記事で解けた内容を画面に表示しました。まだ見づらいので今回は見た目を整えていきます。テーブルの枠線の表示し各セルに色をつけます。

色の準備

各ピースの色は以下のとおりです。

f:id:yucatio:20190730084610p:plain

各ピースの色は

パステルカラー - Pastel Colors

ここのページの一番上の段を使用しました。KATAMINOの各ピースの実際の色と近いものをあてはめました。(ピース番号=0, 1, 3, 4, 5, 6, 7, 9. 10, 11)

足りない部分は

Webセーフカラー web216 - Web Safe Colors

こちらから色を探しました。(ピース番号=2, 8)

実装

はじめにKATAMINOのフィールドとなるテーブルにidを付与します。CSSで指定するためです。

js/display.js

const display = {
  show : (kataminoField) => {
    const table = document.createElement("table")
    table.setAttribute("id","katamino-table")  // 追加

    // 中略

    document.body.appendChild(table)
  },
}

CSSファイルを作成します。cssフォルダを作成し、css/main.cssというファイルを作成します。 css/main.cssファイルにのテーブルの枠線情報、セルの幅、各ピースの色情報を記載します。

css/main.css

#katamino-table {
  border-collapse: collapse;
  margin: 10px;
}

#katamino-table td {
  border: solid 1px #cccccc;
  width:30px;
  height:30px;
}

#katamino-table td.piece0 {
    background-color:#7fbfff;
}

#katamino-table td.piece1 {
  background-color:#ffbf7f;
}

#katamino-table td.piece2 {
  background-color:#cc9966;
}

#katamino-table td.piece3 {
  background-color:#bf7fff;
}

#katamino-table td.piece4 {
  background-color:#7f7fff;
}

#katamino-table td.piece5 {
    background-color:#ff7fff;
}

#katamino-table td.piece6 {
  background-color:#ffff7f;
}

#katamino-table td.piece7 {
  background-color:#7fffff;
}

#katamino-table td.piece8 {
  background-color:#cccccc;
}

#katamino-table td.piece9 {
  background-color:#7fff7f;
}

#katamino-table td.piece10 {
  background-color:#bfff7f;
}

#katamino-table td.piece11 {
  background-color:#ff7f7f;
}

index.htmlで、作成したCSSファイルを読み込みます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>KATAMINO SOLVER</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">  <!-- 追加 -->
  </head>
  <body>
    <!-- 中略 -->
  </body>
</html>

js/display.jsを変更します。各セルにクラスを設定します。値が-1のときは何もクラスを設定しません。

js/display.js

const display = {
  show : (kataminoField) => {
    const table = document.createElement("table")
    table.setAttribute("id","katamino-table")

    kataminoField.forEach((fieldRow) => {
      tableRow = table.insertRow(-1)
      fieldRow.forEach((val) => {
        cell = tableRow.insertCell(-1)
        // 変更ここから
        if (val >= 0) {
          cell.classList.add('piece' + val)
          cell.appendChild(document.createTextNode(val))
        }
        // 変更ここまで
      })
    })

    document.body.appendChild(table)
  },
}