game_pick_image.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../provider/data.dart';
import '../utils/random_pick_data.dart';

class GamePickImagePage extends StatelessWidget {
  int _countWords = 4;
  int _countImages = 1;

  Future<void> startGame(Data myProvider, String lang) async {
    await resetGame(myProvider);
    myProvider.updateLang = lang;
    await nextWord(myProvider);
  }

  Future<void> resetGame(Data myProvider) async {
    myProvider.updateLang = '';
    myProvider.updateQuestionsCount = 0;
    myProvider.updateGoodAnswers = 0;
    myProvider.updateWrongAnswers = 0;
    myProvider.updateWord = null;
    myProvider.updateImages = null;
  }

  Future<void> nextWord(Data myProvider) async {
    await pickData(myProvider);
    myProvider.updateQuestionsCount = myProvider.questionsCount + 1;
  }

  Future<void> pickData(Data myProvider) async {
    List words;
    RandomPickData randomPickData;
    Map word;

    int attempts = 0;
    do {
      randomPickData = RandomPickData();
      await randomPickData.init(myProvider.lang, _countWords, _countImages);

      if (randomPickData.words != null) {
        words = randomPickData.words;
        word = words.take(1).toList()[0];
      }
      attempts++;
    } while (attempts < 3);

    if ((words != null) && (words.length == _countWords)) {
      myProvider.updateWord = word;
      myProvider.updateImages = words;
    }
  }

  Future<void> checkWord(Data myProvider, word) async {
    if (myProvider.word['key'] == word['key']) {
      myProvider.updateGoodAnswers = myProvider.goodAnswers + 1;
      nextWord(myProvider);
    } else {
      myProvider.updateWrongAnswers = myProvider.wrongAnswers + 1;
    }
  }

  Container _buildScoreItemContainer(String text, Color blockColor) {
    Color backgroundColor = blockColor;

    // Darken block color to get border color
    double amount = 0.2;
    final hsl = HSLColor.fromColor(blockColor);
    final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));
    Color borderColor = hslDark.toColor();

    return Container(
      margin: EdgeInsets.symmetric(horizontal: 15),
      padding: EdgeInsets.all(5),
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(4),
        border: Border.all(
          color: borderColor,
          width: 4,
        ),
      ),
      child: Text(
        text,
        style: TextStyle(
          fontSize: 25,
          fontWeight: FontWeight.w600,
          color: Colors.black,
        ),
      ),
    );
  }

  Container _buildScoreContainer(Data myProvider) {
    return Container(
      padding: EdgeInsets.all(5),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _buildScoreItemContainer(
            '❓ ' + myProvider.questionsCount.toString(),
            Colors.white,
          ),
          SizedBox(width: 20),
          _buildScoreItemContainer(
            '☺️ ' + myProvider.goodAnswers.toString(),
            Colors.green,
          ),
          SizedBox(width: 20),
          _buildScoreItemContainer(
            '😟 ' + myProvider.wrongAnswers.toString(),
            Colors.orange,
          ),
        ],
      ),
    );
  }

  Container _buildImageContainer(Data myProvider, Map word) {
    double imageSize = 130;

    String imageAsset = 'assets/placeholder.png';
    if ((word['images'] != null) && (word['images'][0] != null)) {
        imageAsset = 'assets/images/'+word['images'][0];
    }

    return Container(
      child: FlatButton(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(
              color: Colors.blue[200],
              width: 8,
            ),
          ),
          margin: EdgeInsets.all(2),
          child: Image(
            image: AssetImage(imageAsset),
            width: imageSize,
            height: imageSize,
            fit: BoxFit.fill
          ),
        ),
        onPressed: () { checkWord(myProvider, word); },
      ),
    );
  }

  Column _buildImageItemsBlock(Data myProvider) {
    List words = myProvider.images;

    if ((words == null) || (words.length != _countWords)) {
      return Column();
    }

    words.sort((a, b) => a['key'].compareTo(b['key']));

    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildImageContainer(myProvider, words[0]),
            _buildImageContainer(myProvider, words[1]),
          ],
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildImageContainer(myProvider, words[2]),
            _buildImageContainer(myProvider, words[3]),
          ],
        )
      ],
    );
  }

  Column _buildTextItemBlock(Data myProvider) {
    Map word = myProvider.word;

    if (word == null) {
      return Column();
    }

    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          margin: EdgeInsets.all(2),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(6),
            border: Border.all(
              color: Colors.white,
              width: 6,
            ),
          ),
          child: RaisedButton(
            padding: EdgeInsets.all(15),
            child: Text(
              word != null ? word[myProvider.lang] : '',
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.w600,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ],
    );
  }

  Column _buildStartGameBlock(Data myProvider) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          child: RaisedButton(
            color: Colors.teal,
            padding: EdgeInsets.all(35),
            child: Text(
              "🇫🇷",
              style: TextStyle(
                fontSize: 60,
                color: Colors.black,
              ),
            ),
            onPressed: () => startGame(myProvider, 'fr'),
          ),
        ),
        SizedBox(height: 15),
        Container(
          child: RaisedButton(
            color: Colors.teal,
            padding: EdgeInsets.all(35),
            child: Text(
              "🇬🇧",
              style: TextStyle(
                fontSize: 60,
                color: Colors.black,
              ),
            ),
            onPressed: () => startGame(myProvider, 'en'),
          ),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    Data _myProvider = Provider.of<Data>(context);

    Scaffold pageContent = Scaffold(
      appBar: AppBar(
        elevation: 0,
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.loop),
            onPressed: () => resetGame(_myProvider),
          ),
        ],
      ),
      backgroundColor: Colors.blue,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            _buildTextItemBlock(_myProvider),
            SizedBox(height: 2),
            ((_myProvider.word == null) || (_myProvider.word['key'] == '')) ?
            _buildStartGameBlock(_myProvider) :
            _buildScoreContainer(_myProvider),
            SizedBox(height: 2),
            _buildImageItemsBlock(_myProvider),
          ],
        ),
      ),
    );

    return SizedBox.expand(
      child: Container(
        child: FittedBox(
          fit: BoxFit.contain,
          alignment: Alignment.center,
          child: SizedBox(
            height: (MediaQuery.of(context).size.height),
            width: (MediaQuery.of(context).size.width),
            child: pageContent,
          )
        )
      )
    );
  }
}