Reusable Components for Game Completion Summary (#205)

* linted and add navigation to button --------- Co-authored-by: Tyler Tam <[email protected]> Co-authored-by: Johannes Qian <[email protected]>
GTBitsOfGood · Sep 3, 2024 · 0375f13 · 0375f13
1 parent 6c7b0b6
commit 0375f13
Show file tree

Hide file tree

Showing 12 changed files with 583 additions and 24 deletions.
diff --git a/App.tsx b/App.tsx
@@ -18,6 +18,7 @@ import { store } from "./src/redux/store";
 
 // Time Analytics
 import NavigationContainerWithTracking from "./src/components/NavigationContainerWithTracking";
+import AuthGuard from "./src/screens/Auth/AuthGuard";
 
 const persistor = persistStore(store);
 
@@ -34,30 +35,31 @@ export default function App() {
     <Provider store={store}>
       <PersistGate persistor={persistor} loading={null}>
         <SafeAreaProvider>
-          <NavigationContainerWithTracking>
-            <Stack.Navigator
-              // Consistent styling across all stacked screens
-              screenOptions={{
-                headerBackTitleVisible: false,
-                gestureEnabled: false,
-                headerTintColor: "black",
-                headerLeft: null,
-                headerStyle: {
-                  backgroundColor: "white",
-                },
-                headerTitleStyle: {
-                  fontWeight: "bold",
-                  fontSize: 22,
-                  color: "black",
-                },
-                headerTitleAlign: "center",
-                animation: "fade",
-              }}
-            >
-              {MergedStacks}
-            </Stack.Navigator>
-          </NavigationContainerWithTracking>
-          {/* </AuthGuard> */}
+          <AuthGuard>
+            <NavigationContainerWithTracking>
+              <Stack.Navigator
+                // Consistent styling across all stacked screens
+                screenOptions={{
+                  headerBackTitleVisible: false,
+                  gestureEnabled: false,
+                  headerTintColor: "black",
+                  headerLeft: null,
+                  headerStyle: {
+                    backgroundColor: "white",
+                  },
+                  headerTitleStyle: {
+                    fontWeight: "bold",
+                    fontSize: 22,
+                    color: "black",
+                  },
+                  headerTitleAlign: "center",
+                  animation: "fade",
+                }}
+              >
+                {MergedStacks}
+              </Stack.Navigator>
+            </NavigationContainerWithTracking>
+          </AuthGuard>
         </SafeAreaProvider>
       </PersistGate>
     </Provider>

diff --git a/src/assets/HappyEmoji.jsx b/src/assets/HappyEmoji.jsx
diff --git a/src/assets/OneSixthPieChartIcon.jsx b/src/assets/OneSixthPieChartIcon.jsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import Svg, { G, Path, Defs, ClipPath } from "react-native-svg";
+
+const OneSixthPieChartIcon = ({ color, ...props }) => (
+  <Svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={22}
+    height={21}
+    fill="none"
+    {...props}
+  >
+    <G clipPath="url(#a)">
+      <Path
+        fill={color}
+        d="M10.685.763a9.037 9.037 0 1 0 0 18.075 9.037 9.037 0 0 0 0-18.075Zm0 16.192a7.154 7.154 0 1 1 0-14.31v7.156l6.394-3.197c.5.991.76 2.086.76 3.197a7.156 7.156 0 0 1-7.154 7.154Z"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M.205.042h20.92v20.92H.205z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default OneSixthPieChartIcon;
diff --git a/src/assets/QuestionMarkCircleIcon.jsx b/src/assets/QuestionMarkCircleIcon.jsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+const QuestionMarkCircleIcon = ({ color, ...props }) => (
+  <Svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={25}
+    height={25}
+    fill="none"
+    {...props}
+  >
+    <Path
+      fill={color}
+      d="M13.153 22.265c-5.584 0-10.111-4.527-10.111-10.112 0-5.584 4.527-10.111 10.111-10.111 5.585 0 10.112 4.527 10.112 10.111 0 5.585-4.527 10.112-10.112 10.112Zm0-2.023a8.09 8.09 0 1 0 0-16.178 8.09 8.09 0 0 0 0 16.178Zm-1.011-5.055h2.022v2.022h-2.022v-2.022Zm2.022-1.664v.652h-2.022V12.66a1.011 1.011 0 0 1 1.011-1.011 1.517 1.517 0 1 0-1.487-1.814l-1.984-.398a3.54 3.54 0 1 1 4.482 4.087Z"
+    />
+  </Svg>
+);
+export default QuestionMarkCircleIcon;
diff --git a/src/assets/TwoThirdsPieChartIcon.jsx b/src/assets/TwoThirdsPieChartIcon.jsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import Svg, { G, Path, Defs, ClipPath } from "react-native-svg";
+const TwoThirdsPieChartIcon = ({ color, ...props }) => (
+  <Svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={22}
+    height={21}
+    fill="none"
+    {...props}
+  >
+    <G clipPath="url(#a)">
+      <Path
+        fill={color}
+        fillRule="evenodd"
+        d="M4.295 3.41a9.037 9.037 0 1 1 12.78 12.78A9.037 9.037 0 0 1 4.296 3.41Zm-.22 9.128c.36.868.887 1.657 1.551 2.321l5.06-5.058V2.645a7.155 7.155 0 0 0-6.61 9.893Z"
+        clipRule="evenodd"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="a">
+        <Path fill="#fff" d="M.205.042h20.92v20.92H.205z" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+export default TwoThirdsPieChartIcon;
diff --git a/src/components/ContinueButton.tsx b/src/components/ContinueButton.tsx
@@ -0,0 +1,37 @@
+import { useNavigation } from "@react-navigation/native";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+// import { useDispatch } from "react-redux";
+import { RootStackParamList } from "../types";
+import Button from "./Button";
+
+type Props = {
+  titleColor: string;
+  backgroundColor: string;
+};
+
+export default function ContinueButton({ titleColor, backgroundColor }: Props) {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  // const dispatch = useDispatch();
+
+  const onPressButton = () => navigation.navigate("HomeScreen");
+
+  return (
+    <Button
+      onPress={onPressButton}
+      title="Continue"
+      titleStyle={{
+        color: `${titleColor}`,
+        fontSize: 16,
+        fontWeight: "600",
+        textAlign: "center",
+      }}
+      buttonStyle={{
+        backgroundColor: `${backgroundColor}`,
+        borderRadius: 12,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    />
+  );
+}
diff --git a/src/components/OneLineCaptionComponent.tsx b/src/components/OneLineCaptionComponent.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+interface Props {
+  color: string;
+  icon: JSX.Element;
+  title: string;
+  caption: string;
+  stat: string;
+  statColor: string;
+}
+
+export default function OneLineCaptionComponent({
+  color,
+  icon,
+  title,
+  caption,
+  stat,
+  statColor,
+}: Props) {
+  return (
+    <View
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "92%",
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: "#E3EAFC",
+        backgroundColor: `${color}`,
+        paddingTop: "5%",
+        paddingBottom: "5%",
+        paddingLeft: "4%",
+        paddingRight: "4%",
+      }}
+    >
+      <View
+        style={{ display: "flex", flexDirection: "row", alignItems: "center" }}
+      >
+        {icon}
+        <View
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            paddingLeft: "3%",
+          }}
+        >
+          <Text
+            style={{
+              color: "#2B3674",
+              fontSize: 16,
+              fontStyle: "normal",
+              fontWeight: "600",
+            }}
+          >
+            {title}
+          </Text>
+          <Text
+            style={{
+              color: "#2B3674",
+              fontSize: 12,
+              fontStyle: "normal",
+              fontWeight: "400",
+            }}
+          >
+            {caption}
+          </Text>
+        </View>
+      </View>
+      <Text
+        style={{
+          color: `${statColor}`,
+          fontSize: 36,
+          fontStyle: "normal",
+          fontWeight: "600",
+        }}
+      >
+        {stat}
+      </Text>
+    </View>
+  );
+}
diff --git a/src/components/OneLineComponent.tsx b/src/components/OneLineComponent.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+interface Props {
+  icon: JSX.Element;
+  title: string;
+  stat: number;
+  statColor: string;
+}
+
+export default function OneLineComponent({
+  icon,
+  title,
+  stat,
+  statColor,
+}: Props) {
+  return (
+    <View
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: "92%",
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: "#E3EAFC",
+        backgroundColor: "#FFF",
+        paddingTop: "5%",
+        paddingBottom: "5%",
+        paddingLeft: "4%",
+        paddingRight: "4%",
+      }}
+    >
+      <View
+        style={{ display: "flex", flexDirection: "row", alignItems: "center" }}
+      >
+        {icon}
+        <Text
+          style={{
+            color: "#2B3674",
+            fontSize: 16,
+            fontStyle: "normal",
+            fontWeight: "600",
+            paddingLeft: "3%",
+          }}
+        >
+          {title}
+        </Text>
+      </View>
+      <Text
+        style={{
+          color: `${statColor}`,
+          fontSize: 36,
+          fontStyle: "normal",
+          fontWeight: "600",
+        }}
+      >
+        {stat}
+      </Text>
+    </View>
+  );
+}
diff --git a/src/components/TwoLineComponent.tsx b/src/components/TwoLineComponent.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+interface Props {
+  icon: JSX.Element;
+  title: string;
+  stat: string;
+  statColor: string;
+}
+
+export default function TwoLineComponent({
+  icon,
+  title,
+  stat,
+  statColor,
+}: Props) {
+  return (
+    <View
+      style={{
+        display: "flex",
+        width: "92%",
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: "#E3EAFC",
+        backgroundColor: "#FFF",
+        paddingTop: "5%",
+        paddingBottom: "5%",
+        paddingLeft: "4%",
+        paddingRight: "4%",
+      }}
+    >
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          paddingBottom: "3%",
+        }}
+      >
+        {icon}
+        <Text
+          style={{
+            color: "#2B3674",
+            fontSize: 16,
+            fontStyle: "normal",
+            fontWeight: "600",
+            paddingLeft: "3%",
+          }}
+        >
+          {title}
+        </Text>
+      </View>
+      <Text
+        style={{
+          color: `${statColor}`,
+          fontSize: 36,
+          fontStyle: "normal",
+          fontWeight: "600",
+        }}
+      >
+        {stat}
+      </Text>
+    </View>
+  );
+}