From 7b47ce1fd0af03aba682e859e60cb62b7dbd20d2 Mon Sep 17 00:00:00 2001
From: Munsterlander <munsterlander@users.noreply.github.com>
Date: Thu, 6 Oct 2022 07:59:42 -0700
Subject: [PATCH] docs: Added rotate effect example and fixed multi-line
 (#2024)

Added rotate effect and tested working. Effect resets.
---
 doc/flame/effects.md                         | 26 +++++++++++++--
 doc/flame/examples/lib/main.dart             |  4 +++
 doc/flame/examples/lib/rotate_by_effect.dart | 33 ++++++++++++++++++++
 doc/flame/examples/lib/rotate_to_effect.dart | 33 ++++++++++++++++++++
 4 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 doc/flame/examples/lib/rotate_by_effect.dart
 create mode 100644 doc/flame/examples/lib/rotate_to_effect.dart

diff --git a/doc/flame/effects.md b/doc/flame/effects.md
index adfe941ab7d..ed0c42bb2e0 100644
--- a/doc/flame/effects.md
+++ b/doc/flame/effects.md
@@ -153,8 +153,19 @@ Rotates the target clockwise by the specified angle relative to its current orie
 is in radians. For example, the following effect will rotate the target 90º (=[tau]/4 in radians)
 clockwise:
 
+```{flutter-app}
+:sources: ../flame/examples
+:page: rotate_by_effect
+:show: widget code infobox
+:width: 180
+:height: 160
+```
+
 ```dart
-final effect = RotateEffect.by(tau/4, EffectController(duration: 2));
+final effect = RotateEffect.by(
+  tau/4, 
+  EffectController(duration: 2),
+);
 ```
 
 
@@ -163,8 +174,19 @@ final effect = RotateEffect.by(tau/4, EffectController(duration: 2));
 Rotates the target clockwise to the specified angle. For example, the following will rotate the
 target to look east (0º is north, 90º=[tau]/4 east, 180º=tau/2 south, and 270º=tau*3/4 west):
 
+```{flutter-app}
+:sources: ../flame/examples
+:page: rotate_to_effect
+:show: widget code infobox
+:width: 180
+:height: 160
+```
+
 ```dart
-final effect = RotateEffect.to(tau/4, EffectController(duration: 2));
+final effect = RotateEffect.to(
+  tau/4, 
+  EffectController(duration: 2),
+);
 ```
 
 
diff --git a/doc/flame/examples/lib/main.dart b/doc/flame/examples/lib/main.dart
index 4329787b24e..e4eec2c6d81 100644
--- a/doc/flame/examples/lib/main.dart
+++ b/doc/flame/examples/lib/main.dart
@@ -9,6 +9,8 @@ import 'package:doc_flame_examples/decorator_rotate3d.dart';
 import 'package:doc_flame_examples/decorator_shadow3d.dart';
 import 'package:doc_flame_examples/decorator_tint.dart';
 import 'package:doc_flame_examples/drag_events.dart';
+import 'package:doc_flame_examples/rotate_by_effect.dart';
+import 'package:doc_flame_examples/rotate_to_effect.dart';
 import 'package:doc_flame_examples/router.dart';
 import 'package:doc_flame_examples/scale_by_effect.dart';
 import 'package:doc_flame_examples/scale_to_effect.dart';
@@ -33,6 +35,8 @@ void main() {
     'decorator_shadow3d': DecoratorShadowGame.new,
     'decorator_tint': DecoratorTintGame.new,
     'drag_events': DragEventsGame.new,
+    'rotate_by_effect': RotateByEffectGame.new,
+    'rotate_to_effect': RotateToEffectGame.new,
     'router': RouterGame.new,
     'scale_by_effect': ScaleByEffectGame.new,
     'scale_to_effect': ScaleToEffectGame.new,
diff --git a/doc/flame/examples/lib/rotate_by_effect.dart b/doc/flame/examples/lib/rotate_by_effect.dart
new file mode 100644
index 00000000000..843b746f639
--- /dev/null
+++ b/doc/flame/examples/lib/rotate_by_effect.dart
@@ -0,0 +1,33 @@
+import 'package:doc_flame_examples/flower.dart';
+import 'package:flame/effects.dart';
+import 'package:flame/experimental.dart';
+import 'package:flame/game.dart';
+
+class RotateByEffectGame extends FlameGame with HasTappableComponents {
+  bool reset = false;
+  @override
+  Future<void> onLoad() async {
+    final flower = Flower(
+      size: 60,
+      position: canvasSize / 2,
+      onTap: (flower) {
+        if (reset = !reset) {
+          flower.add(
+            RotateEffect.by(
+              tau / 4,
+              EffectController(duration: 2),
+            ),
+          );
+        } else {
+          flower.add(
+            RotateEffect.by(
+              -tau / 4,
+              EffectController(duration: 2),
+            ),
+          );
+        }
+      },
+    );
+    add(flower);
+  }
+}
diff --git a/doc/flame/examples/lib/rotate_to_effect.dart b/doc/flame/examples/lib/rotate_to_effect.dart
new file mode 100644
index 00000000000..efae86d0727
--- /dev/null
+++ b/doc/flame/examples/lib/rotate_to_effect.dart
@@ -0,0 +1,33 @@
+import 'package:doc_flame_examples/flower.dart';
+import 'package:flame/effects.dart';
+import 'package:flame/experimental.dart';
+import 'package:flame/game.dart';
+
+class RotateToEffectGame extends FlameGame with HasTappableComponents {
+  bool reset = false;
+  @override
+  Future<void> onLoad() async {
+    final flower = Flower(
+      size: 60,
+      position: canvasSize / 2,
+      onTap: (flower) {
+        if (reset = !reset) {
+          flower.add(
+            RotateEffect.to(
+              tau / 4,
+              EffectController(duration: 2),
+            ),
+          );
+        } else {
+          flower.add(
+            RotateEffect.to(
+              -tau / 4,
+              EffectController(duration: 2),
+            ),
+          );
+        }
+      },
+    );
+    add(flower);
+  }
+}