saint-lo/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Improved ui on larger screens

Browse source
This commit is contained in:
Arnaud Vergnet 2020-03-20 21:15:37 +01:00
parent 7da30e0af6
commit 3bc45704f6
4 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
screens/Tetris/TetrisScreen.js
View file

@ -199,7 +199,7 @@ class TetrisScreen extends React.Component<Props, State> {
<View style={{ <View style={{
flexDirection: 'row', flexDirection: 'row',
position: 'absolute', position: 'absolute',
top: 10, top: 5,
left: 10, left: 10,
}}> }}>
<MaterialCommunityIcons <MaterialCommunityIcons
@ -242,7 +242,8 @@ class TetrisScreen extends React.Component<Props, State> {
<Grid <Grid
width={this.logic.getWidth()} width={this.logic.getWidth()}
height={this.logic.getHeight()} height={this.logic.getHeight()}
containerHeight={'80%'} containerMaxHeight={'80%'}
containerMaxWidth={'60%'}
grid={this.state.grid} grid={this.state.grid}
backgroundColor={this.colors.tetrisBackground} backgroundColor={this.colors.tetrisBackground}
/> />
@ -256,6 +257,8 @@ class TetrisScreen extends React.Component<Props, State> {
/> />
</View> </View>
<View style={{ <View style={{
position: 'absolute',
bottom: 0,
flexDirection: 'row', flexDirection: 'row',
width: '100%', width: '100%',
}}> }}>
@ -288,6 +291,7 @@ class TetrisScreen extends React.Component<Props, State> {
onPressIn={() => this.logic.downPressedIn(this.updateGridScore)} onPressIn={() => this.logic.downPressedIn(this.updateGridScore)}
onPress={() => this.logic.pressedOut()} onPress={() => this.logic.pressedOut()}
style={{marginLeft: 'auto'}} style={{marginLeft: 'auto'}}
color={this.colors.tetrisScore}
/> />
</View> </View>
</View> </View>

1
screens/Tetris/components/Cell.js
View file

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

8
screens/Tetris/components/Grid.js
View file

@ -11,7 +11,8 @@ type Props = {
backgroundColor: string, backgroundColor: string,
height: number, height: number,
width: number, width: number,
containerHeight: number|string, containerMaxHeight: number|string,
containerMaxWidth: number|string,
} }
class Grid extends React.Component<Props>{ class Grid extends React.Component<Props>{
@ -33,6 +34,7 @@ class Grid extends React.Component<Props>{
return( return(
<View style={{ <View style={{
flexDirection: 'row', flexDirection: 'row',
backgroundColor: this.props.backgroundColor,
}}> }}>
{cells} {cells}
</View> </View>
@ -51,11 +53,11 @@ class Grid extends React.Component<Props>{
return ( return (
<View style={{ <View style={{
flexDirection: 'column', flexDirection: 'column',
height: this.props.containerHeight, maxWidth: this.props.containerMaxWidth,
maxHeight: this.props.containerMaxHeight,
aspectRatio: this.props.width/this.props.height, aspectRatio: this.props.width/this.props.height,
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
backgroundColor: this.props.backgroundColor,
}}> }}>
{this.getGrid()} {this.getGrid()}
</View> </View>

3
screens/Tetris/components/Preview.js
View file

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