Chess Player MVP

chess-player-mvp.markdown

Chess Player MVP

A Pen by Kevin Marville on CodePen.

License.

script.vue

<template>
  <div id="app">
    <h1>{{ gameTitle }}</h1>
    <div class="board">
      <div
        v-for="(square, index) in board"
        :key="index"
        class="square"
        :class="getSquareColor(index)"
        @click="handleSquareClick(index)"
      >
        <img v-if="square" :src="getPieceImage(square)" alt="Piece" />
      </div>
    </div>
    <footer>
      <p>
        Check out my
        <a href="https://github.com/kvnbbg" target="_blank">GitHub</a>
        and follow me on
        <a href="https://x.com/techandstream" target="_blank">Twitter</a>
      </p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gameTitle: "Vue.js Chess Game",
      board: this.initializeBoard(),
      selectedSquare: null,
      turn: "white",
      pieceImages: {
        wp: "path/to/white-pawn.png",
        wr: "path/to/white-rook.png",
        wn: "path/to/white-knight.png",
        wb: "path/to/white-bishop.png",
        wq: "path/to/white-queen.png",
        wk: "path/to/white-king.png",
        bp: "path/to/black-pawn.png",
        br: "path/to/black-rook.png",
        bn: "path/to/black-knight.png",
        bb: "path/to/black-bishop.png",
        bq: "path/to/black-queen.png",
        bk: "path/to/black-king.png"
      }
    };
  },
  methods: {
    initializeBoard() {
      return [
        "br",
        "bn",
        "bb",
        "bq",
        "bk",
        "bb",
        "bn",
        "br",
        "bp",
        "bp",
        "bp",
        "bp",
        "bp",
        "bp",
        "bp",
        "bp",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "",
        "wp",
        "wp",
        "wp",
        "wp",
        "wp",
        "wp",
        "wp",
        "wp",
        "wr",
        "wn",
        "wb",
        "wq",
        "wk",
        "wb",
        "wn",
        "wr"
      ];
    },
    getSquareColor(index) {
      const row = Math.floor(index / 8);
      const col = index % 8;
      return (row + col) % 2 === 0 ? "light-square" : "dark-square";
    },
    getPieceImage(piece) {
      return this.pieceImages[piece];
    },
    handleSquareClick(index) {
      if (this.selectedSquare === null) {
        if (this.board[index] && this.board[index][0] === this.turn[0]) {
          this.selectedSquare = index;
        }
      } else {
        const validMove = this.isValidMove(this.selectedSquare, index);
        if (validMove) {
          this.board[index] = this.board[this.selectedSquare];
          this.board[this.selectedSquare] = "";
          this.selectedSquare = null;
          this.turn = this.turn === "white" ? "black" : "white";
        } else {
          this.selectedSquare = null;
        }
      }
    },
    isValidMove(fromIndex, toIndex) {
      const piece = this.board[fromIndex];
      const target = this.board[toIndex];
      if (target && target[0] === piece[0]) {
        return false;
      }
      // Simplified valid move logic for pawns (add more for other pieces)
      if (piece[1] === "p") {
        const direction = piece[0] === "w" ? -1 : 1;
        const startRow = piece[0] === "w" ? 6 : 1;
        const fromRow = Math.floor(fromIndex / 8);
        const toRow = Math.floor(toIndex / 8);
        const toCol = toIndex % 8;
        const fromCol = fromIndex % 8;
        if (fromCol === toCol && !target) {
          if (fromRow + direction === toRow) {
            return true;
          }
          if (fromRow === startRow && fromRow + 2 * direction === toRow) {
            return true;
          }
        }
        if (
          Math.abs(fromCol - toCol) === 1 &&
          fromRow + direction === toRow &&
          target
        ) {
          return true;
        }
      }
      // Add logic for other pieces here
      return false;
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.board {
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  gap: 0;
  margin: 0 auto;
  border: 2px solid #000;
}

.square {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.light-square {
  background-color: #f0d9b5;
}

.dark-square {
  background-color: #b58863;
}

.square img {
  width: 100%;
  height: auto;
}

footer {
  margin-top: 20px;
}

footer a {
  color: #4fc08d;
  text-decoration: none;
}
</style>