Logic for connecting is changed in frontend starting from this commit

New algorithm:
- User sends a request to create a room in the backend
- roomID is generated in the backend
- server responds with a roomID
- user stores it in the localStorage and is redirected to the game page

Changes made in this commit
Previously there was no api endpoint for room creation. Now the API is
utilized by the ChallengeFriend.jsx component as per the above algorithm

frontend/src/pages/Play/ChallengeFriend.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import FriendsList from '../../components/FriendsList'
 import { IconSearch } from '@tabler/icons-react'
 import { Form, Link, redirect, useParams, useSearchParams } from 'react-router-dom'
-import { socket } from '../../socket'
+import { getAuthToken, getUserData } from '../../../utils/auth'
 
 const ChallengeFriend = () => {
     const params = useParams();
@@ -35,17 +35,42 @@ const ChallengeFriend = () => {
     )
 }
 
+
+// TESTED
 export const playFriendAction = async ({ request, params }) => {
-    const data = await request.formData();
-    let color = data.get('color');
-    let timeLimit = data.get('time_limit');
-    console.log(params);
-    let roomID = Math.floor(Math.random() * 1_000_000_000).toString();
-    localStorage.setItem('roomID', roomID);
-    localStorage.setItem('opponent', params.friend_username);
-    localStorage.setItem('my_color', color);
-    localStorage.setItem('time_limit', timeLimit);
-    return redirect(`/game/friend/${roomID}`);
+    const formData = await request.formData();
+    let color = formData.get('color');
+    let timeLimit = formData.get('time_limit');
+    let username = getUserData().username;
+    let challenged = params.friend_username;
+    console.log(color, timeLimit, username, challenged);
+
+    let roomIDURL = `${import.meta.env.VITE_BACKEND_HOST}/api/room/create`;
+    let reqBody = { challenger: username, challenged }
+
+    try {
+        console.log(reqBody);
+        const response = await fetch(roomIDURL, {
+            method: 'POST', body: JSON.stringify(reqBody), headers: {
+                'Authorization': `Bearer ${getAuthToken()}`,
+                'Content-Type': 'application/json'
+            }
+        });
+
+        const resJSON = await response.json();
+        const { roomID } = resJSON;
+        console.log('Room ID:', roomID);
+
+        localStorage.setItem('roomID', roomID)
+        localStorage.setItem('my_color', color);
+        localStorage.setItem('timeLimit', timeLimit);
+        localStorage.setItem('opponent', challenged);
+
+        return redirect(`/game/friend/${roomID}`);
+    } catch (err) {
+        console.log(err)
+        return err;
+    }
 }
 
 export default ChallengeFriend;