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) 2021 Olivier Goffart <olivier.goffart@sixtyfps.io>
|
|
Copyright (c) 2021 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();
|
|
}
|
|
}
|
|
}
|
|
}
|