Browse Source

Improved ui on larger screens

Arnaud Vergnet 4 years ago
parent
commit
3bc45704f6

+ 6
- 2
screens/Tetris/TetrisScreen.js View File

@@ -199,7 +199,7 @@ class TetrisScreen extends React.Component<Props, State> {
199 199
                 <View style={{
200 200
                     flexDirection: 'row',
201 201
                     position: 'absolute',
202
-                    top: 10,
202
+                    top: 5,
203 203
                     left: 10,
204 204
                 }}>
205 205
                     <MaterialCommunityIcons
@@ -242,7 +242,8 @@ class TetrisScreen extends React.Component<Props, State> {
242 242
                 <Grid
243 243
                     width={this.logic.getWidth()}
244 244
                     height={this.logic.getHeight()}
245
-                    containerHeight={'80%'}
245
+                    containerMaxHeight={'80%'}
246
+                    containerMaxWidth={'60%'}
246 247
                     grid={this.state.grid}
247 248
                     backgroundColor={this.colors.tetrisBackground}
248 249
                 />
@@ -256,6 +257,8 @@ class TetrisScreen extends React.Component<Props, State> {
256 257
                     />
257 258
                 </View>
258 259
                 <View style={{
260
+                    position: 'absolute',
261
+                    bottom: 0,
259 262
                     flexDirection: 'row',
260 263
                     width: '100%',
261 264
                 }}>
@@ -288,6 +291,7 @@ class TetrisScreen extends React.Component<Props, State> {
288 291
                         onPressIn={() => this.logic.downPressedIn(this.updateGridScore)}
289 292
                         onPress={() => this.logic.pressedOut()}
290 293
                         style={{marginLeft: 'auto'}}
294
+                        color={this.colors.tetrisScore}
291 295
                     />
292 296
                 </View>
293 297
             </View>

+ 1
- 0
screens/Tetris/components/Cell.js View File

@@ -27,6 +27,7 @@ class Cell extends React.PureComponent<Props> {
27 27
                     backgroundColor: this.props.isEmpty ? 'transparent' : this.props.color,
28 28
                     borderColor: this.props.isEmpty ? 'transparent' : this.colors.tetrisBorder,
29 29
                     borderStyle: 'solid',
30
+                    borderRadius: 2,
30 31
                     borderWidth: 1,
31 32
                     aspectRatio: 1,
32 33
                 }}

+ 5
- 3
screens/Tetris/components/Grid.js View File

@@ -11,7 +11,8 @@ type Props = {
11 11
     backgroundColor: string,
12 12
     height: number,
13 13
     width: number,
14
-    containerHeight: number|string,
14
+    containerMaxHeight: number|string,
15
+    containerMaxWidth: number|string,
15 16
 }
16 17
 
17 18
 class Grid extends React.Component<Props>{
@@ -33,6 +34,7 @@ class Grid extends React.Component<Props>{
33 34
         return(
34 35
             <View style={{
35 36
                 flexDirection: 'row',
37
+                backgroundColor: this.props.backgroundColor,
36 38
             }}>
37 39
                 {cells}
38 40
             </View>
@@ -51,11 +53,11 @@ class Grid extends React.Component<Props>{
51 53
         return (
52 54
             <View style={{
53 55
                 flexDirection: 'column',
54
-                height: this.props.containerHeight,
56
+                maxWidth: this.props.containerMaxWidth,
57
+                maxHeight: this.props.containerMaxHeight,
55 58
                 aspectRatio: this.props.width/this.props.height,
56 59
                 marginLeft: 'auto',
57 60
                 marginRight: 'auto',
58
-                backgroundColor: this.props.backgroundColor,
59 61
             }}>
60 62
                 {this.getGrid()}
61 63
             </View>

+ 2
- 1
screens/Tetris/components/Preview.js View File

@@ -26,7 +26,8 @@ class Preview extends React.PureComponent<Props> {
26 26
                     width={this.props.next[i][0].length}
27 27
                     height={this.props.next[i].length}
28 28
                     grid={this.props.next[i]}
29
-                    containerHeight={50}
29
+                    containerMaxHeight={50}
30
+                    containerMaxWidth={50}
30 31
                     backgroundColor={'transparent'}
31 32
                 />
32 33
             );

Loading…
Cancel
Save