From cc5d262f9a4323f861f4e2128bd20dceccfd4eea Mon Sep 17 00:00:00 2001
From: Timothy Warren <twarren@nabancard.com>
Date: Wed, 3 May 2023 14:02:17 -0400
Subject: [PATCH] Multiple tiles with images

---
 src/components/main_window.slint | 36 ++++++++++++++++++++++++++++----
 src/components/memory_tile.slint |  6 ++++++
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/main_window.slint b/src/components/main_window.slint
index 4a4f764..5978af0 100644
--- a/src/components/main_window.slint
+++ b/src/components/main_window.slint
@@ -1,10 +1,38 @@
-import { MemoryTile } from "./memory_tile.slint";
+import { TileData, MemoryTile } from "./memory_tile.slint";
 
 export component MainWindow inherits Window {
-    MemoryTile {
-        icon: @image-url("../../icons/bus.png");
+    width: 326px;
+    height: 326px;
+
+    in 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: mod(i, 4) * 74px;
+        y: floor(i / 4) * 74px;
+        width: 64px;
+        height: 64px;
+        icon: tile.image;
+        open_curtain: tile.image_visible || tile.solved;
+        // propagate the solved status from the model to the tile
+        solved: tile.solved;
         clicked => {
-            self.open_curtain = !self.open_curtain;
+            tile.image_visible = !tile.image_visible;
         }
     }
 }
diff --git a/src/components/memory_tile.slint b/src/components/memory_tile.slint
index b165063..3e6f0b4 100644
--- a/src/components/memory_tile.slint
+++ b/src/components/memory_tile.slint
@@ -1,3 +1,9 @@
+export struct TileData {
+    image: image,
+    image_visible: bool,
+    solved: bool,
+}
+
 export component MemoryTile inherits Rectangle {
     callback clicked;
     in property <bool> open_curtain;