game buttons

squarenotsquare/src/screens/Game.js

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