Merge branch '17-improve-layout-add-images' into 'master'

Resolve "Improve layout, add images"

Closes #17

See merge request !14

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=0.0.13
-app.versionCode=13
+app.versionName=0.0.14
+app.versionCode=14

fastlane/metadata/android/en-US/changelogs/14.txt

+Improve layout, add images.

fastlane/metadata/android/fr-FR/changelogs/14.txt

+Amélioration de l'affichage, ajout d'images.

images/blank.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" version="1.1" viewBox="0 0 1.707 1.707" xmlns="http://www.w3.org/2000/svg"/>

images/build_game_images.sh

+#! /bin/bash
+
+# Check dependencies
+command -v inkscape >/dev/null 2>&1 || { echo >&2 "I require inkscape but it's not installed. Aborting."; exit 1; }
+command -v scour >/dev/null 2>&1 || { echo >&2 "I require scour but it's not installed. Aborting."; exit 1; }
+command -v optipng >/dev/null 2>&1 || { echo >&2 "I require optipng but it's not installed. Aborting."; exit 1; }
+
+CURRENT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" >/dev/null 2>&1 && pwd)"
+BASE_DIR="$(dirname "${CURRENT_DIR}")"
+ASSETS_DIR="${BASE_DIR}/assets"
+
+OPTIPNG_OPTIONS="-preserve -quiet -o7"
+ICON_SIZE=512
+
+#######################################################
+
+# Game images
+AVAILABLE_GAME_IMAGES="
+  blank
+  left-hand
+  right-hand
+  left-foot
+  right-foot
+"
+#######################################################
+
+# optimize svg
+function optimize_svg() {
+  SOURCE="$1"
+
+  cp ${SOURCE} ${SOURCE}.tmp
+  scour \
+      --remove-descriptive-elements \
+      --enable-id-stripping \
+      --enable-viewboxing \
+      --enable-comment-stripping \
+      --nindent=4 \
+      --quiet \
+      -i ${SOURCE}.tmp \
+      -o ${SOURCE}
+  rm ${SOURCE}.tmp
+}
+
+# build icons
+function build_icon() {
+  SOURCE="$1"
+  TARGET="$2"
+
+  echo "Building ${TARGET}"
+
+  if [ ! -f "${SOURCE}" ]; then
+    echo "Missing file: ${SOURCE}"
+    exit 1
+  fi
+
+  optimize_svg "${SOURCE}"
+
+  inkscape \
+      --export-width=${ICON_SIZE} \
+      --export-height=${ICON_SIZE} \
+      --export-filename=${TARGET} \
+      ${SOURCE}
+
+  optipng ${OPTIPNG_OPTIONS} ${TARGET}
+}
+
+#######################################################
+
+# Create output folder
+mkdir -p ${ASSETS_DIR}/images
+
+# Delete existing generated images
+find ${ASSETS_DIR}/images -type f -name "*.png" -delete
+
+# build game images
+for GAME_IMAGE in ${AVAILABLE_GAME_IMAGES}
+do
+  build_icon ${CURRENT_DIR}/${GAME_IMAGE}.svg ${ASSETS_DIR}/images/${GAME_IMAGE}.png
+done
+

images/left-foot.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" version="1.1" viewBox="0 0 1.707 1.707" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(-.018646 0 0 .018646 1.7858 -.078555)">
+        <path d="m60.3 28.6c-2.7-1.4-5.7-2.5-8.7-3.2-6.4-1.4-14.2 0.1-17.9 5.9-3.5 5.5-1.6 11.6 1.8 16.6 2.6 4 6.9 8 7.4 13 0.1 1.5-0.2 3-0.8 4.3-1.5 3.2-2.7 7-3 10.6-0.7 7.5 6.5 15.8 14.3 13.9 3.3-0.8 6.5-3.3 8.5-7.3 1.3-2.6 2.1-5.7 2.9-8.5 2-6.6 2.9-13.5 3.5-20.3 0.6-6.9 1.4-14.5-2.2-20-1.3-2-3.1-3.7-5.8-5z"/>
+        <ellipse cx="67.5" cy="26.8" rx="2.8" ry="4.2"/>
+        <ellipse cx="61.4" cy="21.6" rx="2.9" ry="4.3"/>
+        <ellipse cx="54.3" cy="18.7" rx="3.3" ry="5"/>
+        <ellipse cx="45.9" cy="17.4" rx="3.8" ry="5.6"/>
+        <ellipse cx="35.1" cy="18.1" rx="5.4" ry="8.1"/>
+    </g>
+</svg>

images/left-hand.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" version="1.1" viewBox="0 0 1.707 1.707" xmlns="http://www.w3.org/2000/svg">
+    <path d="m0.46238 0.46639v0.68163a0.34131 0.34131 0 0 0 0.66514 0.10834 0.68839 0.68839 0 0 1 0.056047-0.12444l0.12961-0.22463a0.085326 0.085326 0 1 0-0.1477-0.085477l-0.093031 0.16042v-0.59079a0.065997 0.065997 0 0 0-0.077923-0.065002 0.067985 0.067985 0 0 0-0.0539 0.067983v0.39062a0.013716 0.013716 0 0 1-0.013714 0.013892 0.013716 0.013716 0 0 1-0.013713-0.013892v-0.50153a0.066196 0.066196 0 0 0-0.079312-0.065002 0.067985 0.067985 0 0 0-0.053662 0.067983v0.49855a0.013915 0.013915 0 0 1-0.013892 0.013892 0.013716 0.013716 0 0 1-0.013713-0.013892v-0.42957a0.065997 0.065997 0 0 0-0.077726-0.065002 0.067985 0.067985 0 0 0-0.0539 0.067983v0.42659a0.013716 0.013716 0 0 1-0.013713 0.013892 0.013716 0.013716 0 0 1-0.013714-0.013892v-0.32164a0.066196 0.066196 0 0 0-0.077726-0.065002 0.067985 0.067985 0 0 0-0.053483 0.067983z" stroke-width=".019878"/>
+</svg>

images/right-foot.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" version="1.1" viewBox="0 0 1.707 1.707" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(.018646 0 0 .018646 -.078787 -.078555)">
+        <path d="m60.3 28.6c-2.7-1.4-5.7-2.5-8.7-3.2-6.4-1.4-14.2 0.1-17.9 5.9-3.5 5.5-1.6 11.6 1.8 16.6 2.6 4 6.9 8 7.4 13 0.1 1.5-0.2 3-0.8 4.3-1.5 3.2-2.7 7-3 10.6-0.7 7.5 6.5 15.8 14.3 13.9 3.3-0.8 6.5-3.3 8.5-7.3 1.3-2.6 2.1-5.7 2.9-8.5 2-6.6 2.9-13.5 3.5-20.3 0.6-6.9 1.4-14.5-2.2-20-1.3-2-3.1-3.7-5.8-5z"/>
+        <ellipse cx="67.5" cy="26.8" rx="2.8" ry="4.2"/>
+        <ellipse cx="61.4" cy="21.6" rx="2.9" ry="4.3"/>
+        <ellipse cx="54.3" cy="18.7" rx="3.3" ry="5"/>
+        <ellipse cx="45.9" cy="17.4" rx="3.8" ry="5.6"/>
+        <ellipse cx="35.1" cy="18.1" rx="5.4" ry="8.1"/>
+    </g>
+</svg>

images/right-hand.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" version="1.1" viewBox="0 0 1.707 1.707" xmlns="http://www.w3.org/2000/svg">
+    <path d="m1.2446 0.46639v0.68163a0.34131 0.34131 0 0 1-0.66514 0.10834 0.68839 0.68839 0 0 0-0.056047-0.12444l-0.12961-0.22463a0.085326 0.085326 0 1 1 0.1477-0.085477l0.093031 0.16042v-0.59079a0.065997 0.065997 0 0 1 0.077923-0.065002 0.067985 0.067985 0 0 1 0.0539 0.067983v0.39062a0.013716 0.013716 0 0 0 0.013714 0.013892 0.013716 0.013716 0 0 0 0.013714-0.013892v-0.50153a0.066196 0.066196 0 0 1 0.079312-0.065002 0.067985 0.067985 0 0 1 0.053662 0.067983v0.49855a0.013915 0.013915 0 0 0 0.013892 0.013892 0.013716 0.013716 0 0 0 0.013713-0.013892v-0.42957a0.065997 0.065997 0 0 1 0.077726-0.065002 0.067985 0.067985 0 0 1 0.0539 0.067983v0.42659a0.013716 0.013716 0 0 0 0.013713 0.013892 0.013716 0.013716 0 0 0 0.013714-0.013892v-0.32164a0.066196 0.066196 0 0 1 0.077726-0.065002 0.067985 0.067985 0 0 1 0.053483 0.067983z" stroke-width=".019878"/>
+</svg>

lib/ui/widgets/game.dart

 import 'package:audioplayers/audioplayers.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:unicons/unicons.dart';
 
 import 'package:twister/cubit/game_cubit.dart';
 import 'package:twister/models/move.dart';
@@ -17,10 +16,13 @@ class Game extends StatefulWidget {
 class _GameState extends State<Game> {
   final player = AudioPlayer();
 
-  Widget pickNewMove() {
-    return BlocBuilder<GameCubit, GameState>(builder: (BuildContext context, GameState state) {
-      return TextButton(
-        onPressed: () {
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<GameCubit, GameState>(
+      builder: (BuildContext context, GameState gameState) {
+        return GestureDetector(
+          child: ShowMove(move: gameState.move ?? Move.createNull()),
+          onTap: () {
             Move newMove = Move.pickRandom();
 
             BlocProvider.of<GameCubit>(context).setValues(
@@ -29,20 +31,6 @@ class _GameState extends State<Game> {
 
             player.play(AssetSource(newMove.toSoundAsset()));
           },
-        child: Icon(UniconsSolid.refresh),
-      );
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocBuilder<GameCubit, GameState>(
-      builder: (context, gameState) {
-        return Column(
-          children: [
-            ShowMove(move: gameState.move ?? Move.createNull()),
-            pickNewMove(),
-          ],
         );
       },
     );

lib/ui/widgets/show_move.dart

@@ -26,7 +26,13 @@ class ShowMove extends StatelessWidget {
     }
   }
 
-  Widget getWidget(Move move) {
+  Widget getImageWidget(Move move) {
+    String imageAsset = 'assets/images/' + (move.member?.toString() ?? 'blank') + '.png';
+
+    return Image.asset(imageAsset);
+  }
+
+  Widget getTextWidget(Move move) {
     TextStyle style = TextStyle(
       color: Colors.black,
       fontSize: 30,
@@ -47,23 +53,39 @@ class ShowMove extends StatelessWidget {
     }
   }
 
-  @override
-  Widget build(BuildContext context) {
+  Widget buildWidget(Move move, double maxWidth) {
     Color color = getColor(move);
 
-    return Container(
-      child: Padding(
-        padding: EdgeInsets.all(20),
-        child: getWidget(move),
-      ),
+    double containerSize = maxWidth * 0.8;
+
+    return AnimatedSwitcher(
+      duration: const Duration(milliseconds: 200),
+      transitionBuilder: (Widget child, Animation<double> animation) {
+        return ScaleTransition(child: child, scale: animation);
+      },
+      child: Container(
+        width: containerSize,
+        height: containerSize,
         decoration: BoxDecoration(
           color: color,
-        borderRadius: BorderRadius.all(Radius.circular(50)),
+          borderRadius: BorderRadius.all(Radius.circular(containerSize)),
           border: Border.all(
-          color: color.darken(20),
-          width: 10,
+            color: color.darken(15),
+            width: 15,
           ),
         ),
+        child: getImageWidget(move),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final double maxWidth = constraints.maxWidth;
+        return buildWidget(move, maxWidth);
+      },
     );
   }
 }

pubspec.yaml

@@ -3,7 +3,7 @@ description: twister game companion
 
 publish_to: 'none'
 
-version: 0.0.13+13
+version: 0.0.14+14
 
 environment:
   sdk: '^3.0.0'
@@ -23,6 +23,7 @@ dependencies:
 flutter:
   uses-material-design: false
   assets:
+    - assets/images/
     - assets/translations/
     - assets/voices/