Browse Source

Fixed duplicate list child key warning

Arnaud Vergnet 3 years ago
parent
commit
ccf196abaa

+ 0
- 1
src/screens/Game/components/CellComponent.js View File

@@ -26,7 +26,6 @@ class CellComponent extends React.PureComponent<Props> {
26 26
                     borderWidth: 1,
27 27
                     aspectRatio: 1,
28 28
                 }}
29
-                key={item.key}
30 29
             />
31 30
         );
32 31
     }

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

@@ -31,7 +31,7 @@ class GridComponent extends React.Component<Props> {
31 31
     }
32 32
 
33 33
     getCellRender = (item: Cell) => {
34
-        return <CellComponent cell={item}/>;
34
+        return <CellComponent cell={item} key={item.key}/>;
35 35
     };
36 36
 
37 37
     getGrid() {

+ 1
- 0
src/screens/Game/logic/GameLogic.js View File

@@ -109,6 +109,7 @@ export default class GameLogic {
109 109
 
110 110
     onClock(callback: Function) {
111 111
         this.#gameTime++;
112
+        console.log(this.#gameTime);
112 113
         callback(this.#gameTime);
113 114
     }
114 115
 

+ 54
- 62
src/screens/Game/screens/GameStartScreen.js View File

@@ -110,7 +110,7 @@ class GameStartScreen extends React.Component<Props, State> {
110 110
                             animation={"fadeInDownBig"}
111 111
                             delay={animDelay}
112 112
                             duration={animDuration}
113
-                            key={index.toString()}
113
+                            key={"piece" + index.toString()}
114 114
                             style={{
115 115
                                 width: size + "%",
116 116
                                 position: "absolute",
@@ -118,21 +118,14 @@ class GameStartScreen extends React.Component<Props, State> {
118 118
                                 left: left + "%",
119 119
                             }}
120 120
                         >
121
-                            <View style={{
122
-                                transform: [{rotateZ: rot + "deg"}],
123
-                            }}>
124
-                                <GridComponent
125
-                                    width={4}
126
-                                    height={4}
127
-                                    grid={item}
128
-                                    style={{
129
-                                        marginRight: 5,
130
-                                        marginLeft: 5,
131
-                                        marginBottom: 5,
132
-                                    }}
133
-                                />
134
-                            </View>
135
-
121
+                            <GridComponent
122
+                                width={4}
123
+                                height={4}
124
+                                grid={item}
125
+                                style={{
126
+                                    transform: [{rotateZ: rot + "deg"}],
127
+                                }}
128
+                            />
136 129
                         </Animatable.View>
137 130
                     );
138 131
                 })}
@@ -379,34 +372,33 @@ class GameStartScreen extends React.Component<Props, State> {
379 372
 
380 373
     getMainContent() {
381 374
         return (
382
-
383
-                <View style={{flex: 1}}>
384
-                    {
385
-                        this.gameStats != null
386
-                            ? this.getPostGameContent(this.gameStats)
387
-                            : this.getWelcomeText()
388
-                    }
389
-                    <Button
390
-                        icon={"play"}
391
-                        mode={"contained"}
392
-                        onPress={() => this.props.navigation.replace(
393
-                            "game-main",
394
-                            {
395
-                                highScore: this.scores.length > 0
396
-                                    ? this.scores[0]
397
-                                    : null
398
-                            }
399
-                        )}
400
-                        style={{
401
-                            marginLeft: "auto",
402
-                            marginRight: "auto",
403
-                            marginTop: 10,
404
-                        }}
405
-                    >
406
-                        {i18n.t("screens.game.play")}
407
-                    </Button>
408
-                    {this.getTopScoresRender()}
409
-                </View>
375
+            <View style={{flex: 1}}>
376
+                {
377
+                    this.gameStats != null
378
+                        ? this.getPostGameContent(this.gameStats)
379
+                        : this.getWelcomeText()
380
+                }
381
+                <Button
382
+                    icon={"play"}
383
+                    mode={"contained"}
384
+                    onPress={() => this.props.navigation.replace(
385
+                        "game-main",
386
+                        {
387
+                            highScore: this.scores.length > 0
388
+                                ? this.scores[0]
389
+                                : null
390
+                        }
391
+                    )}
392
+                    style={{
393
+                        marginLeft: "auto",
394
+                        marginRight: "auto",
395
+                        marginTop: 10,
396
+                    }}
397
+                >
398
+                    {i18n.t("screens.game.play")}
399
+                </Button>
400
+                {this.getTopScoresRender()}
401
+            </View>
410 402
         )
411 403
     }
412 404
 
@@ -425,24 +417,24 @@ class GameStartScreen extends React.Component<Props, State> {
425 417
                     start={{x: 0, y: 0}}
426 418
                     end={{x: 0, y: 1}}
427 419
                 >
428
-                <ScrollView>
429
-                    {this.getMainContent()}
430
-                    <MascotPopup
431
-                        visible={this.state.mascotDialogVisible}
432
-                        title={i18n.t("screens.game.mascotDialog.title")}
433
-                        message={i18n.t("screens.game.mascotDialog.message")}
434
-                        icon={"gamepad-variant"}
435
-                        buttons={{
436
-                            action: null,
437
-                            cancel: {
438
-                                message: i18n.t("screens.game.mascotDialog.button"),
439
-                                icon: "check",
440
-                                onPress: this.hideMascotDialog,
441
-                            }
442
-                        }}
443
-                        emotion={MASCOT_STYLE.COOL}
444
-                    />
445
-                </ScrollView>
420
+                    <ScrollView>
421
+                        {this.getMainContent()}
422
+                        <MascotPopup
423
+                            visible={this.state.mascotDialogVisible}
424
+                            title={i18n.t("screens.game.mascotDialog.title")}
425
+                            message={i18n.t("screens.game.mascotDialog.message")}
426
+                            icon={"gamepad-variant"}
427
+                            buttons={{
428
+                                action: null,
429
+                                cancel: {
430
+                                    message: i18n.t("screens.game.mascotDialog.button"),
431
+                                    icon: "check",
432
+                                    onPress: this.hideMascotDialog,
433
+                                }
434
+                            }}
435
+                            emotion={MASCOT_STYLE.COOL}
436
+                        />
437
+                    </ScrollView>
446 438
                 </LinearGradient>
447 439
             </View>
448 440
 

Loading…
Cancel
Save