terrassumptions/client/src/components/screens/GamePanel/GuessPane.jsx

import React from "react";
import styled from "styled-components";
import ClickMarkerMap from "./ClickMarkerMap";
import RoundTimer from "../../util/Timer";
import Button from "../../util/Button";

const Container = styled.div`
  height: 100%;
  width: 100%;
  flex: 1;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;

  @media only screen and (min-width: 600px) and (min-height: 600px) {
    position: absolute;
    left: 10px;
    bottom: 10px;
    height: 200px;
    width: 200px;
    flex-flow: column-reverse nowrap;
    z-index: 1;
    opacity: .75;
    transition: 1s;

    &:hover {
      height: 400px;
      width: 400px;
      opacity: 1;
      transition: 0.5s;
    }
  }
`

const Map = styled.div`
  flex: 3;
  height: 100%;
  width: 100%;

  @media only screen and (min-width: 600px) and (min-height: 600px) {
    opacity: .75;
    transition: 1s;

    &:hover {
      opacity: 1;
    }
  }
`

const SubmitWrapper = styled.div`
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  text-align: center;

  @media only screen and (min-width: 600px) and (min-height: 600px) {
    flex-flow: column-reverse nowrap;
    margin-top: 4px;
    color: #fff;

    &>.timer {
      background-color: #333;
    }
  }
`

const SubmitButton = styled(Button)`
  flex: 1;
  margin: 2px;

  @media only screen and (min-width: 600px) and (min-height: 600px) {
    margin: 0px;
    margin-bottom: 5px;

    ${Container} & {
      visibility: hidden;
      opacity: 0;
      transition: 1s;
    }

    ${Container}:hover & {
      visibility: visible;
      opacity: 1;
      transition: 0.5s;
    }
  }
`

export default ({
  roundSeconds,
  onTimeout,
  onSelectPoint,
  onSubmitGuess,
  submitDisabled,
}) => (
  <Container>
    <Map>
      <ClickMarkerMap onMarkerMoved={onSelectPoint} />
    </Map>
    <SubmitWrapper>
      <RoundTimer seconds={roundSeconds} onTimeout={onTimeout} />
      <SubmitButton onClick={onSubmitGuess} disabled={submitDisabled}>
        Submit Guess
      </SubmitButton>
    </SubmitWrapper>
  </Container>
);