Frontend cursor movement (#187)

* restyled most components for better visuals

* added light and dark mode functionality for some components

* added mobile responsive layout for smaller screens and removed redundant props

* added ScrollView in replacement of regular div to remove unecessary horizontal bar

* added animations for smoother light and dark mode transitions

* removed border from buttons and added shadow instead

* made score display on mobile reponsive with horizontal scrolling and removed the scroll bar indicators

* adjusted header and footer styles to stick on top / bottom when scrolling happens

* cleaned up code structure and removed themestyles

* adjusted small screen breakpoint to include landscape mode devices

* added function to generate and store session token on load within the frontend alone

* replaced logic used to display score sheet from app.py to score.ts

* added basic cursor movement logic based on step and speed input

* removed node modules from being tracked

* updated comments and formatted code

Author: JiBing17

frontend/companion-app/App.tsx

@@ -46,22 +46,19 @@ export default function App() {
       scores: [] // the list of scores to choose from
     },
   );
+
+  // State used to store session token
+  const [sessionToken, setSessionToken] = useState<string>("")
+
+  // Function used to generate session token using crypto API 
+  const generateSecureSessionToken = (): string => {
+    return window.crypto.randomUUID();
+  };
 
-  // Sync sessionToken with useReducer state
-  // Fetch the session token and dispatch it to the reducer
+  // On load, call generateSecureSessionToken function to generate and store new session token
   useEffect(() => {
-    const fetchSessionToken = async () => {
-      try {
-        const data = await startSession();
-        const token = data.session_token;
-        console.log("Fetched session token:", token);
-        dispatch({ type: "new_session", token: token });
-      } catch (error) {
-        console.error("Error fetching session token:", error);
-      }
-    };
-
-    fetchSessionToken();
+    const newToken: string = generateSecureSessionToken();
+    setSessionToken(newToken)
   }, []);
 
   ////////////////////////////////////////////////////////////////////////////////
@@ -229,12 +226,6 @@ export default function App() {
     inputRange: [0, 1],
     outputRange: ["#2C3E50", "#FFFFFF"], // Light to dark transition
   });
-  // Interpolate border bottom color based on light or dark mode
-  // const borderColor = borderColorAnim.interpolate({
-  //   inputRange: [0, 1],
-  //   outputRange: ["#FFFFFF", "#2C3E50"], // Light to dark transition
-  // })
-
 
   // Toggles between light and dark mode by animating background, text, and border properties smoothly
   const toggleTheme = () => {
@@ -255,19 +246,14 @@ export default function App() {
         duration: 500,
         useNativeDriver: false, // Can't use native driver for border properties
       }), 
-      // Animated.timing(borderColorAnim, {
-      //   toValue,
-      //   duration: 500,
-      //   useNativeDriver: false, // Can't use native driver for border properties
-      // }),
     ]).start(() => {
       setTheme(theme === "light" ? "dark" : "light");
     });
   };
   // Get device's width 
   const { width } = useWindowDimensions()
   // Boolean used for dynmaic display (row or column)
-  const isSmallScreen = width < 768;
+  const isSmallScreen = width < 960;
 
 
   ////////////////////////////////////////////////////////////////////////////////
@@ -276,10 +262,10 @@ export default function App() {
   return (
     <SafeAreaView style={[styles.container]}>
       {/* Header with image */}
-      <Animated.View style={[styles.menu_bar, {backgroundColor: menubarBackgroundColor}]}>
-        <Image source={{ uri: './assets/companion.png' }} style={styles.logo}/>
+      <Animated.View style={[styles.menu_bar, {backgroundColor: menubarBackgroundColor, height: isSmallScreen? 40: 80}]}>
+        <Image source={require('./assets/companion.png')} style={[styles.logo, {height: isSmallScreen? 30: 100, width: isSmallScreen? 100: 200}]}/>
         <TouchableOpacity onPress={toggleTheme}>
-          <Icon name={theme === 'light' ? 'sun' : 'moon'} size={30} color="white" />
+          <Icon name={theme === 'light' ? 'sun' : 'moon'} size={isSmallScreen? 15: 30} color="white" />
         </TouchableOpacity>
 
       </Animated.View>
@@ -392,15 +378,14 @@ const styles = StyleSheet.create({
     padding: 10,
     borderBottomWidth: 2,
     borderBottomColor: "#1A252F",
-    height: 80, 
+    height: 80,
     position: "absolute", // make header stick on top even after scroll
     top: 0,
     width: "100%",
     zIndex: 99
   },
   // Image for header
   logo: {
-    height: 200,
     width: 200,
     resizeMode: "contain",
   },
@@ -481,4 +466,4 @@ const styles = StyleSheet.create({
     color: "#FFFFFF",
     fontWeight: "bold",
   },
-});
+});