mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-01 14:21:16 +00:00
127 lines
3.6 KiB
Text
127 lines
3.6 KiB
Text
/* 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: 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 ? #34CE57 : #3960D5;
|
|
animate background { duration: 800ms; }
|
|
|
|
Image {
|
|
source: icon;
|
|
width: parent.width - 16px;
|
|
height: parent.height - 16px;
|
|
x: 8px;
|
|
y: 8px;
|
|
}
|
|
|
|
// Left curtain
|
|
Rectangle {
|
|
background: #193076;
|
|
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: #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: 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 - SixtyFPS 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();
|
|
}
|
|
}
|
|
}
|
|
}
|