|
import React from "react"; |
|
import { Button, Card, Flex, Image, Select, Text, Title } from "@mantine/core"; |
|
import { Form, redirect } from "react-router-dom"; |
|
|
|
const Computer = () => { |
|
|
|
return ( |
|
<Card |
|
maw={600} |
|
sx={{ |
|
width: "100%", |
|
height: "75vh", |
|
textAlign: "center", |
|
backgroundColor: "#262523", |
|
}} |
|
p={'30px'} |
|
> |
|
<Flex align="center" justify="center" gap="xs" my="lg"> |
|
<Image |
|
width="30px" |
|
src="https://www.chess.com/bundles/web/images/color-icons/computer.2318c3b4.svg" |
|
/> |
|
<Title order={2}>Play with Computer</Title> |
|
</Flex> |
|
<Flex direction="column" gap="10px"> |
|
<Form action={`/play/computer`} method='POST'> |
|
<Select |
|
defaultValue="w" |
|
my="20px" |
|
color="lime" |
|
name="color" |
|
label={ |
|
<Text mx="auto" order={3}> |
|
Select your color |
|
</Text> |
|
} |
|
placeholder="choose your color" |
|
data={[ |
|
{ value: "w", label: "White" }, |
|
{ value: "b", label: "Black" }, |
|
]} |
|
/> |
|
<Button color="lime" type="submit"> |
|
Play |
|
</Button> |
|
</Form> |
|
</Flex> |
|
</Card> |
|
); |
|
}; |
|
|
|
export const playComputerAction = async ({request}) => { |
|
const formData = await request.formData(); |
|
let color = formData.get('color'); |
|
|
|
localStorage.setItem('myColor',color); |
|
|
|
return redirect('/game/computer'); |
|
} |
|
|
|
export default Computer; |
|
|