HTML5, CSS3 & JS Experiments

By Martin Ivanov

Tic-Tac-Toe Game

X-TicTacToe is a recreation of the classic game in HTML5, CSS3 and JavaScript, wrapped as a custom HTML5 Web Component.

<acidjs-xticatactoe x="Martin" o="James"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true" size="large"></acidjs-xticatactoe>
<acidjs-xticatactoe size="small"></acidjs-xticatactoe>
<acidjs-xticatactoe debug="true">
    <code hidden>
    {
        "yourTurn": "du bist dran!",
        "startNewGame": "Neues Spiel starten",
        "start": "Start!",
        "playerXName": "Spieler X Name",
        "playerOName": "Spieler O Name",
        "choosePlayerXName": "Wählen Sie Name für Spieler X",
        "choosePlayerOName": "Wählen Sie Name für Spieler O",
        "youWin": "Sie gewinnen!",
        "draw": "Unentschieden :("
    }
    </code>
</acidjs-xticatactoe>

Demo

Size: Medium (default)

With custom x and o names set as component attributes.

Size: Large

In debug mode (debug attribute set to true). If debug="true" the component outputs debug messages in browser's console.

Size: Small

With default values for x and o names.

Localized

This one overrides the default lang keys with custom keys in German, set in the tag.

Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XReader/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XTicTacToe/classes/XTicTacToe.html" />

Usage and Code Insight

        
            <h4>Size: Medium (default)</h4>
            <p>With custom <code>x</code> and <code>o</code> names set as component attributes.</p>
            <acidjs-xticatactoe x="Martin" o="James"></acidjs-xticatactoe>
            <br /><br />
            
            <h4>Size: Large</h4>
            <p>In debug mode (<code>debug</code> attribute set to <code>true</code>). 
                If <code>debug="true"</code> the component outputs debug 
                messages in browser's console.</p>
            <acidjs-xticatactoe debug="true" size="large"></acidjs-xticatactoe>
            <br /><br />
            
            <h4>Size: Small</h4>
            <p>With default values for <code>x</code> and <code>o</code> names.</p>
            <acidjs-xticatactoe size="small"></acidjs-xticatactoe>
            <br /><br />
            
            <h4>Localized</h4>
            <p>This one overrides the default <code>lang</code> keys with custom keys in German, set in the tag.</p>
            <acidjs-xticatactoe debug="true">
                <code hidden>
                {
                    "yourTurn": "du bist dran!",
                    "startNewGame": "Neues Spiel starten",
                    "start": "Start!",
                    "playerXName": "Spieler X Name",
                    "playerOName": "Spieler O Name",
                    "choosePlayerXName": "Wählen Sie Name für Spieler X",
                    "choosePlayerOName": "Wählen Sie Name für Spieler O",
                    "youWin": "Sie gewinnen!",
                    "draw": "Unentschieden :("
                }
                </code>
            </acidjs-xticatactoe>
            <br /><br />

/*
 * X-TicTacToe HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/wemakesitesnet
 * @url developer blog http://martinivanov.net
 **/

/*
 * USAGE:
 * 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
 * 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required. 
 **/

acidjs-xticatactoe *
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    list-style: none;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Firefox button reset styles cannot be combinet in a single rule */
acidjs-xticatactoe button:-moz-focus-inner
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

acidjs-xticatactoe button::-moz-focus-inner
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

/* placeholder cannot be combinet in a single rule */
acidjs-xticatactoe ::-webkit-input-placeholder 
{
    color: rgba(255, 255, 255, .85);
}

acidjs-xticatactoe :-moz-placeholder 
{
    color: rgba(255, 255, 255, .85);
}

acidjs-xticatactoe ::-moz-placeholder
{
    color: rgba(255, 255, 255, .85);
}

acidjs-xticatactoe :-ms-input-placeholder 
{  
    color: rgba(255, 255, 255, .85);
}

acidjs-xticatactoe button,
acidjs-xticatactoe input[type="text"],
acidjs-xticatactoe .acidjs-xticatactoe-board span::before
{
    display: block;
}

acidjs-xticatactoe,
acidjs-xticatactoe .acidjs-xticatactoe-board span,
acidjs-xticatactoe .acidjs-xticatactoe-lobby ul
{
    display: inline-block;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby,
acidjs-xticatactoe .acidjs-xticatactoe-board span,
acidjs-xticatactoe .acidjs-xticatactoe-game-controls
{
    text-align: center;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(1) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(2) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(3) span
{
    border-top: 0;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(7) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(8) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(9) span
{
    border-bottom: 0;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(1) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(4) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(7) span
{
    border-left: 0;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(3) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(6) span,
acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(9) span
{
    border-right: 0;
}

acidjs-xticatactoe[stage="game-over"] .acidjs-xticatactoe-board,
acidjs-xticatactoe .acidjs-xticatactoe-board input:disabled + span
{
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby,
acidjs-xticatactoe .acidjs-xticatactoe-board input
{
    position: absolute;
}

acidjs-xticatactoe,
acidjs-xticatactoe row > *
{
    vertical-align: middle;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby + grid,
acidjs-xticatactoe .acidjs-xticatactoe-board span::before
{
    opacity: 0;
}

acidjs-xticatactoe button,
acidjs-xticatactoe .acidjs-xticatactoe-board span
{
    cursor: pointer;
}

acidjs-xticatactoe form[data-player="x"] h4 span:first-child,
acidjs-xticatactoe .acidjs-xticatactoe-board input:checked + span::before
{
    color: #ff1d77;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby[hidden] + grid,
acidjs-xticatactoe .acidjs-xticatactoe-board input:checked + span::before
{
    opacity: 1; 
}

acidjs-xticatactoe form[data-player="o"] h4 span:first-child,
acidjs-xticatactoe .acidjs-xticatactoe-board input[data-player="o"]:checked + span::before
{
    color: #77b900;
}

acidjs-xticatactoe button,
acidjs-xticatactoe input[type="text"]
{
    color: #fff;
}

acidjs-xticatactoe button,
acidjs-xticatactoe input[type="text"]
{
    font-family: inherit;
    font-size: 1em;
}

acidjs-xticatactoe button,
acidjs-xticatactoe row > *
{
    padding: .5em;
}

acidjs-xticatactoe button,
acidjs-xticatactoe .acidjs-xticatactoe-lobby
{
    width: 100%;
}

acidjs-xticatactoe h4,
acidjs-xticatactoe .acidjs-xticatactoe-lobby li
{
    margin: .5em 0;
}

acidjs-xticatactoe
{
    font-family: "Comic Sans MS", cursive;
    font-size: 16px;
    background: #fafafa;
    cursor: default;
}

acidjs-xticatactoe[size="small"]
{
    font-size: 12px;
}

acidjs-xticatactoe[size="large"]
{
    font-size: 32px;
}

acidjs-xticatactoe [hidden]
{
    display: none;
}

acidjs-xticatactoe .acidjs-xticatactoe-board
{
    margin: auto;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li
{
    float: left;
}

acidjs-xticatactoe .acidjs-xticatactoe-board li:nth-child(3n + 1)
{
    clear: both;
}

acidjs-xticatactoe .acidjs-xticatactoe-board input
{
    clip: rect(0, 0, 0, 0);
}

acidjs-xticatactoe .acidjs-xticatactoe-board span
{
    border: solid 2px #666;
    width: 3em;
    height: 3em;
    line-height: 3em;
}

acidjs-xticatactoe .acidjs-xticatactoe-board span::before
{
    content: "X";
    color: transparent;
    transform: scale(0);
    transition: all .25s ease-in-out;
}

acidjs-xticatactoe .acidjs-xticatactoe-board input[data-player="o"] + span::before
{
    content: "O";
}

acidjs-xticatactoe .acidjs-xticatactoe-board input:checked + span::before
{
    font-size: 1.5em;
    transform: scale(2.25);
}

acidjs-xticatactoe .acidjs-xticatactoe-board-win
{
    color: #fe7c22;
}

acidjs-xticatactoe form
{
    position: relative;
    border: solid 1px #666;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby
{
    z-index: 5;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, .75);
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby + grid
{
    transition: opacity .5s ease-in-out;
}

acidjs-xticatactoe input[type="text"]
{
    width: 20em;
    padding: 0 .25em;
    background: #ff1d77;
    line-height: 2em;
}

acidjs-xticatactoe .acidjs-xticatactoe-lobby ul
{
    margin: 1em 0 0;
}

acidjs-xticatactoe button
{
    background: #77b900;
}

acidjs-xticatactoe grid
{
    display: table;
    border-collapse: collapse;
}

acidjs-xticatactoe row
{
    display: table-row;
}

acidjs-xticatactoe row > *
{
    display: table-cell;
    max-width: 11em;
    min-width: 11em;
}

acidjs-xticatactoe h4
{
    color: #666;
    font-weight: bold;
    font-size: 1.25em;
}

Please, disable your ad blocker

This website is made possible by displaying online advertisements to the visitors. To view the content, please, disable your ad blocker, then refresh the page.