Janitor: Fix warnings about markdown files

These might change the layout of the rendered markdown files. This will
also fix some typos along the way:-)
This commit is contained in:
Tobias Hunger 2021-06-26 22:06:13 +02:00 committed by Olivier Goffart
parent 13d7f5e7bd
commit e01bd87df8
35 changed files with 216 additions and 243 deletions

View file

@ -8,4 +8,4 @@
- [Creating The Tiles From C++](./creating_the_tiles_from_cpp.md)
- [Game Logic In C++](./game_logic_in_cpp.md)
- [Ideas For The Reader](./ideas_for_the_reader.md)
- [Conclusion](./conclusion.md)
- [Conclusion](./conclusion.md)

View file

@ -7,4 +7,3 @@ see how these look like and can be used, such as the [todo example](https://gith
A slightly more polished version of this memory puzzle game is [available in the SixtyFPS repository](
https://github.com/sixtyfpsui/sixtyfps/tree/master/examples/memory). And you can <a href="https://sixtyfps.io/demos/memory/" target="_blank">play the wasm version</a> in your browser.

View file

@ -18,4 +18,3 @@ Running this gives us a window on the screen that now shows a 4 by 4 grid of rec
the icons when clicking. There's only one last aspect missing now, the rules for the game.
<video autoplay loop muted playsinline src="https://sixtyfps.io/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video>

View file

@ -1,12 +1,12 @@
# From One To Multiple Tiles
After modeling a single tile, let's create a grid of them. For the grid to be our game board, we need two features:
1. A data model: This shall be an array where each element describes the tile data structure, such as the
url of the image, whether the image shall be visible and if this tile has been solved. We modify the model
from Rust code.
1. A way of creating many instances of the tiles, with the above `.60` markup code.
In SixtyFPS we can declare an array of structures using brackets, to create a model. We can use the <span class="hljs-keyword">for</span> loop
to create many instances of the same element. In `.60` the for loop is declarative and automatically updates when
the model changes. We instantiate all the different <span class="hljs-title">MemoryTile</span> elements and place them on a grid based on their

View file

@ -12,7 +12,6 @@ check if a pair of tiles has been solved. And we need to add a property that C++
tile interaction, to prevent the player from opening more tiles than allowed. No cheating allowed! First, we paste
the callback and property declarations into <span class="hljs-title">MainWindow</span>:
```60
{{#include ../../rust/src/main_game_logic_in_rust.rs:mainwindow_interface}}
```

View file

@ -8,7 +8,7 @@ We do not provide binaries of SixtyFPS yet, so we will use the CMake integration
the tools and library from source. Since it is implemented in the Rust programming language, this means that
you also need to install a Rust compiler (1.48). You can easily install a Rust compiler
following the instruction from [the Rust website](https://www.rust-lang.org/learn/get-started).
We are going to use cmake's builtin FetchContent module to fetch the source code of SixtyFPS.
We are going to use `cmake`'s builtin FetchContent module to fetch the source code of SixtyFPS.
In a new directory, we create a new `CMakeLists.txt` file.
@ -31,7 +31,7 @@ target_link_libraries(memory_game PRIVATE SixtyFPS::SixtyFPS)
sixtyfps_target_60_sources(memory_game memory.60)
```
This should look familliar to people familliar with CMake. We see that this CMakeLists.txt
This should look familiar to people familiar with CMake. We see that this CMakeLists.txt
references a `main.cpp`, which we will add later, and it also has a line
`sixtyfps_target_60_sources(memory_game memory.60)`, which is a SixtyFPS function used to
add the `memory.60` file to the target. We must then create, in the same directory,
@ -66,4 +66,4 @@ We just keep it simple here for the purpose of this blog.
*Note*: When configuring with CMake, the FetchContent module will fetch the source code of SixtyFPS via git.
this may take some time. When building for the first time, the first thing that need to be build
is the SixtyFPS runtime and compiler, this can take a few minutes.
is the SixtyFPS runtime and compiler, this can take a few minutes.

View file

@ -11,4 +11,4 @@ graphics are hiding. If two tiles with the same icon are uncovered, then they re
This is how the game looks like in action:
<video autoplay loop muted playsinline src="https://sixtyfps.io/blog/memory-game-tutorial/memory_clip.mp4"
class="img-fluid img-thumbnail rounded"></video>
class="img-fluid img-thumbnail rounded"></video>

View file

@ -4,7 +4,7 @@ With the skeleton in place, let's look at the first element of the game, the mem
visual building block that consists of an underlying filled rectangle background, the icon image. Later we'll add a
covering rectangle that acts as a curtain. The background rectangle is declared to be 64 logical pixels wide and tall,
and it is filled with a soothing tone of blue. Note how lengths in the `.60` language have a unit, here
the `px` suffix. That makes the code easier to read and the compiler can detect when your're accidentally
the `px` suffix. That makes the code easier to read and the compiler can detect when your are accidentally
mixing values with different units attached to them.
We copy the following code into the `memory.60` file:
@ -28,5 +28,5 @@ This should unpack an `icons` directory containing a bunch of icons.
We compile the program with `cmake --build .` and running with the `./memory_game` gives us a
window on the screen that shows the icon of a bus on a blue background.
![Screenshot of the first tile](https://sixtyfps.io/blog/memory-game-tutorial/memory-tile.png "Memory Tile Screenshot")

View file

@ -8,11 +8,11 @@ that the tile was clicked on. In the <em>MainWindow</em> we react by flipping a
That in turn is used in property bindings for the animated width and x properties. Let's look at the two states a bit
more in detail:
|*open_curtain* value: |false|true|
|-----------------------|-----|----|
|Left curtain rectangle |Fill the left half by setting the width *width* to half the parent's width|Width of zero makes the rectangle invisible|
|Right curtain rectangle|Fill the right half by setting *x* and *width* to half of the parent's width|*width* of zero makes the rectangle invisible. *x* is moved to the right, to slide the curtain open when animated|
| *open_curtain* value: | false | true |
| --- | --- | --- |
| Left curtain rectangle | Fill the left half by setting the width *width* to half the parent's width | Width of zero makes the rectangle invisible |
| Right curtain rectangle | Fill the right half by setting *x* and *width* to half of the parent's width | *width* of zero makes the rectangle invisible. *x* is moved to the right, to slide the curtain open when animated |
In order to make our tile extensible, the hard-coded icon name is replaced with an *icon*
property that can be set from the outside when instantiating the element. For the final polish, we add a
*solved* property that we use to animate the color to a shade of green when we've found a pair, later. We