1. TicTacToe.qml

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0

// Alkalmazás ablaka
Rectangle {
    id: mainWindow
    //title: "Tic-Tac-Toe"
    width: 800
    height: 480

    //STODO
    property bool xCames: true;

    Component.onCompleted: {
        gridModel.clear()
        for(var i = 0; i < 9; i++){
            gridModel.append({
                                 type: true,
                                 clickable: true
                             })
        }
        xCames = true
        boardBg.color = "black"
        nextPlayer.text = "X kezd"
        gridView.enabled = true
    }

    //Pályaháttér, ebből lesznek a rácsok
    Rectangle{
        id: boardBg
        x: 1
        y: 1
        width: 478
        height: 478
        color: "transparent"
        GridView {
            id: gridView
            x: 0
            y: 0
            width: 480
            height: 480
            //Hogy ne lehessen görgetni
            boundsBehavior: Flickable.StopAtBounds
            keyNavigationWraps: false


            //A modell alapból üres
            model: ListModel {
                //id-ja van neki, hogy hivatkozhassunk rá
                id: gridModel
            }

            cellHeight: 160
            cellWidth: 160
            //Delegált elem, külön QML fájlban, ez reprezentál egy cellát
            delegate: Mark {
                markType: model.type
            }
        }
    }

    //Szövegmező kiírni, hogy ki jön
    Text {
        id: nextPlayer
        x: 10
        y: 500
        width: 308
        height: 52
        font.pixelSize: 50;
    }

    function refreshModel(){

        mainWindow.xCames = ! mainWindow.xCames
        nextPlayer.text = xCames ? "X jön" : "O jön"

        // Sorok
        for(var i = 0; i <7; i+=3){
            if(!gridModel.get(0+i).clickable && !gridModel.get(1+i).clickable && !gridModel.get(2+i).clickable
                    && gridModel.get(0+i).type === gridModel.get(1+i).type
                    && gridModel.get(1+i).type === gridModel.get(2+i).type){
                nextPlayer.text = gridModel.get(0+i).type ? "X nyert" : "O nyert"
                gridView.enabled = false
                break
            }
        }

        // Oszlopok
        for(i = 0; i <3; i++){
            if(!gridModel.get(0+i).clickable && !gridModel.get(3+i).clickable && !gridModel.get(6+i).clickable
                    && gridModel.get(0+i).type === gridModel.get(3+i).type
                    && gridModel.get(3+i).type === gridModel.get(6+i).type){
                nextPlayer.text = gridModel.get(0+i).type ? "X nyert" : "O nyert"
                gridView.enabled = false
                break
            }
        }

        // Átló 1
        if(!gridModel.get(0).clickable && !gridModel.get(4).clickable && !gridModel.get(8).clickable
                && gridModel.get(0).type === gridModel.get(4).type
                && gridModel.get(4).type === gridModel.get(8).type){
            nextPlayer.text = gridModel.get(0).type ? "X nyert" : "O nyert"
            gridView.enabled = false
        }
        // Átló 2
        if(!gridModel.get(2).clickable && !gridModel.get(4).clickable && !gridModel.get(6).clickable
                && gridModel.get(2).type === gridModel.get(4).type
                && gridModel.get(4).type === gridModel.get(6).type){
            nextPlayer.text = gridModel.get(2).type ? "X nyert" : "O nyert"
            gridView.enabled = false
        }

        /*
        //Döntetlen detektálása
        var possibleSteps = new Array();
        var pStepsCount = 0;

        for(i = 0; i< gridModel.count; i++){
            if(gridModel.get(i).clickable){
                console.log("valami")
                possibleSteps[pStepsCount] = i
                possibleSteps++
            }
        }

        //Ha psStepsCount = 0, akkor döntetlen
        if(pStepsCount == 0){
            gridView.enabled = false
            nextPlayer.text = "Döntetlen"
        }

        //Ha a gép jön, és van még hova lépni
        if(!multiplayer && pStepsCount !=0 ){
            //Akkor most a gép jön, pálya letilt, gép lép
            gridView.enabled = false

            //Logika
            var stepIndex = possibleSteps[Math.random(possibleSteps.length-1)]
            console.log(stepIndex)
            //Pálya újra enged
            gridView.enabled = true
*/
    }

}

2. Mark.qml

import QtQuick 2.0

Rectangle {
    //ARGB Szín
    color: "#BBFFFF00"
    width: 158
    height: 158
    //Mező típusának jelöléséhez. True = X, False = O
    property bool markType;

    Rectangle {
        color: "transparent"
        anchors.fill: parent
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            anchors.margins: -10
            hoverEnabled: true         //ettől lehet olyanunk, hogy:  mouseArea.containsMouse
            onClicked: {
                if(gridModel.get(index).clickable){
                    gridModel.get(index).clickable = false;
                    parent.state = "mouse-click"
                    gridModel.get(index).type = mainWindow.xCames
                    refreshModel()
                }
            }
        }

        //Állapot arra az esetre, amikor megjelenik a kép
        states: State {
            //Állapot neve
            name: "mouse-click";

            //Mi változik? A "rect"
            //Mije változik? A nagyítása 9-szeresre és  láthatósága 100%-ra
            PropertyChanges { target: rect; scale: 9; opacity: 1}
        }

        //Hogyan megyünk át abba bizonyos állapotba?
        //Animációval!
        transitions: Transition {
            //Miket érintünk    Milyen animációval      Mennyi idő alatt
            NumberAnimation { properties: "scale, opacity"; easing.type: Easing.InOutQuad; duration: 200  }
        }

        //Kép. Vagy X vagy O
        Image {
            anchors.centerIn: parent
            //id alapján érjük el az állapotváltásnál
            id: rect

            //Ha ez egy X mező, akkor az X-es kép, és O-s kép ha nem.
            //Üres állapot nincs, nem is kell, hiszen alapból nem látszik
            source: markType ? "MarkX.png" : "MarkO.png"

            //Alapból nagyon pici és láthatatlan (láthatóság 0%)
            height: 10
            width: 10
            smooth: true
            opacity: 0
        }
    }
}