fixed up the timer some (#58)

* removed reset button (not really needed and way too close to the start/stop) * lil bit of code cleanup * time now synced w the data and is persistent * fixed a bit of styling
FRC-7525 · Feb 15, 2025 · 17cb928 · 17cb928
1 parent 62628b0
commit 17cb928
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 deletions.
diff --git a/app/api/data.ts b/app/api/data.ts
@@ -114,4 +114,11 @@ export function updateTags(tag: Tag, removeTag?: boolean): Promise<void> {
         data["tags"] = [...tags];
         return data;
     });
+}
+
+export function updateDefenseTime(time: number): Promise<void> {
+    return modifyMatchData((data) => {
+        data["teleop"]["defenseTime"] = time;
+        return data;
+    });
 }
diff --git a/app/api/data_types.ts b/app/api/data_types.ts
@@ -41,6 +41,7 @@ export class AutoData extends PhaseData {
 
 export class TeleopData extends PhaseData {
     climb: CLIMB_TYPE = CLIMB_TYPE.DEEP_CLIMB;
+    defenseTime: number = 0;
 }
 
 export class MatchData {

diff --git a/app/components/Timer.tsx b/app/components/Timer.tsx
@@ -1,15 +1,25 @@
-import React, { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { Button } from 'react-native-paper';  
+import { getMatchData, updateDefenseTime } from '../api/data';
+import SectionTitle from './SectionTitle';
+import { BACKGROUND_COLOR, TEXT_COLOR } from '../consts';
 
 function Stopwatch() {
     const [time, setTime] = useState(0);
     const [isRunning, setIsRunning] = useState(false);
     const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
+    useEffect(() => {
+        getMatchData().then((data) => {
+            setTime(data["teleop"]["defenseTime"] ?? 0);
+        });
+    }, []);
+
     const startStop = () => {
-        if (isRunning) {
-            if (intervalRef.current) clearInterval(intervalRef.current);
+        if (isRunning && intervalRef.current) {
+            clearInterval(intervalRef.current);
+            updateDefenseTime(time + 10);
         } else {
             intervalRef.current = setInterval(() => {
                 setTime((prevTime: number) => prevTime + 10);
@@ -19,13 +29,6 @@ function Stopwatch() {
         setIsRunning(!isRunning);
     };
 
-
-    const reset = () => {
-        if (intervalRef.current) clearInterval(intervalRef.current);
-        setTime(0);
-        setIsRunning(false);
-    };
-
 
     const formatTime = (ms: number) => {
         const minutes = Math.floor(ms / 60000);
@@ -36,15 +39,11 @@ function Stopwatch() {
 
     return (
         <View style={styles.container}>
+            <SectionTitle>Defense Time</SectionTitle>
             <Text style={styles.time}>{formatTime(time)}</Text>
-            <View style={styles.buttons}>
-                <Button mode="contained" onPress={startStop}>
-                    {isRunning ? 'Stop' : 'Start'}
-                </Button>
-                <Button mode="outlined" onPress={reset}>
-                    Reset
-                </Button>
-            </View>
+            <Button mode="contained" onPress={startStop} textColor={TEXT_COLOR} buttonColor={BACKGROUND_COLOR}>
+                {isRunning ? 'Stop' : 'Start'}
+            </Button>
         </View>
     );
 };
@@ -58,11 +57,7 @@ const styles = StyleSheet.create({
   time: {
     fontSize: 15,
     marginBottom: 10,
-  },
-  buttons: {
-    flexDirection: 'row',
-    gap: 10,
-  },
+  }
 });
 
 export default Stopwatch;