match3.qml

import QtQuick 2.0


Rectangle {
    id: board
    width: 480
    height: 480
    color: "black"
    Grid {
        id: grid
        anchors { fill: parent }
        rows: 8
        Repeater {
            model: 8*8
            Item {
                width: parent.width / 8
                height: parent.height / 8
                property Item gem
            }
        }
    }

    property Item selected

    Component {
        id: gem_component
        Rectangle {
            id: gem
            property int type
            property Item square
            onSquareChanged: {
                square.gem = gem
            }
            x: square.x; y: square.y; width: square.width; height: square.height
            radius: (width + height) / 6
            opacity: selected === gem ? 0.5 : 1
            MouseArea {
                anchors { fill: parent }
                onClicked: {
                    if (selected) {
                        var tmp = gem.square
                        gem.square = selected.square
                        selected.square = tmp
                        selected = null
                    } else {
                        selected = gem
                    }
                }
            }
            Behavior on x { NumberAnimation {} }
            Behavior on y { NumberAnimation {} }
        }
    }

    function reset() {
        var colors = ["red", "green", "cyan", "yellow", "magenta", "blue", "gray"]
        for (var i = 0; i < 64; ++i) {
            var o = gem_component.createObject(board, {square: grid.children[i], type: Math.random() * 7 << 0 })
            o.color = colors[o.type]
        }
    }

    Component.onCompleted: reset()
}