DEV Community: Diseyi

Implementing Tic Tac Toe in Vue

Diseyi — Sat, 11 Mar 2023 21:25:02 +0000

Tic Tac Toe game used to be one of my favourite paper games in primary school. It was known as 'X' and 'O', I don’t quite remember how often I won, but I definitely enjoyed playing it. Recently, my friend @eteimz challenged me to build this game with Vue. He built the react version. You can check it out here reactoe.

For this tutorial, I will be using the Vue Composition API Style. In the github repository linked below, you can find the code for both Composition and Options API.

We start by initializing the states of our game:

winner to store the winner's value,
isTie: this stores a boolean value, false in the beginning and if no winner, is set to true,
gameover: this holds a boolean value, false at the beginning and is set to true when a winner emerges or isTie is true,
currentplayer stores the value of the current player
a 3*3 array, also known as a matrix.

<script setup lang="ts">
import { ref, reactive } from 'vue';

const winner = ref<string | null>(null);
const isTie = ref(false);
const gameover = ref(false);
const currentPlayer = ref('X');

let board = reactive([
  ['', '', ''],
  ['', '', ''],
  ['', '', '']
]);
</script>

Next step is our template

Inside the board div, the first div with a class of rows represents the rows which include an inner div that represents the cells in each row. A click event is attached to the cell.

<template>
  <div>
    <h1 class="">TicTac Game</h1>
    <p class=""> Current Player: <span class=""> {{ currentPlayer }} </span> </p>
      <div class="row" v-for="(row, rowIndex) of board" :key="rowIndex">
        <div class="cell" v-for="(cell, cellIndex) of row" :key="cellIndex"
          :class="{ 'cell-x': cell === 'X', 'cell-o': cell === 'O' }" :disabled="cell !== null"
          @click="playMove(rowIndex, cellIndex)">
          {{ cell }}
        </div>
      </div>

    <div class="">
      <p v-if="winner">{{ winner }} wins!</p>
      <p v-else-if="isTie">It's a tie!</p>
      <button @click="reset">Reset Game</button>
    </div>
  </div>
</template>

The next step is creating the functions for our game, we start with the checkTie. This function checks if the current game is in a tied state.

The checkTie function uses a nested loop to iterate over each cell on the 3x3 game board. It starts by initializing two variables i and j to zero and increments them until they reach three. The i and j variables represent the row and column index of each cell on the board.

With each iteration of the loop, the function checks if the cell at the current i and j position is empty, if empty, the function returns false.

If the loop completes without finding any empty cell, the function returns true resulting in a tied state between the players.

const checkTie = () => {
  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
      if (!board[i][j]) {
        return false;
      }
    }
  }
  return true;
}

Our next step is the checkWin function. This function checks all the possible ways a player can win, and returns true if the current player has won and false otherwise.

Inside the function, the for loop checks each row and column of the board to see if all the cells in the row or column match the current player's value. This is done by using the every() method on each row and column to check if every cell in that row or column is equal to the current value.

If a row or column is found where every cell matches the current player's value, the function returns true to indicate that the current player has won the game.

If no winning row or column is found, the function checks the two diagonals of the board to see if they are all equal to the current player's value. If a diagonal is found where all cells are equal to the current value, the function returns true to indicate that the current player has won the game.

If no winning row, column, or diagonal is found, the function returns false to indicate that the game is not yet won by the current player.

const checkWin = () => {
  const a = currentPlayer.value;

  for (let i = 0; i < 3; i++) {
    if (board[i].every(cell => cell === a)) return true;
    if (board.every(row => row[i] === a)) return true;
  }

  // Check diagonals
  if (board[0][0] === a && board[1][1] === a && board[2][2] === a) return true;
  if (board[0][2] === a && board[1][1] === a && board[2][0] === a) return true;

  return false;
};

Our next function is the playMove function. This function updates the board when a player makes a move, it takes in two arguments, row and col, which represent the coordinates of the cell that the player clicks.

The function first checks if the cell is empty (!board[row][col]) and if there is no winner yet (!winner.value). If both of these conditions are true, then it proceeds to update the game board with the current player's value.

The checkWin function is then called to check if the current player has won the game. If the current player has won, the winner variable is updated with the current player's value. If not, the checkTie function is called to check if the game is tied. If the game is tied, the isTie variable is set to true.

If the game is not won or tied, the currentPlayer variable is updated to the other player's title. This is done using a ternary operator that checks if the current player is 'X'. If so, it switches to 'O', and vice versa.

const playMove = (row: number, col: number) => {
  if (!board[row][col] && !winner.value) {
    board[row][col] = currentPlayer.value;
    if (checkWin()) {
      winner.value = currentPlayer.value;
    } else if (checkTie()) {
      isTie.value = true;
    } else {
      currentPlayer.value = currentPlayer.value === 'X' ? 'O' : 'X';
    }
  }
}

Finally, we have the reset function, to reset the state of our game to its default state.

const reset = () => {
  board = [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
  ];
  currentPlayer.value = 'X';
  gameover.value = false;
  winner.value = null;
}

Here's the css used for this game

body {
  margin: 0;
  display: flex;
  min-width: 320px;
  min-height: 100vh;
}


#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.tic-tac-toe {
  text-align: center;
}

.board {
  display: inline-block;
  margin-top: 20px;
}

.row {
  clear: both;
}

.cell {
  width: 50px;
  height: 50px;
  float: left;
  margin-right: -1px;
  margin-bottom: -1px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #bbb;
  cursor: pointer;
  font-size: 40px;
}

.cell-x {
  color: #f00;
}

.cell-o {
  color: #00f;
}

button {
  margin-top: 20px;
  font-size: 16px;
  padding: 10px;
  border-radius: 5px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

Link to the the github repo tictac game repo

Ref vs Reactive - How Vue 3 Declares Reactive Data

Diseyi — Wed, 15 Feb 2023 15:43:22 +0000

In Vue3, reactive data can be declared in two ways using ref() and reactive() functions.

const count = ref(0)
const state = reactive({count: 0})

This article will help you understand the difference between ref and reactive data declaration in Vue and when to use them.

The ref and reactive functions provided by the Vue3 Composition API are used to create reactive data objects that can be tracked so that changes made to their properties will trigger a re-render of any component that depends on those properties.

The primary difference between ref and reactive is the way they are used to create reactive objects. Ref stores both primitive(string, number, boolean, undefined, null) and objects, Reactive only stores object. Also, data stored in ref can be reassigned while reactive data cannot be reassigned.

Attempt on reassigning the object stored in reactive will throw a TypeError. You can only assign a new property to the object

<script lang="ts" setup>
import { ref, reactive } from 'vue'

const state = ref({count: 0})
const quantity = reactive({count: 0}) 

state.value = {age: 13} ✅
quantity = {age: 13} ❌ 

quantity.age = 13 ✅
</script>

Reactive

The reactive() function is used to create a reactive object with multiple properties. The function returns a reactive proxy object that contains the properties you passed in. If you need to track multiple properties of an object use Reactive.

<script lang="ts" setup>
import { reactive } from 'vue'

const count = reactive(0) ❌ 
const state = reactive({
  count: 0,
  message: 'Hello, World!'
}) ✅

// reading a property
console.log(state.count) // 0

// updating a property
  state.count += 1
</script>

Reactive is limited in it's application, it can't be used to store primitive data types, it only stores object data types. When you try to store a primitive data, it doesn't track the changes. and updating will throw an error.

Another limitation of the reactive() function is it doesn't keep track of the destructured data from the object.

import { reactive } from 'vue'
const user = reactive({ name: "Ray", age: 24 })
// destructuring
const {name, age} = user

const changeUsername () => {
 user.name = "Alen"
}

<template>
  <div class="">
    <button @click="changeUsername">change name</button>
    <h1 class=""> {{ name}} </h1> 
    <p class=""> {{ user.name}} </p>
  </div>
</template>

The name in the h1 tag will still remain Ray when you click on the button, while the p tag will update to Alen.

To address the limitations of the reactive() function, the ref() function was provided.

Ref

ref is used for tracking a single value, such as a number, string, or boolean and also objects. When you use the ref() function, it uses the reactive function to create a reactive object under the hood, but it adds an extra layer of indirection to make it possible to get and set the value directly using .value.

import { ref } from 'vue'

const count = ref(0) ✅
const user = ref({name: bimpe})  ✅

// reading the value
console.log(count.value) // 0
console.log(user.value.name) // bimpe

// updating the value
count.value += 1

Note: accessing the value of count in your template is done without the .value.

<template>
    <h1>{{ user.name}}</h1>
    <p>{{ count}}</p>
</template>

When should you use ref or reactive. Depending on what you are trying to achieve, keep in mind that data stored in ref can be reassigned, so you want to use ref when working with primitives or object you want to reassign. Use reactive when working with objects and want to avoid the overhead of ref.

Glossary

Reactive proxy objects in Vue are special wrappers around your JavaScript object that allows you to modify their properties and track changes.

References
https://vuejs.org/guide/extras/reactivity-in-depth.html
https://vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-reactive-state