slint/examples/memory/memory.slint at master · cppdev123/slint · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

struct TileData := {
    image: image,
    image-visible: bool,
    solved: bool,
}

MemoryTile := Rectangle {
    border-radius: 8px;
    callback clicked;
    property <bool> open-curtain;
    property <bool> solved;
    property <image> icon;

    background: solved ? #70ff00 : #858585;
    animate background { duration: 800ms; }

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

    // Left curtain
    Rectangle {
        background: #0025ff;
        border-radius: 4px;
        width: open-curtain ? 0px : parent.width / 2 + 4px;
        height: parent.height;
        animate width { duration: 250ms; easing: ease-in; }
        clip: true;

        Image {
            width: root.width - 32px;
            height: root.height - 32px;
            x: 16px;
            y: 16px;
            source: @image-url("icons/tile_logo.png");
        }
    }

    // Right curtain
    right-curtain := Rectangle {
        background: #0025ff;
        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: true;

        Image {
            width: root.width - 32px;
            height: root.height - 32px;
            x: right-curtain.width - width - 16px;
            y: 16px;
            source: @image-url("icons/tile_logo.png");
        }
    }

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

export MainWindow := Window {
    title: "Memory Game - Slint Demo";

    callback check-if-pair-solved();
    property <bool> disable-tiles;

    property<length> tile-size: 80px;
    property<length> tile-spacing: 10px;

    property <int> row-count: 4;
    property <int> column-count: 4;

    // "column_count + 1" and "row_count + 1" are the number of gaps between the tiles.
    width: (column-count * tile-size) + ((column-count + 1) * tile-spacing);
    height: (row-count * tile-size) + ((row-count + 1) * tile-spacing);

    property<[TileData]> memory-tiles : [
        { image: @image-url("icons/at.png") },
        { image: @image-url("icons/balance-scale.png") },
        { image: @image-url("icons/bicycle.png") },
        { image: @image-url("icons/bus.png") },
        { image: @image-url("icons/cloud.png") },
        { image: @image-url("icons/cogs.png") },
        { image: @image-url("icons/motorcycle.png") },
        { image: @image-url("icons/video.png") },
    ];

    for tile[i] in memory-tiles: MemoryTile {
        x: tile-spacing + mod(i, column-count) * (tile-size + tile-spacing);
        y: tile-spacing + floor(i / row-count) * (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();
            }
        }
    }
}