76 lines
3.0 KiB
Dart
76 lines
3.0 KiB
Dart
|
import 'package:flutter/material.dart';
|
||
|
|
import 'package:match_magic/models/game_state.dart';
|
||
|
|
import 'package:provider/provider.dart';
|
||
|
|
|
||
|
|
class GameScreen extends StatelessWidget {
|
||
|
|
const GameScreen({Key? key}) : super(key: key);
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
final gameState = context.watch<GameState>();
|
||
|
|
|
||
|
|
return Scaffold(
|
||
|
|
appBar: AppBar(
|
||
|
|
title: const Text('Match Magic'),
|
||
|
|
),
|
||
|
|
body: LayoutBuilder(
|
||
|
|
builder: (context, constraints) {
|
||
|
|
final tileSize = constraints.maxWidth / gameState.cols;
|
||
|
|
|
||
|
|
return Center(
|
||
|
|
child: Container(
|
||
|
|
width: constraints.maxWidth,
|
||
|
|
height: constraints.maxWidth,
|
||
|
|
child: Stack(
|
||
|
|
children: [
|
||
|
|
for (int row = 0; row < gameState.rows; row++)
|
||
|
|
for (int col = 0; col < gameState.cols; col++)
|
||
|
|
AnimatedPositioned(
|
||
|
|
key: ValueKey('${row}_$col${gameState.grid[row][col]}'),
|
||
|
|
duration: const Duration(milliseconds: 300),
|
||
|
|
left: col * tileSize,
|
||
|
|
top: row * tileSize,
|
||
|
|
child: GestureDetector(
|
||
|
|
onTap: () {
|
||
|
|
gameState.selectElement(row, col);
|
||
|
|
},
|
||
|
|
child: AnimatedContainer(
|
||
|
|
duration: const Duration(milliseconds: 300),
|
||
|
|
width: tileSize - 4,
|
||
|
|
height: tileSize - 4,
|
||
|
|
margin: const EdgeInsets.all(2.0),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
border: gameState.selectedRow == row &&
|
||
|
|
gameState.selectedCol == col
|
||
|
|
? Border.all(color: Colors.red, width: 2.0)
|
||
|
|
: null,
|
||
|
|
color: Colors.blue[100],
|
||
|
|
),
|
||
|
|
child: Center(
|
||
|
|
child: AnimatedOpacity(
|
||
|
|
opacity:
|
||
|
|
gameState.grid[row][col] != 0 ? 1.0 : 0.0,
|
||
|
|
duration: const Duration(milliseconds: 300),
|
||
|
|
child: gameState.grid[row][col] != 0
|
||
|
|
? Image.asset(
|
||
|
|
'assets/images/diamond${gameState.grid[row][col]}.png',
|
||
|
|
fit: BoxFit.cover,
|
||
|
|
width: tileSize - 4,
|
||
|
|
height: tileSize - 4,
|
||
|
|
)
|
||
|
|
: const SizedBox.shrink(),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|