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 84 | 134x 134x 134x 4x 4x 1x 1x 1x 1x 134x 22x | import React, {useState} from "react";
import {IconButton, Stack, TextField} from "@mui/material";
import DoneIcon from "@mui/icons-material/Done";
import RevertIcon from "@mui/icons-material/NotInterestedOutlined";
import EditIcon from "@mui/icons-material/Edit";
import ColorViewer from "./ColorViewer";
type Props = {
loggedIn: boolean,
name: string,
color: string,
onCommit: (value: string) => void
}
export default function PlayerName(props: Props) {
const [editMode, setEditMode] = useState(false);
const [previous, setPrevious] = useState(props.name);
const [name, setName] = useState(props.name);
function onToggleEditMode() {
setEditMode(!editMode);
setPrevious(props.name);
}
function onRevert() {
setName(previous);
onToggleEditMode();
}
function onAccept() {
props.onCommit(name);
onToggleEditMode();
}
return(
<Stack spacing={2}>
<h4>You are:</h4>
<Stack spacing={2} direction={"row"} alignItems={"center"}>
<ColorViewer color={props.color}/>
<div id={"playerNameView"}>
{editMode ? (
<TextField
value={name}
name="name"
label="Player Name"
onChange={e => setName(e.target.value)}
/>
) : (
props.name
)}
</div>
{!props.loggedIn && editMode &&
<IconButton
aria-label="done"
data-test="player-name-accept"
onClick={onAccept}
>
<DoneIcon/>
</IconButton>
}
{!props.loggedIn && editMode &&
<IconButton
aria-label="revert"
data-test="player-name-revert"
onClick={onRevert}
>
<RevertIcon/>
</IconButton>
}
{!props.loggedIn && !editMode &&
<IconButton
aria-label="edit"
onClick={onToggleEditMode}
>
<EditIcon/>
</IconButton>
}
</Stack>
</Stack>
);
}
|