Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 237x 8x 1x 1x 4x | import React from "react";
import {Button, Grid, Paper, Stack} from "@mui/material";
import {idx2color} from "../visualization/color";
import FieldSizeSelector from "./FieldSizeSelector";
import AddAutopilot from "./AddAutopilot";
import ShareLink from "./ShareLink";
import PlayerName from "./PlayerName";
import JsGameState from "../SnakeLogic/JsGameState";
import {User} from "./Profile";
import {AiOption} from "./Ai";
type Props = {
game: JsGameState,
newGame: (width: number, height: number) => void,
togglePause: () => void,
reset: () => void,
shareUrl: string,
idx: number,
playerName: string,
handleNameCommit: (name: string) => void,
addAutopilot: (type: AiOption) => void,
aiOptions: AiOption[],
currentUser?: User,
}
export default function PlayerPane(props: Props) {
return(
<Grid container
spacing={2}
pb={2}
direction={'column'}
justifyContent="space-around"
alignItems="baseline"
component={Paper}
>
<Grid item xs={12}>
<Stack direction={"row"} spacing={2}>
<Button variant="outlined" onClick={_ => props.togglePause()}>
{props.game.paused ? "Unpause" : "Pause"}
</Button>
<Button variant="outlined" onClick={_ => props.reset()}>
Restart
</Button>
</Stack>
</Grid>
<Grid item xs={12}>
<ShareLink
link={props.shareUrl}
/>
</Grid>
<Grid item xs={12}>
{props.idx >= 0 &&
<PlayerName
name={props.playerName}
color={idx2color(props.idx)}
onCommit={props.handleNameCommit}
loggedIn={Boolean(props.currentUser)}
/>}
</Grid>
<Grid item xs={12}>
<FieldSizeSelector
onCommit={(width, height) => props.newGame(width, height)}
gameWidth={props.game.width}
gameHeight={props.game.height}
/>
</Grid>
<Grid item xs={12}>
<AddAutopilot
onCommit={type => props.addAutopilot(type)}
aiOptions={props.aiOptions}
commitMode={true}
/>
</Grid>
</Grid>
)
}
|