Build.yaml, gitignore, app.json. Button anim.

.gitea/workflows/build.yaml

@@ -17,11 +17,22 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: whereami
+      - name: Setup Node
-        run: pwd
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
 
-      - name: List workspace Directory
+      - name: Install Dependencies
-        run: ls -l /workspace/
+        working-directory: ./pogdark-app
+        run: npm install
 
-      - name: Copy Files to hosting directory.
+      - name: Build
-        run: cp -Rf ./dist/* /data/pogdark
+        working-directory: ./pogdark-app
+        run: expo export --platform web
+
+      - name: List Directory
+        run: | 
+          ls -l .
+          ls -l ./pogdark/
+              

.gitignore

@@ -36,3 +36,5 @@ yarn-error.*
 *.tsbuildinfo
 
 .idea
+
+.env*

app.json

@@ -20,7 +20,11 @@
     "web": {
       "bundler": "metro",
       "output": "static",
-      "favicon": "./assets/images/favicon.png"
+      "favicon": "./assets/images/favicon.png",
+      "build": {
+        "output": "web-build",
+        "cacheDirectories": []
+      }
     },
     "plugins": [
       "expo-router",

app/StatusPage.tsx

@@ -103,33 +103,63 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
         ).start();
     };
 
+    const stopPulsing = (animationRef: Animated.Value) => {
+        animationRef.setValue(0);
+        animationRef.stopAnimation();
+    };
+
     useEffect(() => {
         console.log("Updated status: ", currentStatus);
 
         if (currentStatus === "On the Way") {
             startPulsing(pulseAnimOnTheWay);
         } else {
-            pulseAnimOnTheWay.setValue(0); // Reset animation
+            stopPulsing(pulseAnimOnTheWay);
         }
 
         if (currentStatus === "Arrived") {
             startPulsing(pulseAnimArrived);
         } else {
-            pulseAnimArrived.setValue(0); // Reset animation
+            stopPulsing(pulseAnimArrived);
         }
     }, [currentStatus]);
 
     // Interpolated colors for pulsing effect
-    const pulseColorOnTheWay = pulseAnimOnTheWay.interpolate({
+    const getPulseColor = (animValue: Animated.Value) => animValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [theme.colors.secondary, theme.colors.primary], // From active color to normal color
-    });
-
-    const pulseColorArrived = pulseAnimArrived.interpolate({
         inputRange: [0, 1],
         outputRange: [theme.colors.secondary, theme.colors.primary],
     });
 
+    const pulseColorOnTheWay = getPulseColor(pulseAnimOnTheWay);
+    const pulseColorArrived = getPulseColor(pulseAnimArrived);
+
+    // Function to handle status change
+    const handleStatusPress = async (status: string) => {
+        try {
+            if (currentStatus === status) {
+                // If pressed again, send "expired" status and clear currentStatus
+                console.log(`Expiring status: ${status}`);
+                const message: Message = { Id: id, Name: name, Image: image, Status: "expired", Timestamp: new Date().toISOString() };
+                await axios.post(API_URL + "/set", message);
+                setStatus(""); // Reset status
+            } else {
+                // Otherwise, send the new status
+                console.log(`Setting status: ${status}`);
+                const message: Message = { Id: id, Name: name, Image: image, Status: status, Timestamp: new Date().toISOString() };
+                await axios.post(API_URL + "/set", message);
+                setStatus(status);
+            }
+        } catch (error) {
+            console.error(`Error sending status '${status}':`, error);
+        }
+    };
+
+    // Determine the button label based on whether it's animating
+    const getButtonLabel = (status: string) => {
+        if (status === "On the Way") return currentStatus === "On the Way" ? "Traveling" : "On the way";
+        if (status === "Arrived") return currentStatus === "Arrived" ? "At the dog park" : "Arrived";
+        return status;
+    };
 
     useEffect(() => {
         if (lastMessage?.data) {
@@ -152,16 +182,6 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
         }
     }, [lastMessage, setStatus, id]);
 
-    const sendStatus = async (status: string) => {
-        try {
-            const message: Message = { Id: id, Name: name, Image: image, Status: status, Timestamp: new Date().toISOString() };
-            await axios.post(API_URL + "/set", message);
-            setStatus(status)
-        } catch (error) {
-            console.error("Error sending status:", error);
-        }
-    };
-
     return (
         <View style={[styles.container, { backgroundColor: theme.colors.background }, isProfileActive && { display: 'none' }]}>
             <View style={styles.listContainer}>
@@ -211,25 +231,25 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
                 <Animated.View style={{ flex: 1 }}>
                     <Button
                         mode="contained"
-                        onPress={() => sendStatus("On the Way")}
+                        onPress={() => handleStatusPress("On the Way")}
                         style={[
                             styles.actionButton,
                             { backgroundColor: currentStatus === "On the Way" ? pulseColorOnTheWay : theme.colors.primary }
                         ]}
                         labelStyle={{ color: theme.colors.onPrimary }}>
-                        On the Way
+                        {getButtonLabel("On the Way")}
                     </Button>
                 </Animated.View>
                 <Animated.View style={{ flex: 1 }}>
                     <Button
                         mode="contained"
-                        onPress={() => sendStatus("Arrived")}
+                        onPress={() => handleStatusPress("Arrived")}
                         style={[
                             styles.actionButton,
                             { backgroundColor: currentStatus === "Arrived" ? pulseColorArrived : theme.colors.primary }
                         ]}
                         labelStyle={{ color: theme.colors.onPrimary }}>
-                        Arrived
+                        {getButtonLabel("Arrived")}
                     </Button>
                 </Animated.View>
             </View>