forked from vergnet/application-amicale
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, View } from 'react-native';
|
|
import * as Animatable from 'react-native-animatable';
|
|
import { useTheme } from 'react-native-paper';
|
|
import GridManager from '../logic/GridManager';
|
|
import Piece from '../logic/Piece';
|
|
import GridComponent from './GridComponent';
|
|
|
|
const styles = StyleSheet.create({
|
|
pieceContainer: {
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
pieceBackground: {
|
|
position: 'absolute',
|
|
},
|
|
});
|
|
|
|
export default function GameBackground() {
|
|
const theme = useTheme();
|
|
const gridManager = new GridManager(4, 4, theme);
|
|
const gridList = [];
|
|
for (let i = 0; i < 18; i += 1) {
|
|
gridList.push(gridManager.getEmptyGrid(4, 4));
|
|
const piece = new Piece(theme);
|
|
piece.toGrid(gridList[i], true);
|
|
}
|
|
return (
|
|
<View style={styles.pieceContainer}>
|
|
{gridList.map((item, index) => {
|
|
const size = 10 + Math.floor(Math.random() * 30);
|
|
const top = Math.floor(Math.random() * 100);
|
|
const rot = Math.floor(Math.random() * 360);
|
|
const left = (index % 6) * 20;
|
|
const animDelay = size * 20;
|
|
const animDuration = 2 * (2000 - size * 30);
|
|
return (
|
|
<Animatable.View
|
|
useNativeDriver={true}
|
|
animation={'fadeInDownBig'}
|
|
delay={animDelay}
|
|
duration={animDuration}
|
|
key={`piece${index.toString()}`}
|
|
style={{
|
|
width: `${size}%`,
|
|
top: `${top}%`,
|
|
left: `${left}%`,
|
|
...styles.pieceBackground,
|
|
}}
|
|
>
|
|
<GridComponent
|
|
width={4}
|
|
height={4}
|
|
grid={item}
|
|
style={{
|
|
transform: [{ rotateZ: `${rot}deg` }],
|
|
}}
|
|
/>
|
|
</Animatable.View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
}
|