1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- 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>
- );
- }
|