Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: Minor updates to steps 3 & 4 in Klondike tutorial #2626

Merged
merged 4 commits into from
Jul 29, 2023
Merged

docs: Minor updates to steps 3 & 4 in Klondike tutorial #2626

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aa7d314
docs: Remove unnecessary late keywords
gilescm Jul 29, 2023
a39d04d
docs: Replace reference of local flag with internal Mixin flag
gilescm Jul 29, 2023
61e574b
Update notes on super.onDragStart/End
gilescm Jul 29, 2023
ffb65cf
docs: fix trailing whitespaces
gilescm Jul 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions doc/tutorials/klondike/step3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,14 @@ symbol on the canvas. The sprite object is initialized using the
```

Then comes the static list of all `Suit` objects in the game. Note that we
define it as `late`, meaning that it will be only initialized the first time
it is needed. This is important: as we seen above, the constructor tries to
retrieve an image from the global cache, so it can only be invoked after the
image is loaded into the cache.
define it as static variable so it is evaluated lazily (as if it was marked
with the `late` keyword) meaning that it will be only initialized the first
time it is needed. This is important: as we can see above, the constructor
tries to retrieve an image from the global cache, so it can only be invoked
after the image is loaded into the cache.

```dart
static late final List<Suit> _singletons = [
static final List<Suit> _singletons = [
Suit._(0, '♥', 1176, 17, 172, 183),
Suit._(1, '♦', 973, 14, 177, 182),
Suit._(2, '♣', 974, 226, 184, 172),
Expand Down Expand Up @@ -120,7 +121,7 @@ class Rank {
final Sprite redSprite;
final Sprite blackSprite;

static late final List<Rank> _singletons = [
static final List<Rank> _singletons = [
Rank._(1, 'A', 335, 164, 789, 161, 120, 129),
Rank._(2, '2', 20, 19, 15, 322, 83, 125),
Rank._(3, '3', 122, 19, 117, 322, 80, 127),
Expand Down Expand Up @@ -272,7 +273,7 @@ Various properties used in the `_renderBack()` method are defined as follows:
const Radius.circular(KlondikeGame.cardRadius),
);
static final RRect backRRectInner = cardRRect.deflate(40);
static late final Sprite flameSprite = klondikeSprite(1367, 6, 357, 501);
static final Sprite flameSprite = klondikeSprite(1367, 6, 357, 501);
```

I declared these properties as static because they will all be the same across
Expand Down Expand Up @@ -307,9 +308,9 @@ depending on whether the card is of a "red" suit or "black":
Next, we also need the images for the court cards:

```dart
static late final Sprite redJack = klondikeSprite(81, 565, 562, 488);
static late final Sprite redQueen = klondikeSprite(717, 541, 486, 515);
static late final Sprite redKing = klondikeSprite(1305, 532, 407, 549);
static final Sprite redJack = klondikeSprite(81, 565, 562, 488);
static final Sprite redQueen = klondikeSprite(717, 541, 486, 515);
static final Sprite redKing = klondikeSprite(1305, 532, 407, 549);
```

Note that I'm calling these sprites `redJack`, `redQueen`, and `redKing`. This
Expand All @@ -325,11 +326,11 @@ blending mode:
Color(0x880d8bff),
BlendMode.srcATop,
);
static late final Sprite blackJack = klondikeSprite(81, 565, 562, 488)
static final Sprite blackJack = klondikeSprite(81, 565, 562, 488)
..paint = blueFilter;
static late final Sprite blackQueen = klondikeSprite(717, 541, 486, 515)
static final Sprite blackQueen = klondikeSprite(717, 541, 486, 515)
..paint = blueFilter;
static late final Sprite blackKing = klondikeSprite(1305, 532, 407, 549)
static final Sprite blackKing = klondikeSprite(1305, 532, 407, 549)
..paint = blueFilter;
```

Expand Down
30 changes: 16 additions & 14 deletions doc/tutorials/klondike/step4.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -576,19 +576,21 @@ it so that it would check whether the card is allowed to be moved before startin
```dart
void onDragStart(DragStartEvent event) {
if (pile?.canMoveCard(this) ?? false) {
_isDragging = true;
super.onDragStart(event);
priority = 100;
}
}
```

We have also added the boolean `_isDragging` variable here: make sure to define it, and then to
check this flag in the `onDragUpdate()` method, and to set it back to false in the `onDragEnd()`:
We have also added a call to `super.onDragStart()` which sets an `_isDragged` variable to `true`
in the `DragCallbacks` mixin, we need to check this flag via the public `isDragged` getter in
the `onDragUpdate()` method and use `super.onDragEnd()` in `onDragEnd()` so the flag is set back
to `false`:

```dart
@override
void onDragUpdate(DragUpdateEvent event) {
if (!_isDragging) {
if (!isDragged) {
return;
}
final cameraZoom = (findGame()! as FlameGame)
Expand All @@ -600,11 +602,11 @@ check this flag in the `onDragUpdate()` method, and to set it back to false in t

@override
void onDragEnd(DragEndEvent event) {
_isDragging = false;
super.onDragEnd(event);
}
```

Now the only the proper cards can be dragged, but they still drop at random positions on the table,
Now only the proper cards can be dragged, but they still drop at random positions on the table,
so let's work on that.


Expand All @@ -620,10 +622,10 @@ Thus, my first attempt at revising the `onDragEnd` callback looks like this:
```dart
@override
void onDragEnd(DragEndEvent event) {
if (!_isDragging) {
if (!isDragged) {
return;
}
_isDragging = false;
super.onDragEnd(event);
final dropPiles = parent!
.componentsAtPoint(position + size / 2)
.whereType<Pile>()
Expand Down Expand Up @@ -790,10 +792,10 @@ Now, putting this all together, the `Card`'s `onDragEnd` method will look like t
```dart
@override
void onDragEnd(DragEndEvent event) {
if (!_isDragging) {
if (!isDragged) {
return;
}
_isDragging = false;
super.onDragEnd(event);
final dropPiles = parent!
.componentsAtPoint(position + size / 2)
.whereType<Pile>()
Expand Down Expand Up @@ -898,7 +900,7 @@ Heading back into the `Card` class, we can use this method in order to populate
@override
void onDragStart(DragStartEvent event) {
if (pile?.canMoveCard(this) ?? false) {
_isDragging = true;
super.onDragStart();
priority = 100;
if (pile is TableauPile) {
attachedCards.clear();
Expand All @@ -918,7 +920,7 @@ the `onDragUpdate` method:
```dart
@override
void onDragUpdate(DragUpdateEvent event) {
if (!_isDragging) {
if (!isDragged) {
return;
}
final cameraZoom = (findGame()! as FlameGame)
Expand Down Expand Up @@ -952,10 +954,10 @@ attached cards into the pile, and the same when it comes to returning the cards
```dart
@override
void onDragEnd(DragEndEvent event) {
if (!_isDragging) {
if (!isDragged) {
return;
}
_isDragging = false;
super.onDragEnd(event);
final dropPiles = parent!
.componentsAtPoint(position + size / 2)
.whereType<Pile>()
Expand Down
Loading