Tic Tac Toe web app

This project is an implementation of the Tic-tac-toe game with three different levels of difficult. The level “expert” has a simple AI, based on Minimax Algorithm. The main technologies used are React, TypeScript and Scss.

The full code is reachable on my GitHub account and you can try the app here.

React has been used for the responsive user interface. All the React components has been written with Typescript. The following is the Title component, the simplest React component of the project.

import React from 'react';
import './Title.scss';

export default function Title(props: any) {
    return (
        <div className="title__container">
            {props.text}
        </div>
    );
}

Style sheets has been wrote with Scss syntax. Each React component has its file Scss. The following is the Scss code for the Title component.

 
@import './../../main.scss';

.title__container {
    font-size: 2em;
    padding: 5px 0px;
    margin-bottom: 15px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
}

@media only screen and (max-width: $main__viewport-limit) {
    
    .title__container {
        text-align: center;
        font-size: 2.2em;
        background-color: darken($main__background-color, 10%);
        border-bottom-width: 0px;
        margin-bottom: 0px;
        padding: 2px 0px;
    }
}

TypeScript has been used also to write the implementation of Minimax Algorithm and some useful code that support React component.

Mobile version of my Tic Tac Toe
Mobile version of my Tic Tac Toe

When the user launch the app from a mobile device, the layout change (css rules made it possible) to be easy to use.

The project is released under GNU General Public License v3.0. It include scripts for development and to build a production version.

For questions, comments or suggestions, use my contact page.

Enjoy!

  Riccardo Giovarelli    All rights reserved 

  •  
  • 2
  •  
  •