Creating The Tiles From JavaScript

This step places the game tiles randomly.

Change main.js to the following:

// main.js
import * as slint from "slint-ui";
let ui = slint.loadFile("./ui/appwindow.slint");
let mainWindow = new ui.MainWindow();

let initial_tiles = mainWindow.memory_tiles;
let tiles = initial_tiles.concat(initial_tiles.map((tile) => Object.assign({}, tile)));

for (let i = tiles.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * i);
    [tiles[i], tiles[j]] = [tiles[j], tiles[i]];
}

let model = new slint.ArrayModel(tiles);
mainWindow.memory_tiles = model;

await mainWindow.run();

The code takes the list of tiles, duplicates it, and shuffles it, accessing the memory_tiles property through the JavaScript code.

As memory_tiles is an array, it's represented as a JavaScript Array. You can't change the model generated by Slint, but you can extract the tiles from it and put them in a slint.ArrayModel which implements the Model interface. ArrayModel allows you to make changes and you can use it to replace the static generated model.

Running this code opens a window that now shows a 4 by 4 grid of rectangles, which show or hide the icons when a player clicks on them.

There's one last aspect missing now, the rules for the game.