From 0502d97400ed70d01732e3d807951c72d5014058 Mon Sep 17 00:00:00 2001 From: Erick Date: Fri, 6 May 2022 14:44:07 -0300 Subject: [PATCH] feat: adding error component (#355) * feat: adding error component * Update packages/pinball_components/lib/src/components/error_component.dart Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com> * Update packages/pinball_components/sandbox/lib/stories/error_component/error_component_game.dart Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com> * Update packages/pinball_components/sandbox/lib/stories/error_component/stories.dart Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com> * pr suggestions * fix tests * suggestions Co-authored-by: Allison Ryan <77211884+allisonryan0002@users.noreply.github.com> --- .../assets/images/error_background.png | Bin 0 -> 2349 bytes .../lib/gen/assets.gen.dart | 176 +----------------- .../pinball_components/lib/gen/fonts.gen.dart | 5 - .../lib/src/components/components.dart | 1 + .../lib/src/components/error_component.dart | 95 ++++++++++ packages/pinball_components/pubspec.yaml | 3 + .../pinball_components/sandbox/lib/main.dart | 1 + .../error_component/error_component_game.dart | 24 +++ .../lib/stories/error_component/stories.dart | 16 ++ .../sandbox/lib/stories/stories.dart | 1 + .../pinball_components/sandbox/pubspec.lock | 9 +- .../src/components/error_component_test.dart | 57 ++++++ 12 files changed, 208 insertions(+), 180 deletions(-) create mode 100644 packages/pinball_components/assets/images/error_background.png create mode 100644 packages/pinball_components/lib/src/components/error_component.dart create mode 100644 packages/pinball_components/sandbox/lib/stories/error_component/error_component_game.dart create mode 100644 packages/pinball_components/sandbox/lib/stories/error_component/stories.dart create mode 100644 packages/pinball_components/test/src/components/error_component_test.dart diff --git a/packages/pinball_components/assets/images/error_background.png b/packages/pinball_components/assets/images/error_background.png new file mode 100644 index 0000000000000000000000000000000000000000..5aa6595fb286242efbd9ce322add13709b0e7a34 GIT binary patch literal 2349 zcmX|CdpuO@8vaJRvb*=|rlfXp$SGte+LS4|jgcb~BZg2%lu2nugGr}f7rF@z#gs5j za+z|irZx1#cA18nWFnR#GG(moHe=4XoNrkB{Ik}#*7v^8`@HY>yziIb?&h?3!MX(i zfW;(ddk+A#5V+3Qo(G@d76uIXBAoSbvI9j;>tz6Fe<#`RI~1KM?>sKmP zrfYJ-9Ow8NXYB-Hm9zHR=SOSVt1jGGMZCBwolp36Q|`VU>l|0Cv|AQz)5KdLpoFx4 zIw8o<7Yrg^oy{dAN$1B&(*RE9tB*D7?hp8n*U?>{&Lsey?2_@3*A*FEHS@XIsmWpU z`$gRBnD;-k%>lTA70}~{9Rrwr6M?6bLl6Kr>gG)m$3w}q@HUS1+jVn5U=-DAr0b!g z;5hLD+r!bDxyDrB$uF(}K&LRxgv;<~yHe_O@eB!KPA3TqZiuMzt~#w5oW zVHIgQ0Q?MY;GpJdU2oXvUD03*=YeoO2=p(AW>)KnXd*`^y|e{bt05Yo4YpIo{Hs#) z`8#FEnOExE=tTguzWvPw>+rgADF{;b@%%`p{Tv)D*{t~p_9A0;R{381UI3!Z+jP+b z5nk*YHk`MAUDj;_z_B-f8cW}ATvhF={}L&Wx3@{#;1;7v7-sU0C2K+fLn2n`!#Y<^YQ8=m+^Jd zU$hti-DB-5$b+imZM^=d>h}F*Yd~O5Y{|r(<479XWMuLB5R72i=%&&aGfj|N26I4` z*JXY258^jvDIKb!)t{DvhVx!K8NLKyTaoI>^wt-ME0a^b5L6`<`Z13vqyKeyaxP3( z?2^-SIl@msLkJ*#33~f6ru&&~iY$ECa=Ktt3%q;7vC=DR?#`GVy`n6h)`C?xsIHI7 zBhh#x(G{+cMgNzAX`}LUrU+-_-XTBPT#$7sW0Ls1&{KvK|7GhQMgUuQssi;F`WOfO z_tpz@00=2NEko#qM+H0s0FoN)xQxLK{10mZ*dhz)G^4~JM;W~|0OAXL;h~&ZY_sPd zkeX{Bsw#gs6vF4A0PNkDrw&f^4xsJwQ|ST_7#V=E8p=}85o3&}$#_vC@jKGC`-ZZM zRTw9UDYsh>l@-60jB)+ZBbSpQfT27EjhPEOsw$i9Bjgw(JB%#TVZPf9;!@GIJn}Cv zq~Bo^#QT9r9o?`U^4!lR@y|v>>AxJ2#K=ELsjFRJHLk1Z(uM6thz%KbMf{skGen?4 z-5XF8O+AvBUedm7`4IIn^mlhw=Q0F)VK3J|K}Ky&lA!bNE@!=UH*a2&_zh-zQd3Ny z7~`qs8^x0~haYKbLrSzM(}!pm47+ZID$FX`-4P$#wHb6F} zmiy&u=o@~fZ4lBUYd6&%6gjlQ+UTV4#lqC?7roge_7(_P=f!25v7TOci3(kd?#0$^ zTLa?9*xgjQHr(}2{5%toYTOj&1WCR2*j=PY0ASc9(#Hle{&u(90XJme1_Q0Ppy1AP zUmTe=2olhtmg~3Hmb5Pi;5Yut`8eW(mRZA3PjN&ZZiwK9RyblNZn&!eH#~%gF2x-L zI3hiKmSYFb(L4`#@WUOlaEI%71Pn*UxpHB}o+&(X@!jTGxb>8IpsJlblsn@bp0DYr zdXriXZl%Ooc08F4HuMw^a&V?FX%g6C?Ilp88jJ|MSe-M@W=nZctn%}V;FJmHCtOP( z5UXlFq_1p*mE9UXHT<}Tn(E89u1|)InRvnsXCXuolcLqUi*}_ivJgeEMJ!;8YVReft0!!d%^pT@FeUF1?P>P|QxzvrR zFU(Z9X>_V{yRSmz%Di110yzcs!JW;lp~CS%R86FHS5I}r>|@236id|Qtt2ex1AD0t z3ugYsmy9WelHrT;2Qxib$W`(xd~HwXXa>QvYt4dy;{V<`wt-3jRaIqas3k{wjR3L= z6cTlIZyXou^kTRPQpvQQo_tt(7jl1cQuc>D1QS)p4!rvvfW{M3DPJ>DtuA)3pEqj$8UrO z4a&dg?NrmIGADLP&0r;hhKcs$7HZAXPesNKDgxlCz8p@YejnEY?vyD>O!DL!Se~Mj zJgc{7WzHpPH+ZvuG7wJ=>y^65IQIt}YMw(`!TY0HK)OSb2U9^5|XT{&u-|Mx0Fx&)GVr7J!alGda^`YUhko&&bz zsnpTd-&*>$np3+xVVSdX`;C0&-PizG9!mn7c! zr*xB(m5c)i1B|%eYD%Jhp=p&X5ffZx!T(o>P!w zbq$fR!Km71V_l91*3cAWdy*vf0h^;qR3v})=+`^1>9^5oVmcJLSi1js?3nyX6 bh(*r@f4Zq+C5e~>p#jOk&A!Mk@IU_pe|RES literal 0 HcmV?d00001 diff --git a/packages/pinball_components/lib/gen/assets.gen.dart b/packages/pinball_components/lib/gen/assets.gen.dart index cac04cc0..0d603727 100644 --- a/packages/pinball_components/lib/gen/assets.gen.dart +++ b/packages/pinball_components/lib/gen/assets.gen.dart @@ -3,8 +3,6 @@ /// FlutterGen /// ***************************************************** -// ignore_for_file: directives_ordering,unnecessary_import - import 'package:flutter/widgets.dart'; class $AssetsImagesGen { @@ -14,14 +12,13 @@ class $AssetsImagesGen { $AssetsImagesBackboxGen get backbox => const $AssetsImagesBackboxGen(); $AssetsImagesBallGen get ball => const $AssetsImagesBallGen(); $AssetsImagesBaseboardGen get baseboard => const $AssetsImagesBaseboardGen(); - - /// File path: assets/images/board-background.png AssetGenImage get boardBackground => const AssetGenImage('assets/images/board-background.png'); - $AssetsImagesBoundaryGen get boundary => const $AssetsImagesBoundaryGen(); $AssetsImagesDashGen get dash => const $AssetsImagesDashGen(); $AssetsImagesDinoGen get dino => const $AssetsImagesDinoGen(); + AssetGenImage get errorBackground => + const AssetGenImage('assets/images/error_background.png'); $AssetsImagesFlapperGen get flapper => const $AssetsImagesFlapperGen(); $AssetsImagesFlipperGen get flipper => const $AssetsImagesFlipperGen(); $AssetsImagesGoogleWordGen get googleWord => @@ -54,11 +51,8 @@ class $AssetsImagesAndroidGen { class $AssetsImagesBackboxGen { const $AssetsImagesBackboxGen(); - /// File path: assets/images/backbox/display-divider.png AssetGenImage get displayDivider => const AssetGenImage('assets/images/backbox/display-divider.png'); - - /// File path: assets/images/backbox/marquee.png AssetGenImage get marquee => const AssetGenImage('assets/images/backbox/marquee.png'); } @@ -66,10 +60,6 @@ class $AssetsImagesBackboxGen { class $AssetsImagesBallGen { const $AssetsImagesBallGen(); - /// File path: assets/images/ball/ball.png - AssetGenImage get ball => const AssetGenImage('assets/images/ball/ball.png'); - - /// File path: assets/images/ball/flame_effect.png AssetGenImage get flameEffect => const AssetGenImage('assets/images/ball/flame_effect.png'); } @@ -77,11 +67,8 @@ class $AssetsImagesBallGen { class $AssetsImagesBaseboardGen { const $AssetsImagesBaseboardGen(); - /// File path: assets/images/baseboard/left.png AssetGenImage get left => const AssetGenImage('assets/images/baseboard/left.png'); - - /// File path: assets/images/baseboard/right.png AssetGenImage get right => const AssetGenImage('assets/images/baseboard/right.png'); } @@ -89,15 +76,10 @@ class $AssetsImagesBaseboardGen { class $AssetsImagesBoundaryGen { const $AssetsImagesBoundaryGen(); - /// File path: assets/images/boundary/bottom.png AssetGenImage get bottom => const AssetGenImage('assets/images/boundary/bottom.png'); - - /// File path: assets/images/boundary/outer-bottom.png AssetGenImage get outerBottom => const AssetGenImage('assets/images/boundary/outer-bottom.png'); - - /// File path: assets/images/boundary/outer.png AssetGenImage get outer => const AssetGenImage('assets/images/boundary/outer.png'); } @@ -105,10 +87,8 @@ class $AssetsImagesBoundaryGen { class $AssetsImagesDashGen { const $AssetsImagesDashGen(); - /// File path: assets/images/dash/animatronic.png AssetGenImage get animatronic => const AssetGenImage('assets/images/dash/animatronic.png'); - $AssetsImagesDashBumperGen get bumper => const $AssetsImagesDashBumperGen(); } @@ -117,16 +97,10 @@ class $AssetsImagesDinoGen { $AssetsImagesDinoAnimatronicGen get animatronic => const $AssetsImagesDinoAnimatronicGen(); - - /// File path: assets/images/dino/bottom-wall.png AssetGenImage get bottomWall => const AssetGenImage('assets/images/dino/bottom-wall.png'); - - /// File path: assets/images/dino/top-wall-tunnel.png AssetGenImage get topWallTunnel => const AssetGenImage('assets/images/dino/top-wall-tunnel.png'); - - /// File path: assets/images/dino/top-wall.png AssetGenImage get topWall => const AssetGenImage('assets/images/dino/top-wall.png'); } @@ -134,15 +108,10 @@ class $AssetsImagesDinoGen { class $AssetsImagesFlapperGen { const $AssetsImagesFlapperGen(); - /// File path: assets/images/flapper/back-support.png AssetGenImage get backSupport => const AssetGenImage('assets/images/flapper/back-support.png'); - - /// File path: assets/images/flapper/flap.png AssetGenImage get flap => const AssetGenImage('assets/images/flapper/flap.png'); - - /// File path: assets/images/flapper/front-support.png AssetGenImage get frontSupport => const AssetGenImage('assets/images/flapper/front-support.png'); } @@ -150,11 +119,8 @@ class $AssetsImagesFlapperGen { class $AssetsImagesFlipperGen { const $AssetsImagesFlipperGen(); - /// File path: assets/images/flipper/left.png AssetGenImage get left => const AssetGenImage('assets/images/flipper/left.png'); - - /// File path: assets/images/flipper/right.png AssetGenImage get right => const AssetGenImage('assets/images/flipper/right.png'); } @@ -186,15 +152,10 @@ class $AssetsImagesKickerGen { class $AssetsImagesLaunchRampGen { const $AssetsImagesLaunchRampGen(); - /// File path: assets/images/launch_ramp/background-railing.png AssetGenImage get backgroundRailing => const AssetGenImage('assets/images/launch_ramp/background-railing.png'); - - /// File path: assets/images/launch_ramp/foreground-railing.png AssetGenImage get foregroundRailing => const AssetGenImage('assets/images/launch_ramp/foreground-railing.png'); - - /// File path: assets/images/launch_ramp/ramp.png AssetGenImage get ramp => const AssetGenImage('assets/images/launch_ramp/ramp.png'); } @@ -202,11 +163,8 @@ class $AssetsImagesLaunchRampGen { class $AssetsImagesMultiballGen { const $AssetsImagesMultiballGen(); - /// File path: assets/images/multiball/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/multiball/dimmed.png'); - - /// File path: assets/images/multiball/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/multiball/lit.png'); } @@ -224,11 +182,8 @@ class $AssetsImagesMultiplierGen { class $AssetsImagesPlungerGen { const $AssetsImagesPlungerGen(); - /// File path: assets/images/plunger/plunger.png AssetGenImage get plunger => const AssetGenImage('assets/images/plunger/plunger.png'); - - /// File path: assets/images/plunger/rocket.png AssetGenImage get rocket => const AssetGenImage('assets/images/plunger/rocket.png'); } @@ -236,19 +191,12 @@ class $AssetsImagesPlungerGen { class $AssetsImagesScoreGen { const $AssetsImagesScoreGen(); - /// File path: assets/images/score/five-thousand.png AssetGenImage get fiveThousand => const AssetGenImage('assets/images/score/five-thousand.png'); - - /// File path: assets/images/score/one-million.png AssetGenImage get oneMillion => const AssetGenImage('assets/images/score/one-million.png'); - - /// File path: assets/images/score/twenty-thousand.png AssetGenImage get twentyThousand => const AssetGenImage('assets/images/score/twenty-thousand.png'); - - /// File path: assets/images/score/two-hundred-thousand.png AssetGenImage get twoHundredThousand => const AssetGenImage('assets/images/score/two-hundred-thousand.png'); } @@ -256,19 +204,12 @@ class $AssetsImagesScoreGen { class $AssetsImagesSignpostGen { const $AssetsImagesSignpostGen(); - /// File path: assets/images/signpost/active1.png AssetGenImage get active1 => const AssetGenImage('assets/images/signpost/active1.png'); - - /// File path: assets/images/signpost/active2.png AssetGenImage get active2 => const AssetGenImage('assets/images/signpost/active2.png'); - - /// File path: assets/images/signpost/active3.png AssetGenImage get active3 => const AssetGenImage('assets/images/signpost/active3.png'); - - /// File path: assets/images/signpost/inactive.png AssetGenImage get inactive => const AssetGenImage('assets/images/signpost/inactive.png'); } @@ -276,19 +217,12 @@ class $AssetsImagesSignpostGen { class $AssetsImagesSkillShotGen { const $AssetsImagesSkillShotGen(); - /// File path: assets/images/skill_shot/decal.png AssetGenImage get decal => const AssetGenImage('assets/images/skill_shot/decal.png'); - - /// File path: assets/images/skill_shot/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/skill_shot/dimmed.png'); - - /// File path: assets/images/skill_shot/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/skill_shot/lit.png'); - - /// File path: assets/images/skill_shot/pin.png AssetGenImage get pin => const AssetGenImage('assets/images/skill_shot/pin.png'); } @@ -296,11 +230,8 @@ class $AssetsImagesSkillShotGen { class $AssetsImagesSlingshotGen { const $AssetsImagesSlingshotGen(); - /// File path: assets/images/slingshot/lower.png AssetGenImage get lower => const AssetGenImage('assets/images/slingshot/lower.png'); - - /// File path: assets/images/slingshot/upper.png AssetGenImage get upper => const AssetGenImage('assets/images/slingshot/upper.png'); } @@ -308,10 +239,8 @@ class $AssetsImagesSlingshotGen { class $AssetsImagesSparkyGen { const $AssetsImagesSparkyGen(); - /// File path: assets/images/sparky/animatronic.png AssetGenImage get animatronic => const AssetGenImage('assets/images/sparky/animatronic.png'); - $AssetsImagesSparkyBumperGen get bumper => const $AssetsImagesSparkyBumperGen(); $AssetsImagesSparkyComputerGen get computer => @@ -332,11 +261,8 @@ class $AssetsImagesAndroidBumperGen { class $AssetsImagesAndroidRailGen { const $AssetsImagesAndroidRailGen(); - /// File path: assets/images/android/rail/exit.png AssetGenImage get exit => const AssetGenImage('assets/images/android/rail/exit.png'); - - /// File path: assets/images/android/rail/main.png AssetGenImage get main => const AssetGenImage('assets/images/android/rail/main.png'); } @@ -346,20 +272,12 @@ class $AssetsImagesAndroidRampGen { $AssetsImagesAndroidRampArrowGen get arrow => const $AssetsImagesAndroidRampArrowGen(); - - /// File path: assets/images/android/ramp/board-opening.png AssetGenImage get boardOpening => const AssetGenImage('assets/images/android/ramp/board-opening.png'); - - /// File path: assets/images/android/ramp/main.png AssetGenImage get main => const AssetGenImage('assets/images/android/ramp/main.png'); - - /// File path: assets/images/android/ramp/railing-background.png AssetGenImage get railingBackground => const AssetGenImage('assets/images/android/ramp/railing-background.png'); - - /// File path: assets/images/android/ramp/railing-foreground.png AssetGenImage get railingForeground => const AssetGenImage('assets/images/android/ramp/railing-foreground.png'); } @@ -367,15 +285,10 @@ class $AssetsImagesAndroidRampGen { class $AssetsImagesAndroidSpaceshipGen { const $AssetsImagesAndroidSpaceshipGen(); - /// File path: assets/images/android/spaceship/animatronic.png AssetGenImage get animatronic => const AssetGenImage('assets/images/android/spaceship/animatronic.png'); - - /// File path: assets/images/android/spaceship/light-beam.png AssetGenImage get lightBeam => const AssetGenImage('assets/images/android/spaceship/light-beam.png'); - - /// File path: assets/images/android/spaceship/saucer.png AssetGenImage get saucer => const AssetGenImage('assets/images/android/spaceship/saucer.png'); } @@ -392,11 +305,8 @@ class $AssetsImagesDashBumperGen { class $AssetsImagesDinoAnimatronicGen { const $AssetsImagesDinoAnimatronicGen(); - /// File path: assets/images/dino/animatronic/head.png AssetGenImage get head => const AssetGenImage('assets/images/dino/animatronic/head.png'); - - /// File path: assets/images/dino/animatronic/mouth.png AssetGenImage get mouth => const AssetGenImage('assets/images/dino/animatronic/mouth.png'); } @@ -404,11 +314,8 @@ class $AssetsImagesDinoAnimatronicGen { class $AssetsImagesGoogleWordLetter1Gen { const $AssetsImagesGoogleWordLetter1Gen(); - /// File path: assets/images/google_word/letter1/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/google_word/letter1/dimmed.png'); - - /// File path: assets/images/google_word/letter1/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/google_word/letter1/lit.png'); } @@ -416,11 +323,8 @@ class $AssetsImagesGoogleWordLetter1Gen { class $AssetsImagesGoogleWordLetter2Gen { const $AssetsImagesGoogleWordLetter2Gen(); - /// File path: assets/images/google_word/letter2/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/google_word/letter2/dimmed.png'); - - /// File path: assets/images/google_word/letter2/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/google_word/letter2/lit.png'); } @@ -428,11 +332,8 @@ class $AssetsImagesGoogleWordLetter2Gen { class $AssetsImagesGoogleWordLetter3Gen { const $AssetsImagesGoogleWordLetter3Gen(); - /// File path: assets/images/google_word/letter3/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/google_word/letter3/dimmed.png'); - - /// File path: assets/images/google_word/letter3/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/google_word/letter3/lit.png'); } @@ -440,11 +341,8 @@ class $AssetsImagesGoogleWordLetter3Gen { class $AssetsImagesGoogleWordLetter4Gen { const $AssetsImagesGoogleWordLetter4Gen(); - /// File path: assets/images/google_word/letter4/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/google_word/letter4/dimmed.png'); - - /// File path: assets/images/google_word/letter4/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/google_word/letter4/lit.png'); } @@ -452,11 +350,8 @@ class $AssetsImagesGoogleWordLetter4Gen { class $AssetsImagesGoogleWordLetter5Gen { const $AssetsImagesGoogleWordLetter5Gen(); - /// File path: assets/images/google_word/letter5/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/google_word/letter5/dimmed.png'); - - /// File path: assets/images/google_word/letter5/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/google_word/letter5/lit.png'); } @@ -464,11 +359,8 @@ class $AssetsImagesGoogleWordLetter5Gen { class $AssetsImagesGoogleWordLetter6Gen { const $AssetsImagesGoogleWordLetter6Gen(); - /// File path: assets/images/google_word/letter6/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/google_word/letter6/dimmed.png'); - - /// File path: assets/images/google_word/letter6/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/google_word/letter6/lit.png'); } @@ -476,11 +368,8 @@ class $AssetsImagesGoogleWordLetter6Gen { class $AssetsImagesKickerLeftGen { const $AssetsImagesKickerLeftGen(); - /// File path: assets/images/kicker/left/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/kicker/left/dimmed.png'); - - /// File path: assets/images/kicker/left/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/kicker/left/lit.png'); } @@ -488,11 +377,8 @@ class $AssetsImagesKickerLeftGen { class $AssetsImagesKickerRightGen { const $AssetsImagesKickerRightGen(); - /// File path: assets/images/kicker/right/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/kicker/right/dimmed.png'); - - /// File path: assets/images/kicker/right/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/kicker/right/lit.png'); } @@ -500,11 +386,8 @@ class $AssetsImagesKickerRightGen { class $AssetsImagesMultiplierX2Gen { const $AssetsImagesMultiplierX2Gen(); - /// File path: assets/images/multiplier/x2/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/multiplier/x2/dimmed.png'); - - /// File path: assets/images/multiplier/x2/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/multiplier/x2/lit.png'); } @@ -512,11 +395,8 @@ class $AssetsImagesMultiplierX2Gen { class $AssetsImagesMultiplierX3Gen { const $AssetsImagesMultiplierX3Gen(); - /// File path: assets/images/multiplier/x3/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/multiplier/x3/dimmed.png'); - - /// File path: assets/images/multiplier/x3/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/multiplier/x3/lit.png'); } @@ -524,11 +404,8 @@ class $AssetsImagesMultiplierX3Gen { class $AssetsImagesMultiplierX4Gen { const $AssetsImagesMultiplierX4Gen(); - /// File path: assets/images/multiplier/x4/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/multiplier/x4/dimmed.png'); - - /// File path: assets/images/multiplier/x4/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/multiplier/x4/lit.png'); } @@ -536,11 +413,8 @@ class $AssetsImagesMultiplierX4Gen { class $AssetsImagesMultiplierX5Gen { const $AssetsImagesMultiplierX5Gen(); - /// File path: assets/images/multiplier/x5/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/multiplier/x5/dimmed.png'); - - /// File path: assets/images/multiplier/x5/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/multiplier/x5/lit.png'); } @@ -548,11 +422,8 @@ class $AssetsImagesMultiplierX5Gen { class $AssetsImagesMultiplierX6Gen { const $AssetsImagesMultiplierX6Gen(); - /// File path: assets/images/multiplier/x6/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/multiplier/x6/dimmed.png'); - - /// File path: assets/images/multiplier/x6/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/multiplier/x6/lit.png'); } @@ -568,15 +439,10 @@ class $AssetsImagesSparkyBumperGen { class $AssetsImagesSparkyComputerGen { const $AssetsImagesSparkyComputerGen(); - /// File path: assets/images/sparky/computer/base.png AssetGenImage get base => const AssetGenImage('assets/images/sparky/computer/base.png'); - - /// File path: assets/images/sparky/computer/glow.png AssetGenImage get glow => const AssetGenImage('assets/images/sparky/computer/glow.png'); - - /// File path: assets/images/sparky/computer/top.png AssetGenImage get top => const AssetGenImage('assets/images/sparky/computer/top.png'); } @@ -584,11 +450,8 @@ class $AssetsImagesSparkyComputerGen { class $AssetsImagesAndroidBumperAGen { const $AssetsImagesAndroidBumperAGen(); - /// File path: assets/images/android/bumper/a/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/android/bumper/a/dimmed.png'); - - /// File path: assets/images/android/bumper/a/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/android/bumper/a/lit.png'); } @@ -596,11 +459,8 @@ class $AssetsImagesAndroidBumperAGen { class $AssetsImagesAndroidBumperBGen { const $AssetsImagesAndroidBumperBGen(); - /// File path: assets/images/android/bumper/b/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/android/bumper/b/dimmed.png'); - - /// File path: assets/images/android/bumper/b/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/android/bumper/b/lit.png'); } @@ -608,11 +468,8 @@ class $AssetsImagesAndroidBumperBGen { class $AssetsImagesAndroidBumperCowGen { const $AssetsImagesAndroidBumperCowGen(); - /// File path: assets/images/android/bumper/cow/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/android/bumper/cow/dimmed.png'); - - /// File path: assets/images/android/bumper/cow/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/android/bumper/cow/lit.png'); } @@ -620,27 +477,16 @@ class $AssetsImagesAndroidBumperCowGen { class $AssetsImagesAndroidRampArrowGen { const $AssetsImagesAndroidRampArrowGen(); - /// File path: assets/images/android/ramp/arrow/active1.png AssetGenImage get active1 => const AssetGenImage('assets/images/android/ramp/arrow/active1.png'); - - /// File path: assets/images/android/ramp/arrow/active2.png AssetGenImage get active2 => const AssetGenImage('assets/images/android/ramp/arrow/active2.png'); - - /// File path: assets/images/android/ramp/arrow/active3.png AssetGenImage get active3 => const AssetGenImage('assets/images/android/ramp/arrow/active3.png'); - - /// File path: assets/images/android/ramp/arrow/active4.png AssetGenImage get active4 => const AssetGenImage('assets/images/android/ramp/arrow/active4.png'); - - /// File path: assets/images/android/ramp/arrow/active5.png AssetGenImage get active5 => const AssetGenImage('assets/images/android/ramp/arrow/active5.png'); - - /// File path: assets/images/android/ramp/arrow/inactive.png AssetGenImage get inactive => const AssetGenImage('assets/images/android/ramp/arrow/inactive.png'); } @@ -648,11 +494,8 @@ class $AssetsImagesAndroidRampArrowGen { class $AssetsImagesDashBumperAGen { const $AssetsImagesDashBumperAGen(); - /// File path: assets/images/dash/bumper/a/active.png AssetGenImage get active => const AssetGenImage('assets/images/dash/bumper/a/active.png'); - - /// File path: assets/images/dash/bumper/a/inactive.png AssetGenImage get inactive => const AssetGenImage('assets/images/dash/bumper/a/inactive.png'); } @@ -660,11 +503,8 @@ class $AssetsImagesDashBumperAGen { class $AssetsImagesDashBumperBGen { const $AssetsImagesDashBumperBGen(); - /// File path: assets/images/dash/bumper/b/active.png AssetGenImage get active => const AssetGenImage('assets/images/dash/bumper/b/active.png'); - - /// File path: assets/images/dash/bumper/b/inactive.png AssetGenImage get inactive => const AssetGenImage('assets/images/dash/bumper/b/inactive.png'); } @@ -672,11 +512,8 @@ class $AssetsImagesDashBumperBGen { class $AssetsImagesDashBumperMainGen { const $AssetsImagesDashBumperMainGen(); - /// File path: assets/images/dash/bumper/main/active.png AssetGenImage get active => const AssetGenImage('assets/images/dash/bumper/main/active.png'); - - /// File path: assets/images/dash/bumper/main/inactive.png AssetGenImage get inactive => const AssetGenImage('assets/images/dash/bumper/main/inactive.png'); } @@ -684,11 +521,8 @@ class $AssetsImagesDashBumperMainGen { class $AssetsImagesSparkyBumperAGen { const $AssetsImagesSparkyBumperAGen(); - /// File path: assets/images/sparky/bumper/a/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/sparky/bumper/a/dimmed.png'); - - /// File path: assets/images/sparky/bumper/a/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/sparky/bumper/a/lit.png'); } @@ -696,11 +530,8 @@ class $AssetsImagesSparkyBumperAGen { class $AssetsImagesSparkyBumperBGen { const $AssetsImagesSparkyBumperBGen(); - /// File path: assets/images/sparky/bumper/b/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/sparky/bumper/b/dimmed.png'); - - /// File path: assets/images/sparky/bumper/b/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/sparky/bumper/b/lit.png'); } @@ -708,11 +539,8 @@ class $AssetsImagesSparkyBumperBGen { class $AssetsImagesSparkyBumperCGen { const $AssetsImagesSparkyBumperCGen(); - /// File path: assets/images/sparky/bumper/c/dimmed.png AssetGenImage get dimmed => const AssetGenImage('assets/images/sparky/bumper/c/dimmed.png'); - - /// File path: assets/images/sparky/bumper/c/lit.png AssetGenImage get lit => const AssetGenImage('assets/images/sparky/bumper/c/lit.png'); } diff --git a/packages/pinball_components/lib/gen/fonts.gen.dart b/packages/pinball_components/lib/gen/fonts.gen.dart index 5f77da16..b15f2dd0 100644 --- a/packages/pinball_components/lib/gen/fonts.gen.dart +++ b/packages/pinball_components/lib/gen/fonts.gen.dart @@ -3,14 +3,9 @@ /// FlutterGen /// ***************************************************** -// ignore_for_file: directives_ordering,unnecessary_import - class FontFamily { FontFamily._(); - /// Font family: PixeloidMono static const String pixeloidMono = 'PixeloidMono'; - - /// Font family: PixeloidSans static const String pixeloidSans = 'PixeloidSans'; } diff --git a/packages/pinball_components/lib/src/components/components.dart b/packages/pinball_components/lib/src/components/components.dart index db2f7d38..55fe6bb5 100644 --- a/packages/pinball_components/lib/src/components/components.dart +++ b/packages/pinball_components/lib/src/components/components.dart @@ -12,6 +12,7 @@ export 'chrome_dino/chrome_dino.dart'; export 'dash_animatronic.dart'; export 'dash_nest_bumper/dash_nest_bumper.dart'; export 'dino_walls.dart'; +export 'error_component.dart'; export 'fire_effect.dart'; export 'flapper/flapper.dart'; export 'flipper.dart'; diff --git a/packages/pinball_components/lib/src/components/error_component.dart b/packages/pinball_components/lib/src/components/error_component.dart new file mode 100644 index 00000000..49be8069 --- /dev/null +++ b/packages/pinball_components/lib/src/components/error_component.dart @@ -0,0 +1,95 @@ +import 'package:flame/components.dart'; +import 'package:flutter/material.dart'; +import 'package:pinball_components/pinball_components.dart'; +import 'package:pinball_ui/pinball_ui.dart'; + +final _boldLabelTextPaint = TextPaint( + style: const TextStyle( + fontSize: 1.8, + color: PinballColors.white, + fontFamily: PinballFonts.pixeloidSans, + fontWeight: FontWeight.w700, + ), +); + +final _labelTextPaint = TextPaint( + style: const TextStyle( + fontSize: 1.8, + color: PinballColors.white, + fontFamily: PinballFonts.pixeloidSans, + fontWeight: FontWeight.w400, + ), +); + +/// {@template error_component} +/// A plain visual component used to show errors for the user. +/// {@endtemplate} +class ErrorComponent extends SpriteComponent with HasGameRef { + /// {@macro error_component} + ErrorComponent({required this.label, Vector2? position}) + : _textPaint = _labelTextPaint, + super( + position: position, + ); + + /// {@macro error_component} + ErrorComponent.bold({required this.label, Vector2? position}) + : _textPaint = _boldLabelTextPaint, + super( + position: position, + ); + + /// Text shown on the error message. + final String label; + final TextPaint _textPaint; + + List _splitInLines() { + final maxWidth = size.x - 8; + final lines = []; + var currentLine = ''; + final words = label.split(' '); + while (words.isNotEmpty) { + final word = words.removeAt(0); + + if (_textPaint.measureTextWidth('$currentLine $word') <= maxWidth) { + currentLine = '$currentLine $word'.trim(); + } else { + lines.add(currentLine); + currentLine = word; + } + } + + lines.add(currentLine); + return lines; + } + + @override + Future onLoad() async { + anchor = Anchor.center; + final sprite = await gameRef.loadSprite( + Assets.images.errorBackground.keyName, + ); + + size = sprite.originalSize / 20; + this.sprite = sprite; + + final lines = _splitInLines(); + + // Calculates vertical offset based on the number of lines of text to be + // displayed. This offset is used to keep the middle of the multi-line text + // at the center of the [ErrorComponent]. + final yOffset = ((size.y / 2.2) / lines.length) * 1.5; + + for (var i = 0; i < lines.length; i++) { + await add( + TextComponent( + position: Vector2(size.x / 2, yOffset + 2.2 * i), + size: Vector2(size.x - 4, 2.2), + text: lines[i], + textRenderer: _textPaint, + anchor: Anchor.center, + ), + ); + } + } +} diff --git a/packages/pinball_components/pubspec.yaml b/packages/pinball_components/pubspec.yaml index 4f66c220..573fe353 100644 --- a/packages/pinball_components/pubspec.yaml +++ b/packages/pinball_components/pubspec.yaml @@ -23,6 +23,8 @@ dependencies: path: ../pinball_flame pinball_theme: path: ../pinball_theme + pinball_ui: + path: ../pinball_ui dev_dependencies: bloc_test: ^9.0.3 @@ -33,6 +35,7 @@ dev_dependencies: very_good_analysis: ^2.4.0 flutter: + uses-material-design: true generate: true fonts: - family: PixeloidSans diff --git a/packages/pinball_components/sandbox/lib/main.dart b/packages/pinball_components/sandbox/lib/main.dart index ccb1b0bc..714bbee5 100644 --- a/packages/pinball_components/sandbox/lib/main.dart +++ b/packages/pinball_components/sandbox/lib/main.dart @@ -8,6 +8,7 @@ void main() { addBallStories(dashbook); addLayerStories(dashbook); addEffectsStories(dashbook); + addErrorComponentStories(dashbook); addFlutterForestStories(dashbook); addSparkyScorchStories(dashbook); addAndroidAcresStories(dashbook); diff --git a/packages/pinball_components/sandbox/lib/stories/error_component/error_component_game.dart b/packages/pinball_components/sandbox/lib/stories/error_component/error_component_game.dart new file mode 100644 index 00000000..c64e6d48 --- /dev/null +++ b/packages/pinball_components/sandbox/lib/stories/error_component/error_component_game.dart @@ -0,0 +1,24 @@ +import 'package:flame/components.dart'; +import 'package:pinball_components/pinball_components.dart'; +import 'package:sandbox/common/common.dart'; + +class ErrorComponentGame extends AssetsGame { + ErrorComponentGame({required this.text}); + + static const description = 'Shows how ErrorComponents are rendered.'; + + final String text; + + @override + Future onLoad() async { + camera.followVector2(Vector2.zero()); + + await add(ErrorComponent(label: text)); + await add( + ErrorComponent.bold( + label: text, + position: Vector2(0, 10), + ), + ); + } +} diff --git a/packages/pinball_components/sandbox/lib/stories/error_component/stories.dart b/packages/pinball_components/sandbox/lib/stories/error_component/stories.dart new file mode 100644 index 00000000..cecd9dae --- /dev/null +++ b/packages/pinball_components/sandbox/lib/stories/error_component/stories.dart @@ -0,0 +1,16 @@ +import 'package:dashbook/dashbook.dart'; +import 'package:sandbox/common/common.dart'; +import 'package:sandbox/stories/error_component/error_component_game.dart'; + +void addErrorComponentStories(Dashbook dashbook) { + dashbook.storiesOf('ErrorComponent').addGame( + title: 'Basic', + description: ErrorComponentGame.description, + gameBuilder: (context) => ErrorComponentGame( + text: context.textProperty( + 'label', + 'Oh no, something went wrong!', + ), + ), + ); +} diff --git a/packages/pinball_components/sandbox/lib/stories/stories.dart b/packages/pinball_components/sandbox/lib/stories/stories.dart index b48770ba..0a514eb9 100644 --- a/packages/pinball_components/sandbox/lib/stories/stories.dart +++ b/packages/pinball_components/sandbox/lib/stories/stories.dart @@ -4,6 +4,7 @@ export 'bottom_group/stories.dart'; export 'boundaries/stories.dart'; export 'dino_desert/stories.dart'; export 'effects/stories.dart'; +export 'error_component/stories.dart'; export 'flutter_forest/stories.dart'; export 'google_word/stories.dart'; export 'launch_ramp/stories.dart'; diff --git a/packages/pinball_components/sandbox/pubspec.lock b/packages/pinball_components/sandbox/pubspec.lock index d2500fbe..a22d42c8 100644 --- a/packages/pinball_components/sandbox/pubspec.lock +++ b/packages/pinball_components/sandbox/pubspec.lock @@ -270,6 +270,13 @@ packages: relative: true source: path version: "1.0.0+1" + pinball_ui: + dependency: transitive + description: + path: "../../pinball_ui" + relative: true + source: path + version: "1.0.0+1" platform: dependency: transitive description: @@ -407,7 +414,7 @@ packages: name: url_launcher url: "https://pub.dartlang.org" source: hosted - version: "6.0.20" + version: "6.1.0" url_launcher_android: dependency: transitive description: diff --git a/packages/pinball_components/test/src/components/error_component_test.dart b/packages/pinball_components/test/src/components/error_component_test.dart new file mode 100644 index 00000000..c50ac629 --- /dev/null +++ b/packages/pinball_components/test/src/components/error_component_test.dart @@ -0,0 +1,57 @@ +// ignore_for_file: cascade_invocations + +import 'package:flame/components.dart'; +import 'package:flame_test/flame_test.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:pinball_components/pinball_components.dart'; + +import '../../helpers/helpers.dart'; + +extension _IterableX on Iterable { + int countTexts(String value) { + return where( + (component) => component is TextComponent && component.text == value, + ).length; + } +} + +void main() { + group('ErrorComponent', () { + TestWidgetsFlutterBinding.ensureInitialized(); + final assets = [ + Assets.images.errorBackground.keyName, + ]; + final flameTester = FlameTester(() => TestGame(assets)); + + flameTester.test('renders correctly', (game) async { + await game.ensureAdd(ErrorComponent(label: 'Error Message')); + final count = game.descendants().countTexts('Error Message'); + + expect(count, equals(1)); + }); + + group('when the text is longer than one line', () { + flameTester.test('renders correctly', (game) async { + await game.ensureAdd( + ErrorComponent( + label: 'Error With A Longer Message', + ), + ); + final count1 = game.descendants().countTexts('Error With A'); + final count2 = game.descendants().countTexts('Longer Message'); + + expect(count1, equals(1)); + expect(count2, equals(1)); + }); + }); + + group('when using the bold font', () { + flameTester.test('renders correctly', (game) async { + await game.ensureAdd(ErrorComponent.bold(label: 'Error Message')); + final count = game.descendants().countTexts('Error Message'); + + expect(count, equals(1)); + }); + }); + }); +}