slint/examples/memory/memory.60

/* LICENSE BEGIN
    This file is part of the SixtyFPS Project -- https://sixtyfps.io
    Copyright (c) 2020 Olivier Goffart <olivier.goffart@sixtyfps.io>
    Copyright (c) 2020 Simon Hausmann <simon.hausmann@sixtyfps.io>

    SPDX-License-Identifier: GPL-3.0-only
    This file is also available under commercial licensing terms.
    Please contact info@sixtyfps.io for more information.
LICENSE END */

struct TileData := {
    image: resource,
    image_visible: bool,
    solved: bool,
}

MemoryTile := Rectangle {
    border-radius: 8px;
    signal clicked;
    property <bool> open_curtain;
    property <bool> solved;
    property <resource> icon;

    color: solved ? #34CE57 : #3960D5;
    animate color { duration: 800ms; }

    Image {
        source: icon;
        width: parent.width - 16px;
        height: parent.height - 16px;
        x: 8px;
        y: 8px;
    }

    // Left curtain
    Rectangle {
        color: #193076;
        border-radius: 4px;
        width: open_curtain ? 0px : parent.width / 2 + 4px;
        height: parent.height;
        animate width { duration: 250ms; easing: ease-in; }

        Clip {
            Image {
                width: root.width - 32px;
                height: root.height - 32px;
                x: 16px;
                y: 16px;
                source: img!"icons/tile_logo.png";
            }
        }
    }

    // Right curtain
    right_curtain := Rectangle {
        color: #193076;
        border-radius: 4px;
        x: open_curtain ? parent.width : parent.width / 2 - 4px;
        width: open_curtain ? 0px : parent.width / 2 + 4px;
        height: parent.height;
        animate width { duration: 250ms; easing: ease-in; }
        animate x { duration: 250ms; easing: ease-in; }
        Clip {
            Image {
                width: root.width - 32px;
                height: root.height - 32px;
                x: right_curtain.width - width - 16px;
                y: 16px;
                source: img!"icons/tile_logo.png";
            }
        }

    }

    TouchArea {
        width: 100%;
        height: 100%;
        clicked => {
            root.clicked();
        }
    }
}

export MainWindow := Window {
    signal check_if_pair_solved();
    property <bool> disable_tiles;

    property<length> tile_size: 80px;
    property<length> tile_spacing: 10px;

    width: 4 * tile_size + 5 * tile_spacing;
    height: 4 * tile_size + 5 * tile_spacing;

    property<[TileData]> memory_tiles : [
        { image: img!"icons/at.png" },
        { image: img!"icons/balance-scale.png" },
        { image: img!"icons/bicycle.png" },
        { image: img!"icons/bus.png" },
        { image: img!"icons/cloud.png" },
        { image: img!"icons/cogs.png" },
        { image: img!"icons/motorcycle.png" },
        { image: img!"icons/video.png" },
    ];

    for tile[i] in memory_tiles: MemoryTile {
        x: tile_spacing + mod(i, 4) * (tile_size + tile_spacing);
        y: tile_spacing + floor(i / 4) * (tile_size + tile_spacing);
        width: tile_size;
        height: tile_size;

        icon: tile.image;

        open_curtain: tile.image_visible || tile.solved;
        solved: tile.solved;

        clicked => {
            if (!root.disable_tiles) {
                tile.image_visible = !tile.image_visible;
                root.check_if_pair_solved();
            }
        }
    }
}