JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://canjs.us/release/latest/can.object.js"></script>
<script src="http://canjs.us/release/latest/can.map.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.map.backup.js"></script>
<script src="http://canjs.us/release/latest/can.map.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.map.setter.js"></script>
<script src="http://canjs.us/release/latest/can.map.validations.js"></script>
<script src="http://canjs.com/release/latest/can.fixture.js"></script>
<script src="http://canjs.com/release/latest/can.stache.js"></script>
<!-- http://jsfiddle.net/storyous/q9affecv/ -->
<div id="content"></div>

<!-- PUT ANY TEMPLATES YOU NEED HERE -->
<script id="main-template" type="text/stache">
    <h1>Storyous tic-tac-toe test</h1>
    <p>Complete the game and send us your attempt: <a href="mailto:[email protected]">[email protected]</a></p>
    <game></game>
</script>

<script id="game-template" type="text/stache">
    <p class="tah">Na tahu je hráč <span>X</span></p>
    <p class="info">Bohužel, toto pole je již obsazeno!</p>
    <table>
        {{#each board}}
            <tr>
                {{#each .}}
                    <td can-click="ovladani" class="field-{{.}}">{{field .}}</td>
                {{/each}}
            </tr>
        {{/each}}
    </table>
    <div class="btn" can-click="newGame">New game</div>
    
</script>

CSS

body {
    text-align: center;
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: subpixel-antialiased;
    color: #4d4d4d;
}

a {
    color: #e16b67;
}

h1 {
    font-size: 2em;
    margin: 20px;
}

p {
    margin: 10px;
}

table {
    margin: 20px auto;
    cursor: pointer;
}

td {
  width: 40px;
  height: 40px;
  border: 1px solid #cccccc;  
  color: #4a538e !important;
}

td.field-1 {
    color: #e16b67;
}

.btn {
    display: inline-block;
    padding: 10px 25px;
    background: #e16b67;
    color: #fff;
    cursor: pointer;
}

.info{
    display:none;
}

JavaScript

var tableGame = new can.List();
var gameOption = 5;
tah = 0;
        for ( var i = 0; i < gameOption; i++ ) {
        		var row = [];
        			for (var k = 0; k < gameOption; k++){
                        var r = 0;
                        row.push(r);
    			}
            tableGame.push(row);
   		}



var Component = can.Component.extend({
    tag: 'game',
    
    template: can.view('#game-template'),
    
    viewModel: {
        board: tableGame,
        newGame: function () {
            alert("Vaše hra měla XY tahů");
            setTimeout(novaHra, 2000);
            function novaHra () {
                
                location.reload();
            }
            
        },
        ovladani:function () {
            var target = $( event.target );
              if ( target.is( "td" ) && target.text() == "" ) {
                  tableGame.attr([1][2], 'Adam');
                  console.log(tableGame.attr());
                  
                  switch (tah){
                      case 0: 
                          tah = 1;
                          $( target ).removeClass().addClass("field-1").text("X");
                          $("span").replaceWith("<span>O</span>");
                          break;
                      case 1: 
                          tah = 0;
                          $( target ).removeClass().addClass("field-2").text("O");
                          $("span").replaceWith("<span>X</span>");
                          break;
                  }
              }	else if (target.is( "td" ) && target.text() !== ""){
              	$(".info").slideDown( 1000 );
                $( target ).css({background: "red", opacity: 0.3 });
                setTimeout(zpet, 2000);
                function zpet (){$(".info").slideUp( 300 );$(target).css({background: "white" , opacity: 1 });}
              }  
        },
              
    },
    helpers: {
        field: function (value) {
            switch(value) {
                case 1:
       ...