From 224ca5fbd76eb1f1ce4a9055c2d2d0affcd70a10 Mon Sep 17 00:00:00 2001
From: Sendou <sendou77@gmail.com>
Date: Fri, 13 Mar 2020 14:06:22 +0200
Subject: [PATCH] vote on maps!

---
 .../src/components/plus/MapVoteGrid.tsx       | 131 ++++++------------
 1 file changed, 45 insertions(+), 86 deletions(-)

diff --git a/frontend-react/src/components/plus/MapVoteGrid.tsx b/frontend-react/src/components/plus/MapVoteGrid.tsx
index 31d7aba77..720efe11c 100644
--- a/frontend-react/src/components/plus/MapVoteGrid.tsx
+++ b/frontend-react/src/components/plus/MapVoteGrid.tsx
@@ -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>
+    </>
   )
 }