Rename Tapable to Tappable (#868)

STYLEGUIDE.md

@@ -82,7 +82,7 @@ import 'package:ordered_set/ordered_set.dart';
 import '../../extensions.dart';
 import '../components/component.dart';
 import '../components/mixins/has_game_ref.dart';
-import '../components/mixins/tapable.dart';
+import '../components/mixins/tappable.dart';
 import '../components/position_component.dart';
 import '../fps_counter.dart';
 import 'camera.dart';

doc/input.md

@@ -138,9 +138,9 @@ class MyGame extends Game with TapDetector {
 You can also check more complete examples
 [here](https://github.com/flame-engine/flame/tree/main/examples/lib/stories/controls/).
 
-## Tapable, Draggable and Hoverable components
+## Tappable, Draggable and Hoverable components
 
-Any component derived from `BaseComponent` (most components) can add the `Tapable`, the
+Any component derived from `BaseComponent` (most components) can add the `Tappable`, the
 `Draggable`, and/or the `Hoverable` mixins to handle taps, drags and hovers on the component.
 
 All overridden methods return a boolean to control if the event should be passed down further along
@@ -152,9 +152,9 @@ you should return `true`.
 The same applies if your component has children, then the event is first sent to the leaves in the
 children tree and then passed further down until a method returns `false`.
 
-### Tapable components
+### Tappable components
 
-By adding the `HasTapableComponents` mixin to your game, and using the mixin `Tapable` on your
+By adding the `HasTappableComponents` mixin to your game, and using the mixin `Tappable` on your
 components, you can override the following methods on your components:
 
 ```dart
@@ -168,7 +168,7 @@ Minimal component example:
 ```dart
 import 'package:flame/components.dart';
 
-class TapableComponent extends PositionComponent with Tapable {
+class TappableComponent extends PositionComponent with Tappable {
 
   // update and render omitted
 
@@ -188,19 +188,19 @@ class TapableComponent extends PositionComponent with Tapable {
   }
 }
 
-class MyGame extends BaseGame with HasTapableComponents {
+class MyGame extends BaseGame with HasTappableComponents {
   MyGame() {
-    add(TapableComponent());
+    add(TappableComponent());
   }
 }
 ```
 
-**Note**: `HasTapableComponents` uses an advanced gesture detector under the hood and as explained
+**Note**: `HasTappableComponents` uses an advanced gesture detector under the hood and as explained
 further up on this page it shouldn't be used alongside basic detectors.
 
 ### Draggable components
 
-Just like with `Tapable`, Flame offers a mixin for `Draggable`.
+Just like with `Tappable`, Flame offers a mixin for `Draggable`.
 
 By adding the `HasDraggableComponents` mixin to your game, and by using the mixin `Draggable` on
 your components, they can override the simple methods that enable an easy to use drag api on your

examples/lib/stories/camera_and_viewport/follow_object.dart

@@ -81,7 +81,7 @@ class Map extends Component {
   }
 }
 
-class Rock extends SquareComponent with Hitbox, Collidable, Tapable {
+class Rock extends SquareComponent with Hitbox, Collidable, Tappable {
   static final unpressedPaint = Paint()..color = const Color(0xFF2222FF);
   static final pressedPaint = Paint()..color = const Color(0xFF414175);
 
@@ -112,7 +112,7 @@ class Rock extends SquareComponent with Hitbox, Collidable, Tapable {
 }
 
 class CameraAndViewportGame extends BaseGame
-    with KeyboardEvents, HasCollidables, HasTapableComponents {
+    with KeyboardEvents, HasCollidables, HasTappableComponents {
   late MovableSquare square;
 
   final Vector2 viewportResolution;

examples/lib/stories/collision_detection/only_shapes.dart

@@ -11,7 +11,7 @@ import 'package:flutter/material.dart' hide Image, Draggable;
 
 enum Shapes { circle, rectangle, polygon }
 
-class OnlyShapes extends BaseGame with HasTapableComponents {
+class OnlyShapes extends BaseGame with HasTappableComponents {
   final shapePaint = BasicPalette.red.paint()..style = PaintingStyle.stroke;
   final _rng = Random();
 
@@ -52,7 +52,7 @@ class OnlyShapes extends BaseGame with HasTapableComponents {
   }
 }
 
-class MyShapeComponent extends ShapeComponent with Tapable {
+class MyShapeComponent extends ShapeComponent with Tappable {
   MyShapeComponent(Shape shape, Paint shapePaint) : super(shape, shapePaint);
 
   @override

examples/lib/stories/components/priority.dart

@@ -7,7 +7,7 @@ import 'package:flame/game.dart';
 import 'package:flame/gestures.dart';
 import 'package:flame/palette.dart';
 
-class Square extends PositionComponent with HasGameRef<Priority>, Tapable {
+class Square extends PositionComponent with HasGameRef<Priority>, Tappable {
   late final Paint paint;
 
   Square(Vector2 position) {
@@ -43,7 +43,7 @@ class Square extends PositionComponent with HasGameRef<Priority>, Tapable {
   }
 }
 
-class Priority extends BaseGame with HasTapableComponents {
+class Priority extends BaseGame with HasTappableComponents {
   @override
   Future<void> onLoad() async {
     final squares = [

examples/lib/stories/controls/controls.dart

@@ -10,9 +10,9 @@ import 'keyboard.dart';
 import 'mouse_movement.dart';
 import 'multitap.dart';
 import 'multitap_advanced.dart';
-import 'overlapping_tapables.dart';
+import 'overlapping_tappables.dart';
 import 'scroll.dart';
-import 'tapables.dart';
+import 'tappables.dart';
 
 void addControlsStories(Dashbook dashbook) {
   dashbook.storiesOf('Controls')
@@ -42,13 +42,13 @@ void addControlsStories(Dashbook dashbook) {
       codeLink: baseLink('controls/multitap_advanced.dart'),
     )
     ..add(
-      'Tapables',
-      (_) => GameWidget(game: TapablesGame()),
-      codeLink: baseLink('controls/tapables.dart'),
+      'Tappables',
+      (_) => GameWidget(game: TappablesGame()),
+      codeLink: baseLink('controls/tappables.dart'),
     )
     ..add(
       'Overlaping Tappables',
-      (_) => GameWidget(game: OverlappingTapablesGame()),
+      (_) => GameWidget(game: OverlappingTappablesGame()),
       codeLink: baseLink('controls/overlaping_tappables.dart'),
     )
     ..add(

examples/lib/stories/controls/overlapping_tappables.dart

@@ -1,11 +1,11 @@
 import 'dart:math' as math;
 
 import 'package:flame/components.dart';
+import 'package:flame/game.dart';
 import 'package:flame/palette.dart';
 import 'package:flutter/material.dart';
-import 'package:flame/game.dart';
 
-class TapableSquare extends PositionComponent with Tapable {
+class TappableSquare extends PositionComponent with Tappable {
   static Paint _randomPaint() {
     final rng = math.Random();
     final color = Color.fromRGBO(
@@ -19,7 +19,7 @@ class TapableSquare extends PositionComponent with Tapable {
 
   Paint currentPaint;
 
-  TapableSquare({Vector2? position})
+  TappableSquare({Vector2? position})
       : currentPaint = _randomPaint(),
         super(
           position: position ?? Vector2.all(100),
@@ -49,11 +49,11 @@ class TapableSquare extends PositionComponent with Tapable {
   }
 }
 
-class OverlappingTapablesGame extends BaseGame with HasTapableComponents {
+class OverlappingTappablesGame extends BaseGame with HasTappableComponents {
   @override
   Future<void> onLoad() async {
-    add(TapableSquare(position: Vector2(100, 100)));
-    add(TapableSquare(position: Vector2(150, 150)));
-    add(TapableSquare(position: Vector2(100, 200)));
+    add(TappableSquare(position: Vector2(100, 100)));
+    add(TappableSquare(position: Vector2(150, 150)));
+    add(TappableSquare(position: Vector2(100, 200)));
   }
 }

examples/lib/stories/controls/tappables.dart

@@ -1,15 +1,15 @@
 import 'package:flame/components.dart';
-import 'package:flutter/material.dart';
-import 'package:flame/game.dart';
 import 'package:flame/extensions.dart';
+import 'package:flame/game.dart';
+import 'package:flutter/material.dart';
 
-class TapableSquare extends PositionComponent with Tapable {
+class TappableSquare extends PositionComponent with Tappable {
   static final Paint _white = Paint()..color = const Color(0xFFFFFFFF);
   static final Paint _grey = Paint()..color = const Color(0xFFA5A5A5);
 
   bool _beenPressed = false;
 
-  TapableSquare({Vector2? position})
+  TappableSquare({Vector2? position})
       : super(
           position: position ?? Vector2.all(100),
           size: Vector2.all(100),
@@ -41,10 +41,10 @@ class TapableSquare extends PositionComponent with Tapable {
   }
 }
 
-class TapablesGame extends BaseGame with HasTapableComponents {
+class TappablesGame extends BaseGame with HasTappableComponents {
   @override
   Future<void> onLoad() async {
-    add(TapableSquare()..anchor = Anchor.center);
-    add(TapableSquare()..y = 350);
+    add(TappableSquare()..anchor = Anchor.center);
+    add(TappableSquare()..y = 350);
   }
 }

packages/flame/CHANGELOG.md

@@ -6,6 +6,8 @@
  - Extract shared logic when handling components set in BaseComponent and BaseGame to ComponentSet.
  - Rename `camera.shake(amount: x)` to `camera.shake(duration: x)`
  - Fix `SpriteAnimationComponent` docs to use `Future.wait`
+ - Rename `Tapable` to `Tappable`
+ - Rename `HasTapableComponents` to `HasTappableComponents`
 
 ## [1.0.0-releasecandidate.12]
  - Fix link to code in example stories

packages/flame/lib/components.dart

@@ -11,7 +11,7 @@ export 'src/components/mixins/has_game_ref.dart';
 export 'src/components/mixins/hitbox.dart';
 export 'src/components/mixins/hoverable.dart';
 export 'src/components/mixins/single_child_particle.dart';
-export 'src/components/mixins/tapable.dart';
+export 'src/components/mixins/tappable.dart';
 export 'src/components/nine_tile_box_component.dart';
 export 'src/components/parallax_component.dart';
 export 'src/components/particle_component.dart';

packages/flame/lib/src/components/mixins/tappable.dart

@@ -5,7 +5,7 @@ import '../../game/base_game.dart';
 import '../../gestures/events.dart';
 import '../base_component.dart';
 
-mixin Tapable on BaseComponent {
+mixin Tappable on BaseComponent {
   bool onTapCancel() {
     return true;
   }
@@ -47,14 +47,14 @@ mixin Tapable on BaseComponent {
   }
 }
 
-mixin HasTapableComponents on BaseGame {
-  void _handleTapEvent(bool Function(Tapable child) tapEventHandler) {
+mixin HasTappableComponents on BaseGame {
+  void _handleTapEvent(bool Function(Tappable child) tapEventHandler) {
     for (final c in components.reversed()) {
       var shouldContinue = true;
       if (c is BaseComponent) {
-        shouldContinue = c.propagateToChildren<Tapable>(tapEventHandler);
+        shouldContinue = c.propagateToChildren<Tappable>(tapEventHandler);
       }
-      if (c is Tapable && shouldContinue) {
+      if (c is Tappable && shouldContinue) {
         shouldContinue = tapEventHandler(c);
       }
       if (!shouldContinue) {
@@ -65,16 +65,16 @@ mixin HasTapableComponents on BaseGame {
 
   @mustCallSuper
   void onTapCancel(int pointerId) {
-    _handleTapEvent((Tapable child) => child.handleTapCancel(pointerId));
+    _handleTapEvent((Tappable child) => child.handleTapCancel(pointerId));
   }
 
   @mustCallSuper
   void onTapDown(int pointerId, TapDownInfo info) {
-    _handleTapEvent((Tapable child) => child.handleTapDown(pointerId, info));
+    _handleTapEvent((Tappable child) => child.handleTapDown(pointerId, info));
   }
 
   @mustCallSuper
   void onTapUp(int pointerId, TapUpInfo info) {
-    _handleTapEvent((Tapable child) => child.handleTapUp(pointerId, info));
+    _handleTapEvent((Tappable child) => child.handleTapUp(pointerId, info));
   }
 }

packages/flame/lib/src/game/base_game.dart

@@ -11,7 +11,7 @@ import '../components/mixins/draggable.dart';
 import '../components/mixins/has_collidables.dart';
 import '../components/mixins/has_game_ref.dart';
 import '../components/mixins/hoverable.dart';
-import '../components/mixins/tapable.dart';
+import '../components/mixins/tappable.dart';
 import '../fps_counter.dart';
 import 'camera.dart';
 import 'game.dart';
@@ -111,10 +111,10 @@ class BaseGame extends Game with FPSCounter {
         'You can only use the Hitbox/Collidable feature with games that has the HasCollidables mixin',
       );
     }
-    if (c is Tapable) {
+    if (c is Tappable) {
       assert(
-        this is HasTapableComponents,
-        'Tapable Components can only be added to a BaseGame with HasTapableComponents',
+        this is HasTappableComponents,
+        'Tappable Components can only be added to a BaseGame with HasTappableComponents',
       );
     }
     if (c is Draggable) {

packages/flame/lib/src/game/game_widget/gestures.dart

@@ -4,7 +4,6 @@ import 'package:flutter/widgets.dart';
 import '../../../components.dart';
 import '../../../extensions.dart';
 import '../../components/mixins/draggable.dart';
-import '../../components/mixins/tapable.dart';
 import '../../extensions/offset.dart';
 import '../../gestures/detectors.dart';
 import '../../gestures/events.dart';
@@ -24,7 +23,7 @@ bool hasBasicGestureDetectors(Game game) =>
 bool hasAdvancedGesturesDetectors(Game game) =>
     game is MultiTouchTapDetector ||
     game is MultiTouchDragDetector ||
-    game is HasTapableComponents ||
+    game is HasTappableComponents ||
     game is HasDraggableComponents;
 
 bool hasMouseDetectors(Game game) =>
@@ -231,7 +230,7 @@ Widget applyAdvancedGesturesDetectors(Game game, Widget child) {
       instance.onTapCancel = game.onTapCancel;
       instance.onTap = game.onTap;
     });
-  } else if (game is HasTapableComponents) {
+  } else if (game is HasTappableComponents) {
     addAndConfigureRecognizer(
       () => MultiTapGestureRecognizer(),
       (MultiTapGestureRecognizer instance) {

packages/flame/test/components/composed_component_test.dart

@@ -7,9 +7,9 @@ import 'package:test/test.dart';
 import '../util/mock_canvas.dart';
 import '../util/mock_gesture_events.dart';
 
-class MyGame extends BaseGame with HasTapableComponents {}
+class MyGame extends BaseGame with HasTappableComponents {}
 
-class MyTap extends PositionComponent with Tapable {
+class MyTap extends PositionComponent with Tappable {
   late Vector2 gameSize;
 
   int tapTimes = 0;
@@ -47,9 +47,9 @@ class MyAsyncChild extends MyTap {
   Future<void> onLoad() => Future.value();
 }
 
-class MyComposed extends PositionComponent with HasGameRef, Tapable {}
+class MyComposed extends PositionComponent with HasGameRef, Tappable {}
 
-class MySimpleComposed extends BaseComponent with HasGameRef, Tapable {}
+class MySimpleComposed extends BaseComponent with HasGameRef, Tappable {}
 
 // composed w/o HasGameRef
 class PlainComposed extends BaseComponent {}

packages/flame/test/components/tapables_test.dart

@@ -2,25 +2,25 @@ import 'package:flame/components.dart';
 import 'package:flame/game.dart';
 import 'package:test/test.dart';
 
-class _GameWithTapables extends BaseGame with HasTapableComponents {}
+class _GameWithTappables extends BaseGame with HasTappableComponents {}
 
-class _GameWithoutTapables extends BaseGame {}
+class _GameWithoutTappables extends BaseGame {}
 
-class TapableComponent extends PositionComponent with Tapable {}
+class TappableComponent extends PositionComponent with Tappable {}
 
 void main() {
-  group('tapables test', () {
+  group('tappables test', () {
     test('make sure they cannot be added to invalid games', () async {
-      final game1 = _GameWithTapables();
+      final game1 = _GameWithTappables();
       game1.onResize(Vector2.all(100));
       // should be ok
-      await game1.add(TapableComponent());
+      await game1.add(TappableComponent());
 
-      final game2 = _GameWithoutTapables();
+      final game2 = _GameWithoutTappables();
       game2.onResize(Vector2.all(100));
 
       expect(
-        () => game2.add(TapableComponent()),
+        () => game2.add(TappableComponent()),
         throwsA(isA<AssertionError>()),
       );
     });

packages/flame/test/game/base_game_test.dart

@@ -11,9 +11,9 @@ import 'package:test/test.dart';
 
 import '../util/mock_gesture_events.dart';
 
-class MyGame extends BaseGame with HasTapableComponents {}
+class MyGame extends BaseGame with HasTappableComponents {}
 
-class MyComponent extends PositionComponent with Tapable, HasGameRef {
+class MyComponent extends PositionComponent with Tappable, HasGameRef {
   bool tapped = false;
   bool isUpdateCalled = false;
   bool isRenderCalled = false;
@@ -59,7 +59,7 @@ class MyAsyncComponent extends MyComponent {
   Future<void> onLoad() => Future.value();
 }
 
-class PositionComponentNoNeedForRect extends PositionComponent with Tapable {}
+class PositionComponentNoNeedForRect extends PositionComponent with Tappable {}
 
 Vector2 size = Vector2(1.0, 1.0);
 

packages/flame_forge2d/example/lib/main.dart

@@ -11,7 +11,7 @@ import 'draggable_sample.dart';
 import 'mouse_joint_sample.dart';
 import 'position_body_sample.dart';
 import 'sprite_body_sample.dart';
-import 'tapable_sample.dart';
+import 'tappable_sample.dart';
 
 String link(String example) =>
     'https://github.com/flame-engine/flame_forge2d/tree/main/example/lib/$example';
@@ -52,9 +52,9 @@ void main() async {
       codeLink: link('position_body_sample.dart'),
     )
     ..add(
-      'Tapable Body',
-      (DashbookContext ctx) => GameWidget(game: TapableSample()),
-      codeLink: link('tapable_sample.dart'),
+      'Tappable Body',
+      (DashbookContext ctx) => GameWidget(game: TappableSample()),
+      codeLink: link('tappable_sample.dart'),
     )
     ..add(
       'Draggable Body',

packages/flame_forge2d/example/lib/tappable_sample.dart

@@ -1,26 +1,26 @@
-import 'package:flame_forge2d/flame_forge2d.dart';
-import 'package:forge2d/forge2d.dart';
-import 'package:flame_forge2d/forge2d_game.dart';
-import 'package:flame/palette.dart';
 import 'package:flame/components.dart';
+import 'package:flame/palette.dart';
+import 'package:flame_forge2d/flame_forge2d.dart';
+import 'package:flame_forge2d/forge2d_game.dart';
+import 'package:forge2d/forge2d.dart';
 
 import 'balls.dart';
 import 'boundaries.dart';
 
-class TapableSample extends Forge2DGame with HasTapableComponents {
-  TapableSample() : super(zoom: 20, gravity: Vector2(0, -10.0));
+class TappableSample extends Forge2DGame with HasTappableComponents {
+  TappableSample() : super(zoom: 20, gravity: Vector2(0, -10.0));
 
   @override
   Future<void> onLoad() async {
     final boundaries = createBoundaries(this);
     boundaries.forEach(add);
     final center = screenToWorld(viewport.effectiveSize / 2);
-    add(TapableBall(center));
+    add(TappableBall(center));
   }
 }
 
-class TapableBall extends Ball with Tapable {
-  TapableBall(Vector2 position) : super(position) {
+class TappableBall extends Ball with Tappable {
+  TappableBall(Vector2 position) : super(position) {
     originalPaint = BasicPalette.white.paint();
     paint = originalPaint;
   }

tutorials/2_sprite_animations_gestures/README.md

@@ -171,7 +171,7 @@ Finally, we just render it on the game `render` function:
 
 You now should see the button on the screen, but right now, it is pretty much useless as it has no action at all.
 
-So, to change that, we will now add some interactivity to our game and make the button tapable/clickable.
+So, to change that, we will now add some interactivity to our game and make the button tappable/clickable.
 
 Flame provides several input handlers, which you can check with more in depth on [our docs](https://github.com/flame-engine/flame/blob/main/doc/input.md). For this tutorial, we will be using the `TapDetector` which enables us to detect taps on the screen, as well as mouse click when running on web or desktop.