Moon Patel
61 lines
1.5 KiB
React
61 lines
1.5 KiB
React
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={450}
|
|
sx={{
|
|
width: "100%",
|
|
height: "600px",
|
|
textAlign: "center",
|
|
backgroundColor: "#262523",
|
|
}}
|
|
>
|
|
<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;
|