From 7a4e9a8c47abbbca48dbf03daffe325728c91e16 Mon Sep 17 00:00:00 2001
From: Tim Glasgow <tim.glasgow@atonalsoftware.com>
Date: Fri, 5 Aug 2022 18:37:53 -0500
Subject: [PATCH] Render key indices

---
 squarenotsquare/src/screens/Game.js           | 32 +++++++++++++------
 .../src/screens/styles/AppStyles.js           |  5 +++
 squarenotsquare/src/themes/Metrics.js         |  3 +-
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/squarenotsquare/src/screens/Game.js b/squarenotsquare/src/screens/Game.js
index 69c7a36..a9faaf8 100644
--- a/squarenotsquare/src/screens/Game.js
+++ b/squarenotsquare/src/screens/Game.js
@@ -1,7 +1,7 @@
 import React from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import { Text, TouchableOpacity, View, SafeAreaView } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {genSquareChallenge} from '../libs/Random';
 import {shapes} from '../libs/ShapeEnum';
 import { styles } from "./styles/AppStyles";
@@ -13,7 +13,12 @@ import Metrics from "../themes/Metrics";
 function Game(props){
 
   const squareChallenge = genSquareChallenge();
-  const [startTime, setStartTime] = useState(0);
+  const [startTime, setStartTime] = useState(Date.now());
+  const [headerText, setHeaderText] = useState('Ready?');
+  const [headerColor, setHeaderColor] = useState(styles.green);
+  const [headerTextColor, setHeaderTextColor] = useState(styles.darkText);
+
+  useEffect
 
   function generateSquare(){
     return (
@@ -39,17 +44,17 @@ function Game(props){
     )
   }
 
-  function generatePair(answer, shapeIndex) {
+  function generatePair(answer, shapeIndex, pairIndex) {
     if (answer === 0) {
       return (
-        <View style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
+        <View key={pairIndex} style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
           {generateSquare()}
           {generateShape(shapeIndex)}
         </View>
       );
     } else {
       return (
-        <View style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
+        <View key={pairIndex} style={[styles.flexRow, styles.spaceEvenly, styles.buttonMargin]}>
           {generateShape(shapeIndex)}
           {generateSquare()}
         </View>
@@ -59,14 +64,21 @@ function Game(props){
 
   function renderPairs(){
     return squareChallenge.map((pair, index) => {
-      return generatePair(pair.squarePos, pair.shapeType);
+      return generatePair(pair.squarePos, pair.shapeType, index);
     });
   }
 
   return (
-    <ScrollView style={[styles.flex, styles.flexColumn]}>
-      {renderPairs()}
-    </ScrollView>
+    <SafeAreaView style={styles.flex}>
+      <View style={[styles.timerView, headerColor, styles.centeredJustify]}>
+        <Text style={[headerTextColor, styles.headerTitleFont, styles.centeredText]}>
+          {headerText}
+        </Text>
+      </View>
+      <ScrollView style={[styles.flex, styles.flexColumn]}>
+        {renderPairs()}
+      </ScrollView>
+    </SafeAreaView>
   );
 }
 
diff --git a/squarenotsquare/src/screens/styles/AppStyles.js b/squarenotsquare/src/screens/styles/AppStyles.js
index 303039b..089f472 100644
--- a/squarenotsquare/src/screens/styles/AppStyles.js
+++ b/squarenotsquare/src/screens/styles/AppStyles.js
@@ -70,6 +70,7 @@ export const styles = StyleSheet.create({
   lightBackground: {backgroundColor: Colors.material.light},
   green: {backgroundColor: Colors.material.green400},
   darkGreen: {backgroundColor: Colors.material.green400dark},
+  dark: {backgroundColor: Colors.material.dark},
 
   splashLogo: {
     width: Metrics.images.splashLogo.width,
@@ -105,5 +106,9 @@ export const styles = StyleSheet.create({
     zIndex: 1000,
     width: Metrics.icons.buttonIcon,
     height: Metrics.icons.buttonIcon
+  },
+
+  timerView: {
+    height: Metrics.screenSections.timerHeight
   }
 })
\ No newline at end of file
diff --git a/squarenotsquare/src/themes/Metrics.js b/squarenotsquare/src/themes/Metrics.js
index d2dbddd..95ac0ae 100644
--- a/squarenotsquare/src/themes/Metrics.js
+++ b/squarenotsquare/src/themes/Metrics.js
@@ -26,7 +26,8 @@ class AppMetrics {
     this.screenSections = {
       headerHeight: this.normalize(20),
       sectionWidth: this.screenWidth,
-      footerHeight: this.normalize(10)
+      footerHeight: this.normalize(10),
+      timerHeight: this.normalize(20)
     }
   
     this.icons = {