Bobail - Hotseat

bobail-hotseat.markdown

Bobail - Hotseat

https://youtu.be/UOr8poCVyvk

A Pen by Frank Vlatten on CodePen.

License.

index.html

<div id="errors" style="
  background: #c00;
  color: #fff;
  display: none;
  margin: -20px -20px 20px;
  padding: 20px;
  white-space: pre-wrap;
"></div>
<div id="root"></div>
<script>
  window.addEventListener('mousedown', function(e) {
    document.body.classList.add('mouse-navigation');
    document.body.classList.remove('kbd-navigation');
  });
  window.addEventListener('keydown', function(e) {
    if (e.keyCode === 9) {
      document.body.classList.add('kbd-navigation');
      document.body.classList.remove('mouse-navigation');
    }
  });
  window.addEventListener('click', function(e) {
    if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') {
      e.preventDefault();
    }
  });
  window.onerror = function(message, source, line, col, error) {
    var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col + ')';
    errors.textContent += text + '\n';
    errors.style.display = '';
  };
  console.error = (function(old) {
    return function error() {
      errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '\n';
      errors.style.display = '';
      old.apply(this, arguments);
    }
  })(console.error);
</script>

script.babel

class Square extends React.Component {
  render() {
    return (
      <button
        className={`square ${this.props.value.color} bgc-${this.props.value.backgroundColor}`}
        onClick={this.props.onClick}
      >
        {this.props.value.figure}
      </button>
    );
  }
}

class Board extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      player: 1,
      sourceSquareIndex: -1,
      player1: "yellow",
      player2: "red",
      bobail: "white"
    };

    this.state = this.reset();
  }

  reset(setState) {
    let emptySquares = Array(25).fill({
      backgroundColor: null,
      color: null,
      figure: null
    });

    var state = {
      squares: emptySquares,
      player: 1,
      sourceSquareIndex: -1,
      player1: "yellow",
      player2: "red",
      bobail: "white"
    };
    state.squares = this.getStartSquares(state.squares);
    if (setState) {
      this.setState(state);
    }

    return state;
  }

  getStartSquares(squares, state) {
    squares[0] = this.getSquare(squares[0], 2);
    squares[1] = this.getSquare(squares[0], 2);
    squares[2] = this.getSquare(squares[0], 2);
    squares[3] = this.getSquare(squares[0], 2);
    squares[4] = this.getSquare(squares[0], 2);

    squares[12] = this.getSquare(squares[0], 3);

    squares[20] = this.getSquare(squares[0], 1);
    squares[21] = this.getSquare(squares[0], 1);
    squares[22] = this.getSquare(squares[0], 1);
    squares[23] = this.getSquare(squares[0], 1);
    squares[24] = this.getSquare(squares[0], 1);

    return squares;
  }

  getSquare(square, player) {
    if (player == 1) {
      square = {
        backgroundColor: null,
        color: this.state.player1,
        figure: "o"
      };
    } else if (player == 2) {
      square = {
        backgroundColor: null,
        color: this.state.player2,
        figure: "o"
      };
    } else if (player == 3) {
      square = { backgroundColor: null, color: this.state.bobail, figure: "o" };
    }
    return square;
  }

  handleClick(i) {
    const squares = this.state.squares.slice();
    var sourceSquareIndex = -1;
    if (this.state.sourceSquareIndex == -1) {
      const sourceSquare = this.state.squares.slice(i, i + 1)[0];
      sourceSquare.backgroundColor = "black";
      squares[i] = sourceSquare;
      sourceSquareIndex = i;
    } else {
      const targetSquare = this.state.squares.slice(i, i + 1)[0];
      const sourceSquare = this.state.squares.slice(
        this.state.sourceSquareIndex,
        this.state.sourceSquareIndex + 1
      )[0];
      sourceSquare.backgroundColor = null;
      squares[i] = sourceSquare;
      squares[this.state.sourceSquareIndex] = targetSquare;
      sourceSquareIndex = -1;
    }

    let nextPlayer = 1;
    if (this.state.player == 1) {
      nextPlayer = 2;
    }
    this.setState({
      sourceSquareIndex: sourceSquareIndex,
      squares: squares,
      player: nextPlayer
    });
  }

  renderSquare(i, player) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
          {this.renderSquare(3)}
          {this.renderSquare(4)}
        </div>
        <div className="board-row">
          {this.renderSquare(5)}
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
          {this.renderSquare(9)}
        </div>
        <div className="board-row">
          {this.renderSquare(10)}
          {this.renderSquare(11)}
          {this.renderSquare(12)}
          {this.renderSquare(13)}
          {this.renderSquare(14)}
        </div>
        <div className="board-row">
          {this.renderSquare(15)}
          {this.renderSquare(16)}
          {this.renderSquare(17)}
          {this.renderSquare(18)}
          {this.renderSquare(19)}
        </div>
        <div className="board-row">
          {this.renderSquare(20)}
          {this.renderSquare(21)}
          {this.renderSquare(22)}
          {this.renderSquare(23)}
          {this.renderSquare(24)}
        </div>
        <div className="buttons">
          <button onClick={() => this.reset(true)}>restart</button>
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return <Board />;
  }
}

// ========================================

ReactDOM.render(<Game />, document.getElementById("root"));

scripts

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

style.css

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol,
ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: darkgrey;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square.yellow {
  color: yellow;
}

.square.bgc-black {
  background-color: #0d0d0d;
}

.square.red {
  color: red;
}

.square.white {
  color: white;
}

.buttons {
  margin-top: 15px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}