1 changed files with 63 additions and 4 deletions
@ -1,13 +1,72 @@ |
|||
import React from "react"; |
|||
import { Text, View } from "react-native"; |
|||
import { Text, TouchableOpacity, View } from "react-native"; |
|||
import { ScrollView } from "react-native-gesture-handler"; |
|||
import { useState } from "react"; |
|||
import {genSquareChallenge} from '../libs/Random'; |
|||
import {shapes} from '../libs/ShapeEnum'; |
|||
import { styles } from "./styles/AppStyles"; |
|||
import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'; |
|||
import Icons from '../themes/Icons'; |
|||
import Colors from "../themes/Colors"; |
|||
import Metrics from "../themes/Metrics"; |
|||
|
|||
function Game(props){ |
|||
|
|||
const squareChallenge = genSquareChallenge(); |
|||
const [startTime, setStartTime] = useState(0); |
|||
|
|||
function generateSquare(){ |
|||
return ( |
|||
<TouchableOpacity style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]}> |
|||
<MaterialIcon |
|||
name={Icons.squareIcons.square} |
|||
color={Colors.material.dark} |
|||
size={Metrics.icons.buttonIcon} |
|||
/> |
|||
</TouchableOpacity> |
|||
) |
|||
} |
|||
|
|||
function generateShape(index){ |
|||
return ( |
|||
<TouchableOpacity style={[styles.darkGreen, styles.answerButton, styles.dropShadow, styles.centeredItems, styles.centeredJustify]}> |
|||
<MaterialIcon |
|||
name={shapes[index]} |
|||
color={Colors.material.dark} |
|||
size={Metrics.icons.buttonIcon} |
|||
/> |
|||
</TouchableOpacity> |
|||
) |
|||
} |
|||
|
|||
function generatePair(answer, shapeIndex) { |
|||
if (answer === 0) { |
|||
return ( |
|||
<View style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}> |
|||
{generateSquare()} |
|||
{generateShape(shapeIndex)} |
|||
</View> |
|||
); |
|||
} else { |
|||
return ( |
|||
<View style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}> |
|||
{generateShape(shapeIndex)} |
|||
{generateSquare()} |
|||
</View> |
|||
); |
|||
} |
|||
} |
|||
|
|||
function renderPairs(){ |
|||
return squareChallenge.map((pair, index) => { |
|||
return generatePair(pair.squarePos, pair.shapeType); |
|||
}); |
|||
} |
|||
|
|||
return ( |
|||
<View> |
|||
<Text style={{color: 'black'}}>test</Text> |
|||
</View> |
|||
<ScrollView style={[styles.flex, styles.flexColumn]}> |
|||
{renderPairs()} |
|||
</ScrollView> |
|||
); |
|||
} |
|||
|
|||
|
Loading…
Reference in new issue