C++ tutorial: Remove inline sources from the creating tiles from C++ chapter

docs/tutorial/cpp/src/CMakeLists.txt

@@ -16,3 +16,7 @@ endif()
 add_executable(memory_tutorial_inital main_initial.cpp)
 target_link_libraries(memory_tutorial_inital PRIVATE SixtyFPS::SixtyFPS)
 sixtyfps_target_60_sources(memory_tutorial_inital memory.60)
+
+add_executable(memory_tutorial_tiles_from_cpp main_tiles_from_cpp.cpp)
+target_link_libraries(memory_tutorial_tiles_from_cpp PRIVATE SixtyFPS::SixtyFPS)
+sixtyfps_target_60_sources(memory_tutorial_tiles_from_cpp memory_tiles_from_cpp.60)

docs/tutorial/cpp/src/creating_the_tiles_from_cpp.md

@@ -11,28 +11,7 @@ in a [`sixtyfps::VectorModel`](https://sixtyfps.io/docs/cpp/api/classsixtyfps_1_
 We modify the main function like so:
 
 ```cpp
- // main.cpp
+{{#include main_tiles_from_cpp.cpp:main}}
-#include "memory.h"
-#include <random> // Added
-
-int main()
-{
-    auto main_window = MainWindow::create();
-    auto old_tiles = main_window->get_memory_tiles();
-    std::vector<TileData> new_tiles;
-    new_tiles.reserve(old_tiles->row_count() * 2);
-    for (int i = 0; i < old_tiles->row_count(); ++i) {
-        new_tiles.push_back(old_tiles->row_data(i));
-        new_tiles.push_back(old_tiles->row_data(i));
-    }
-    std::default_random_engine rng{};
-    std::shuffle(new_tiles.begin(), new_tiles.end(), rng);
-    auto tiles_model = std::make_shared<
-        sixtyfps::VectorModel<TileData>>(new_tiles);
-    main_window->set_memory_tiles(tiles_model);
-
-    main_window->run();
-}
 ```
 
 Running this gives us a window on the screen that now shows a 4 by 4 grid of rectangles, which can show or obscure

docs/tutorial/cpp/src/main_tiles_from_cpp.cpp

@@ -0,0 +1,35 @@
+/* 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 */
+// main.cpp
+
+#include "memory_tiles_from_cpp.h" // generated header from memory_tiles_from_cpp.60
+// ANCHOR: main
+// ...
+
+#include <random> // Added
+
+int main()
+{
+    auto main_window = MainWindow::create();
+    auto old_tiles = main_window->get_memory_tiles();
+    std::vector<TileData> new_tiles;
+    new_tiles.reserve(old_tiles->row_count() * 2);
+    for (int i = 0; i < old_tiles->row_count(); ++i) {
+        new_tiles.push_back(old_tiles->row_data(i));
+        new_tiles.push_back(old_tiles->row_data(i));
+    }
+    std::default_random_engine rng {};
+    std::shuffle(new_tiles.begin(), new_tiles.end(), rng);
+    auto tiles_model = std::make_shared<sixtyfps::VectorModel<TileData>>(new_tiles);
+    main_window->set_memory_tiles(tiles_model);
+
+    main_window->run();
+}
+// ANCHOR_END: main

docs/tutorial/cpp/src/memory_tiles_from_cpp.60

@@ -0,0 +1,76 @@
+struct TileData := {
+    image: image,
+    image_visible: bool,
+    solved: bool,
+}
+
+MemoryTile := Rectangle {
+    callback clicked;
+    property <bool> open_curtain;
+    property <bool> solved;
+    property <image> icon;
+
+    height: 64px;
+    width: 64px;
+    background: solved ? #34CE57 : #3960D5;
+    animate background { duration: 800ms; }
+
+    Image {
+        source: icon;
+        width: parent.width;
+        height: parent.height;
+    }
+
+    // Left curtain
+    Rectangle {
+        background: #193076;
+        width: open_curtain ? 0px : (parent.width / 2);
+        height: parent.height;
+        animate width { duration: 250ms; easing: ease-in; }
+    }
+
+    // Right curtain
+    Rectangle {
+        background: #193076;
+        x: open_curtain ? parent.width : (parent.width / 2);
+        width: open_curtain ? 0px : (parent.width / 2);
+        height: parent.height;
+        animate width { duration: 250ms; easing: ease-in; }
+        animate x { duration: 250ms; easing: ease-in; }
+    }
+
+    TouchArea {
+        clicked => {
+            // Delegate to the user of this element
+            root.clicked();
+        }
+    }
+}
+MainWindow := Window {
+    width: 326px;
+    height: 326px;
+
+    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 => {
+            tile.image_visible = !tile.image_visible;
+        }
+    }
+}