Improved home screen layout

locales/en.json

@@ -95,6 +95,7 @@
     },
     "home": {
       "title": "Campus",
+      "feedTitle": "Amicale's News",
       "feed": "Details",
       "dashboard": {
         "seeMore": "Click to see more",

locales/fr.json

@@ -95,6 +95,7 @@
     },
     "home": {
       "title": "Campus",
+      "feedTitle": "News de l'Amicale",
       "feed": "Détails",
       "dashboard": {
         "seeMore": "Clique pour plus d'infos",

src/components/Home/SmallDashboardItem.js

@@ -39,8 +39,8 @@ class SmallDashboardItem extends React.Component<Props> {
                     onPress={this.props.onPress}
                     borderless={true}
                     style={{
-                        marginLeft: this.itemSize / 4,
+                        marginLeft: this.itemSize / 6,
-                        marginRight: this.itemSize / 4,
+                        marginRight: this.itemSize / 6,
                     }}
                 >
                     <View style={{
@@ -50,8 +50,12 @@ class SmallDashboardItem extends React.Component<Props> {
                         <Image
                             source={{uri: props.image}}
                             style={{
-                                width: "100%",
+                                width: "80%",
-                                height: "100%",
+                                height: "80%",
+                                marginLeft: "auto",
+                                marginRight: "auto",
+                                marginTop: "auto",
+                                marginBottom: "auto",
                             }}
                         />
                         {

src/screens/Game/components/CellComponent.js

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

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() {

src/screens/Game/logic/GameLogic.js

@@ -205,11 +205,15 @@ export default class GameLogic {
         }
     }
 
-    endGame(isRestart: boolean) {
+    stopGame() {
         this.#gameRunning = false;
         this.#gamePaused = false;
         clearInterval(this.#gameTickInterval);
         clearInterval(this.#gameTimeInterval);
+    }
+
+    endGame(isRestart: boolean) {
+        this.stopGame();
         this.endCallback(this.#gameTime, this.#scoreManager.getScore(), isRestart);
     }
 

src/screens/Game/screens/GameMainScreen.js

@@ -67,6 +67,10 @@ class GameMainScreen extends React.Component<Props, State> {
         this.startGame();
     }
 
+    componentWillUnmount() {
+        this.logic.stopGame();
+    }
+
     getRightButton = () => {
         return <MaterialHeaderButtons>
             <Item title="pause" iconName="pause" onPress={this.togglePause}/>
@@ -168,32 +172,6 @@ class GameMainScreen extends React.Component<Props, State> {
         });
     }
 
-    showGameOverConfirm() {
-        let message = i18n.t("screens.game.gameOver.score") + this.state.gameScore + '\n';
-        message += i18n.t("screens.game.gameOver.level") + this.state.gameLevel + '\n';
-        message += i18n.t("screens.game.gameOver.time") + this.getFormattedTime(this.state.gameTime) + '\n';
-        const onDismiss = () => {
-            this.onDialogDismiss();
-            this.startGame();
-        };
-        this.setState({
-            dialogVisible: true,
-            dialogTitle: i18n.t("screens.game.gameOver.text"),
-            dialogMessage: message,
-            dialogButtons: [
-                {
-                    title: i18n.t("screens.game.gameOver.exit"),
-                    onPress: () => this.props.navigation.goBack()
-                },
-                {
-                    title: i18n.t("screens.game.resume"),
-                    onPress: onDismiss
-                }
-            ],
-            onDialogDismiss: onDismiss,
-        });
-    }
-
     startGame = () => {
         this.logic.startGame(this.onTick, this.onClock, this.onGameEnd);
         this.setState({

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={{
+                            <GridComponent
-                                transform: [{rotateZ: rot + "deg"}],
+                                width={4}
-                            }}>
+                                height={4}
-                                <GridComponent
+                                grid={item}
-                                    width={4}
+                                style={{
-                                    height={4}
+                                    transform: [{rotateZ: rot + "deg"}],
-                                    grid={item}
+                                }}
-                                    style={{
+                            />
-                                        marginRight: 5,
-                                        marginLeft: 5,
-                                        marginBottom: 5,
-                                    }}
-                                />
-                            </View>
-
                         </Animatable.View>
                     );
                 })}
@@ -379,43 +372,33 @@ class GameStartScreen extends React.Component<Props, State> {
 
     getMainContent() {
         return (
-            <LinearGradient
+            <View style={{flex: 1}}>
-                style={{flex: 1}}
+                {
-                colors={[
+                    this.gameStats != null
-                    this.props.theme.colors.background + "00",
+                        ? this.getPostGameContent(this.gameStats)
-                    this.props.theme.colors.background
+                        : this.getWelcomeText()
-                ]}
+                }
-                start={{x: 0, y: 0.1}}
+                <Button
-                end={{x: 0.1, y: 1}}
+                    icon={"play"}
-            >
+                    mode={"contained"}
-                <View style={{flex: 1}}>
+                    onPress={() => this.props.navigation.replace(
-                    {
+                        "game-main",
-                        this.gameStats != null
+                        {
-                            ? this.getPostGameContent(this.gameStats)
+                            highScore: this.scores.length > 0
-                            : this.getWelcomeText()
+                                ? this.scores[0]
-                    }
+                                : null
-                    <Button
+                        }
-                        icon={"play"}
+                    )}
-                        mode={"contained"}
+                    style={{
-                        onPress={() => this.props.navigation.replace(
+                        marginLeft: "auto",
-                            "game-main",
+                        marginRight: "auto",
-                            {
+                        marginTop: 10,
-                                highScore: this.scores.length > 0
+                    }}
-                                    ? this.scores[0]
+                >
-                                    : null
+                    {i18n.t("screens.game.play")}
-                            }
+                </Button>
-                        )}
+                {this.getTopScoresRender()}
-                        style={{
+            </View>
-                            marginLeft: "auto",
-                            marginRight: "auto",
-                            marginTop: 10,
-                        }}
-                    >
-                        {i18n.t("screens.game.play")}
-                    </Button>
-                    {this.getTopScoresRender()}
-                </View>
-            </LinearGradient>
         )
     }
 
@@ -425,24 +408,34 @@ class GameStartScreen extends React.Component<Props, State> {
         return (
             <View style={{flex: 1}}>
                 {this.getPiecesBackground()}
-                <ScrollView>
+                <LinearGradient
-                    {this.getMainContent()}
+                    style={{flex: 1}}
-                    <MascotPopup
+                    colors={[
-                        visible={this.state.mascotDialogVisible}
+                        this.props.theme.colors.background + "00",
-                        title={i18n.t("screens.game.mascotDialog.title")}
+                        this.props.theme.colors.background
-                        message={i18n.t("screens.game.mascotDialog.message")}
+                    ]}
-                        icon={"gamepad-variant"}
+                    start={{x: 0, y: 0}}
-                        buttons={{
+                    end={{x: 0, y: 1}}
-                            action: null,
+                >
-                            cancel: {
+                    <ScrollView>
-                                message: i18n.t("screens.game.mascotDialog.button"),
+                        {this.getMainContent()}
-                                icon: "check",
+                        <MascotPopup
-                                onPress: this.hideMascotDialog,
+                            visible={this.state.mascotDialogVisible}
-                            }
+                            title={i18n.t("screens.game.mascotDialog.title")}
-                        }}
+                            message={i18n.t("screens.game.mascotDialog.message")}
-                        emotion={MASCOT_STYLE.COOL}
+                            icon={"gamepad-variant"}
-                    />
+                            buttons={{
-                </ScrollView>
+                                action: null,
+                                cancel: {
+                                    message: i18n.t("screens.game.mascotDialog.button"),
+                                    icon: "check",
+                                    onPress: this.hideMascotDialog,
+                                }
+                            }}
+                            emotion={MASCOT_STYLE.COOL}
+                        />
+                    </ScrollView>
+                </LinearGradient>
             </View>
 
         );

src/screens/Home/HomeScreen.js

@@ -5,9 +5,9 @@ import {FlatList} from 'react-native';
 import i18n from "i18n-js";
 import DashboardItem from "../../components/Home/EventDashboardItem";
 import WebSectionList from "../../components/Screens/WebSectionList";
-import {withTheme} from 'react-native-paper';
+import {Headline, withTheme} from 'react-native-paper';
 import FeedItem from "../../components/Home/FeedItem";
-import SquareDashboardItem from "../../components/Home/SmallDashboardItem";
+import SmallDashboardItem from "../../components/Home/SmallDashboardItem";
 import PreviewEventDashboardItem from "../../components/Home/PreviewEventDashboardItem";
 import {stringToDate} from "../../utils/Planning";
 import ActionsDashBoardItem from "../../components/Home/ActionsDashboardItem";
@@ -228,7 +228,7 @@ class HomeScreen extends React.Component<Props, State> {
                 id: SECTIONS_ID[0]
             },
             {
-                title: '',
+                title: i18n.t("screens.home.feedTitle"),
                 data: this.currentNewFeed,
                 id: SECTIONS_ID[1]
             }
@@ -434,7 +434,7 @@ class HomeScreen extends React.Component<Props, State> {
      */
     dashboardRowRenderItem = ({item}: { item: DashboardItem }) => {
         return (
-            <SquareDashboardItem
+            <SmallDashboardItem
                 image={item.image}
                 onPress={item.onPress}
                 badgeCount={this.currentDashboard != null && item.badgeFunction != null
@@ -460,7 +460,8 @@ class HomeScreen extends React.Component<Props, State> {
                 contentContainerStyle={{
                     marginLeft: 'auto',
                     marginRight: 'auto',
-                    marginTop: 5,
+                    marginTop: 10,
+                    marginBottom: 10,
                 }}
             />);
     }
@@ -510,6 +511,21 @@ class HomeScreen extends React.Component<Props, State> {
             this.fabRef.current.onScroll(event);
     };
 
+    renderSectionHeader = (data: { [key: string]: any }) => {
+        if (data.section.title !== "")
+            return (
+                <Headline style={{
+                    textAlign: "center",
+                    marginTop: 50,
+                    marginBottom: 10,
+                }}>
+                    {data.section.title}
+                </Headline>
+            )
+        else
+            return null;
+    }
+
     /**
      * Callback when pressing the login button on the banner.
      * This hides the banner and takes the user to the login page.
@@ -539,6 +555,7 @@ class HomeScreen extends React.Component<Props, State> {
                         itemHeight={FEED_ITEM_HEIGHT}
                         onScroll={this.onScroll}
                         showError={false}
+                        renderSectionHeader={this.renderSectionHeader}
                     />
                 </View>
                 <MascotPopup