Intial pass on collection screen

This commit is contained in:
Shawn 2022-10-27 10:24:28 -06:00
parent 630a7a38e5
commit b5157d14ce
3 changed files with 121 additions and 94 deletions

View File

@ -76,26 +76,27 @@ class _CollectionScreenState extends State<CollectionScreen> with GetItStateMixi
return ColoredBox( return ColoredBox(
color: $styles.colors.greyStrong, color: $styles.colors.greyStrong,
child: Stack(children: [ child: Column(
Positioned.fill( children: [
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Expanded(
SimpleHeader($strings.collectionTitleCollection), child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
_NewlyDiscoveredRow(count: discovered, onPressed: _scrollToTarget), SimpleHeader($strings.collectionTitleCollection),
_CollectionList( _NewlyDiscoveredRow(count: discovered, onPressed: _scrollToTarget),
states: _states, Flexible(
fromId: widget.fromId, child: _CollectionList(
scrollKey: _scrollKey, states: _states,
scrollWonder: scrollWonder, fromId: widget.fromId,
onPressed: (o) => _showDetails(context, o), scrollKey: _scrollKey,
onReset: discovered + explored > 0 ? _handleReset : null, scrollWonder: scrollWonder,
), onPressed: (o) => _showDetails(context, o),
]), onReset: discovered + explored > 0 ? _handleReset : null,
), ),
Positioned.fill( ),
top: null, ]),
child: _CollectionFooter(count: discovered + explored, total: total), ),
), _CollectionFooter(count: discovered + explored, total: total),
]), ],
),
); );
} }
} }

View File

@ -10,27 +10,33 @@ class _CollectionFooter extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Stack(children: [ return Stack(children: [
Transform.translate( // TODO SB: Maybe restore this gradient? Need to come up with alternate approach since list can now scroll horizontally
offset: Offset(0, -$styles.insets.xl), // Transform.translate(
child: VtGradient( // offset: Offset(0, -$styles.insets.xl),
[$styles.colors.greyStrong.withOpacity(0), $styles.colors.greyStrong], // child: VtGradient(
const [0, 1], // [$styles.colors.greyStrong.withOpacity(0), $styles.colors.greyStrong],
height: $styles.insets.xl, // const [0, 1],
), // height: $styles.insets.xl,
), // ),
// ),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.md, vertical: $styles.insets.sm), padding: EdgeInsets.symmetric(horizontal: $styles.insets.md, vertical: $styles.insets.sm),
color: $styles.colors.greyStrong, color: $styles.colors.greyStrong,
child: SafeArea( child: SafeArea(
top: false, top: false,
child: Column( child: Center(
crossAxisAlignment: CrossAxisAlignment.stretch, child: SizedBox(
children: [ width: $styles.sizes.maxContentWidth1,
_buildProgressRow(context), child: Column(
Gap($styles.insets.sm), crossAxisAlignment: CrossAxisAlignment.stretch,
_buildProgressBar(context), children: [
Gap($styles.insets.sm), _buildProgressRow(context),
], Gap($styles.insets.sm),
_buildProgressBar(context),
Gap($styles.insets.sm),
],
),
),
), ),
), ),
) )

View File

@ -22,70 +22,90 @@ class _CollectionList extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
List<WonderData> wonders = wondersLogic.all; List<WonderData> wonders = wondersLogic.all;
List<Widget> children = []; bool vtMode = context.isLandscape == false;
for (int i = 0; i < wonders.length; i++) { // Create list of collections that is shared by both hz and vt layouts
WonderData data = wonders[i]; List<Widget> collections = [
children.add(_buildCategoryTitle(context, data, data.type == scrollWonder ? scrollKey : null)); ...wonders.map((d) {
children.add(Gap($styles.insets.md)); return _buildSingleCollection(
children.add(_buildCollectibleRow(context, data.type, states)); context,
children.add(Gap($styles.insets.xl)); height: vtMode ? 300 : 400,
} width: vtMode ? null : 600,
data: d,
);
}).toList()
];
// Scroll view adapts to scroll vertically or horizontally
return SingleChildScrollView(
scrollDirection: vtMode ? Axis.vertical : Axis.horizontal,
child: Padding(
padding: EdgeInsets.all($styles.insets.lg),
child: vtMode
? SeparatedColumn(
mainAxisSize: MainAxisSize.min,
separatorBuilder: () => Gap($styles.insets.lg),
children: collections,
)
: SeparatedRow(
separatorBuilder: () => Gap($styles.insets.xl * 2),
mainAxisSize: MainAxisSize.min,
children: collections,
),
),
);
}
children.add(_buildResetBtn(context)); Widget _buildSingleCollection(BuildContext context, {double? width, double? height, required WonderData data}) {
List<CollectibleData> collectibles = collectiblesLogic.forWonder(data.type);
return Flexible( return Center(
child: RepaintBoundary( child: SizedBox(
child: ScrollDecorator.shadow( width: width ?? double.infinity,
builder: (controller) => SingleChildScrollView( height: height ?? double.infinity,
controller: controller, child: Column(
padding: EdgeInsets.all($styles.insets.md).copyWith(bottom: $styles.insets.offset * 2.5), mainAxisAlignment: MainAxisAlignment.center,
child: Column( children: [
children: children, /// Title
Text(
data.title.toUpperCase(),
key: data.type == scrollWonder ? scrollKey : null,
textAlign: TextAlign.left,
style: $styles.text.title1.copyWith(color: $styles.colors.offWhite),
), ),
), Gap($styles.insets.md),
/// Images
Expanded(
child: SeparatedRow(
separatorBuilder: () => Gap($styles.insets.sm),
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
...collectibles.map((e) {
int state = states[e.id] ?? CollectibleState.lost;
return Flexible(
child: _CollectionTile(
collectible: e,
state: state,
onPressed: onPressed,
heroTag: e.id == fromId ? 'collectible_image_$fromId' : null,
),
);
}).toList()
]),
)
],
), ),
), ),
); );
} }
Widget _buildCategoryTitle(BuildContext context, WonderData data, Key? key) { // TODO: Restore reset functionality somehow
return Text( // Widget _buildResetBtn(BuildContext context) {
data.title.toUpperCase(), // Widget btn = AppBtn.from(
textAlign: TextAlign.left, // onPressed: onReset ?? () {},
key: key, // text: $strings.collectionButtonReset,
style: $styles.text.title1.copyWith(color: $styles.colors.offWhite), // isSecondary: true,
); // expand: true,
} // );
// return AnimatedOpacity(opacity: onReset == null ? 0.25 : 1, duration: $styles.times.fast, child: btn);
Widget _buildCollectibleRow(BuildContext context, WonderType wonder, Map<String, int> states) { // }
final double height = $styles.insets.lg * 6;
List<CollectibleData> list = collectiblesLogic.forWonder(wonder);
if (list.isEmpty) return Container(height: height, color: $styles.colors.black);
List<Widget> children = [];
for (int i = 0; i < list.length; i++) {
if (i > 0) children.add(Gap($styles.insets.md));
CollectibleData collectible = list[i];
int state = states[collectible.id] ?? CollectibleState.lost;
children.add(Flexible(
child: _CollectionTile(
collectible: collectible,
state: state,
onPressed: onPressed,
heroTag: collectible.id == fromId ? 'collectible_image_$fromId' : null,
),
));
}
return SizedBox(height: height, child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: children));
}
Widget _buildResetBtn(BuildContext context) {
Widget btn = AppBtn.from(
onPressed: onReset ?? () {},
text: $strings.collectionButtonReset,
isSecondary: true,
expand: true,
);
return AnimatedOpacity(opacity: onReset == null ? 0.25 : 1, duration: $styles.times.fast, child: btn);
}
} }