File size: 3,137 Bytes
ece5841 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import React from 'react'
import { Form, redirect, useActionData, useParams } from 'react-router-dom'
import { Avatar, Button, Card, Flex, Select, Text, Title } from '@mantine/core'
import { getUserData } from '../../utils/auth'
const ChallengeFriend = () => {
const params = useParams();
let friend_username = params["friend_username"];
const res = useActionData();
console.log(res);
return (
<Card
sx={{
width: '600px',
height: '80%',
textAlign: 'center',
backgroundColor: '#262523'
}}
px='20px'
>
<Form action={`/play/friend/${friend_username}`} method='POST'>
<Flex align="center" direction="column" justify="center" gap="xs" my="lg">
<Title order={2}>Play vs {friend_username}</Title>
<Avatar mt="lg" color='lime' size="100px">{friend_username[0].toUpperCase()}</Avatar>
<Text>{friend_username}</Text>
</Flex>
<Select label="Time limit" placeholder='Time limit' name='timeLimit' defaultValue='10' data={['5', '10', '15', '30']} />
<Select defaultValue='w' my="20px" color='lime' name='color' label={<Text mx="auto" order={3}>I play as</Text>} placeholder='choose your color' data={[
{ value: 'w', label: 'White' },
{ value: 'b', label: 'Black' },
{ value: 'RANDOM', label: 'Random' }
]} />
<Button color='lime' type='submit' >Challenge</Button>
<Text style={{ color: 'red' }}>
{res?.message}
</Text>
</Form>
</Card>
)
}
// TESTED
export const playFriendAction = async ({ request, params }) => {
const formData = await request.formData();
let color = formData.get('color');
let timeLimit = formData.get('timeLimit');
let username = getUserData().username;
let challenged = params.friend_username;
let roomIDURL = `${import.meta.env.VITE_BACKEND_HOST}/api/room`;
let reqBody = { challenger: username, challenged, timeLimit, color }
try {
const response = await fetch(roomIDURL, {
method: 'POST', body: JSON.stringify(reqBody), headers: {
'Content-Type': 'application/json'
},
credentials: 'include'
});
console.log(response.status);
if (response.ok) {
const resJSON = await response.json();
const { roomID } = resJSON;
console.log('Room ID:', roomID);
// set properties of the game
localStorage.setItem('roomID', roomID);
localStorage.setItem('myColor', color);
localStorage.setItem('timeLimit', timeLimit);
localStorage.setItem('opponent', challenged);
return redirect(`/game/friend/${roomID}`);
} else {
return response;
}
} catch (err) {
console.log(err)
return err;
}
}
export default ChallengeFriend; |