<commit_before>import React, { Component } from 'react';
// import logo from './logo.svg';
// import './App.css';

class Board extends Component {
  constructor() {
    super();
    this.state = {"board":[[0,0,0,0,0,0,0,0],
                           [0,0,0,0,0,0,0,0],
                           [0,0,0,0,0,0,0,0],
                           [0,0,0,2,1,0,0,0],
                           [0,0,0,1,2,0,0,0],
                           [0,0,0,0,0,0,0,0],
                           [0,0,0,0,0,0,0,0],
                           [0,0,0,0,0,0,0,0]],
                  "options":[[2,3],[3,2],[4,5],[5,4]],
                  "blackScore": 2,
                  "whiteScore": 2,
                  "gameStarted": false,
                  "humanPlayer": "black",
                  "aiPlayer": "white",
                  "turn":"black"};

    this.boardSize = 320;
    this.gridSize = this.boardSize/8;

    this.newGame = this.newGame.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.changePlayer = this.changePlayer.bind(this);
  }

  changePlayer(e) {
    this.setState({
      "humanPlayer": e.target.value,
      "aiPlayer": this.opponent(e.target.value),
      "turn": e.target.value
    });
  }

  opponent(player) {
    if (player === "black") {
      return "white";
    } else {
      return "black";
    }
  }

  newGame() {
    fetch("/othello/new").then(response => {
      return response.json();
    }).then(js => {
      js["gameStarted"] = true;
      this.setState(js);
    });
  }

  componentDidMount() {
    this.updateCanvas();
  }

  componentDidUpdate() {
    this.updateCanvas();
    this.ai();
  }

  updateCanvas() {
    const ctx = this.refs.board.getContext('2d');
    this.drawBoard(ctx);
    this.drawPieces(ctx);
    this.drawOptions(ctx);
  }

  drawSinglePiece(ctx, r, c, piece) {
    var alpha, style = [1.0, "black"];
    if (piece === 0) {
      alpha = 0.2;
    }
    if (piece === 2) {
      style = "white";
    }
    ctx.save();
    ctx.globalAlpha = alpha;
    ctx.beginPath();
    ctx.arc((c+0.5) * this.gridSize, (r+0.5) * this.gridSize, this.gridSize/2-3, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fillStyle = style;
    ctx.strokeStyle = style;
    ctx.fill();
    ctx.restore();
  }

  drawOptions(ctx) {
    for(var i = 0; i < this.state.options.length; i++) {
      var p = this.state.options[i];
      this.drawSinglePiece(ctx, p[0], p[1], 0);<commit_msg>draw action<commit_after>import React, { Component } from 'react';
// import logo from './logo.svg';
// import './App.css';

class Board extends Component {
  constructor() {
    super();
    this.state = {"board":[[0,0,0,0,0,0,0,0],
                           [0,0,0,0,0,0,0,0],
                           [0,0,0,0,0,0,0,0],
                           [0,0,0,2,1,0,0,0],
                           [0,0,0,1,2,0,0,0],
                           [0,0,0,0,0,0,0,0],
                           [0,0,0,0,0,0,0,0],
                           [0,0,0,0,0,0,0,0]],
                  "options":[[2,3],[3,2],[4,5],[5,4]],
                  "blackScore": 2,
                  "whiteScore": 2,
                  "gameStarted": false,
                  "humanPlayer": "black",
                  "aiPlayer": "white",
                  "turn":"black"};

    this.boardSize = 320;
    this.gridSize = this.boardSize/8;

    this.newGame = this.newGame.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.changePlayer = this.changePlayer.bind(this);
  }

  changePlayer(e) {
    this.setState({
      "humanPlayer": e.target.value,
      "aiPlayer": this.opponent(e.target.value),
      "turn": e.target.value
    });
  }

  opponent(player) {
    if (player === "black") {
      return "white";
    } else {
      return "black";
    }
  }

  newGame() {
    fetch("/othello/new").then(response => {
      return response.json();
    }).then(js => {
      js["gameStarted"] = true;
      js["action"] = "";
      this.setState(js);
    });
  }

  componentDidMount() {
    this.updateCanvas();
  }

  componentDidUpdate() {
    this.updateCanvas();
    this.ai();
  }

  updateCanvas() {
    const ctx = this.refs.board.getContext('2d');
    this.drawBoard(ctx);
    this.drawPieces(ctx);
    this.drawOptions(ctx);
    this.drawAction(ctx);
  }

  drawAction(ctx) {
    if ("action" in this.state && this.state.action !== "") {
      var p = this.state.action;
      var r = p[0];
      var c = p[1];
      ctx.save();
      ctx.beginPath();
      ctx.arc((c+0.5) * this.gridSize, (r+0.5) * this.gridSize, this.gridSize/2-1, 0, Math.PI * 2, false);
      ctx.closePath();
      ctx.lineWidth = 1;
      ctx.strokeStyle = "yellow";
      ctx.setLineDash([5, 3]);
      ctx.stroke();
      ctx.restore();
    }
  }

  drawSinglePiece(ctx, r, c, piece) {
    var alpha, style = [1.0, "black"];
    if (piece === 0) {
      alpha = 0.2;
    }
    if (piece === 2) {
      style = "white";
    }
    ctx.save();
    ctx.globalAlpha = alpha;
    ctx.beginPath();
    ctx.arc((c+0.5) * this.gridSize, (r+0.5) * this.gridSize, this.gridSize/2-3, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fillStyle = style;
    ctx.strokeStyle = style;
    ctx.fill();
    ctx.restore();
  }

  drawOptions(ctx) {
    for(var i = 0; i < this.state.options.length; i++) {
      var p = this.state.options[i];
      this.drawSinglePiece(ctx, p[0], p[1], 0);
{'fraction_non_alphanumeric': 0.19099869815882461, 'fraction_numerical': 0.038497303328993863, 'mean_word_length': 1.8728632478632479, 'pattern_counts': {'":': 22, '<': 5, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4181093', 'n_tokens_mistral': 1995, 'n_tokens_neox': 1928, 'n_words': 313}