Browse Source

Improved game start screen

Arnaud Vergnet 3 years ago
parent
commit
4f911ce32d
3 changed files with 119 additions and 8 deletions
  1. 3
    0
      locales/en.json
  2. 4
    1
      locales/fr.json
  3. 112
    7
      src/screens/Game/screens/GameStartScreen.js

+ 3
- 0
locales/en.json View File

@@ -363,6 +363,9 @@
363 363
     },
364 364
     "game": {
365 365
       "title": "Game",
366
+      "welcomeTitle": "Welcome !",
367
+      "welcomeMessage": "Stuck on the toilet? The teacher is late?\nThis game is for you!\n\nTry to get the best score and beat your friends.",
368
+      "play": "Play!",
366 369
       "score": "Score : %{score}",
367 370
       "time": "Time :",
368 371
       "level": "Level :",

+ 4
- 1
locales/fr.json View File

@@ -361,7 +361,10 @@
361 361
       "homeButtonSubtitle": "Contacte le développeur de l'appli"
362 362
     },
363 363
     "game": {
364
-      "title": "Le Jeu trop ouf",
364
+      "title": "Jeu trop ouf",
365
+      "welcomeTitle": "Bienvenue !",
366
+      "welcomeMessage": "Coincé sur les WC ? Le prof est pas là ?\nCe jeu est fait pour toi !\n\nEssaie d'avoir le meilleur score et de battre tes amis.",
367
+      "play": "Jouer !",
365 368
       "score": "Score : %{score}",
366 369
       "time": "Temps :",
367 370
       "level": "Niveau :",

+ 112
- 7
src/screens/Game/screens/GameStartScreen.js View File

@@ -3,12 +3,17 @@
3 3
 import * as React from "react";
4 4
 import {StackNavigationProp} from "@react-navigation/stack";
5 5
 import type {CustomTheme} from "../../../managers/ThemeManager";
6
-import {Button, Headline, withTheme} from "react-native-paper";
6
+import {Button, Card, Divider, Headline, Paragraph, withTheme} from "react-native-paper";
7 7
 import {View} from "react-native";
8 8
 import i18n from "i18n-js";
9 9
 import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
10 10
 import MascotPopup from "../../../components/Mascot/MascotPopup";
11 11
 import AsyncStorageManager from "../../../managers/AsyncStorageManager";
12
+import type {Grid} from "../components/GridComponent";
13
+import GridComponent from "../components/GridComponent";
14
+import GridManager from "../logic/GridManager";
15
+import Piece from "../logic/Piece";
16
+import * as Animatable from "react-native-animatable";
12 17
 
13 18
 type Props = {
14 19
     navigation: StackNavigationProp,
@@ -21,10 +26,17 @@ type State = {
21 26
 
22 27
 class GameStartScreen extends React.Component<Props, State> {
23 28
 
29
+    gridManager: GridManager;
30
+
24 31
     state = {
25 32
         mascotDialogVisible: AsyncStorageManager.getInstance().preferences.gameStartShowBanner.current === "1",
26 33
     }
27 34
 
35
+    constructor(props: Props) {
36
+        super(props);
37
+        this.gridManager = new GridManager(4, 4, props.theme);
38
+    }
39
+
28 40
     hideMascotDialog = () => {
29 41
         AsyncStorageManager.getInstance().savePref(
30 42
             AsyncStorageManager.getInstance().preferences.gameStartShowBanner.key,
@@ -33,20 +45,113 @@ class GameStartScreen extends React.Component<Props, State> {
33 45
         this.setState({mascotDialogVisible: false})
34 46
     };
35 47
 
36
-    render() {
48
+    getPiecesBackground() {
49
+        let gridList = [];
50
+        for (let i = 0; i < 18; i++) {
51
+            gridList.push(this.gridManager.getEmptyGrid(4, 4));
52
+            const piece = new Piece(this.props.theme);
53
+            piece.toGrid(gridList[i], true);
54
+        }
37 55
         return (
38
-            <View style={{flex: 1}}>
39
-                <Mascot emotion={MASCOT_STYLE.NORMAL} style={{
40
-                    width: "50%",
56
+            <View style={{
57
+                position: "absolute",
58
+                width: "100%",
59
+                height: "100%",
60
+            }}>
61
+                {gridList.map((item: Grid, index: number) => {
62
+                    const size = 10 + Math.floor(Math.random() * 30);
63
+                    const top = Math.floor(Math.random() * 100);
64
+                    const rot = Math.floor(Math.random() * 360);
65
+                    const left = (index % 6) * 20;
66
+                    const animDelay = size * 20;
67
+                    const animDuration = 2 * (2000 - (size * 30));
68
+                    return (
69
+                        <Animatable.View
70
+                            animation={"fadeInDownBig"}
71
+                            delay={animDelay}
72
+                            duration={animDuration}
73
+                            key={index.toString()}
74
+                            style={{
75
+                                width: size + "%",
76
+                                position: "absolute",
77
+                                top: top + "%",
78
+                                left: left + "%",
79
+                            }}
80
+                        >
81
+                            <View style={{
82
+                                transform: [{rotateZ: rot + "deg"}],
83
+                            }}>
84
+                                <GridComponent
85
+                                    width={4}
86
+                                    height={4}
87
+                                    grid={item}
88
+                                    style={{
89
+                                        marginRight: 5,
90
+                                        marginLeft: 5,
91
+                                        marginBottom: 5,
92
+                                    }}
93
+                                />
94
+                            </View>
95
+
96
+                        </Animatable.View>
97
+                    );
98
+                })}
99
+            </View>
100
+
101
+        );
102
+    }
103
+
104
+    getWelcomeText() {
105
+        return (
106
+            <View>
107
+                <Mascot emotion={MASCOT_STYLE.COOL} style={{
108
+                    width: "40%",
41 109
                     marginLeft: "auto",
42 110
                     marginRight: "auto",
43 111
                 }}/>
44
-                <Headline style={{textAlign: "center"}}>Coucou</Headline>
112
+                <Card style={{
113
+                    marginLeft: 10,
114
+                    marginRight: 10,
115
+                }}>
116
+                    <Card.Content>
117
+                        <Headline
118
+                            style={{
119
+                                textAlign: "center",
120
+                                color: this.props.theme.colors.primary
121
+                            }}>
122
+                            {i18n.t("screens.game.welcomeTitle")}
123
+                        </Headline>
124
+                        <Divider/>
125
+                        <Paragraph
126
+                            style={{
127
+                                textAlign: "center",
128
+                                marginTop: 10,
129
+                            }}>
130
+                            {i18n.t("screens.game.welcomeMessage")}
131
+                        </Paragraph>
132
+                    </Card.Content>
133
+                </Card>
134
+
135
+            </View>
136
+        );
137
+    }
138
+
139
+    render() {
140
+        return (
141
+            <View style={{flex: 1}}>
142
+                {this.getPiecesBackground()}
143
+                {this.getWelcomeText()}
45 144
                 <Button
145
+                    icon={"play"}
46 146
                     mode={"contained"}
47 147
                     onPress={() => this.props.navigation.navigate("game-main")}
148
+                    style={{
149
+                        marginLeft: "auto",
150
+                        marginRight: "auto",
151
+                        marginTop: 10,
152
+                    }}
48 153
                 >
49
-                    PLAY
154
+                    {i18n.t("screens.game.play")}
50 155
                 </Button>
51 156
                 <MascotPopup
52 157
                     visible={this.state.mascotDialogVisible}

Loading…
Cancel
Save