★前回の記事
前回の記事で解けた内容を画面に表示しました。まだ見づらいので今回は見た目を整えていきます。 テーブルの枠線の表示し各セルに色をつけます。
色の準備
各ピースの色は以下のとおりです。
各ピースの色は
ここのページの一番上の段を使用しました。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) }, }
動作確認
実行結果です。テーブルの枠線が表示され、各セルが以下のように色付けされていれば成功です。
★次回の記事
★目次