From 0ed3122dcf3de849ab4c62b558bbcfae84a40f54 Mon Sep 17 00:00:00 2001 From: Arnaud Vergnet Date: Mon, 20 Jul 2020 16:36:16 +0200 Subject: [PATCH] Improved mascot style management --- src/components/Mascot/Mascot.js | 34 +++-- src/components/Mascot/MascotPopup.js | 13 +- src/components/Overrides/CustomIntroSlider.js | 142 +++++++++--------- src/navigation/TabNavigator.js | 4 +- src/screens/Amicale/ProfileScreen.js | 21 +-- src/screens/Game/screens/GameStartScreen.js | 7 +- 6 files changed, 119 insertions(+), 102 deletions(-) diff --git a/src/components/Mascot/Mascot.js b/src/components/Mascot/Mascot.js index 80cf9d3..a88071c 100644 --- a/src/components/Mascot/Mascot.js +++ b/src/components/Mascot/Mascot.js @@ -3,9 +3,10 @@ import * as React from 'react'; import * as Animatable from "react-native-animatable"; import {Image, TouchableWithoutFeedback, View} from "react-native"; +import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet"; type Props = { - size: number, + style?: ViewStyle, emotion: number, animated: boolean, entryAnimation: Animatable.AnimatableProperties | null, @@ -116,9 +117,10 @@ class Mascot extends React.Component { if (this.props.onPress == null) { this.onPress = (viewRef: AnimatableViewRef) => { - if (viewRef.current != null) { + let ref = viewRef.current; + if (ref != null) { this.setState({currentEmotion: MASCOT_STYLE.LOVE}); - viewRef.current.rubberBand(1500).then(() => { + ref.rubberBand(1500).then(() => { this.setState({currentEmotion: this.initialEmotion}); }); @@ -130,9 +132,10 @@ class Mascot extends React.Component { if (this.props.onLongPress == null) { this.onLongPress = (viewRef: AnimatableViewRef) => { - if (viewRef.current != null) { + let ref = viewRef.current; + if (ref != null) { this.setState({currentEmotion: MASCOT_STYLE.ANGRY}); - viewRef.current.tada(1000).then(() => { + ref.tada(1000).then(() => { this.setState({currentEmotion: this.initialEmotion}); }); @@ -153,8 +156,8 @@ class Mascot extends React.Component { position: "absolute", top: "15%", left: 0, - width: this.props.size, - height: this.props.size, + width: "100%", + height: "100%", }} /> } @@ -168,8 +171,8 @@ class Mascot extends React.Component { position: "absolute", top: "15%", left: isRight ? "-11%" : "11%", - width: this.props.size, - height: this.props.size, + width: "100%", + height: "100%", transform: [{rotateY: rotation}] }} /> @@ -181,8 +184,8 @@ class Mascot extends React.Component { key={"container"} style={{ position: "absolute", - width: this.props.size, - height: this.props.size, + width: "100%", + height: "100%", }}/>); if (emotion === MASCOT_STYLE.CUTE) { final.push(this.getEye(EYE_STYLE.CUTE, true)); @@ -217,14 +220,13 @@ class Mascot extends React.Component { } render() { - const size = this.props.size; const entryAnimation = this.props.animated ? this.props.entryAnimation : null; const loopAnimation = this.props.animated ? this.props.loopAnimation : null; return ( @@ -241,8 +243,8 @@ class Mascot extends React.Component { {this.getEyes(this.state.currentEmotion)} diff --git a/src/components/Mascot/MascotPopup.js b/src/components/Mascot/MascotPopup.js index b543b54..dc0df7c 100644 --- a/src/components/Mascot/MascotPopup.js +++ b/src/components/Mascot/MascotPopup.js @@ -160,7 +160,7 @@ class MascotPopup extends React.Component { duration={this.props.visible ? 1500 : 200} > @@ -241,15 +241,16 @@ class MascotPopup extends React.Component { }}> {this.getMascot()} {this.getSpeechBubble()} - + - - - ) - ; + + + ) + ; } else return null; diff --git a/src/components/Overrides/CustomIntroSlider.js b/src/components/Overrides/CustomIntroSlider.js index 712883e..371fe12 100644 --- a/src/components/Overrides/CustomIntroSlider.js +++ b/src/components/Overrides/CustomIntroSlider.js @@ -146,20 +146,27 @@ export default class CustomIntroSlider extends React.Component { - {index !== 0 && index !== this.introSlides.length -1 - ? - - : null} - + }} + emotion={item.mascotStyle} + animated={true} + entryAnimation={{ + animation: "slideInLeft", + duration: 500 + }} + loopAnimation={{ + animation: "pulse", + iterationCount: "infinite", + duration: 2000, + }} + /> : null} { getEndView = () => { return ( - - - + ); } @@ -228,55 +235,52 @@ export default class CustomIntroSlider extends React.Component { getWelcomeView = () => { return ( - - - + - PABLO - - + + - - - + ...styles.center, + transform: [{rotateZ: "70deg"}], + }} + name={"undo"} + color={'#fff'} + size={40}/> + ) } @@ -403,5 +407,5 @@ const styles = StyleSheet.create({ marginBottom: 'auto', marginRight: 'auto', marginLeft: 'auto', - } + }, }); diff --git a/src/navigation/TabNavigator.js b/src/navigation/TabNavigator.js index c0f3614..5705f0f 100644 --- a/src/navigation/TabNavigator.js +++ b/src/navigation/TabNavigator.js @@ -117,8 +117,10 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st }, headerTitle: (props) => { } + left={() => + } titleStyle={{marginLeft: 10}} /> diff --git a/src/screens/Game/screens/GameStartScreen.js b/src/screens/Game/screens/GameStartScreen.js index 80e4390..4d6e45e 100644 --- a/src/screens/Game/screens/GameStartScreen.js +++ b/src/screens/Game/screens/GameStartScreen.js @@ -6,7 +6,7 @@ import type {CustomTheme} from "../../../managers/ThemeManager"; import {Button, Headline, withTheme} from "react-native-paper"; import {View} from "react-native"; import i18n from "i18n-js"; -import {MASCOT_STYLE} from "../../../components/Mascot/Mascot"; +import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot"; import MascotPopup from "../../../components/Mascot/MascotPopup"; import AsyncStorageManager from "../../../managers/AsyncStorageManager"; @@ -36,6 +36,11 @@ class GameStartScreen extends React.Component { render() { return ( + Coucou