From ccf196abaafc170f19ff2919c4de10db5d4d3d3b Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Tue, 21 Jul 2020 22:35:38 +0200
Subject: [PATCH] Fixed duplicate list child key warning

---
 src/screens/Game/components/CellComponent.js |   1 -
 src/screens/Game/components/GridComponent.js |   2 +-
 src/screens/Game/logic/GameLogic.js          |   1 +
 src/screens/Game/screens/GameStartScreen.js  | 116 +++++++++----------
 4 files changed, 56 insertions(+), 64 deletions(-)

diff --git a/src/screens/Game/components/CellComponent.js b/src/screens/Game/components/CellComponent.js
index 27a9557..015d0b1 100644
--- a/src/screens/Game/components/CellComponent.js
+++ b/src/screens/Game/components/CellComponent.js
@@ -26,7 +26,6 @@ class CellComponent extends React.PureComponent<Props> {
                     borderWidth: 1,
                     aspectRatio: 1,
                 }}
-                key={item.key}
             />
         );
     }
diff --git a/src/screens/Game/components/GridComponent.js b/src/screens/Game/components/GridComponent.js
index 497f9e4..9d3a271 100644
--- a/src/screens/Game/components/GridComponent.js
+++ b/src/screens/Game/components/GridComponent.js
@@ -31,7 +31,7 @@ class GridComponent extends React.Component<Props> {
     }
 
     getCellRender = (item: Cell) => {
-        return <CellComponent cell={item}/>;
+        return <CellComponent cell={item} key={item.key}/>;
     };
 
     getGrid() {
diff --git a/src/screens/Game/logic/GameLogic.js b/src/screens/Game/logic/GameLogic.js
index bf5c9e8..d562e6f 100644
--- a/src/screens/Game/logic/GameLogic.js
+++ b/src/screens/Game/logic/GameLogic.js
@@ -109,6 +109,7 @@ export default class GameLogic {
 
     onClock(callback: Function) {
         this.#gameTime++;
+        console.log(this.#gameTime);
         callback(this.#gameTime);
     }
 
diff --git a/src/screens/Game/screens/GameStartScreen.js b/src/screens/Game/screens/GameStartScreen.js
index 37033f4..56ae256 100644
--- a/src/screens/Game/screens/GameStartScreen.js
+++ b/src/screens/Game/screens/GameStartScreen.js
@@ -110,7 +110,7 @@ class GameStartScreen extends React.Component<Props, State> {
                             animation={"fadeInDownBig"}
                             delay={animDelay}
                             duration={animDuration}
-                            key={index.toString()}
+                            key={"piece" + index.toString()}
                             style={{
                                 width: size + "%",
                                 position: "absolute",
@@ -118,21 +118,14 @@ class GameStartScreen extends React.Component<Props, State> {
                                 left: left + "%",
                             }}
                         >
-                            <View style={{
-                                transform: [{rotateZ: rot + "deg"}],
-                            }}>
-                                <GridComponent
-                                    width={4}
-                                    height={4}
-                                    grid={item}
-                                    style={{
-                                        marginRight: 5,
-                                        marginLeft: 5,
-                                        marginBottom: 5,
-                                    }}
-                                />
-                            </View>
-
+                            <GridComponent
+                                width={4}
+                                height={4}
+                                grid={item}
+                                style={{
+                                    transform: [{rotateZ: rot + "deg"}],
+                                }}
+                            />
                         </Animatable.View>
                     );
                 })}
@@ -379,34 +372,33 @@ class GameStartScreen extends React.Component<Props, State> {
 
     getMainContent() {
         return (
-
-                <View style={{flex: 1}}>
-                    {
-                        this.gameStats != null
-                            ? this.getPostGameContent(this.gameStats)
-                            : this.getWelcomeText()
-                    }
-                    <Button
-                        icon={"play"}
-                        mode={"contained"}
-                        onPress={() => this.props.navigation.replace(
-                            "game-main",
-                            {
-                                highScore: this.scores.length > 0
-                                    ? this.scores[0]
-                                    : null
-                            }
-                        )}
-                        style={{
-                            marginLeft: "auto",
-                            marginRight: "auto",
-                            marginTop: 10,
-                        }}
-                    >
-                        {i18n.t("screens.game.play")}
-                    </Button>
-                    {this.getTopScoresRender()}
-                </View>
+            <View style={{flex: 1}}>
+                {
+                    this.gameStats != null
+                        ? this.getPostGameContent(this.gameStats)
+                        : this.getWelcomeText()
+                }
+                <Button
+                    icon={"play"}
+                    mode={"contained"}
+                    onPress={() => this.props.navigation.replace(
+                        "game-main",
+                        {
+                            highScore: this.scores.length > 0
+                                ? this.scores[0]
+                                : null
+                        }
+                    )}
+                    style={{
+                        marginLeft: "auto",
+                        marginRight: "auto",
+                        marginTop: 10,
+                    }}
+                >
+                    {i18n.t("screens.game.play")}
+                </Button>
+                {this.getTopScoresRender()}
+            </View>
         )
     }
 
@@ -425,24 +417,24 @@ class GameStartScreen extends React.Component<Props, State> {
                     start={{x: 0, y: 0}}
                     end={{x: 0, y: 1}}
                 >
-                <ScrollView>
-                    {this.getMainContent()}
-                    <MascotPopup
-                        visible={this.state.mascotDialogVisible}
-                        title={i18n.t("screens.game.mascotDialog.title")}
-                        message={i18n.t("screens.game.mascotDialog.message")}
-                        icon={"gamepad-variant"}
-                        buttons={{
-                            action: null,
-                            cancel: {
-                                message: i18n.t("screens.game.mascotDialog.button"),
-                                icon: "check",
-                                onPress: this.hideMascotDialog,
-                            }
-                        }}
-                        emotion={MASCOT_STYLE.COOL}
-                    />
-                </ScrollView>
+                    <ScrollView>
+                        {this.getMainContent()}
+                        <MascotPopup
+                            visible={this.state.mascotDialogVisible}
+                            title={i18n.t("screens.game.mascotDialog.title")}
+                            message={i18n.t("screens.game.mascotDialog.message")}
+                            icon={"gamepad-variant"}
+                            buttons={{
+                                action: null,
+                                cancel: {
+                                    message: i18n.t("screens.game.mascotDialog.button"),
+                                    icon: "check",
+                                    onPress: this.hideMascotDialog,
+                                }
+                            }}
+                            emotion={MASCOT_STYLE.COOL}
+                        />
+                    </ScrollView>
                 </LinearGradient>
             </View>