mirror of
https://github.com/slint-ui/slint.git
synced 2025-09-29 05:14:48 +00:00
120 lines
3.3 KiB
Text
120 lines
3.3 KiB
Text
// 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();
|
|
}
|
|
}
|
|
}
|
|
}
|