Frontend Mentor - Tic Tac Toe

This is my solution to the Tic Tac Toe challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Check out the project here:

• Solution URL: Github Repo
• Live Site URL: Live Site

---

Table of Contents:

• Overview
  • The Challenge
  • Screenshots
• My Process
  • HTML
  • CSS
  • Javascript
• Built With
• What I learned
• Continued development
• Author
• Acknowledgments

---

Overview

The challenge is to build out a Tic Tac Toe game and get it looking as close to the design as possible.

Users should be able to:

• View the optimal layout for the game depending on their device's screen size
• See hover states for all interactive elements on the page
• Play the game either solo vs the computer or multiplayer against another person
• Bonus 1: Save the game state in the browser so that it’s preserved if the player refreshes their browser
• Bonus 2: Instead of having the computer randomly make their moves, try making it clever so it’s proactive in blocking your moves and trying to win

---

Screenshots

iPhone 6/6S (375 x 667)

Samsung Galaxy Note 5 (480 x 853)

iPad Mini 2 & 3 (768 x 1024)

Desktop 19" (1440 x 900)

---

My Process

HTML

I started out wih fleshing out the HTML and CSS. At first I structired each cell this way:

  <div id="a1" class="main-game__play-cell" data-turn-flag="1" data-value="">

    <div class="cross">
      <svg>//Cross svg//</svg>
    </div>

    <div class="circle">
      <svg>//Cross svg//</svg>
    </div>

    <div class="cross--outline">
      <svg>//Cross svg//</svg>
    </div>

    <div class="circle--outline">
      <svg>//Cross svg//</svg>
    </div>
  </div>

Inside each cell I had 4 embedded svgs and would add '.active' to whichever svg was needed. I had two data attributes 'turn-flag' and 'value' which I used to trigger which svg to show.'Data-turn-flag=1' would trigger cross while 'Data-turn-flag=2' would trigger circle. 'Data-value' kept track of who owned the cell.

Eventually though I dropped this structure. I realized it was overcomplicated and there was a better way of doing things. I settled with the following structure after:

  <div id="cell-0" class="cell">
    <div class="cell__svg">
      <svg>
        <use class="cell__svg-link" href=""></use>
      </svg>
    </div>
  </div>

  /* Further down the document */

  <svg style="display: none">
      <symbol id="cross--win">
        // Cross svg
      </symbol>
  </svg>

I simplified the cell structure and used a linked svg structure. This way, the HTML file didn't get bloated with similar svg. Using the 'href' attribute I could use whichever svg was needed.

CSS

For this project I decided to use SCSS. I wanted to build my skill with using CSS preprocessors. I decided to go with my own file structure.

The first folder contains variables and mixins. Snippets of code that are reusable.

The second folder contains css reset and those css that broadly affects the document.

The 3rd folder contains css for containers. This are the block level divs that contain smaller elements.

The 4th and final folder contains CSS for al elements:

Javascript

For this project I went ahead and used vanilla Javascript. This is my first time going for a modular approach with Javascript. I also went for an OOP approach where methods that, in my opinion, are closely related are found in a single object.

When I first started, I managed to simulate a simple "AI" to take a turn after the player did. It would choose a random cell from an array of empty(unmarked) cells.

However, this approach was lacking since the "AI" didn't take into consideration whether or not the enemy or the AI was winning. To remedy this, I studied about theMinimax algorithm.

From there I came upon this FreeCodeCamp Video on Tic Tac Toe using minimax.

Built With

What I Learned

• I learned how to use embedded SVGs and use them as an href link.
• I learned how minimax works.
• I learned about the SVG viewbox and how to manipulate it.
• I learned about modular javascript.
• I implemented my first OOP approach to a project.
• I learned about sessionStorage, localStorage and cookies.

Continued Development

At the moment my program works using minimax, however, it doesn't use alpha-beta pruning. This means it keeps runnning through scenarios which would and should never occur.

In the future, I plan to study alpha-beta pruning and apply it on this project.

Useful resources

• FreeCodeCamp (FCC) - This article helped me wrap my head around minimax.
• FCC Tic Tac Toe - This video showed me how minimax works with tic tac toe.
• Frontend Mentor - Contains challenges for getting better at development.

Author

• LinkedIn - Josuer Bague
• Frontend Mentor - Josuer Bague
• Github - JoshDagat
• CodeWars - JosuerB

Acknowledgments

Much thanks to FreeCodeCamp for their never-ending mission to teach coding.

Thanks to MixKit for their free audio snippets.

A big thanks to Kevin Powell and his Discord group. His community has been a great help.