{# index.twig #}
{% extends "src/layouts/main.twig" %}
{% set headTitle = "Tool Master Template - Home" %}
{% block page %}
{% include "src/components/header-block/index.twig" with {title: "Παιχνίδι μνήμης", subtitle: "Βρες τα όμοια αντικείμενα", centered: true} %}
<section>
<div class="memory-game-container">
  <article class="memory-game">
        <ul id="steps">
            <li class="step-1 active-step">
              <div class="step-1-content">
                <div class="message-container"> <p class="start-title" data-lang-el="Πόσο καλή μνήμη έχεις;" data-lang-en="How strong is your memory?"></p> <p class="start-subtitle" data-lang-el="Βρες τα ζευγάρια όμοιων αντικειμένων" data-lang-en="Find the matching pair of objects"></p> </div>
                <img class="start-image" src="/images/start-image.png" alt="Πλακίδια παιχνιδιού μνήμης">
                <div class="message-container"> <p class="message message-difficulty" data-lang-el="Διάλεξε βαθμό δυσκολίας" data-lang-en="Select a difficulty level"></p> </div>
                <div class="buttons-container">
                    <a class="memory-button button-easy" data-step=".step-2" data-difficulty="easy" data-size="4" data-lang-el="Εύκολο" data-lang-en="Easy"></a>
                    <a class="memory-button button-hard" data-step=".step-2" data-difficulty="hard" data-size="9" data-lang-el="Δύσκολο" data-lang-en="Difficult"></a>
                </div>
              </div>
            </li>
            <li class="step-2" data-body-class="small" data-action="play-game">
                <ul id="memory-grid">
                </ul>
            </li>
            <li class="end-screen show-on-win">
                <div class="end-screen-container">
                    <div class="smiley-face"></div>
                    <div class="congrats-container message-container">
                        <p class="message congrats-title" data-lang-el="Συγχαρητήρια!" data-lang-en="Congratulations!"></p>
                    </div>
                    <div class="buttons-container">
                        <a class="memory-button white-button" data-step=".step-1" data-lang-el="Παίξε ξανά" data-lang-en="Play again"></a>
                        <a class="memory-button-play-another white-button" href="https://www.efamess.gr/paichnidia/" data-lang-el="Παίξε ένα άλλο παιχνίδι" data-lang-en="Play another game"></a>
                    </div>
                </div>
            </li>
        </ul>
  </article>
</div>
</section>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function shuffle(array) {
    var counter = array.length, temp, index;

    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * counter);

        // Decrease counter by 1
        counter--;

        // And swap the last element with it
        temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
    }

    return array;
}

$(function(){
    // set up step handling
    var steps = $('#steps'),
        difficultyLevel;
    steps.on('click', 'a.memory-button', function(e){
        e.preventDefault();

        var self = $(this),
            target = steps.find( $(this).attr('data-step') ),
            body = $('body').removeClass();

        //steps.find( target ).show().siblings().hide();
        target.addClass('active-step').siblings().removeClass('active-step');

        var bodyClass = target.data('body-class'),
            difficulty = self.data('difficulty'),
            action = target.data('action'),
            gridSize = +self.data('size') / 2;


        if (bodyClass){body.addClass( bodyClass );}
        else {body.removeClass(bodyClass);}

        if (difficulty) {difficultyLevel = difficulty;}
        else {difficultyLevel = undefined;}

        if (action == 'play-game'){
            body.addClass(difficultyLevel);
            startNewGame(4, gridSize);
        }

    });

// Game mechanics
    var grid = $('#memory-grid'),
        validCards = 0,
        activeCards = [],
        checkTimeout,
        cardImages = ['/images/memory-game/eidolio.jpg','/images/memory-game/gold.jpg','/images/memory-game/helmet.jpg','/images/memory-game/icon.jpg','/images/memory-game/ippos.jpg','/images/memory-game/ostrako.jpg','/images/memory-game/pottery.jpg','/images/memory-game/sculpture.jpg','/images/memory-game/sfragida.jpg', '/images/memory-game/20_2.jpg', '/images/memory-game/46_2.jpg', '/images/memory-game/307_3.jpg', '/images/memory-game/571_1.jpg', '/images/memory-game/680_1.jpg', '/images/memory-game/681_1.jpg', '/images/memory-game/2480_2.jpg', '/images/memory-game/2495_1.jpg', '/images/memory-game/2510_1.jpg', '/images/memory-game/2634_1.jpg', '/images/memory-game/2636_A-D_1.jpg', '/images/memory-game/2638_B_1.jpg', '/images/memory-game/2639_1.jpg', '/images/memory-game/4062_1.jpg', '/images/memory-game/6657_2.jpg', '/images/memory-game/7221_1.jpg', '/images/memory-game/8664_1.jpg', '/images/memory-game/12000_1.jpg', '/images/memory-game/13545_3.jpg', '/images/memory-game/AVIA_1_1.jpg', '/images/memory-game/BLA_1482_1483_1.jpg', '/images/memory-game/GIA_831_1.jpg', '/images/memory-game/GIA_944_1.jpg', '/images/memory-game/GIA_1121_1.jpg', '/images/memory-game/GIA_1292_1.jpg', '/images/memory-game/GIA_1492_3.jpg', '/images/memory-game/IKL_003_1.jpg', '/images/memory-game/IKL_005_1.jpg', '/images/memory-game/KOKLA_1_1.jpg', '/images/memory-game/KOU_001_1.jpg', '/images/memory-game/KOU_003_1.jpg', '/images/memory-game/KOU_004_1.jpg', '/images/memory-game/KOU_006_1.jpg', '/images/memory-game/M_3475_1.jpg', '/images/memory-game/MX_797_1.jpg', '/images/memory-game/MX_2906_1.jpg', '/images/memory-game/ROM_2312_1.jpg', '/images/memory-game/TSOP_004_1.jpg', '/images/memory-game/TSOP_282_1.jpg', '/images/memory-game/TSOP_460_3.jpg', '/images/memory-game/VOI_1492_1.jpg', '/images/memory-game/ΜΧ_235_5.jpg', '/images/memory-game/ΜΧ_1217_1.jpg', '/images/memory-game/ΜΧ_1219_4.jpg', '/images/memory-game/ΜΧ_2890_1.jpg'];

    function checkActiveCards(instantCheck){
        var valid = (activeCards[0].data('cardId') == activeCards[1].data('cardId'))

        if (instantCheck){
            clearTimeout( checkTimeout );
            cleanActiveCards(valid);
        } else if (valid){
            checkTimeout = setTimeout(function(){cleanActiveCards(true)}, 500);
        } else {
            checkTimeout = setTimeout(cleanActiveCards, 2000);
        }
    }

    function cleanActiveCards(toggleCorrect){
        var classes = 'check' + (toggleCorrect?' correct': '');

        activeCards[0].toggleClass(classes);
        activeCards[1].toggleClass(classes);

        activeCards.length = 0;

        if (toggleCorrect){
            if (--validCards == 0) {
                $('body').addClass('win');
            }
        }
    }

    function startNewGame(x,y){
        var card = $('<li>',{
            'class':'card',
            html: '<span class="image"></span>'
            }),
            selectedImages = shuffle(cardImages.slice(0)).slice(0,(x*y)/2),
            allCards = shuffle(selectedImages.concat(selectedImages));

        validCards = x*y/2;

        grid.empty();
        for (var cardCount = x*y, i=0; i<cardCount; i++){
            var clone = card.clone().appendTo(grid);
            clone.find('.image').css('background-image', 'url('+allCards[i]+')');
            clone.data('card-id',allCards[i]);
        }
    }

    grid.on('click', 'li.card', function(e){
        var self = $(this);

        if (self.is('.check') || self.is('.correct')) return;

        if(activeCards.length == 2){
            checkActiveCards(true);
        }

        activeCards.push(self.addClass('check'));
        if (activeCards.length === 2) checkActiveCards();
    });

    // Language detection and text setting
    var lang = document.documentElement.lang;
    $('[data-lang-el]').each(function() {
        var el = $(this);
        if (lang === 'el') {
            el.text(el.data('lang-el'));
        } else {
            el.text(el.data('lang-en'));
        }
    });
});
</script>
{% endblock %}
