Skip to content
Snippets Groups Projects
Commit b51c139d authored by Benoît Harrault's avatar Benoît Harrault
Browse files

Improve layout, add images

parent 2b44d72c
No related branches found
No related tags found
1 merge request!14Resolve "Improve layout, add images"
Pipeline #4810 passed
Showing with 166 additions and 41 deletions
org.gradle.jvmargs=-Xmx1536M org.gradle.jvmargs=-Xmx1536M
android.useAndroidX=true android.useAndroidX=true
android.enableJetifier=true android.enableJetifier=true
app.versionName=0.0.13 app.versionName=0.0.14
app.versionCode=13 app.versionCode=14
assets/images/blank.png

197 B

assets/images/left-foot.png

6.05 KiB

assets/images/left-hand.png

4.28 KiB

assets/images/right-foot.png

6.05 KiB

assets/images/right-hand.png

4.22 KiB

Improve layout, add images.
Amélioration de l'affichage, ajout d'images.
<?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"/>
#! /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
<?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>
<?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>
<?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>
<?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>
import 'package:audioplayers/audioplayers.dart'; import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:unicons/unicons.dart';
import 'package:twister/cubit/game_cubit.dart'; import 'package:twister/cubit/game_cubit.dart';
import 'package:twister/models/move.dart'; import 'package:twister/models/move.dart';
...@@ -17,10 +16,13 @@ class Game extends StatefulWidget { ...@@ -17,10 +16,13 @@ class Game extends StatefulWidget {
class _GameState extends State<Game> { class _GameState extends State<Game> {
final player = AudioPlayer(); final player = AudioPlayer();
Widget pickNewMove() { @override
return BlocBuilder<GameCubit, GameState>(builder: (BuildContext context, GameState state) { Widget build(BuildContext context) {
return TextButton( return BlocBuilder<GameCubit, GameState>(
onPressed: () { builder: (BuildContext context, GameState gameState) {
return GestureDetector(
child: ShowMove(move: gameState.move ?? Move.createNull()),
onTap: () {
Move newMove = Move.pickRandom(); Move newMove = Move.pickRandom();
BlocProvider.of<GameCubit>(context).setValues( BlocProvider.of<GameCubit>(context).setValues(
...@@ -29,20 +31,6 @@ class _GameState extends State<Game> { ...@@ -29,20 +31,6 @@ class _GameState extends State<Game> {
player.play(AssetSource(newMove.toSoundAsset())); 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(),
],
); );
}, },
); );
......
...@@ -26,7 +26,13 @@ class ShowMove extends StatelessWidget { ...@@ -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( TextStyle style = TextStyle(
color: Colors.black, color: Colors.black,
fontSize: 30, fontSize: 30,
...@@ -47,23 +53,39 @@ class ShowMove extends StatelessWidget { ...@@ -47,23 +53,39 @@ class ShowMove extends StatelessWidget {
} }
} }
@override Widget buildWidget(Move move, double maxWidth) {
Widget build(BuildContext context) {
Color color = getColor(move); Color color = getColor(move);
return Container( double containerSize = maxWidth * 0.8;
child: Padding(
padding: EdgeInsets.all(20), return AnimatedSwitcher(
child: getWidget(move), 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( decoration: BoxDecoration(
color: color, color: color,
borderRadius: BorderRadius.all(Radius.circular(50)), borderRadius: BorderRadius.all(Radius.circular(containerSize)),
border: Border.all( border: Border.all(
color: color.darken(20), color: color.darken(15),
width: 10, width: 15,
), ),
), ),
child: getImageWidget(move),
),
);
}
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final double maxWidth = constraints.maxWidth;
return buildWidget(move, maxWidth);
},
); );
} }
} }
...@@ -3,7 +3,7 @@ description: twister game companion ...@@ -3,7 +3,7 @@ description: twister game companion
publish_to: 'none' publish_to: 'none'
version: 0.0.13+13 version: 0.0.14+14
environment: environment:
sdk: '^3.0.0' sdk: '^3.0.0'
...@@ -23,6 +23,7 @@ dependencies: ...@@ -23,6 +23,7 @@ dependencies:
flutter: flutter:
uses-material-design: false uses-material-design: false
assets: assets:
- assets/images/
- assets/translations/ - assets/translations/
- assets/voices/ - assets/voices/
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment