Browse Source

Improved mascot style management

Arnaud Vergnet 3 years ago
parent
commit
0ed3122dcf

+ 18
- 16
src/components/Mascot/Mascot.js View File

@@ -3,9 +3,10 @@
3 3
 import * as React from 'react';
4 4
 import * as Animatable from "react-native-animatable";
5 5
 import {Image, TouchableWithoutFeedback, View} from "react-native";
6
+import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
6 7
 
7 8
 type Props = {
8
-    size: number,
9
+    style?: ViewStyle,
9 10
     emotion: number,
10 11
     animated: boolean,
11 12
     entryAnimation: Animatable.AnimatableProperties | null,
@@ -116,9 +117,10 @@ class Mascot extends React.Component<Props, State> {
116 117
 
117 118
         if (this.props.onPress == null) {
118 119
             this.onPress = (viewRef: AnimatableViewRef) => {
119
-                if (viewRef.current != null) {
120
+                let ref = viewRef.current;
121
+                if (ref != null) {
120 122
                     this.setState({currentEmotion: MASCOT_STYLE.LOVE});
121
-                    viewRef.current.rubberBand(1500).then(() => {
123
+                    ref.rubberBand(1500).then(() => {
122 124
                         this.setState({currentEmotion: this.initialEmotion});
123 125
                     });
124 126
 
@@ -130,9 +132,10 @@ class Mascot extends React.Component<Props, State> {
130 132
 
131 133
         if (this.props.onLongPress == null) {
132 134
             this.onLongPress = (viewRef: AnimatableViewRef) => {
133
-                if (viewRef.current != null) {
135
+                let ref = viewRef.current;
136
+                if (ref != null) {
134 137
                     this.setState({currentEmotion: MASCOT_STYLE.ANGRY});
135
-                    viewRef.current.tada(1000).then(() => {
138
+                    ref.tada(1000).then(() => {
136 139
                         this.setState({currentEmotion: this.initialEmotion});
137 140
                     });
138 141
 
@@ -153,8 +156,8 @@ class Mascot extends React.Component<Props, State> {
153 156
                 position: "absolute",
154 157
                 top: "15%",
155 158
                 left: 0,
156
-                width: this.props.size,
157
-                height: this.props.size,
159
+                width: "100%",
160
+                height: "100%",
158 161
             }}
159 162
         />
160 163
     }
@@ -168,8 +171,8 @@ class Mascot extends React.Component<Props, State> {
168 171
                 position: "absolute",
169 172
                 top: "15%",
170 173
                 left: isRight ? "-11%" : "11%",
171
-                width: this.props.size,
172
-                height: this.props.size,
174
+                width: "100%",
175
+                height: "100%",
173 176
                 transform: [{rotateY: rotation}]
174 177
             }}
175 178
         />
@@ -181,8 +184,8 @@ class Mascot extends React.Component<Props, State> {
181 184
             key={"container"}
182 185
             style={{
183 186
                 position: "absolute",
184
-                width: this.props.size,
185
-                height: this.props.size,
187
+                width: "100%",
188
+                height: "100%",
186 189
             }}/>);
187 190
         if (emotion === MASCOT_STYLE.CUTE) {
188 191
             final.push(this.getEye(EYE_STYLE.CUTE, true));
@@ -217,14 +220,13 @@ class Mascot extends React.Component<Props, State> {
217 220
     }
218 221
 
219 222
     render() {
220
-        const size = this.props.size;
221 223
         const entryAnimation = this.props.animated ? this.props.entryAnimation : null;
222 224
         const loopAnimation = this.props.animated ? this.props.loopAnimation : null;
223 225
         return (
224 226
             <Animatable.View
225 227
                 style={{
226
-                    width: size,
227
-                    height: size,
228
+                    aspectRatio: 1,
229
+                    ...this.props.style
228 230
                 }}
229 231
                 {...entryAnimation}
230 232
             >
@@ -241,8 +243,8 @@ class Mascot extends React.Component<Props, State> {
241 243
                             <Image
242 244
                                 source={MASCOT_IMAGE}
243 245
                                 style={{
244
-                                    width: size,
245
-                                    height: size,
246
+                                    width: "100%",
247
+                                    height:"100%",
246 248
                                 }}
247 249
                             />
248 250
                             {this.getEyes(this.state.currentEmotion)}

+ 7
- 6
src/components/Mascot/MascotPopup.js View File

@@ -160,7 +160,7 @@ class MascotPopup extends React.Component<Props, State> {
160 160
                 duration={this.props.visible ? 1500 : 200}
161 161
             >
162 162
                 <Mascot
163
-                    size={this.mascotSize}
163
+                    style={{width: this.mascotSize}}
164 164
                     animated={true}
165 165
                     emotion={this.props.emotion}
166 166
                 />
@@ -241,15 +241,16 @@ class MascotPopup extends React.Component<Props, State> {
241 241
                     }}>
242 242
                         <View style={{
243 243
                             marginTop: -80,
244
+                            width: "100%"
244 245
                         }}>
245 246
                             {this.getMascot()}
246 247
                             {this.getSpeechBubble()}
247
-                    </View>
248
+                        </View>
248 249
 
249
-                </View>
250
-        </Portal>
251
-        )
252
-            ;
250
+                    </View>
251
+                </Portal>
252
+            )
253
+                ;
253 254
         } else
254 255
             return null;
255 256
 

+ 73
- 69
src/components/Overrides/CustomIntroSlider.js View File

@@ -146,20 +146,27 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
146 146
                         </View>
147 147
                         <Animatable.View
148 148
                             animation={"fadeIn"}>
149
-                            {index !== 0 && index !== this.introSlides.length -1
150
-                                ? <Animatable.View
151
-                                    animation={"pulse"}
152
-                                    iterationCount={"infinite"}
153
-                                    duration={2000}
149
+                            {index !== 0 && index !== this.introSlides.length - 1
150
+                                ?
151
+                                <Mascot
154 152
                                     style={{
155 153
                                         marginLeft: 30,
156 154
                                         marginBottom: 0,
157 155
                                         width: 100,
158 156
                                         marginTop: -30,
159
-                                    }}>
160
-                                    <Mascot emotion={item.mascotStyle} size={100}/>
161
-                                </Animatable.View> : null}
162
-
157
+                                    }}
158
+                                    emotion={item.mascotStyle}
159
+                                    animated={true}
160
+                                    entryAnimation={{
161
+                                        animation: "slideInLeft",
162
+                                        duration: 500
163
+                                    }}
164
+                                    loopAnimation={{
165
+                                        animation: "pulse",
166
+                                        iterationCount: "infinite",
167
+                                        duration: 2000,
168
+                                    }}
169
+                                /> : null}
163 170
                             <View style={{
164 171
                                 marginLeft: 50,
165 172
                                 width: 0,
@@ -204,23 +211,23 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
204 211
     getEndView = () => {
205 212
         return (
206 213
             <View style={{flex: 1}}>
207
-                <View
208
-                    style={styles.center}>
209
-                    <Mascot
210
-                        size={250}
211
-                        emotion={MASCOT_STYLE.COOL}
212
-                        animated={true}
213
-                        entryAnimation={{
214
-                            animation: "slideInDown",
215
-                            duration: 2000,
216
-                        }}
217
-                        loopAnimation={{
218
-                            animation: "pulse",
219
-                            duration: 2000,
220
-                            iterationCount: "infinite"
221
-                        }}
222
-                    />
223
-                </View>
214
+                <Mascot
215
+                    style={{
216
+                        ...styles.center,
217
+                        height: "80%"
218
+                    }}
219
+                    emotion={MASCOT_STYLE.COOL}
220
+                    animated={true}
221
+                    entryAnimation={{
222
+                        animation: "slideInDown",
223
+                        duration: 2000,
224
+                    }}
225
+                    loopAnimation={{
226
+                        animation: "pulse",
227
+                        duration: 2000,
228
+                        iterationCount: "infinite"
229
+                    }}
230
+                />
224 231
             </View>
225 232
         );
226 233
     }
@@ -228,55 +235,52 @@ export default class CustomIntroSlider extends React.Component<Props, State> {
228 235
     getWelcomeView = () => {
229 236
         return (
230 237
             <View style={{flex: 1}}>
231
-                <View
232
-                    style={styles.center}>
233
-                    <Mascot
234
-                        size={250}
235
-                        emotion={MASCOT_STYLE.NORMAL}
236
-                        animated={true}
237
-                        entryAnimation={{
238
-                            animation: "bounceIn",
239
-                            duration: 2000,
240
-                        }}
241
-                    />
242
-                    <Animatable.Text
243
-                        useNativeDriver={true}
244
-                        animation={"fadeInUp"}
245
-                        duration={500}
238
+                <Mascot
239
+                    style={{
240
+                        ...styles.center,
241
+                        height: "80%"
242
+                    }}
243
+                    emotion={MASCOT_STYLE.NORMAL}
244
+                    animated={true}
245
+                    entryAnimation={{
246
+                        animation: "bounceIn",
247
+                        duration: 2000,
248
+                    }}
249
+                />
250
+                <Animatable.Text
251
+                    useNativeDriver={true}
252
+                    animation={"fadeInUp"}
253
+                    duration={500}
246 254
 
247
-                        style={{
255
+                    style={{
248 256
                         color: "#fff",
249 257
                         textAlign: "center",
250 258
                         fontSize: 25,
251 259
                     }}>
252
-                        PABLO
253
-                    </Animatable.Text>
254
-                    <Animatable.View
255
-                        useNativeDriver={true}
256
-                        animation={"fadeInUp"}
257
-                        duration={500}
258
-                        delay={200}
260
+                    PABLO
261
+                </Animatable.Text>
262
+                <Animatable.View
263
+                    useNativeDriver={true}
264
+                    animation={"fadeInUp"}
265
+                    duration={500}
266
+                    delay={200}
259 267
 
268
+                    style={{
269
+                        position: "absolute",
270
+                        bottom: 30,
271
+                        right: "20%",
272
+                        width: 50,
273
+                        height: 50,
274
+                    }}>
275
+                    <MaterialCommunityIcons
260 276
                         style={{
261
-                            position: "absolute",
262
-                            top: 210,
263
-                            left: 160,
264
-                            width: 50,
265
-                            height: 50,
266
-                        }}>
267
-                        <MaterialCommunityIcons
268
-                            style={{
269
-                                marginLeft: "auto",
270
-                                marginRight: "auto",
271
-                                marginTop: "auto",
272
-                                marginBottom: "auto",
273
-                                transform: [{rotateZ: "70deg"}],
274
-                            }}
275
-                            name={"undo"}
276
-                            color={'#fff'}
277
-                            size={40}/>
278
-                    </Animatable.View>
279
-                </View>
277
+                            ...styles.center,
278
+                            transform: [{rotateZ: "70deg"}],
279
+                        }}
280
+                        name={"undo"}
281
+                        color={'#fff'}
282
+                        size={40}/>
283
+                </Animatable.View>
280 284
             </View>
281 285
         )
282 286
     }
@@ -403,5 +407,5 @@ const styles = StyleSheet.create({
403 407
         marginBottom: 'auto',
404 408
         marginRight: 'auto',
405 409
         marginLeft: 'auto',
406
-    }
410
+    },
407 411
 });

+ 3
- 1
src/navigation/TabNavigator.js View File

@@ -117,8 +117,10 @@ function HomeStackComponent(initialRoute: string | null, defaultData: { [key: st
117 117
                         },
118 118
                         headerTitle: (props) => <View style={{flexDirection: "row"}}>
119 119
                             <Mascot
120
+                                style={{
121
+                                    width: 50
122
+                                }}
120 123
                                 emotion={MASCOT_STYLE.RANDOM}
121
-                                size={50}
122 124
                                 animated={true}
123 125
                                 entryAnimation={{
124 126
                                     animation: "bounceIn",

+ 12
- 9
src/screens/Amicale/ProfileScreen.js View File

@@ -158,15 +158,18 @@ class ProfileScreen extends React.Component<Props, State> {
158 158
             <Card style={styles.card}>
159 159
                 <Card.Title
160 160
                     title={i18n.t("screens.profile.welcomeTitle", {name: this.data.first_name})}
161
-                    left={() => <Mascot
162
-                        emotion={MASCOT_STYLE.COOL}
163
-                        size={60}
164
-                        animated={true}
165
-                        entryAnimation={{
166
-                            animation: "bounceIn",
167
-                            duration: 1000
168
-                        }}
169
-                    />}
161
+                    left={() =>
162
+                        <Mascot
163
+                            style={{
164
+                                width: 60
165
+                            }}
166
+                            emotion={MASCOT_STYLE.COOL}
167
+                            animated={true}
168
+                            entryAnimation={{
169
+                                animation: "bounceIn",
170
+                                duration: 1000
171
+                            }}
172
+                        />}
170 173
                     titleStyle={{marginLeft: 10}}
171 174
                 />
172 175
                 <Card.Content>

+ 6
- 1
src/screens/Game/screens/GameStartScreen.js View File

@@ -6,7 +6,7 @@ import type {CustomTheme} from "../../../managers/ThemeManager";
6 6
 import {Button, Headline, withTheme} from "react-native-paper";
7 7
 import {View} from "react-native";
8 8
 import i18n from "i18n-js";
9
-import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
9
+import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
10 10
 import MascotPopup from "../../../components/Mascot/MascotPopup";
11 11
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
12 12
 
@@ -36,6 +36,11 @@ class GameStartScreen extends React.Component<Props, State> {
36 36
     render() {
37 37
         return (
38 38
             <View style={{flex: 1}}>
39
+                <Mascot emotion={MASCOT_STYLE.NORMAL} style={{
40
+                    width: "50%",
41
+                    marginLeft: "auto",
42
+                    marginRight: "auto",
43
+                }}/>
39 44
                 <Headline style={{textAlign: "center"}}>Coucou</Headline>
40 45
                 <Button
41 46
                     mode={"contained"}

Loading…
Cancel
Save