Browse Source

Improved game UI

Arnaud Vergnet 3 years ago
parent
commit
4bff6e15a8

+ 3
- 0
locales/en.json View File

@@ -363,6 +363,9 @@
363 363
     },
364 364
     "game": {
365 365
       "title": "Game",
366
+      "score": "Score : %{score}",
367
+      "time": "Time :",
368
+      "level": "Level :",
366 369
       "pause": "Game Paused",
367 370
       "pauseMessage": "The game is paused",
368 371
       "resume": "Resume",

+ 7
- 4
locales/fr.json View File

@@ -361,16 +361,19 @@
361 361
       "homeButtonSubtitle": "Contacte le développeur de l'appli"
362 362
     },
363 363
     "game": {
364
-      "title": "Le jeu trop ouf",
364
+      "title": "Le Jeu trop ouf",
365
+      "score": "Score : %{score}",
366
+      "time": "Temps :",
367
+      "level": "Niveau :",
365 368
       "pause": "Pause",
366
-      "pauseMessage": "Le jeu est en pause",
369
+      "pauseMessage": "T'as fait pause, t'es nul",
367 370
       "resume": "Continuer",
368 371
       "restart": {
369 372
         "text": "Redémarrer",
370
-        "confirm": "Est-tu sûr de vouloir redémarrer ?",
373
+        "confirm": "T'es sûr de vouloir redémarrer ?",
371 374
         "confirmMessage": "Tout ton progrès sera perdu, continuer ?",
372 375
         "confirmYes": "Oui",
373
-        "confirmNo": "Non"
376
+        "confirmNo": "Oula non"
374 377
       },
375 378
       "gameOver": {
376 379
         "text": "Game Over",

+ 2
- 4
src/managers/ThemeManager.js View File

@@ -119,8 +119,7 @@ export default class ThemeManager {
119 119
                 tutorinsaColor: '#f93943',
120 120
 
121 121
                 // Tetris
122
-                tetrisBackground: '#e6e6e6',
123
-                tetrisBorder: '#2f2f2f',
122
+                tetrisBackground: '#f0f0f0',
124 123
                 tetrisScore: '#e2bd33',
125 124
                 tetrisI: '#3cd9e6',
126 125
                 tetrisO: '#ffdd00',
@@ -182,8 +181,7 @@ export default class ThemeManager {
182 181
                 tutorinsaColor: '#f93943',
183 182
 
184 183
                 // Tetris
185
-                tetrisBackground: '#2c2c2c',
186
-                tetrisBorder: '#1b1b1b',
184
+                tetrisBackground: '#181818',
187 185
                 tetrisScore: '#e2d707',
188 186
                 tetrisI: '#30b3be',
189 187
                 tetrisO: '#c1a700',

+ 2
- 3
src/screens/Game/components/CellComponent.js View File

@@ -21,9 +21,8 @@ class CellComponent extends React.PureComponent<Props> {
21 21
                 style={{
22 22
                     flex: 1,
23 23
                     backgroundColor: item.isEmpty ? 'transparent' : item.color,
24
-                    borderColor: item.isEmpty ? 'transparent' : this.props.theme.colors.tetrisBorder,
25
-                    borderStyle: 'solid',
26
-                    borderRadius: 2,
24
+                    borderColor: 'transparent',
25
+                    borderRadius: 4,
27 26
                     borderWidth: 1,
28 27
                     aspectRatio: 1,
29 28
                 }}

+ 4
- 12
src/screens/Game/components/GridComponent.js View File

@@ -5,16 +5,15 @@ import {View} from 'react-native';
5 5
 import {withTheme} from 'react-native-paper';
6 6
 import type {Cell} from "./CellComponent";
7 7
 import CellComponent from "./CellComponent";
8
+import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
8 9
 
9 10
 export type Grid = Array<Array<CellComponent>>;
10 11
 
11 12
 type Props = {
12 13
     grid: Array<Array<Object>>,
13
-    backgroundColor: string,
14 14
     height: number,
15 15
     width: number,
16
-    containerMaxHeight: number | string,
17
-    containerMaxWidth: number | string,
16
+    style: ViewStyle,
18 17
 }
19 18
 
20 19
 class GridComponent extends React.Component<Props> {
@@ -23,10 +22,7 @@ class GridComponent extends React.Component<Props> {
23 22
         let cells = this.props.grid[rowNumber].map(this.getCellRender);
24 23
         return (
25 24
             <View
26
-                style={{
27
-                    flexDirection: 'row',
28
-                    backgroundColor: this.props.backgroundColor,
29
-                }}
25
+                style={{flexDirection: 'row',}}
30 26
                 key={rowNumber.toString()}
31 27
             >
32 28
                 {cells}
@@ -49,12 +45,8 @@ class GridComponent extends React.Component<Props> {
49 45
     render() {
50 46
         return (
51 47
             <View style={{
52
-                flexDirection: 'column',
53
-                maxWidth: this.props.containerMaxWidth,
54
-                maxHeight: this.props.containerMaxHeight,
55 48
                 aspectRatio: this.props.width / this.props.height,
56
-                marginLeft: 'auto',
57
-                marginRight: 'auto',
49
+                ...this.props.style
58 50
             }}>
59 51
                 {this.getGrid()}
60 52
             </View>

+ 7
- 4
src/screens/Game/components/Preview.js View File

@@ -5,9 +5,11 @@ import {View} from 'react-native';
5 5
 import {withTheme} from 'react-native-paper';
6 6
 import type {Grid} from "./GridComponent";
7 7
 import GridComponent from "./GridComponent";
8
+import type {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheet";
8 9
 
9 10
 type Props = {
10 11
     items: Array<Grid>,
12
+    style: ViewStyle
11 13
 }
12 14
 
13 15
 class Preview extends React.PureComponent<Props> {
@@ -25,9 +27,10 @@ class Preview extends React.PureComponent<Props> {
25 27
             width={item[0].length}
26 28
             height={item.length}
27 29
             grid={item}
28
-            containerMaxHeight={50}
29
-            containerMaxWidth={50}
30
-            backgroundColor={'transparent'}
30
+            style={{
31
+                marginRight: 5,
32
+                marginLeft: 5,
33
+            }}
31 34
             key={index.toString()}
32 35
         />;
33 36
     };
@@ -35,7 +38,7 @@ class Preview extends React.PureComponent<Props> {
35 38
     render() {
36 39
         if (this.props.items.length > 0) {
37 40
             return (
38
-                <View>
41
+                <View style={this.props.style}>
39 42
                     {this.getGrids()}
40 43
                 </View>
41 44
             );

+ 149
- 91
src/screens/Game/screens/GameMainScreen.js View File

@@ -2,7 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {View} from 'react-native';
5
-import {IconButton, Text, withTheme} from 'react-native-paper';
5
+import {Caption, IconButton, Text, withTheme} from 'react-native-paper';
6 6
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
7 7
 import GameLogic from "../logic/GameLogic";
8 8
 import type {Grid} from "../components/GridComponent";
@@ -51,7 +51,8 @@ class GameMainScreen extends React.Component<Props, State> {
51 51
             dialogTitle: "",
52 52
             dialogMessage: "",
53 53
             dialogButtons: [],
54
-            onDialogDismiss: () => {},
54
+            onDialogDismiss: () => {
55
+            },
55 56
         };
56 57
         this.props.navigation.addListener('blur', this.onScreenBlur);
57 58
         this.props.navigation.addListener('focus', this.onScreenFocus);
@@ -146,11 +147,11 @@ class GameMainScreen extends React.Component<Props, State> {
146 147
             dialogMessage: i18n.t("screens.game.pauseMessage"),
147 148
             dialogButtons: [
148 149
                 {
149
-                    title:  i18n.t("screens.game.restart.text"),
150
+                    title: i18n.t("screens.game.restart.text"),
150 151
                     onPress: this.showRestartConfirm
151 152
                 },
152 153
                 {
153
-                    title:  i18n.t("screens.game.resume"),
154
+                    title: i18n.t("screens.game.resume"),
154 155
                     onPress: onDismiss
155 156
                 }
156 157
             ],
@@ -165,14 +166,14 @@ class GameMainScreen extends React.Component<Props, State> {
165 166
             dialogMessage: i18n.t("screens.game.restart.confirmMessage"),
166 167
             dialogButtons: [
167 168
                 {
168
-                    title:  i18n.t("screens.game.restart.confirmYes"),
169
+                    title: i18n.t("screens.game.restart.confirmYes"),
169 170
                     onPress: () => {
170 171
                         this.onDialogDismiss();
171 172
                         this.startGame();
172 173
                     }
173 174
                 },
174 175
                 {
175
-                    title:  i18n.t("screens.game.restart.confirmNo"),
176
+                    title: i18n.t("screens.game.restart.confirmNo"),
176 177
                     onPress: this.showPausePopup
177 178
                 }
178 179
             ],
@@ -194,11 +195,11 @@ class GameMainScreen extends React.Component<Props, State> {
194 195
             dialogMessage: message,
195 196
             dialogButtons: [
196 197
                 {
197
-                    title:  i18n.t("screens.game.gameOver.exit"),
198
+                    title: i18n.t("screens.game.gameOver.exit"),
198 199
                     onPress: () => this.props.navigation.goBack()
199 200
                 },
200 201
                 {
201
-                    title:  i18n.t("screens.game.resume"),
202
+                    title: i18n.t("screens.game.resume"),
202 203
                     onPress: onDismiss
203 204
                 }
204 205
             ],
@@ -223,111 +224,168 @@ class GameMainScreen extends React.Component<Props, State> {
223 224
             this.showGameOverConfirm();
224 225
     }
225 226
 
226
-    render() {
227
-        const colors = this.props.theme.colors;
227
+    getStatusIcons() {
228 228
         return (
229 229
             <View style={{
230
-                width: '100%',
231
-                height: '100%',
230
+                flex: 1,
231
+                marginTop: "auto",
232
+                marginBottom: "auto"
232 233
             }}>
233 234
                 <View style={{
234
-                    flexDirection: 'row',
235
-                    position: 'absolute',
236
-                    top: 5,
237
-                    left: 10,
238
-                }}>
239
-                    <MaterialCommunityIcons
240
-                        name={'timer'}
241
-                        color={colors.subtitle}
242
-                        size={20}/>
243
-                    <Text style={{
244
-                        marginLeft: 5,
245
-                        color: colors.subtitle
246
-                    }}>{this.getFormattedTime(this.state.gameTime)}</Text>
247
-                </View>
248
-                <View style={{
249
-                    flexDirection: 'row',
250
-                    position: 'absolute',
251
-                    top: 50,
252
-                    left: 10,
235
+                    marginLeft: 'auto',
236
+                    marginRight: 'auto',
253 237
                 }}>
254
-                    <MaterialCommunityIcons
255
-                        name={'gamepad'}
256
-                        color={colors.text}
257
-                        size={20}/>
258
-                    <Text style={{
259
-                        marginLeft: 5
260
-                    }}>{this.state.gameLevel}</Text>
238
+                    <Caption style={{
239
+                        marginLeft: "auto",
240
+                        marginRight: "auto",
241
+                        marginBottom: 5,
242
+                    }}>{i18n.t("screens.game.time")}</Caption>
243
+                    <View style={{
244
+                        flexDirection: "row"
245
+                    }}>
246
+                        <MaterialCommunityIcons
247
+                            name={'timer'}
248
+                            color={this.props.theme.colors.subtitle}
249
+                            size={20}/>
250
+                        <Text style={{
251
+                            marginLeft: 5,
252
+                            color: this.props.theme.colors.subtitle
253
+                        }}>{this.getFormattedTime(this.state.gameTime)}</Text>
254
+                    </View>
255
+
261 256
                 </View>
262 257
                 <View style={{
263
-                    flexDirection: 'row',
264
-                    marginRight: 'auto',
265 258
                     marginLeft: 'auto',
259
+                    marginRight: 'auto',
260
+                    marginTop: 20,
266 261
                 }}>
267
-                    <MaterialCommunityIcons
268
-                        name={'star'}
269
-                        color={colors.tetrisScore}
270
-                        size={30}/>
271
-                    <Text style={{
272
-                        marginLeft: 5,
273
-                        fontSize: 22,
274
-                    }}>{this.state.gameScore}</Text>
262
+                    <Caption style={{
263
+                        marginLeft: "auto",
264
+                        marginRight: "auto",
265
+                        marginBottom: 5,
266
+                    }}>{i18n.t("screens.game.level")}</Caption>
267
+                    <View style={{
268
+                        flexDirection: "row"
269
+                    }}>
270
+                        <MaterialCommunityIcons
271
+                            name={'gamepad-square'}
272
+                            color={this.props.theme.colors.text}
273
+                            size={20}/>
274
+                        <Text style={{
275
+                            marginLeft: 5
276
+                        }}>{this.state.gameLevel}</Text>
277
+                    </View>
275 278
                 </View>
276
-                <GridComponent
277
-                    width={this.logic.getWidth()}
278
-                    height={this.logic.getHeight()}
279
-                    containerMaxHeight={'80%'}
280
-                    containerMaxWidth={'60%'}
281
-                    grid={this.state.grid}
282
-                    backgroundColor={colors.tetrisBackground}
279
+            </View>
280
+        );
281
+    }
282
+
283
+    getScoreIcon() {
284
+        return (
285
+            <View style={{
286
+                flexDirection: "row",
287
+                marginLeft: "auto",
288
+                marginRight: "auto",
289
+                marginTop: 10,
290
+                marginBottom: 10,
291
+            }}>
292
+                <Text style={{
293
+                    marginLeft: 5,
294
+                    fontSize: 22,
295
+                }}>{i18n.t("screens.game.score", {score: this.state.gameScore})}</Text>
296
+                <MaterialCommunityIcons
297
+                    name={'star'}
298
+                    color={this.props.theme.colors.tetrisScore}
299
+                    size={20}
300
+                style={{
301
+                    marginTop: "auto",
302
+                    marginBottom: "auto",
303
+                    marginLeft: 5
304
+                }}/>
305
+            </View>
306
+        );
307
+    }
308
+
309
+    getControlButtons() {
310
+        return (
311
+            <View style={{
312
+                height: 80,
313
+                flexDirection: "row"
314
+            }}>
315
+                <IconButton
316
+                    icon="rotate-right-variant"
317
+                    size={40}
318
+                    onPress={() => this.logic.rotatePressed(this.updateGrid)}
319
+                    style={{flex: 1}}
283 320
                 />
284 321
                 <View style={{
285
-                    position: 'absolute',
286
-                    top: 50,
287
-                    right: 5,
288
-                }}>
289
-                    <Preview
290
-                        items={this.logic.getNextPiecesPreviews()}
291
-                    />
292
-                </View>
293
-                <View style={{
294
-                    position: 'absolute',
295
-                    bottom: 0,
296 322
                     flexDirection: 'row',
297
-                    width: '100%',
323
+                    flex: 4
298 324
                 }}>
299 325
                     <IconButton
300
-                        icon="rotate-right-variant"
326
+                        icon="chevron-left"
301 327
                         size={40}
302
-                        onPress={() => this.logic.rotatePressed(this.updateGrid)}
303
-                        style={{marginRight: 'auto'}}
304
-                    />
305
-                    <View style={{
306
-                        flexDirection: 'row',
307
-                    }}>
308
-                        <IconButton
309
-                            icon="arrow-left"
310
-                            size={40}
311
-                            onPress={() => this.logic.pressedOut()}
312
-                            onPressIn={() => this.logic.leftPressedIn(this.updateGrid)}
328
+                        style={{flex: 1}}
329
+                        onPress={() => this.logic.pressedOut()}
330
+                        onPressIn={() => this.logic.leftPressedIn(this.updateGrid)}
313 331
 
314
-                        />
315
-                        <IconButton
316
-                            icon="arrow-right"
317
-                            size={40}
318
-                            onPress={() => this.logic.pressedOut()}
319
-                            onPressIn={() => this.logic.rightPressed(this.updateGrid)}
320
-                        />
321
-                    </View>
332
+                    />
322 333
                     <IconButton
323
-                        icon="arrow-down"
334
+                        icon="chevron-right"
324 335
                         size={40}
325
-                        onPressIn={() => this.logic.downPressedIn(this.updateGridScore)}
336
+                        style={{flex: 1}}
326 337
                         onPress={() => this.logic.pressedOut()}
327
-                        style={{marginLeft: 'auto'}}
328
-                        color={colors.tetrisScore}
338
+                        onPressIn={() => this.logic.rightPressed(this.updateGrid)}
329 339
                     />
330 340
                 </View>
341
+                <IconButton
342
+                    icon="arrow-down-bold"
343
+                    size={40}
344
+                    onPressIn={() => this.logic.downPressedIn(this.updateGridScore)}
345
+                    onPress={() => this.logic.pressedOut()}
346
+                    style={{flex: 1}}
347
+                    color={this.props.theme.colors.tetrisScore}
348
+                />
349
+            </View>
350
+        );
351
+    }
352
+
353
+    render() {
354
+        return (
355
+            <View style={{flex: 1}}>
356
+                <View style={{
357
+                    flex: 1,
358
+                    flexDirection: "row",
359
+                }}>
360
+                    {this.getStatusIcons()}
361
+                    <View style={{flex: 4}}>
362
+                        {this.getScoreIcon()}
363
+                        <GridComponent
364
+                            width={this.logic.getWidth()}
365
+                            height={this.logic.getHeight()}
366
+                            grid={this.state.grid}
367
+                            style={{
368
+                                backgroundColor: this.props.theme.colors.tetrisBackground,
369
+                                flex: 1,
370
+                                marginLeft: "auto",
371
+                                marginRight: "auto",
372
+                            }}
373
+                        />
374
+                    </View>
375
+
376
+                    <View style={{flex: 1}}>
377
+                        <Preview
378
+                            items={this.logic.getNextPiecesPreviews()}
379
+                            style={{
380
+                                marginLeft: 'auto',
381
+                                marginRight: 'auto',
382
+                                marginTop: 10,
383
+                            }}
384
+                        />
385
+                    </View>
386
+                </View>
387
+                {this.getControlButtons()}
388
+
331 389
                 <OptionsDialog
332 390
                     visible={this.state.dialogVisible}
333 391
                     title={this.state.dialogTitle}

Loading…
Cancel
Save