Pebbling a Chessboard

Inspired by Numberphile

by asemahle

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">

  <h1>Pebbling a chessboard</h1>
  <p>Free the three original spaces. See <a target="_blank" href="https://www.youtube.com/watch?v=lFQGSGsXbXE">Pebbling a Chessboard (numberphile)</a>.</p>

  <div class="row" v-for="(row, i) in ttable">
    <div :class="{ cell: true, filled: cell }" v-for="(cell, j) in row" v-on:click="toggle(i, j)"></div>
  </div>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}
.row {
  font-size: 0;
}

.cell {
  width: 25px;
  height: 25px;
  border: 1px solid black;
  display: inline-block;
}

.filled {
  background-color: black;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    table: [],
    size: 12
  },
  computed: {
    ttable() {
      let ttable = [];
      for (let i = this.size-1; i >= 0; i--) {
        let row = [];
        for (let j = 0; j < this.size; j++) {
          row.push(this.table[i][j]);
        }
        ttable.push(row);
      }
      return ttable;
    }
  },
  methods: {
    toggle(i, j) {
      i = (this.size - 1) - i;
      if (!this.table[i][j]) return;
      if (i < this.size-1 && 
          j < this.size-1 && 
          !this.table[i][j+1] && 
          !this.table[i+1][j]
      ) {
        this.table[i].splice(j, 1, false);
        this.table[i+1].splice(j, 1, true);
        this.table[i].splice(j+1, 1, true);
      }
    }
  },
  created() {
    let table = [];
    for (let i = 0; i < this.size; i++) {
    	let row = [];
      for (let j = 0; j < this.size; j++) {
        row.push(false);
      }
      table.push(row);
    }
    table[0][0] = true;
    table[0][1] = true;
    table[1][0] = true;
    this.table = table;
  }
})