File size: 1,567 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 |
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;
|