Browse Source

Improved mascot style management

Arnaud Vergnet 3 years ago
parent
commit
0ed3122dcf

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

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

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

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

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

146
                         </View>
146
                         </View>
147
                         <Animatable.View
147
                         <Animatable.View
148
                             animation={"fadeIn"}>
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
                                     style={{
152
                                     style={{
155
                                         marginLeft: 30,
153
                                         marginLeft: 30,
156
                                         marginBottom: 0,
154
                                         marginBottom: 0,
157
                                         width: 100,
155
                                         width: 100,
158
                                         marginTop: -30,
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
                             <View style={{
170
                             <View style={{
164
                                 marginLeft: 50,
171
                                 marginLeft: 50,
165
                                 width: 0,
172
                                 width: 0,
204
     getEndView = () => {
211
     getEndView = () => {
205
         return (
212
         return (
206
             <View style={{flex: 1}}>
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
             </View>
231
             </View>
225
         );
232
         );
226
     }
233
     }
228
     getWelcomeView = () => {
235
     getWelcomeView = () => {
229
         return (
236
         return (
230
             <View style={{flex: 1}}>
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
                         color: "#fff",
256
                         color: "#fff",
249
                         textAlign: "center",
257
                         textAlign: "center",
250
                         fontSize: 25,
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
                         style={{
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
             </View>
284
             </View>
281
         )
285
         )
282
     }
286
     }
403
         marginBottom: 'auto',
407
         marginBottom: 'auto',
404
         marginRight: 'auto',
408
         marginRight: 'auto',
405
         marginLeft: 'auto',
409
         marginLeft: 'auto',
406
-    }
410
+    },
407
 });
411
 });

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

117
                         },
117
                         },
118
                         headerTitle: (props) => <View style={{flexDirection: "row"}}>
118
                         headerTitle: (props) => <View style={{flexDirection: "row"}}>
119
                             <Mascot
119
                             <Mascot
120
+                                style={{
121
+                                    width: 50
122
+                                }}
120
                                 emotion={MASCOT_STYLE.RANDOM}
123
                                 emotion={MASCOT_STYLE.RANDOM}
121
-                                size={50}
122
                                 animated={true}
124
                                 animated={true}
123
                                 entryAnimation={{
125
                                 entryAnimation={{
124
                                     animation: "bounceIn",
126
                                     animation: "bounceIn",

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

158
             <Card style={styles.card}>
158
             <Card style={styles.card}>
159
                 <Card.Title
159
                 <Card.Title
160
                     title={i18n.t("screens.profile.welcomeTitle", {name: this.data.first_name})}
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
                     titleStyle={{marginLeft: 10}}
173
                     titleStyle={{marginLeft: 10}}
171
                 />
174
                 />
172
                 <Card.Content>
175
                 <Card.Content>

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

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

Loading…
Cancel
Save