ボードの作り方 [CSS grid]

ボードはCSS gridを使い作成します。
CSS gridについてはこちらの記事で、とてもわかりやすく解説されていました。
https://app.codegrid.net/entry/display-grid-1

たったこれだけの記述で8x8のマス目を持つボードを作成できます！

div.grid
  div

.grid {
  background-color: #008000;
  padding: 10px;
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);

  div {
    border: 1px solid #000;
  }
}

コマの作り方 [:Checked]

結構詰まったのが、CSSだけで以下3の状態を保持することです。

透明	黒	白

「CSS 状態保持」で色々調べていると、
チェックボックスやラジオボタンなどの疑似要素:checkedを使うと良さそうという記事を見つけたのでやってみました。

HTML部分（pug）

  div(id='disc-1')
    input(id='none-1' type='radio' name='field-1' class='none' checked)
    label(for='white-1')
    input(id='white-1' type='radio' name='field-1' class='white')
    label(for='black-1')
    input(id='black-1' type='radio' name='field-1' class='black')
    label(for='none-1')

CSS部分（scss）

 div {
    border: 1px solid #000;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  input {
    display: none;
  }
  label {
    display: none;
    cursor: pointer;
    line-height: 0;
    width: 90%;
    height: 90%;
    border-radius: 50%;
  }
  input {
    &:checked + label {
      display: inline-block;
    }
    &.none + label {
      background-color: transparent;
    }
    &.black + label {
      background-color: #000;
    }
    &.white + label {
      background-color: #fff;
    }
  }

ポイントは、labelのfor=""部分で次のコマの状態を指定していることです。
こうすることで、表示されているコマをクリックすると、次ののコマがclickedになり、disｐlay: noneからdisplay: inline-blockに変わり描画されます。
あとは、その繰り返しで3つの状態でループを作れば完了です。

これ使えば、3つと限らずクリックに合わせた色々な状態を保持ができそうです。

終わりに

CSS grid使ってみようで初めたオセロ作りですが、ほぼほぼオセロのコマの状態管理に時間使いました。
CSS gridは、htmlの順番を無視した、かなり自由な配置が可能なので何かと便利そうです。
特にレスポンシブデザインでの配置換えに使えそうですね。
また、checkedBoxでの状態管理は使い所はいまいち見つかりませんが、表現の幅は広がりそうです。

参考

https://app.codegrid.net/entry/display-grid-1
https://codepen.io/dourvaris/pen/QqKPWb

CSSだけでオセロゲームを作ってみる

ボードの作り方 [CSS grid]

コマの作り方 [:Checked]

終わりに

参考