Browse Source

Replaced game alert by paper dialog

Arnaud Vergnet 3 years ago
parent
commit
fdf0fffabc

+ 2
- 1
src/components/Dialogs/AlertDialog.js View File

@@ -2,6 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
5
+import i18n from "i18n-js";
5 6
 
6 7
 type Props = {
7 8
     visible: boolean,
@@ -23,7 +24,7 @@ class AlertDialog extends React.PureComponent<Props> {
23 24
                         <Paragraph>{this.props.message}</Paragraph>
24 25
                     </Dialog.Content>
25 26
                     <Dialog.Actions>
26
-                        <Button onPress={this.props.onDismiss}>OK</Button>
27
+                        <Button onPress={this.props.onDismiss}>{i18n.t("dialog.ok")}</Button>
27 28
                     </Dialog.Actions>
28 29
                 </Dialog>
29 30
             </Portal>

+ 56
- 0
src/components/Dialogs/OptionsDialog.js View File

@@ -0,0 +1,56 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Button, Dialog, Paragraph, Portal} from 'react-native-paper';
5
+import {FlatList} from "react-native";
6
+
7
+export type OptionsDialogButton = {
8
+    title: string,
9
+    onPress: () => void,
10
+}
11
+
12
+type Props = {
13
+    visible: boolean,
14
+    title: string,
15
+    message: string,
16
+    buttons: Array<OptionsDialogButton>,
17
+    onDismiss: () => void,
18
+}
19
+
20
+class OptionsDialog extends React.PureComponent<Props> {
21
+
22
+    getButtonRender = ({item}: { item: OptionsDialogButton }) => {
23
+        return <Button
24
+            onPress={item.onPress}>
25
+            {item.title}
26
+        </Button>;
27
+    }
28
+
29
+    keyExtractor = (item: OptionsDialogButton) => item.title;
30
+
31
+    render() {
32
+        return (
33
+            <Portal>
34
+                <Dialog
35
+                    visible={this.props.visible}
36
+                    onDismiss={this.props.onDismiss}>
37
+                    <Dialog.Title>{this.props.title}</Dialog.Title>
38
+                    <Dialog.Content>
39
+                        <Paragraph>{this.props.message}</Paragraph>
40
+                    </Dialog.Content>
41
+                    <Dialog.Actions>
42
+                        <FlatList
43
+                            data={this.props.buttons}
44
+                            renderItem={this.getButtonRender}
45
+                            keyExtractor={this.keyExtractor}
46
+                            horizontal={true}
47
+                            inverted={true}
48
+                        />
49
+                    </Dialog.Actions>
50
+                </Dialog>
51
+            </Portal>
52
+        );
53
+    }
54
+}
55
+
56
+export default OptionsDialog;

+ 79
- 25
src/screens/Game/screens/GameMainScreen.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Alert, View} from 'react-native';
4
+import {View} from 'react-native';
5 5
 import {IconButton, Text, withTheme} from 'react-native-paper';
6 6
 import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
7 7
 import GameLogic from "../logic/GameLogic";
@@ -12,6 +12,8 @@ import i18n from "i18n-js";
12 12
 import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
13 13
 import {StackNavigationProp} from "@react-navigation/stack";
14 14
 import type {CustomTheme} from "../../../managers/ThemeManager";
15
+import type {OptionsDialogButton} from "../../../components/Dialogs/OptionsDialog";
16
+import OptionsDialog from "../../../components/Dialogs/OptionsDialog";
15 17
 
16 18
 type Props = {
17 19
     navigation: StackNavigationProp,
@@ -24,6 +26,12 @@ type State = {
24 26
     gameTime: number,
25 27
     gameScore: number,
26 28
     gameLevel: number,
29
+
30
+    dialogVisible: boolean,
31
+    dialogTitle: string,
32
+    dialogMessage: string,
33
+    dialogButtons: Array<OptionsDialogButton>,
34
+    onDialogDismiss: () => void,
27 35
 }
28 36
 
29 37
 class GameMainScreen extends React.Component<Props, State> {
@@ -39,6 +47,11 @@ class GameMainScreen extends React.Component<Props, State> {
39 47
             gameTime: 0,
40 48
             gameScore: 0,
41 49
             gameLevel: 0,
50
+            dialogVisible: false,
51
+            dialogTitle: "",
52
+            dialogMessage: "",
53
+            dialogButtons: [],
54
+            onDialogDismiss: () => {},
42 55
         };
43 56
         this.props.navigation.addListener('blur', this.onScreenBlur);
44 57
         this.props.navigation.addListener('focus', this.onScreenFocus);
@@ -120,43 +133,77 @@ class GameMainScreen extends React.Component<Props, State> {
120 133
             this.showPausePopup();
121 134
     }
122 135
 
136
+    onDialogDismiss = () => this.setState({dialogVisible: false});
137
+
123 138
     showPausePopup = () => {
124
-        Alert.alert(
125
-            i18n.t("screens.game.pause"),
126
-            i18n.t("screens.game.pauseMessage"),
127
-            [
128
-                {text: i18n.t("screens.game.restart.text"), onPress: this.showRestartConfirm},
129
-                {text: i18n.t("screens.game.resume"), onPress: this.togglePause},
139
+        const onDismiss = () => {
140
+            this.togglePause();
141
+            this.onDialogDismiss();
142
+        };
143
+        this.setState({
144
+            dialogVisible: true,
145
+            dialogTitle: i18n.t("screens.game.pause"),
146
+            dialogMessage: i18n.t("screens.game.pauseMessage"),
147
+            dialogButtons: [
148
+                {
149
+                    title:  i18n.t("screens.game.restart.text"),
150
+                    onPress: this.showRestartConfirm
151
+                },
152
+                {
153
+                    title:  i18n.t("screens.game.resume"),
154
+                    onPress: onDismiss
155
+                }
130 156
             ],
131
-            {cancelable: false},
132
-        );
157
+            onDialogDismiss: onDismiss,
158
+        });
133 159
     }
134 160
 
135 161
     showRestartConfirm = () => {
136
-        Alert.alert(
137
-            i18n.t("screens.game.restart.confirm"),
138
-            i18n.t("screens.game.restart.confirmMessage"),
139
-            [
140
-                {text: i18n.t("screens.game.restart.confirmNo"), onPress: this.showPausePopup},
141
-                {text: i18n.t("screens.game.restart.confirmYes"), onPress: this.startGame},
162
+        this.setState({
163
+            dialogVisible: true,
164
+            dialogTitle: i18n.t("screens.game.restart.confirm"),
165
+            dialogMessage: i18n.t("screens.game.restart.confirmMessage"),
166
+            dialogButtons: [
167
+                {
168
+                    title:  i18n.t("screens.game.restart.confirmYes"),
169
+                    onPress: () => {
170
+                        this.onDialogDismiss();
171
+                        this.startGame();
172
+                    }
173
+                },
174
+                {
175
+                    title:  i18n.t("screens.game.restart.confirmNo"),
176
+                    onPress: this.showPausePopup
177
+                }
142 178
             ],
143
-            {cancelable: false},
144
-        );
179
+            onDialogDismiss: this.showPausePopup,
180
+        });
145 181
     }
146 182
 
147 183
     showGameOverConfirm() {
148 184
         let message = i18n.t("screens.game.gameOver.score") + this.state.gameScore + '\n';
149 185
         message += i18n.t("screens.game.gameOver.level") + this.state.gameLevel + '\n';
150 186
         message += i18n.t("screens.game.gameOver.time") + this.getFormattedTime(this.state.gameTime) + '\n';
151
-        Alert.alert(
152
-            i18n.t("screens.game.gameOver.text"),
153
-            message,
154
-            [
155
-                {text: i18n.t("screens.game.gameOver.exit"), onPress: () => this.props.navigation.goBack()},
156
-                {text: i18n.t("screens.game.restart.text"), onPress: this.startGame},
187
+        const onDismiss = () => {
188
+            this.onDialogDismiss();
189
+            this.startGame();
190
+        };
191
+        this.setState({
192
+            dialogVisible: true,
193
+            dialogTitle: i18n.t("screens.game.gameOver.text"),
194
+            dialogMessage: message,
195
+            dialogButtons: [
196
+                {
197
+                    title:  i18n.t("screens.game.gameOver.exit"),
198
+                    onPress: () => this.props.navigation.goBack()
199
+                },
200
+                {
201
+                    title:  i18n.t("screens.game.resume"),
202
+                    onPress: onDismiss
203
+                }
157 204
             ],
158
-            {cancelable: false},
159
-        );
205
+            onDialogDismiss: onDismiss,
206
+        });
160 207
     }
161 208
 
162 209
     startGame = () => {
@@ -281,6 +328,13 @@ class GameMainScreen extends React.Component<Props, State> {
281 328
                         color={colors.tetrisScore}
282 329
                     />
283 330
                 </View>
331
+                <OptionsDialog
332
+                    visible={this.state.dialogVisible}
333
+                    title={this.state.dialogTitle}
334
+                    message={this.state.dialogMessage}
335
+                    buttons={this.state.dialogButtons}
336
+                    onDismiss={this.state.onDialogDismiss}
337
+                />
284 338
             </View>
285 339
         );
286 340
     }

Loading…
Cancel
Save