Creating The Tiles From JavaScript - Slint Memory Game Tutorial (node)

# Creating The Tiles From JavaScript

What we'll do is take the list of tiles declared in the .slint language, duplicate it, and shuffle it. We'll do so by accessing the `memory_tiles` property through the JavaScript code - in our case `memory_tiles`. Since `memory_tiles` is an array in the `.slint` language, it's represented as a JavaScript `Array`. We can't modify the model generated by the .slint, but we can extract the tiles from it, and put it in a `slint.ArrayModel` which implements the `Model` interface. `ArrayModel` allows us to make modifications and we can use it to replace the static generated model.

We modify the main function like so:

    // main.js
    import * as slint from "slint-ui";
    let ui = slint.loadFile("./memory.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;

    mainWindow.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 the icons when clicking. There's only one last aspect missing now, the rules for the game.