Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-08-26 21:26:01 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

vote on maps!

Browse Source
This commit is contained in:
Sendou
2020-03-13 14:06:22 +02:00
parent ed5325f263
commit 224ca5fbd7
1 changed files with 45 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
frontend-react/src/components/plus/MapVoteGrid.tsx
View File

@@ -37,11 +37,26 @@ const getBg = (value: number) => {
interface VotingButtonProps {
value: 1 | 0 | -1
handleClick: (oldValue: number) => void
gridArea: string
mode: string
}
const VotingButton: React.FC<VotingButtonProps> = ({ value, handleClick }) => {
const VotingButton: React.FC<VotingButtonProps> = ({
value,
handleClick,
gridArea,
mode,
}) => {
return (
<Flex alignItems="center">
<Flex
flexDirection="column"
justifyContent="center"
alignItems="center"
gridArea={gridArea}
>
<Box fontWeight="semibold" letterSpacing="wide">
{mode}
</Box>
<Flex
onClick={() => handleClick(value)}
alignItems="center"
@@ -81,59 +96,32 @@ const MapVoteGrid: React.FC<MapVoteGridProps> = ({ votes, setVotes }) => {
setVotes(copyOfVotes)
}
return (
<Grid
gridTemplateColumns="repeat(5, 1fr)"
gridGap="2em"
maxW="500px"
mt="2em"
>
<Box />
<Flex
justifyContent="center"
color={grayWithShade}
fontWeight="semibold"
letterSpacing="wide"
fontSize="lg"
>
SZ
</Flex>
<Flex
justifyContent="center"
color={grayWithShade}
fontWeight="semibold"
letterSpacing="wide"
fontSize="lg"
>
TC
</Flex>
<Flex
justifyContent="center"
color={grayWithShade}
fontWeight="semibold"
letterSpacing="wide"
fontSize="lg"
>
RM
</Flex>
<Flex
justifyContent="center"
color={grayWithShade}
fontWeight="semibold"
letterSpacing="wide"
fontSize="lg"
>
CB
</Flex>
<>
{votes.map((stage, index) => {
return (
<React.Fragment key={stage.name}>
<Flex alignItems="center">
<Grid
key={stage.name}
gridTemplateColumns="repeat(4, 1fr)"
gridTemplateRows="repeat(2, 1fr)"
my="1em"
rounded="lg"
overflow="hidden"
boxShadow="0px 0px 16px 6px rgba(0,0,0,0.1)"
p="10px"
>
<Flex
gridArea="1 / 1 / 2 / 5"
justifyContent="center"
alignItems="center"
flexDirection="column"
>
<Avatar
src={mapIcons[stage.name]}
size="lg"
my="5px"
mr="0.5em"
/>
<Box
color={grayWithShade}
fontWeight="semibold"
@@ -148,66 +136,37 @@ const MapVoteGrid: React.FC<MapVoteGridProps> = ({ votes, setVotes }) => {
handleClick={(oldValue: number) =>
handleClick(index, "sz", oldValue)
}
mode="SZ"
gridArea="2 / 1 / 3 / 2"
/>
<VotingButton
value={stage.tc}
handleClick={(oldValue: number) =>
handleClick(index, "tc", oldValue)
}
mode="TC"
gridArea="2 / 2 / 3 / 3"
/>
<VotingButton
value={stage.rm}
handleClick={(oldValue: number) =>
handleClick(index, "rm", oldValue)
}
mode="RM"
gridArea="2 / 3 / 3 / 4"
/>
<VotingButton
value={stage.cb}
handleClick={(oldValue: number) =>
handleClick(index, "cb", oldValue)
}
mode="CB"
gridArea="2 / 4 / 3 / 5"
/>
</React.Fragment>
</Grid>
)
})}
<Box />
<Flex
justifyContent="center"
color={grayWithShade}
fontWeight="semibold"
letterSpacing="wide"
fontSize="lg"
>
SZ
</Flex>
<Flex
justifyContent="center"
color={grayWithShade}
fontWeight="semibold"
letterSpacing="wide"
fontSize="lg"
>
TC
</Flex>
<Flex
justifyContent="center"
color={grayWithShade}
fontWeight="semibold"
letterSpacing="wide"
fontSize="lg"
>
RM
</Flex>
<Flex
justifyContent="center"
color={grayWithShade}
fontWeight="semibold"
letterSpacing="wide"
fontSize="lg"
>
CB
</Flex>
</Grid>
</>
)
}